Ir para o conteúdo principal
Version: bleeding-edge 🩸

🖥️ WebUI

Class for spawning a web browser in the screen.

info

🟧 Authority: This class can only be spawned on Client.

tip

This HTML implementation is built using the last versions of Chromium Embedded Framework.

User Interfacecore-concepts/scripting/user-interfaceHUD básica (HTML)getting-started/tutorials-and-examples/basic-hud-html

Usage

Client/Index.lua
-- Loading a local file
local my_ui = WebUI(
"Awesome UI", -- Name
"file://UI/index.html", -- Path relative to this package (Client/)
true, -- Is Visible
)

-- Loading a Web URL
local my_browser = WebUI(
"Awesome Site", -- Name
"https://nanos.world", -- Web's URL
true, -- Is Visible
)

-- Loading a local file from other package
local my_ui = WebUI(
"Awesome Other UI", -- Name
"file://other-package/Client/UI/index.html",
true, -- Is Visible
)

Communicating between Lua and JS (WebUI)

Client/Index.lua
local my_ui = WebUI("Awesome UI", "file://UI/index.html")

local param1 = 123
local param2 = "hello"

-- Calls a JS event
my_ui:CallEvent("MyEvent", param1, param2)

-- Subscribes to receive JS events
my_ui:Subscribe("MyAnswer", function(param1)
Package.Log("Received back! %s", param1)
-- Will output 'Received back! Hey there!'
end)
// Register for "MyEvent" from Lua
Events.Subscribe("MyEvent", function(param1, param2) {
console.log("Triggered! " + param1 + " " + param2);
// Will output 'Triggered! 123 hello'

// Triggers "MyAnswer" on Lua
Events.Call("MyAnswer", "Hey there!");
})

Pretty Scroll Bar

Since we migrated from Webkit to CEF, some scrollbars got ugly. Here's a small CSS snippet to make them almost like the Webkit ones:

::-webkit-scrollbar {
width: 6px;
}

::-webkit-scrollbar-thumb {
border-radius: 10px;
background-color: #494949;
}

body {
scrollbar-gutter: stable both-edges;
}

Constructor Parameters

TypeNameDefaultDescription
stringNomeUsed for debugging logs
stringpathURL or file://my_file.html or HTML Path
booleanis_visibletrueif WebUI is visible on screen
booleanis_transparenttrueif WebUI background is transparent
booleanauto_resizetrueif should auto resize when screen changes it's size (useful OFF when you are painting meshes with WebUI)
numberwidth0size of the WebUI when you are not using auto_resize
numberheight0size of the WebUI when you are not using auto_resize
tip

Loading a .html file supports the following searchers, which are looked in the following order:

  1. Relative to current-file-path/
  2. Relative to current-package/Client/
  3. Relative to current-package/
  4. Relative to Packages/

Functions

ReturnsNameDescription
BringToFrontPuts this WebUI in the front of all WebUIs
CallEventCalls an Event on the Browser’s JavaScript
DestroyDestroys this Browser
LoadURLLoads a new File/URL in this Browser
SetFocusSets Focus on this Browser
RemoveFocusRemoves Focus from this Browser
SetFreezeFreezes the WebUI Rendering to the surface
SetVisibleToggles the visibility
SoundSpawnSoundSpawns a Sound entity to plays this WebUI sound
SendMouseWheelEventSends a Mouse Event into the WebUI programatically
SendKeyEventSends a Key Event into the WebUI programatically
SendMouseMoveEventSends a Mouse Move Event into the WebUI programatically
SendMouseClickEventSends a Mouse Click into the WebUI programatically
booleanIsValidReturns if this entity is Valid
numberGetIDGets the network ID of this entity
Vector2DGetSizeGets the current WebUI size
stringGetTypeReturns the type of this Entity
booleanIsVisibleReturns if this WebUI is currently visible
functionSubscribeSubscribes for an Event
UnsubscribeUnsubscribes from all subscribed Events in this Entity and in this Package

BringToFront

Puts this WebUI in the front of all WebUIs

my_webui:BringToFront()

CallEvent

