FiveM Scripting 16 - FiveM NUI with Inputs and Mouse Interactions

[Music] become a patreon gentleman today and receive a ton of perks including discord rose early access content private support channels code snippets and more join today at patreon.com slash fjs alright what's up guys my name is Zoe from Java today we're gonna be doing 5mm and UI part 2 I guess we're pretty much just gonna get inputs and we're gonna go more in depth using our mouse in it too it's gonna be it's gonna be good hopefully and I wanna I just want to say that the code that we write is gonna be in the description below it's always always it always is and yeah so first of all I'm going to create actually yeah while I'm creating a new resource I'm gonna call it and you like to my resources folder and in here I'm just gonna open up there just to get a code here you can create a bunch of files just I'm gonna create the files that we're gonna be using so can hear resource you'll be creating a whatever here I move this back we make creating a was it nui and you can call this whatever you want just you know make sure you know what you're doing I'm gonna be creating a folder called HTML in here we're gonna use all the HTML all the HTML that's gonna be used and the for our resource will be in here so I'm gonna first show you this diagram that's very very good diagram here that I just drew up in paint so pretty much what we're doing here you know get pretty much what we're doing here is we're going to I'm gonna do I'm gonna show you what we did last time we did five and you guys so all we did was trigger the NUI to listen for the jas file the J's file listened to the Nui - on one Dan you I got a little triggered a and UI message then it will show the HTML right here but today what we're gonna be doing is we're going to use the native da lua to trigger the end XJS to show the HTML like we did last time but this time we're going to have a callback of first of all we'll be able to use our mouse and click around in it and we'll also be sending data back to the native da or the nui da lua will be sending data pretty much all around so we'll be able to use the data that we type in through the HTML file so I'm not gonna be writing all the code for this some of this will be copy and paste cuz I just want to show you I wanted to do this as fast as possible and I just wanna I want you to see the I I don't want to go like in fully deaf but I'll show you the important parts of understanding it so in the end you I doubt let's start off in India that little actually nevermind let's start off with a resource I'm just gonna be copying the resource manifest version you can use our code it's in the description below and we'll also do a client script of any lied Lula and we're also going to add a UI page HTML slash index the HTML folder and inside the HTML folder we will create a file called index.html I'll do that right now start that things in light index.html drag that into the HTML folder and i'm also gonna creating all the other things are amazing so next i'm j/s creating an index dot CSS and we'll also have reset that CSS we use this before it's a good reset of CSS i'll just copy and paste that right now links in the description you should have a recent reset that CSS because just in case your browser is cached or maybe from a different server that might ruin or it might interfere with the NUI that's currently being triggered from a different server so it's just good to completely reset it yeah so like again this code is in the description below for you to copy so now we have to put all of these files in an array HTML so all the files that we just created I'm just gonna be putting it in here so the first file the next our HTML second one is mouth / indexed yes I don't think there's a border that you need to follow I think it's just fine we're gonna need their index stuff yes s and then US but not at least eh now sorry I cannot type HTML / reset does yes sorry if my if it's at going a little bit we got new flooring and I don't have carpet so it's gonna be a little echoey than that one but hopefully it's fine so we have all the research that will completely set up so I'm gonna start off excuse me what the hidden might outlaw okay so close out of all that all right in here I'm going to we're gonna start off with writing the code I'm gonna make create a variable like we did last time and the first installment of the nui video i'm going to be creating a variable false and i'm going to mimic a command to register command any voters call at / nu i i have a function we don't we're not even using arts so we don't need to include args in this callback right here but uh so I'm gonna do it here or we're gonna be potentially when we when we actually write the code for we're gonna be setting up we're gonna be making it show the display toggle the display so I'm going to create a function that pretty much just sets the displace on the call it set display I've seen people use this function the same style so I'm just gonna be doing how I did it so we're gonna be setting the display variable as whatever we do our parameter which is a boolean so display is going to rule because essentially what we're doing here is we're just triggering it on so we'll do set display so you'll see how this function goes through all the parameters so I'm gonna do set NUI focus true and or not sure I'm sorry bool because we're passages also this native I think that's just the first parameter if I remember correctly this lets you use your mouse and then this lets you focus it on the second parameter lets you focus it on the nui and not anything else I think I don't remember but you need that in the function I'm gonna it's gonna this looks call this function is gonna send an nui message like what we didn't have pain i already closed out of it but we're gonna make it oh yeah this has to be all caps UI message okay I didn't noticed that okay yeah well have a type is equal to UI that really true yeah okay so type not on UI just UI and then it's called so what we're doing here in the second one we're gonna be giving it to status which is equal to the bool which is what we're sending it to you it all makes sense you know we did this before but I I wrote it really weird the first time around but now I fully understand it I'd say I'm kind of confident so what we're doing here is bull we're setting the status table and in the index digest we'll I'll show you how we're interpreting that data so I'm gonna do so I just want to make sure if I spelled this that this is right like okay it's not right so I did that wrong okay so it's just send you iMessage sure I'm gonna edit that right now but essentially what we're doing is just you know setting that equal to the bull and will interpret it and that will interpret it in there so second here okay sorry about that okay so what we're doing now is that this is not we're not setting it to true cuz we're just gonna make it toggle it and to do that we're just gonna be setting it to the opposite of display is that it'll just not you know it'll just do the opposite of the display variable so that's pretty much it for that cuz I do it okay so now what we're gonna want to do is I'm gonna create the function for the chat over the first video I use the deprecated way but now I have not I'm gonna be using the way that people want me to use it so to do it to actually chat they want it to be like trigger event and then the first parameter is chance add message and the second is an array or table this color if you don't even explain it but STR and this is what we're gonna be using the chat and then the color we'll just set color is equal to color cuz this is it this is supposed to be like a table but you'll see when I actually use it you'll see how I meant for it to be and then I feel like I'm gonna mess up so sorry in advance I guess okay so now we did their whoo you'll see what I do with this check we're just gonna be handling the data with the chat I'm not gonna be saving it anymore I'll just show you how the data gets communicated so let's start off with writing the Nui callbacks so when you do register I'm gonna do register and you call back it's really weird how they did that one in all caps that's I don't know why but what we're gonna want to do for here is the first is gonna be what we want it you'll see what I mean if you don't know what I'm talking about but we have to UM what we're gonna want it this is just gonna give us a little endpoint to handle the data once we come back to it so yeah first one we're gonna do is the main without which we're gonna be handling the data so this has a callback on data and yeah so what gets sent back to us from the index Jess like I showed in that diagram so I'm gonna have it's called chat data text so we're gonna be sending it in an array or in a object in JavaScript so it'll be sent back to us the data will call this key text in this file when we go to it so it doesn't make much sense right now but it will trust me I and then the second parameter since it works we're gonna make it have a color of green so RGB it's that if I'm correct okay and then we're gonna want to set the display of false okay so now that we did that we're gonna want to do now is gonna make our other routes okay so do register and you like call back I'm gonna have one that handles errors function and once again this time I'm gonna make the I'm gonna make it data dot error because this will make it send back in air as the key pair so then the second one I'm gonna make it red just to indicate that it's an error and it's bad and then we'll have set displays false it's again after that I think it already does it when you submit that I'm gonna do this for safe measures now we're gonna do our another important route which is exiting no that's the wrong one exiting so it's gonna be exit data okay we're not gonna be calling any data back we're just gonna we're just gonna make it say exit excited I think I'll tell you I don't know if there's two teams I might be dumb but yeah let's just make it half green because it went well I guess so the air one has red value and then the this one the main one has a green value and so does the exit but we're not doing anything with the data on the eggs are out cuz we don't need to so oh yeah I gotta sit this place was okay there we go I sighs knocks and I don't this one yes we're gonna have a loop that pretty much I don't want to write all this out but I'll write some of it up citizen dot create you know I don't so I'm gonna copy and paste this and I'll just explain it to you from our github so pretty much what we're doing here is Wow so we're create we created a thread and then in while the discipline while the display variable is true it will constantly run this which pretty much I don't remember a copy if I might actually Bob sorry about that looking so that was going back to those saying we I just copy and paste as his third from our github it'll be in the description below but while display the display very low up here while it's true it will constantly run this what this does is it tells you right here this disables looking left and right this tables looking up and down recording your mouse I guess just this stops your attacking this stops enter escape vehicle override control just so it doesn't go crazy when you have your mouse up so yeah okay so now we're actually done the little apart let's go to the index type actually I'll do the HTML first just to what's called just for it to be better and make more sense hopefully so I'm not actually gonna write all of this out so it won't make sense but here I'll copy and paste it when they get hooked cuz that'll just take too long to explain it like I did last time but what I'm doing here so i linked the reset dot CSS which we wrote right here and the index dot CSS which we will write that we're linking the jQuery library through the game as a script tag in the header we have a container here which will show you how to use which is important by the way um yeah so that's pretty much it I just realized I never ended this div tag I'm gonna do that right now that yeah okay in fact I don't even know I think there's a reason why I didn't put it there but I don't know I think you're supposed to fix that but uh I was at a forum ideas forum where we get our values the input right here just copy and paste it and we're linking our index yes as at last is the last part because that's that's how javascript in HTML files work so I'm gonna go to the index J and I'm going to I'm gonna be starting we're gonna write the next @gs so what we're gonna do is we're going to put the society jQuery function here so to do that which movie function this is all the word this is gonna be a lot of lot of writing here so yeah stay with me so inside this function we're gonna create another function it'll be an actual function we're gonna call it display and it's gonna have a pool just like God just like our set display and you light a little and so if the bowl is true then we're going to make the container which I don't think even works container it's gonna be gonna be shown but if the that's not wool then we will make it tied just like that okay so let's go we're going to this okay yeah so we're gonna make it display false who's gonna want it too just in case it is running we don't want to just show it you know so I'm gonna do now it's actually safety data to the nui messages that are being sent from the NGO i dot look the new window got add eventlistener and we're gonna be listening for the message event and we're gonna have a callback function of a vent and then we're gonna create a variable call item so this is all JavaScript so if you're a little confused you just gotta learn JavaScript I guess and this is specifically jQuery which is a completely different thing it's a really nice Locker so we're gonna do our var item is equal to event dot data and if the item that type is equal to so if the type of it is equal to uij so if we go back here we can see that this end we are sending the type and UI message is UI so if we send it then its UI and then now we're going to check if the item dot then that status is equal to true then it will display true and if it's not if it's anything else imagine it'll display false so what we're doing here at the item dot status is like I said item that status is the bool that we send through to set display function so it'll always do it whenever that function is called so yeah that's that's that let's see where this ends I think this yeah so right here so now we're going to do an important measure we're gonna do document dot on the up equal to function and then if the button see if data dot which is equal to 27 then so I'm gonna show you I'm gonna tell you what this means so pretty much right here this is uh if the if there's a button that is pressed and specifically if the button number 27 is pressed which is the escape key it will exit the it'll exit the Nui I guess so to actually trigger it to leave or exit we're gonna do we're gonna make a post request through jQuery so it'll be dollar sign dot post and we're gonna be posting it to our callback that we created so HTTP colon slash slash Nui too so we call it and you might have any why - because that's what the resource is called and then the callback which is slash exit so like I said right here we created one called exit that will this callback is people call to exit so since we don't even like I said we don't even handle any of the data do the exit we don't need we don't need to send any data we're just gonna send an empty array so to do that we're just gonna chase nuts stringify empty object so yeah just like that now yeah so that's a good measure to take so now we're going to do if we so if we go back to here I'm gonna split this up here so if we this button right here that we made there that I copied and pasted it from the github if we has the idea of closed so if we click on this close button we're gonna make it close so to do that in jQuery you just want to do dollar sign dollar sign hash close because we're getting the hash which is the ID and then close because that's called close so ash close so when it's clicked on I don't know why it's going to do a function I don't know why I just did end there Lola I guess okay so if it does if they we click on the close button that has the idea of close we're just gonna make it exit so we can just literally just copy this cuz we're not sending any data and I'll show you what sending data really looks like so let's do that now we're actually gonna be using the actual submit button the the submit button that we're actually using right here is has an ID of submit so we can do ash and then we're gonna make it send the data through so what we're gonna do we're gonna create a variable so I'm actually just gonna create a scope variable which only this variable lets it'll only work in this scope so decide if input we're gonna be calling an input value is equal to what value is equal to the input that we actually write so the input that we write is gonna be called hash input because the ID of the input tag I called input so if I actually can show you right now without the CSS that's this has the this has the ID of that so let's go back to that so such input dot okay so that's input dot and we're gonna be checking for some conditions so we can use this callback right here enter so we can send errors back so if the let's say if the person I'm just doing this just to show you how this just show you how to work so input value dot length length is greater than or equal to 100 characters let's say if it's greater than 100 hundred characters then we're going to make it have only also I forgot to write this I think in the github code I'll update this after we always want to add returns when we do this just code just so it'll stop everything after this code is done executing I should probably add that and after but I'll just remember I guess so yeah so if the input is greater than 100 characters we're going to do a parent a post request to our callback and UI to slash error because remember that's what we called this right here so to actually handle the air we're going to I'm actually gonna zoom this out because this is hurting my eyes function and then we're gonna be used or not our I'm stupid Jason dot stringify so since we're actually sending data back to this call back as you can see the error callback data err the key is called air so what I'm gonna want to do here is error and then we could say the air that we want to put in it so there is input was greater than one country okay yeah okay so if it's not greater than a hundred we can return we always want to make sure we return and then let's say if let's say if there's nothing even written so if there is no input though there's no value inside that input we can give it another air I'm gonna copy this I'm gonna say in put in the field okay yeah so that's gonna actually handle the airs now let's say if all goes well and the person knows how to use it doesn't get in years we could do a dog sign post and now we can actually handle the data the intended data so register the add new ID call back of main so I'm going to do HTTP colon slash slash and UI to our resource names like main and now we can handle the data jason that stringify inside this we're going to have so I did data dot text right here how I handled it so I'm gonna do text and we're going to we're gonna put in the value of the field so it'll be input value right here the value that we get from it and and we all had the return and yeah that's pretty much done for the back end part I'm gonna do some front-end part right here with the index stuff CSS right here just to make it look a lot better I'm gonna or just yeah just to make it look better and a little more user friendly I'm not really gonna explain it because you I don't think you came here for that but yes so what I'm doing here is just making it none the background none so won't have like a white background just in case it does I know that happens with frameworks CSS frameworks like bootstrap I needed that but the container I pretty much just made it like a square or a rectangle and so did the buttons so looks a little better you want to see what it looks like that's what it looks like I'll show you how to use it in game I'll get in game here for a second and yeah I'll see you guys okay so you know I how I said I was dumb for making it all caps it wasn't actually working for some reason send an UI message like the lowercase this was not working and even though the docs say it right here that it's send my message to lowercase UI I don't know why that is I think that's just a mistake but it's do such or do send it and you I like all of that together like all caps I don't know why them I don't get it but yeah I'll do that I'm sorry about that and also and the container div I guess I was also a mistake but yeah after you do that and I restart and you lie too I'm in my server now right here yeah okay so I'm a server now and I'm gonna do slash anyy like I did it's gonna toggle the Nui as you can see if I click close it's gonna say exited right up there sorry if my little thing is covering it but it says I did it in the green text I do Nui again you can see that the mouse works and I can't move around or click enter but let's say I want to do yes or I say yes it'll it'll work and it'll say yes now let's see if the errors work or like the handle there's let's say I make it a bunch of letters and it's got a copy pasted it should say that's it's greater than 100 characters and there it is it says greater than 100 characters I didn't say that but yeah so let's let's also see if it works without any text you can see that there is no input in the field so all that really works out let's see if I missed anything no not really but yeah that's pretty much all the routes and that's how you do it this video took a long time to make so it would be really awesome if you could like the video or becoming patreon for early access stuff like this and other stuff like voting for videos that's what we do with patreon but yes that's how you do it I'm sorry if I didn't really explain the eight HTML and the CSS stuff a lot of people just ask this video cuz it confused about the JavaScript part and the nui part and how it all works out but that's totally fine I hope you guys enjoy the video and yeah I'll see you guys later

Channel: Jeva

Views: 67,006

Keywords: Fivem, zua, fivem scripting, fivem coding, fivem lua, how to code, lua, gta v modding, gta v scripting, gta 5 scripting, gta 5 modding, fivem roleplay, fivem rp, fivem nui cef, fivem nui, fivem mouse html, fivem cef, fivem input value, fivem html, fivem js

Id: VcOz5heQoXI

Length: 31min 17sec (1877 seconds)

Published: Fri Jul 19 2019