Help with my NUI, It's always open but I want to open it with a key control

FiveM Resource Development Discussion
1

Hello guys, I’m very new on development resources (literally i’m starting learning since 2 weeks ago) but I wanna try to do an help for the server jobs, a little nui window with a tutorial video who opens when players press E close to the text.
The problem is the nui windows with the video is ALWAYS open and can’t interact with that, here are my scripts files with the code and a image with the window open. If someone knows how to help me, I will be very gratefull with all of you with all my heart, I would like to be a great person making scripts and use the knowloage to make my own server with personalized scripts.

Image of the window open

Captura de pantalla 2023-09-14 140707
Captura de pantalla 2023-09-14 1407071920×1080 150 KB

fxmanifest.lua

fx_version 'cerulean'
game 'gta5'

client_scripts {
    'client.lua',
}

server_scripts{
    'server.lua',
}

ui_page {
    'index.html'
}

files {
    'index.html'
}

client.lua

local markerPos = vector3(681.4806, 564.3262, 129.0461)
local ped = GetPlayerPed(-1)

function Draw3DText(x, y, z, scl_factor, text)
    local onScreen, _x, _y = World3dToScreen2d(x, y, z)
    local p = GetGameplayCamCoords()
    local distance = GetDistanceBetweenCoords(p.x, p.y, p.z, x, y, z, 1)
    local scale = (1 / distance) * 2
    local fov = (1 / GetGameplayCamFov()) * 100
    local scale = scale * fov * scl_factor
    if onScreen then
        SetTextScale(0.0, scale)
        SetTextFont(0)
        SetTextProportional(1)
        SetTextColour(255, 255, 255, 255)
        SetTextDropshadow(0, 0, 0, 0, 255)
        SetTextEdge(2, 0, 0, 0, 150)
        SetTextDropShadow()
        SetTextOutline()
        SetTextEntry("STRING")
        SetTextCentre(1)
        AddTextComponentString(text)
        DrawText(_x, _y)
    end
end

Citizen.CreateThread(function()
    local ped = GetPlayerPed(-1)
    while true do 
        Citizen.Wait(0)
        local playerCoords = GetEntityCoords(ped)
        local distance = #(playerCoords - markerPos)

        if distance < 20.0 then
            DrawMarker(
                32,
                markerPos.x,
                markerPos.y,
                markerPos.z + 1,
                0.0,
                0.0,
                0.0,
                0.0,
                0.0,
                0.0,
                2.0,
                2.0,
                2.0,
                255,
                128,
                0,
                50,
                false,
                true,
                2,
                null,
                null,
                null,
                false
            )
            if distance < 5.0 then
                Draw3DText(markerPos.x, markerPos.y, markerPos.z + 1, 1.5, "Presiona [E] para ver un tutorial del trabajo")
            end
                    if (IsControlJustReleased(0, 38)) then
                        FreezeEntityPosition(ped, true)
                        SendNuiMessage({
                            open = true
                        })
                    end
                    if (IsControlJustReleased(0, 194)) then 
                        FreezeEntityPosition(ped, false)
                        SendNuiMessage({
                            open = false
                        })
                    end
                end

    end
end)

index.html

<!DOCTYPE html> 
<html> 
<body> 

<video width="400" controls>
  <source src="mov_bbb.mp4" type="video/mp4">
  <source src="mov_bbb.ogg" type="video/ogg">
  Your browser does not support HTML video.
</video>

</body> 
</html>

Again, thank u all for reading this post and very thank u for help me. I’m stuck and this point so that’s why I come here to ask for help. :sob: :sob:

2

I’m not sure how but you’ll have to program it so if the user is within a certain range of the NUI co-ordinates then the NUI activates for that player

3

Yeah, I know. I tried to make it. If u see my client.lua archive you will see I wrote “if distance < 5.0 then” and I put there a drawtext and tried to put the nui but I failed and i don’t know how to make it works :frowning:

4

1.) You need to set the display for the NUI to none by default, whether you do that in .css or on window/document load in .js is up to you, I think sometimes the .css display none doesn’t work though I may be wrong.
2.) When the player is near that location and presses E you need to SetNuiFocus and SendNUIMessage to tell the UI to open, and to set the display to block or whatever you choose.

5

I was trying to do that, but now i have a new error. Nothing happends!!!
Here is my new archives with code.

client.lua

local markerPos = vector3(681.4806, 564.3262, 129.0461)
local ped = GetPlayerPed(-1)