Calls an Event on the Browser's JavaScript

my_webui:CallEvent(event_name, arguments...)
TypeParameterDescription
stringevent_name
anyarguments...

Destroy

Destroys this Browser

my_webui:Destroy()

LoadURL

Loads a new File/URL in this Browser

Returns

my_webui:LoadURL(url)
TypeParameterDescription
stringurl

SetFocus

Enables the focus on this browser (i.e. can receive Keyboard input and will trigger input events)

Note: Only one browser can have focus per time.

my_webui:SetFocus()

RemoveFocus

Removes the focus from this WebUI (and sets it back to game viewport)

You MUST call this after you don't need keyboard input anymore

my_webui:RemoveFocus()

SetFreeze

Freezes the WebUI Rendering to the surface (it will still execute the JS under the hood)

my_webui:SetFreeze()

SetVisible

Toggles the visibility

my_webui:SetVisible(is_visible)
TypeParameterDescription
booleanis_visible

SpawnSound

Spawns a Sound entity to plays this WebUI sound

Returns a Sound entity

my_webui:SpawnSound(location, is_2d, volume, inner_radius, falloff_distance, attenuation_function)
TypeParameterDefault ValueDescription
VectorlocationVector(0, 0, 0)
booleanis_2dtrue
numbervolume1.0
numberinner_radius400
numberfalloff_distance3600
AttenuationFunctionattenuation_functionLinear

SendMouseWheelEvent

Sends a Mouse Event into the WebUI programatically

TypeParameterDefault ValueDescription
numbermouse_xPosition X of the mouse
numbermouse_yPosition Y of the mouse
numberdelta_x
numberdelta_y

SendKeyEvent

Sends a Key Event into the WebUI programatically

TypeParameterDefault ValueDescription
WebUIKeyTypekey_type
numberkey_code
WebUIModifiermodifiersWebUIModifier.NoneAccept bitwise operators

SendMouseMoveEvent

Sends a Mouse Move Event into the WebUI programatica

TypeParameterDefault ValueDescription
numbermouse_xPosition X of the mouse
numbermouse_yPosition Y of the mouse
WebUIModifiermodifiersWebUIModifier.NoneAccept bitwise operators
booleanmouse_leavefalse

SendMouseClickEvent

Sends a Mouse Click into the WebUI programatically

You must send both Down and Up to make it work properly

TypeParameterDefault ValueDescription
numbermouse_xPosition X of the mouse
numbermouse_yPosition Y of the mouse
WebUIMouseTypemouse_typeWhich mouse button
booleanis_mouse_upWhether the event was up or down
WebUIModifiermodifiersWebUIModifier.NoneAccept bitwise operators
numberclick_count1Use 2 for double click event

IsValid

Gets if this entity is Valid

Returns boolean

my_webui:IsValid()

GetID

Gets the network ID of this entity

Returns number

my_webui:GetID()

GetSize

Gets the current size of this WebUI

Returns Vector2D

my_webui:GetSize()

GetType

Returns the type of this Entity

Returns string

my_webui:GetType()

IsVisible

Returns if this WebUI is currently visible

Returns boolean

my_webui:IsVisible()

Subscribe

Subscribes for an Event

Returns the function callback itself

my_webui:Subscribe(event_name, callback)
TypeParameterDefault ValueDescription
stringevent_name
functionfunction

Unsubscribe

Unsubscribes from all subscribed Events in this Entity and in this Package, optionally passing the function to unsubscribe only that callback

my_webui:Unsubscribe(event_name, callback)
TypeParameterDefault ValueDescription
stringevent_name
functionfunctionnil

Events

NameDescription
FailedWhen this page fails to load
ReadyWhen this page is fully loaded (DOM and JavaScript)

Failed

Triggered when this page fails to load

my_webui:Subscribe("Failed", function(error_code, message)
-- Load failed
end)
TypeParameterDescription
numbererror_code
stringMensagem

Ready

Triggered when this page is fully loaded

my_webui:Subscribe("Ready", function()
-- When this page is fully loaded \(DOM and JavaScript\)
end)