[How-To] Use NUI (UI Creation with HTML)

Hey guys,
because some of you guys have got some questions like: “I want to create an UI in Game to create a cool Login or whatever”, I decide to spend some time for you to write this Tutorial.
I’m not an English person so be gentle if I do some grammar mistakes :wink:


!!!IMPORTEND!!!
This Tutorial is not for ppl who did not know what is scripting or for absolute beginners, because I’m not going into every detail!
So you need exp. in the following:

  • LUA
  • HTML
  • CSS
  • Javascript (or better jQuery)
  • a lot JSON EXP is also good :slight_smile:

Copyright
This Tutorial is based on @Eraknelo 's “UI with mouse input” (http://forum.fivereborn.com/topic/795/ui-with-mouse-input) every coding copyright is on his own!


Theoretical Stuff
The first thing you got to know is how the Native User Interface (NUI) works.
There is ALLWAYS! a simple communication between a client script and your UI, but what is the UI?
It is simple, very effective and it comes with a lot of functions!
I’m talking about HTML, CSS and and the powerful jQuery Lib (Javascript).

So basically the communication goes every time like this:

  1. Client Call a function to trigger UI functionality
  2. Client send via NUI an array of data (JSON) to a javascript
  3. Your Javascript file triggers a function which is triggered by your Clientscript (1. ; 2.)
  4. Your Javascript file send back a JSON array to your script
  5. (Optional) Your Client File now triggers a callback function and do what it has to do (maybe to handle Login Data, Register a Player, …)

Simple right?

Now let get started in detail

Check out the full files on GitHub :)

1.) Create your HTML File, JavaScript File and your CSS File
visit GitHub Repro for an Example

2.) Setup your __resource.lua

client_script('client/client.lua') --your NUI Lua File

ui_page('client/html/index.html') --THIS IS IMPORTENT

--[[The following is for the files which are need for you UI (like, pictures, the HTML file, css and so on) ]]--
files({
    'client/html/index.html',
    'client/html/script.js',
    'client/html/style.css',
    'client/html/cursor.png'
})

ui_page -> This is needed to tell your Resource where your UI is located (have to be inside your Resource!!!)

3.) Trigger a function from your client file

At first I introduce you a function: SendNUIMessage(JSON Array)
This function is necessary to send data in JSON Format to your Javascript File.
The Format is every time:

{
     type = value,
     type2 = value2, 
     ...
} 

“type” is a the name you later call use on your JavaScript File.
“value” could be everything like a boolean, a string, a number or something else

Look at this Example:

function EnableGui(enable)
    ...
    SendNUIMessage({
        type = "enableui",
        enable = enable
    })
end

4.) Handle your NUIMessage in your Javascript file

window.addEventListener is the Javascript function which is waiting for the JSON (NUIMessage)

Now take a look at the following line:

if (event.data.type == "enableui") {

event.data.type : This is the type you used before in your “NUIMessage”

  • if your type name is hello, it looks like this event.data.hello
  • if your type name is fivereborn, it looks like this event.data.reborn

and so on.
The value is always the datatype you use like true, “World” or 1

Some Examples:

LUA:
SendNUIMessage({hello = "world"})

Javascript:
if (event.data.hello == "world") {
...



LUA:
SendNUIMessage({fivereborn = true})

Javascript:
if (event.data.fivereborn == true) {
...

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"})
);

The http link is the destination where your NUI Callback is located in and is build like this:

http://YOUR_RESOURCE_NAME/YOUR_EVENT_NAME

6.) Handle the Event on Clientside

Now we are almost done the only thing we have to do is create a Callback Event.
This is done by a function called RegisterNUICallback(String eventName, function(data, callback))

data has the same format as the in point 4.) like data.username

And this looks like this:

RegisterNUICallback('YOUR_EVENT_NAME', function(data, cb)
    -- Do something here

    cb('ok')
end)

And that is how NUI works and I hope this is a great introduction for everyone of you who want to get started in NUI :slight_smile:

If you’ve got question, feel free to ask :slight_smile:

26 Likes

What a way to over-complicate something that is so simple. This is why we need some simple framework like CEGUI which integrates well with Lua and doesn’t require the use of multiple languages to accomplish one simple task.

1 Like

Nice Tutorial :thumbsup_tone1:
Good job hope i see more like that :wink:

~Best Regards

Very nice :smiley:

@nokizorque you’re right this is a little bit complex but jQuery isn’t that hard and you also have got a lot of more functionality and also can do great Designs with HTML, Css and Javascript :slight_smile:

I like this way and it isn’t that hard :wink:

@Yashiku I said it over-complicated something that was simple, not that the process was complicated at all. I just think there are better ways of making interfaces that are a lot more straightforward that should be considered. But I am glad nevertheless that interfaces can be made this early on.

@nokizorque ah ok a misunderstanding ^^
I prefer this on but I also would like it if there is the same way of making gui like in MTA :slight_smile:

Hi, I have a problem to set the ui, when I start my server even if there’s no “SendNUIMessage” function in my script the ui page appear 3 seconds after connecting… How I can fix that problem?

Sry not here in Five Reborn anymore.
But normaly u have to do something with your Website.

Set the display to none in CSS to set the Website invisible and display to block if it should be visible.

But like I said bevor I’m not active here anymore, I’m still activ in a new, supported and better mod. Sorry

is the xhr object reachable ? cool way to get nice infos for ingame ui

edit: ok my bad did not read the post. thanks for sharing!

SetNuiFocus all ui_page possible ?

1 Like

Is there any menu based on this released ?

1 Like

How do you send an array?

EDIT: Solved

Yes, Scorpion Trainer. Search in the section release on the server, and you will find it :wink:

Best regards,
KonScyence

1 Like

If you guys got some more docs, I take it :smiley:

So it’s safe to say that I’m lost as to how I’d have a simple text box appear.

I’m aware I need to have it focused on the HTML page (however you do that), and I assume it’ll require a text box in the HTML file which the user can then populate with text. However I’m lost as to how I’d then retrieve that text and have it sent back to a standard lua file?

My original idea was to have it simply take any key presses made while the HTML page is visible, then have it instantly sent over to the lua file, however it seems that may not be a valid option :confused:

If you look at point #5 in the tutorial, you need to send back data with javascript. So what you could do is place a button in the html and have an onclick variable that would execute a JavaScript function. You’d then create a JavaScript function at the end of your html and set the $.post url and inside the body of the textbox.

I’m on mobile so don’t have a clear example, but hope this cleared some things up

One idea I had was to simply have a blank HTML page and listen for the onKeyDown (Ibelieve it’s called), then send that key back to the lua, however I’m sure whether I’m simply formatting things incorrectly or if this message simply doesn’t work.

(I haven’t touched HTML or JS for several years, however I have been dealing with Java during that time soooo could easily be getting my wires crossed xD

its possibly call 2 ui page html in 1 _resource file ? if yes how ? please thanks

Any chance anyone could show a real bare example script for this? like extremely bare such as one inputbox getting information or something would be awesome, so i could learn more.

3 Likes