POC: HTML DOM ui LUA API

Howdy partners,

Making this quick post just to show off something I’m developing and to also get some feedback from the community.
So about 1/2 months ago I talked about making an API for quick UI developing and using the canvas feature of HTML was a good option, but I also found it to be possible through DOM elements using React.JS.
I haven’t been developing a lot lately, otherwise, I would most likely have a complete plugin to post, but here’s a quick demonstration of how this UI would/will work:

EDIT: In the video it creates 100 windows, it’s just a little stress test, i don’t expect anyone to have 100 windows created at the same time but you could if you wanted to.

There’s not much going on in the video, I’ve just connected the NUI to the LUA and are beginning to make the API, but that’s how it would work, through creating windows and content inside them.
I made most of the controls already ( sliders, labels, textboxes, listboxes, etc ) in React.JS, the last thing to do is connect them to the LUA API to create them, set color, set size, etc, etc.

So, what would the advantages of this script be?
Well, for starters it is really easy to add new controls, and also the customization is really good, as the style object for the React controls is passed through LUA ( with the left and top coordinates, width,height,etc ), and that also means you could make a responsive UI, just by passing values with the units infront (em,%,etc).

When I finish this, I will post it here on the forum for everyone to use ( styles may be different because I am going to use this on my future server ), however, I would like to get some input from you guys, if you like it or not, what you would like to see in it, what you wouldn’t like to see in it and so on.

Hope yall are doing amazing, if you’re not, hope this at least brings some excitement to you!

Updates:

27/09/2020

Showing how easy it will be to create a UI.
Also shows how fast and lightweight it can be. It currently has a few memory leaks on the HTML side whenever the checkbox gets checked/unchecked, but I’m looking into it.

local window = FXUI.CreateWindow("I'm a window, yay =D", x .. "px", y .. "px", "250px", "250px")
    local checkbox1 =
        window.CreateCheckbox("I wanna run fast af boyeeeee", "5px", "5px", "left", "top", "Arial", "15px")
    local checkbox2 = window.CreateCheckbox("When it rains it pours", "5px", "25px", "left", "top", "Arial", "15px")
    checkbox1.OnChecked(function(value)
        if value then
            SetRunSprintMultiplierForPlayer(PlayerId(), 1.49)
            SetNuiFocus(false, false)
        else
            SetRunSprintMultiplierForPlayer(PlayerId(), 1.0)
        end
    end)
    checkbox2.OnChecked(function(value)
        if value then
            SetWeatherTypeNowPersist("RAIN")
        else
            SetWeatherTypeNowPersist("CLEAR")
        end
    end)
28/09/2020

Finished most of the controls, just need to complete them with all the necessary functions now. Most of them are implemented, but I feel like some also deserve to be created such as getting the exact position and size of the controls at the moment ( useful for responsive UI’s ).
I’ll leave a video below with more of this resource’s potential ( i suck at designing, so the demonstration might not be the best, but I sure do try ):

local window = FXUI.CreateWindow("Just showing off, flex :D", "1000px", "5px", "500px", "300px")
    window.Show()
    window.CreateLabel("Give yo ride sum gas brother", "5px", "5px", "left", "top", "Arial", "15px")
    local slider = window.CreateSlider(1, 1500, 0.1, "5px", "17px", "150px", "30px", "left", "top")
    local checkbox = window.CreateCheckbox("Pimp my ride", "5px", "45px", "left", "top", "Arial", "15px")
    slider.OnValueChange(function(val)
        SetVehicleEnginePowerMultiplier(GetVehiclePedIsIn(PlayerPedId(), false), val + 0.0)
    end)

    local items = {}
    for k,v in ipairs(GetActivePlayers()) do
        local name = GetPlayerName(v)
        table.insert(items,{label=name,value=v})
        print(name .. "\n"..v)
    end

    local listbox = window.CreateListbox(items,"0px","5px","50%","200px","right","top","Arial","15px")
    local button = window.CreateButton("Make big boom boom","0px","205px","50%","30px","right","top","Arial","15px")
    button.OnClick(function()
        local selected = listbox.GetValue()
        if selected ~= nil then
            for k,v in pairs(selected) do
                print(GetPlayerPed(v))
                print(PlayerId())
                AddExplosion(GetEntityCoords(GetPlayerPed(tonumber(v))), 1, 1.0, true, false, 1.0)
            end
        end
    end)

    checkbox.OnChecked(function()
        local i = 1
        while checkbox.IsChecked() do
            i = i < 159 and i + 1 or 1
            SetVehicleColours(GetVehiclePedIsIn(PlayerPedId(), false), i, i)
            Citizen.Wait(50)
        end
    end)
4 Likes

Hey man,

This looks great so far! Cool post :slight_smile:

Thanks! Appreciate the feedback :slight_smile:. I’ll keep posting updates about it.

It looks very good and I believe it will be very useful, keep updating us and have fun doing it :grin:

Added an update to show how easy it is to create an UI and how fast it is.

Posted another update. This should be the last one i’ll post, i think the potential is fully shown here.
The resource should be released within the next couple of weeks ( or week ), whenever i feel like it’s good enough to be posted, at the moment it has some memory leaks, lacking some functions and also it has alot of repeated bits of code, which i’ll try to eliminate to make it simple for users to create new controls aswell!