function Draw3DText(x, y, z, scl_factor, text)
    local onScreen, _x, _y = World3dToScreen2d(x, y, z)
    local p = GetGameplayCamCoords()
    local distance = GetDistanceBetweenCoords(p.x, p.y, p.z, x, y, z, 1)
    local scale = (1 / distance) * 2
    local fov = (1 / GetGameplayCamFov()) * 100
    local scale = scale * fov * scl_factor
    if onScreen then
        SetTextScale(0.0, scale)
        SetTextFont(0)
        SetTextProportional(1)
        SetTextColour(255, 255, 255, 255)
        SetTextDropshadow(0, 0, 0, 0, 255)
        SetTextEdge(2, 0, 0, 0, 150)
        SetTextDropShadow()
        SetTextOutline()
        SetTextEntry("STRING")
        SetTextCentre(1)
        AddTextComponentString(text)
        DrawText(_x, _y)
    end
end

Citizen.CreateThread(function()
    local ped = GetPlayerPed(-1)
    while true do 
        Citizen.Wait(0)
        local playerCoords = GetEntityCoords(ped)
        local distance = #(playerCoords - markerPos)

        if distance < 20.0 then
            DrawMarker(
                32,
                markerPos.x,
                markerPos.y,
                markerPos.z + 1,
                0.0,
                0.0,
                0.0,
                0.0,
                0.0,
                0.0,
                2.0,
                2.0,
                2.0,
                255,
                128,
                0,
                50,
                false,
                true,
                2,
                null,
                null,
                null,
                false
            )
            if distance < 5.0 then
                Draw3DText(markerPos.x, markerPos.y, markerPos.z + 1, 1.5, "Presiona [E] para ver un tutorial del trabajo")
            end
                    if (IsControlJustReleased(0, 38)) then
                        FreezeEntityPosition(ped, true)
                        SendNuiMessage({
                            action = openUI
                        })
                    end
                    if (IsControlJustReleased(0, 194)) then 
                        FreezeEntityPosition(ped, false)
                        SendNuiMessage({
                            action = closeUI
                        })
                    end
        end

    end
end)

index.html

<html> 
    <head>

      <script src = "nui://marker_actions/app.js" type = "text/javascript"></script>
      <link rel = "stylesheet" href = "nui://marker_actions/b.css">

    </head>

    <body>

      <div style = "display: none;", id = "showui">

        <div class = "container">
          <iframe width="100%" height="100%" src="https://www.youtube.com/watch?v=_2FxRHFr5sg&t=17417s" title="Youtube video player"
            frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
            allowfullscreen></iframe>
        </div>

      </div>
    </body>
</html>

b.css

* {
    margin: 0;
    padding: 0;
}

body {
    background-color: transparent !important;
}

#showui {
    width: 750px;
    height: 500px;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    overflow: hidden;
    opacity: 80%;
}

.container {
    width: 400px;
    height: 225px;
}

app.js

window.addEventListener('message', function(event) {

    switch (event.data.action) {
        case 'openUI':
            $('#show').fadeIn();
            setTimeout(function (){
                $('#show').fadeOut(400)
            }, 6000)
            break;
    }
}, false)

The console doesn’t says anything. Im crying :sob: :sob: :sob:

6

You aren’t sending ‘openUI’ in the NUI message, you are sending a nil value as openUI is not declared

7

where i need to declare it?

8

Update this in your client.lua

if (IsControlJustReleased(0, 38)) then
    FreezeEntityPosition(ped, true)
    SendNuiMessage({ open = true })
    SetNuiFocus(true, true)
end

if (IsControlJustReleased(0, 194)) then 
    FreezeEntityPosition(ped, false)
    SendNuiMessage({ open = false })
    SetNuiFocus(false, false)
end

Update your HTML with the below code

<html>
<head>
  <title>Your Video UI</title>
  <style>
    /* Initially hide the video */
    video {
      display: none;
    }
  </style>
</head>
<body>

<video id="myVideo" width="400" controls>
  <source src="mov_bbb.mp4" type="video/mp4">
  <source src="mov_bbb.ogg" type="video/ogg">
  Your browser does not support HTML video.
</video>

<script type="text/javascript">
  // Listen for messages from client-side Lua
  window.addEventListener('message', function(event) {
    let data = event.data;

    if (data.open === true) {
      // Show the video element
      document.getElementById('myVideo').style.display = 'block';
    } else if (data.open === false) {
      // Hide the video element
      document.getElementById('myVideo').style.display = 'none';
    }
  });
</script>

</body>
</html>
9

With the modifies u said isn’t necesary the .js file, right? I’m gonna try tomorrow bc I’m so tired now, I will update this post tomorrow <3

10

With my .html update I sent, the .js is apart of it. No need for a .js file at this point.

11

cuentanos que tal hombre que ahora tengo la intriga

12

SORRY FOR RESPONDING LATE THEY ARE CHILE’S COUNTRY HOLIDAYS AND I AM CELEBRATING IT WITH MY FAMILY.

But, I tried update my code with yours and It’s still nothing happening. The only diference it’s now the IfControlJustReleased(0, 194) doesn’t works