NUI: Mouse interactions

void SET_NUI_FOCUS(BOOL hasFocus, BOOL hasCursor);

Currently setting SetNuiFocus(false, true) makes you able to move your cursor on your ui_page, but you are not able to interact with it.

My feature request regards this param, I would like to be able to press your mouses buttons and select elements of the page while being still able to move your character with your keyboard.

Quick example:

This kind of menu only require “mouse interactions” and it would be useful to be able to open it and interact with it while being still able to move, drive etc…

EDIT:
What we actually need is the ability to ‘remove the focus’.
The user will be still able to move in-game, use its keyboard, mouse etc… with the NUI page still listening to it.
For example in this case, I’ll disable mouse controls to firstly allows the player to move if the menu is open and while moving / doing something he will be able to interact with the NUI frame even if he is driving a car / running.

1 Like

It would be nice to have a way to separate mouse and keyboard focus. In the meantime you can easily simulate mouse events which will give you the same effect. I put together a quick example which shows how to do this.


EDIT: Also I submitted a PR to fix SetCursorLocation which will allow you to center the cursor when displaying the wheel. https://github.com/citizenfx/fivem/pull/206

9 Likes

Thanks for the PR.
Simulating the mouse is cool but a way to seperate the focus is better. It is annoying to convert all the NUI stuff and use a simulated cursor :confused:

What do you mean by that?

The example I posted is fairly generic and you can pretty much just copy and paste it into an existing resource. You may need to expand on the mouse events to fit your needs but you shouldn’t need to change your NUI.

//Simulate mouse events from Lua
var ev = document.createEvent("MouseEvent");
var el = document.elementFromPoint(item.x, item.y);
ev.initMouseEvent(
		item.type,
		true /* bubble */, true /* cancelable */,
		window, null,
		item.x, item.y, 0, 0, /* coordinates */
		false, false, false, false, /* modifier keys */
		0 /*left*/, null
);
el.dispatchEvent(ev);

I didn’t really notice any mouse lag. The only real downsides I hit were the bug with SetCursorLocation and the simulated cursor showing up under other frames such as chat. However that could probably be fixed by making the cursor it’s own top frame.

Anyways I’ll look into doing a PR for separating keyboard/mouse focus. Depending how that goes I may instead expand on this alternative approach as more of a generic library that people could use.

Hi, is this a public script ?
If yes where can we found it ?

Pushed!
https://runtime.fivem.net/doc/natives/#_0x3FF5E5F8

6 Likes

can You share some code example how to use it?
Use with the SetNuiFocus() native or w/o, place before, after or replace it?
I tried to figure out how thit SetNuiFocusKeepInput works, but no result. :frowning:

Use it like this:

SetNuiFocus(true, true)
SetNuiFocusKeepInput(true)