User Interface

WebUI#

With WebUI you can load HTML pages which integrate with your Packages in Lua using Events

Info

Note: All WebUI code runs on Client side!

index.lua

-- Spawns a WebUI with the HTML file you just created
UI = WebUI('My-UI', 'PackageName/UI/index.html')

UI:RegisterEventHandler('Ready', function(data)
    print(data.arg)

    UI:SendEvent('changeColour', 'red')
end)

UI/index.html

<html>
    <head>
        <title>WebUI Test</title>
        <script src='./index.js'>
    </head>
    <body>
        <h1 id='text' style='color: black; display: flex; align-content: center; align-items: center;'>This is a test WebUI Document!</h1>
    </body>
</html>

UI/index.js

// Create for "changeColour" from Lua
function changeColour(colour) {
    console.log('Event Triggered!');
    let text = document.getElementById('text');
    text.style.color = colour;
}

window.addEventListener('message', (event) => {
    switch(event.data.name) {
        case "changeColour":
            changeColour(event.data.args[0]);
            break;
    }
})

// Triggers "Ready" on Lua
hEvent('Ready', {arg: 'This is an argument', boolArg: true})

Info

Note: You can open the Developer Tools by pressing Ctrl+Shift+I.

WebUI is still under development and has some known issues. As a temporary measure, we recommend following this template if you want the widget to support hot-reloading:

main.lua

local UI = WebUI('My-UI', 'PackageName/index.html')

-- Destroy the widget when the package is unloaded to support hot-reloading
function onShutdown()
    if UI then UI:Destroy() end
end