Creating a "block-type" menu?

FiveM Resource Development & Modding Discussion
, , ,
3

Looks like it just used DrawRect and displayed text over it.

1 Like
4

That would make sense but how exactly would you detect when a user clicks on it?!

5

Actually click with your mouse, or just select with arrow keys? If with mouse, it would have to be HTML.

1 Like
6

This is NUI stuff, default HTML button.

https://www.w3schools.com/howto/howto_css_button_group_vertical.asp

Using NUI you can create callbacks when the user clicks a button.

1 Like
7

I made a NUI block-type menu in codepen to use. Now how exactly do I get the menu in-game on keypress and how can I call a certain action when a user clicks on a certain html <button>?!

1 Like
8

See point #5 and #6

1 Like
9

I’ve added all my html files (css, js, html, jquery) and everything and checked points 5 and 6 but to be 100% honest with you am a bit confused. I have experience in a lot of web development languages but javascript and JSON are the two of my weakest languages.

I looked over the thread you provided and see step 5:

Send Back Data From Javascript

Now if you are done with whatever on UI Side, send back a result to your client file.
This has to be the same format like in SendNUIMessage but in case of = your simple need a : on UI Side

This looks like this

$.post('http://ui-mouse-example/event', JSON.stringify({
     username: "Five",
     password: "reborn"})
);

but I am really not quite sure how to incorporate that in my client.lua to show the UI as the thread you provided doesn’t go into much detail for those who are just learning how to use the UI in their server. P.S. Happy birthday, hope you have a great day! :slight_smile:

1 Like
10

Ok so what you need to do is create a listener for the button in the javascript:

I’ve created a little example on how to create a listener:
https://jsfiddle.net/mc11s8t7/

All the buttons you generate, you want to give them a unique id and use that id to create a listener for it.

So for each listener you want to “send” some data back. It would look something like this in your .js file:

$("#button1").click(function()
{
  // Pass data back.
  $.post('http://[resource_name]/OnMenuItemClick', JSON.stringify({
       event: "your_event_name", //Each button has unique event name.
  }));
});

Replace the [resource_name] with the name of your resource.

Now on the client side you want to register a callback, something like this:

RegisterNUICallback('OnMenuItemClick', function(data, cb)
    cb('ok')
end)

If the button is clicked, the NUI callback will be called. You can use the data variable to check which event has been triggered, this corresponds to the "event: "your_event_name"in the javascript. So you can write something like this

RegisterNUICallback('OnMenuItemClick', function(data, cb)

    if data.event == "your_event_name" then
        print("your_event_name has been called!")
    elseif data.event == "suicide_event" then
         CommitSudoku();
    end

    cb('ok')
end)
1 Like
11

Thanks a bunch, right now my menu stays open as the resource is running. Do you know of a way to show the menu on a certian keybind and get a cursor to open when the menu is opened so users can navigate through each button to click. I researched a bit on other threads and resources to try and do it myself but seem the cursor is now stuck on my screen and I the UI doesn’t show up…

12

Replace http://UI by http://yourResourceName
You need to display none the main container.
And do a .hide() with JQuery (easier way)
And a .show() to display it

14

I have updated my html and js and now have it so the entire gui is hidden upon joining the server but would like to setup a function so the menu shows up when users click F1 on their keyboard.

Updated index.html

<html>
    <head>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js" type="text/javascript"></script>
        <link href="style.css" rel="stylesheet" type="text/css" />
    </head>
	
	<style>.btn-group {display: none;}</style>
	
	<script>
	// automatically hide div.btn-group
	$('.btn-group').hide();
	
	// will call the "your_event_name" event when user clicks button with id "button1"
	$("#button1").click(function()
	{
		// pass data back
		$.post('http://UI/OnMenuItemClick', JSON.stringify({
			event: "your_event_name", // each button has unique event name 
		}));
	});
	</script>
	
    <body>
	
		<div class="btn-group">
			<button id="button1">test button</button>
			<button class="police_actions">police actions</button>
			<button class="inv">inventory</button>
			<button class="voice">voice</button>
			<button class="phone_num">phone #</button>
			<button class="show_id">show id</button>
			<button id="exit_gui">exit</button>

			<div class="police_actions">
				<button>toggle radar</button>
				<button class="back">back</button>
			</div>

			<div class="inv">
				<button>42x cannabis</button>
				<button>213x pistol rounds</button>
				<button class="back">back</button>
			</div>

			<div class="voice">
				<button id="set-voice-whisper">whisper</button>
				<button id="set-voice-normal">normal</button>
				<button id="set-voice-yell">yell</button>
				<button id="back">back</button>
			</div>
		</div>
		
    </body>
</html>

Updated client.lua

if (IsControlJustPressed(1, 112)) then
  -- What do I put here to .show(); the .btn-group to the user?!
end

So what exactly would I put in between the if (IsControlJustPressed(1, 112)) function to show the .btn-group div again?!

15

I posted all my code here on this GitHub repository page so you can see what my code looks like because at the moment I got it so the menu shows up when users click on their Home button on their keyboard and when they click escape the menu disappears.

The issues I am currently having though is:

  • The cursor is stuck on the screen even when the menu closes.
  • I cannot re open the menu after it being closed. (Probably something to do with the cursor still being there)

Not exactly sure what is causing this because on my close function I have SetNuiFocus(false) but the cursor is still staying there. Like I said I linked the Github project above if you don’t mind looking over the code and letting me know if there is anything I am missing that would be fantastic!

Video of the issue: https://youtu.be/9NKwPeUTc14

16

If this mouse/cursor issue persist I wouldn’t have an issue just using arrow keys to navigate around the menu but where would I get started to use the arrow keys instead, will I even need a index.html?

17

Pretty lit.

This is using JavaScript and jQuery to manage what the buttons do, so you don’t have to set a different click action for every button.

18

I am having an issue with the cursor still being there, stuck on the screen when I .hide(); the menu. Would you please be able to assist me fixing the issue.

19

Where you are running $.post(‘http://CmJusticeIsLove/closeMenu’);, is “CmJusticeIsLove” the name of your resource?

20

If you .hide(), it just hides the specific HTML element. It doesn’t “hide” the entire browser overlay.

You’ll need to use that RegisterNuiCallback thing and do SetNuiFocus(false, false)

21

Yes I jokingly renamed my resource from UI to CmJusticeIsLove as he was helping me out and that is the name of my resource folder.

22

I have that happening here.

23

Try putting SetNuiFocus( false ) instead of SetNuiFocus( false, false ).

1 Like