[Help] Loading Screen - Mouse movement not detected

FiveM Resource Development & Modding Discussion
, , ,
1

I am trying to write my own loading screen from scratch, and currently am trying to implement mouse interaction with elements in the html page.
I have a text element that shows the cursor position, set in main.js script.

<!DOCTYPE html>
<html lang="pt">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="style.css">
</head>

<body>
    <div id="mpos">0</div>
     ...
    <script src="main.js"></script>
</body>

</html>

var mpos = document.getElementById("mpos");

document.addEventListener("mousemove", function (event) {

    var x = event.pageX;
    var y = event.pageY;
    mpos.textContent = x + " | " + y;
});

What I noticed is that mouse move event is not triggered in FiveM, but works in the browser as expected.
I have seen other loading screens where mouse could be moved, so anyone knows what the problem might be? Does FiveM have mouse capture and if yes can it be removed?´

Thanks in advance.

Edit: I added the loadscreen_cursor 'yes' to the fxmanifest.lua file, and the cursor is visible, but no mouse movement events fired.

2

Why not just enable the native cursor in the loading screen? :open_mouth:

https://docs.fivem.net/docs/scripting-manual/nui-development/loading-screens/#cursorinput

3

I already did that. Adding this info as a edit to the main post.
I added that to the fxmanifest.lua file and the cursor is visible, but still no mouse move events triggered.

4

This does work but intervenes with my framework disabling the mouse on my character selection page

5

You could do this:
create a file cursor.js

window.onload = function() 
{
  document.body.addEventListener("mousemove", function(event)
  {
        var cursor = document.getElementById("cursor");

        //TODO: More consistent way of aligning the cursor without awkward offsets?
        var x = event.pageX - cursor.width + 7;
        var y = event.pageY - 7;

        cursor.style.left = x;
        cursor.style.top = y;
  });
}

Download a cursor Icon somewhere

Open the __resource.lua file and add 'cursor.png' and 'cursor.js' to the files {} section

then in your index.html add the code below before the end of the body tag
remember to change the location of the cursor.png and cursor.js in the code below to match the location of these files. This goes for the resource.lua as well.

<img id="cursor" src="files/cursor.png"/>
<style>
  #cursor {
  width: 35px;
  height: 35px;
  position: fixed;
  z-index: 10000;
          }
  </style>
  <script src="files/cursor.js"></script>

The only issue with this is that, the click function for the mouse does not work… If someone could help out with this, it would solve our problem.

6

I have also tried adding a custom cursor before, but it didnt work because it depended on the mousemove with was not being detected.

7

I have found the issue and it was plain stupidity and lack of focus.

The cursor DOES WORK always, being hidden, shown using loadscreen_cursor 'yes', or using a custom cursor.
I was missing this file definition on my fxmanifest.lua:

...
file 'assets/music.mp3'
file 'assets/images/sound-on.png'
file 'assets/images/sound-off.png'
file 'main.js'    <--------- was missing this line
file 'style.css'
file 'index.html'
...

After this, as expected, the event handlers loaded properly and mouse events such as mousemove and click started being responded to

8

Can you provide any repro steps for that?

9

for what ?

10

Exactly for what you said in the post I replied to:

intervenes with my framework disabling the mouse on my character selection page

1 Like
11

The only thing I did was activate loadscreen_cursor in the fxmanifest and I could not see my cursor on my framework character selection screen…

I finally got a developer to fix the issue, I don’t know what he did though but, now it works. I think he made javascript to mimick mouse movementsand clicks

12

How is that in any way a set of reproduction steps so we can actually fix a platform issue, if any?

13

That’s all I did lol don’t know what else to tell you If I remove it I get my mouse back buy the nat2k15 framework and try for yourself I can’t shit a story when I don’t have one

1 Like
14

in addition to my response, I don’t know why you are so keen on fixing this issue when there are more pressing issues to fix like onesync instability and random crashes.

15

Have you even tried to report ‘onesync instability and random crashes’? There haven’t been any reports of either recently, so I can’t be ‘keen’ on fixing any issues you or anyone else have not reported at all.

However, here, you’re reporting some odd issue here that’s clearly a regression but then being entirely weird when I ask for a repro i.e. going ‘buy this random script and try for yourself’ when you very much already have reproduction steps you’re just refusing to give, and then asking ‘why are you trying to fix an issue that is reported vs. issues that aren’t reported’: I’m very uncertain about what your goal is here or why you’re being extremely hostile.

16

why did you delete my post ?

17

Huh? There is no post in this topic that has been deleted.

Why did you not answer any of the questions posed?

18

I did

19

If so, where did you?

20

in this channel when i posted it said your message was held for moderation but I’m not retyping it