Ir para o conteúdo principal
Version: latest - a1.19.x ⚖️

🖥️ WebUI

Class for spawning a dynamic Web Browser.

💂Authority
This class can only be spawned on 🟧 Client.
tip

Our WebUI implementation is built using the last versions of Chromium Embedded Framework.

Proprietary Codecs

Proprietary Codecs like MP3 and AAC are not supported on public CEF builds. We recommend converting your media files to WEBM or OGG.

🎒 Examples

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
)

Using a WebUI as Mesh Material

Client/Index.lua
-- Spawns a WebUI with is_visible = false, is_transparent = false, auto_resize = false and size of 500x500
local my_ui = WebUI("Awesome Site", "https://nanos.world", false, false, false, 500, 500)

-- Spawns a StaticMesh (can be any mesh)
local static_mesh = StaticMesh(Vector(0, 0, 100), Rotator(), "nanos-world::SM_Cube")

-- Sets the mesh material to use the WebUI
static_mesh:SetMaterialFromWebUI(my_ui)

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)
script.js
// 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;
}

More related examples:

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

You can use the output Texture from a Canvas with :SetMaterialFromWebUI() method!

🏗️ Constructor

local my_webui = WebUI(name, path, is_visible?, is_transparent?, auto_resize?, width?, height?)
TypeNameDefaultDescription
string nameUsed for debugging logs
HTML Path pathURL or file://my_file.html or package://my-package/Client/file.html
boolean is_visibletrueif WebUI is visible on screen
boolean is_transparenttrueif WebUI background is transparent
boolean auto_resizetrueif should auto resize when screen changes it's size (useful OFF when you are painting meshes with WebUI)
number width0size of the WebUI width when you are not using auto_resize
number height0size of the WebUI height 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
LoadHTMLLoads a pure HTML in this Browser
SetFocusEnables the focus on this browser (i.e. can receive Keyboard input and will trigger input events)
RemoveFocusRemoves the focus from this WebUI (and sets it back to game viewport)
SetFreezeFreezes the WebUI Rendering to the surface (it will still execute the JS under the hood)
SetVisibleToggles the visibility
Sound SpawnSoundSpawns 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
boolean IsValidGets if this entity is Valid
number GetIDGets the network ID of this entity
Vector2D GetSizeGets the current size of this WebUI
string GetTypeReturns the type of this Entity
boolean IsVisibleReturns if this WebUI is currently visible
function SubscribeSubscribes for an Event
UnsubscribeUnsubscribes from all subscribed Events in this Entity and in this Package, optionally passing the function to unsubscribe only that callback

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, args...)
TypeParameterDefaultDescription
string event_nameThe Event Name to trigger the event
any args...Arguments to pass to the event

Destroy

Destroys this Browser
my_webui:Destroy()

LoadURL

Loads a new File/URL in this Browser
my_webui:LoadURL(url)
TypeParameterDefaultDescription
HTML Path url

LoadHTML

Loads a pure HTML in this Browser
my_webui:LoadHTML(html)
TypeParameterDefaultDescription
string html

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(freeze)
TypeParameterDefaultDescription
boolean freeze

SetVisible

Toggles the visibility
my_webui:SetVisible(is_visible)
TypeParameterDefaultDescription
boolean is_visible

SpawnSound

Spawns a Sound entity to plays this WebUI sound

Returns Sound ()
local ret = my_webui:SpawnSound(location?, is_2d?, volume?, inner_radius?, falloff_distance?, attenuation_function?)
TypeParameterDefaultDescription
Vector location?Vector(0, 0, 0)
boolean is_2d?true
number volume?1.0
number inner_radius?400
number falloff_distance?3600
AttenuationFunctionattenuation_function?AttenuationFunction.Linear

SendMouseWheelEvent

Sends a Mouse Event into the WebUI programatically
my_webui:SendMouseWheelEvent(mouse_x, mouse_y, delta_x, delta_y)
TypeParameterDefaultDescription
number mouse_xPosition X of the mouse
number mouse_yPosition Y of the mouse
number delta_x
number delta_y

SendKeyEvent

Sends a Key Event into the WebUI programatically
my_webui:SendKeyEvent(key_type, key_code, modifiers?)
TypeParameterDefaultDescription
WebUIKeyTypekey_type
number key_code
WebUIModifiermodifiers?WebUIModifier.NoneAccept bitwise operators

SendMouseMoveEvent

Sends a Mouse Move Event into the WebUI programatically
my_webui:SendMouseMoveEvent(mouse_x, mouse_y, modifiers?, mouse_leave?)
TypeParameterDefaultDescription
number mouse_xPosition X of the mouse
number mouse_yPosition Y of the mouse
WebUIModifiermodifiers?WebUIModifier.NoneAccept bitwise operators
boolean mouse_leave?false

SendMouseClickEvent

You must send both Down and Up to make it work properly
my_webui:SendMouseClickEvent(mouse_x, mouse_y, mouse_type, is_mouse_up, modifiers?, click_count?)
TypeParameterDefaultDescription
number mouse_xPosition X of the mouse
number mouse_yPosition Y of the mouse
WebUIMouseTypemouse_typeWhich mouse button
boolean is_mouse_upWhether the event was up or down
WebUIModifiermodifiers?WebUIModifier.NoneAccept bitwise operators
number click_count?1Use 2 for double click event

IsValid

Gets if this entity is Valid

Returns boolean ()
local ret = my_webui:IsValid()

GetID

Gets the network ID of this entity

Returns number ()
local ret = my_webui:GetID()

GetSize

Gets the current size of this WebUI

Returns Vector2D ()
local ret = my_webui:GetSize()

GetType

Returns the type of this Entity

Returns string ()
local ret = my_webui:GetType()

IsVisible

Returns if this WebUI is currently visible

Returns boolean ()
local ret = my_webui:IsVisible()

Subscribe

Subscribes for an Event

Returns function (the subscribed callback itself)
local ret = my_webui:Subscribe(event_name, callback)
TypeParameterDefaultDescription
string event_nameThe Event Name to subscribe
function callbackThe callback function to execute

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?)
TypeParameterDefaultDescription
string event_nameThe Event Name to unsubscribe
function callback?nilThe callback function to unsubscribe

🚀 Events

NameDescription
FailedTriggered when this page fails to load
ReadyTriggered when this page is fully loaded

Failed

Triggered when this page fails to load
WebUI.Subscribe("Failed", function(error_code, message)

end)
TypeArgumentDescription
number error_code
string message

Ready

Triggered when this page is fully loaded
WebUI.Subscribe("Ready", function()

end)