UI with mouse input


#1

Until we get standardized mouse support, here’s a little script you can use as an example in the meanwhile.
It gets the mouse position from in-game, and then fires .focus() and .click() events on the HTML elements it finds under the cursor position in the UI.

This is for DEVS, as an example. So please, if you’re not developing a script, don’t ask how to “install this mod” :wink:

This also freezes the camera movement, and blocks the left mouse button, so that it can be used for the UI, without interfering with the game input.

Exit the UI by pressing the escape key. Make sure you do this before you stop/restart the resource, otherwise you get stuck. Not a problem with this script, it’s a problem with the whole UI thing.

Code should be self-explanatory, but if you have any questions, feel free to ask.

GitHub Repo

I just added my chat resource to the repo, you may have to modify yours/use mine, for the chat commands to work.

Also, this has limitations. All it does, is execute a .focus() and .click() on the HTML element at the position of your cursor.
This means that iframes will not work. Because iframes are protected, and prevent any JavaScript input from the browser.
Also things like selecting text with the mouse will not work.
The solution is not ideal, but it’ll do for now.


[help] Login NUI interface
#2

@jwbjnwolf That’s what this part is for:

Citizen.CreateThread(function()
    while true do
        if guiEnabled then
            DisableControlAction(0, 1, guiEnabled) -- LookLeftRight
            DisableControlAction(0, 2, guiEnabled) -- LookUpDown

            DisableControlAction(0, 142, guiEnabled) -- MeleeAttackAlternate

            DisableControlAction(0, 106, guiEnabled) -- VehicleMouseControlOverride

            if IsDisabledControlJustReleased(0, 142) then -- MeleeAttackAlternate
                SendNUIMessage({
                    type = "click"
                })
            end
        end
        Citizen.Wait(0)
    end
end)

:wink:


#3

I don’t understand why nobody replied. Thank you. This is too awesome.
Also, is it already implemented into FiveM?


#4

+1, great mate I rate 8/8 :smiley:


#5

I really like this resource, it makes creating menus really easy. I noticed you said selecting text will not work, what abut clicking a button? I’m trying to do this.

$(“MK”).click(function(e)
{
// e.preventDefault();
// Prevents Default Event
$.post(‘http://ui-mouse-example/MK’, JSON.stringify({}));
});

Button id is MK, I replaced “login” in the URL with MK in both the lua and JS scripts.


#6

Doing $('MK') means you are targeting the <MK> html tag if you want to Target an id use # as a prefix.
Also your endpoint needs to be in lowercase.

$('#MK').on('click', (e) => {
e.preventDefault();
$.post('http://ui-mouse-example/mk', JSON.stringify({}));
})

#7

Thank you! It worked perfectly.


#8

For use the nativ cursor : https://wiki.fivem.net/wiki/SetNuiFocus


#9

Hey, so I need some help. I’m working on making the menu for VRP use a mouse and not the arrow-keys. I’ve tried everything I know how to do. I want the mouse enabled when you press the menu key. If anyone can help that’d be awesome.