Skip to main content
Version: latest - a1.30.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)
Console.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-interfaceBasic HUD (HTML)getting-started/tutorials-and-examples/basic-hud-html
tip

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

🛠 Constructors

Default Constructor

local my_webui = WebUI(name, path, is_visible?, is_transparent?, auto_resize?, width?, height?)
TypeNameDefaultDescription
string nameUsed for debugging logs
HTML Path pathWeb URL or HTML File Path as file://my_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)
integer width0size of the WebUI width when you are not using auto_resize
integer height0size of the WebUI height when you are not using auto_resize

🔍 HTML Path Searchers

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/

🗿 Static Functions

This entity doesn't have own static functions.

🦠 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)
SetLayoutSets the Canvas Layout on Screen
SetFreezeFreezes the WebUI Rendering to the surface (it will still execute the JS under the hood)
SetVisibilityToggles 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
integer GetIDGets the network ID of this entity
Vector2D GetSizeGets the current size of this WebUI
table GetClassGets the class of this entity
boolean IsVisibleReturns if this WebUI is currently visible
boolean IsFrozenReturns if this WebUI is currently frozen
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()

SetLayout

Sets the Canvas Layout on Screen
my_webui:SetLayout(screen_location?, size?, anchors_min?, anchors_max?, alignment?)
TypeParameterDefaultDescription
Vector2D screen_location?Vector(0, 0)
Vector2D size?Vector(0, 0)
Vector2D anchors_min?Vector(0, 0)
Vector2D anchors_max?Vector(1, 1)
Vector2D alignment?Vector(0.5, 0.5)

SetFreeze

Freezes the WebUI Rendering to the surface (it will still execute the JS under the hood)
my_webui:SetFreeze(freeze)
TypeParameterDefaultDescription
boolean freeze

SetVisibility

Toggles the visibility
my_webui:SetVisibility(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
float volume?1.0
integer inner_radius?400
integer 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
integer mouse_xPosition X of the mouse
integer mouse_yPosition Y of the mouse
float delta_x
float delta_y

SendKeyEvent

Sends a Key Event into the WebUI programatically
my_webui:SendKeyEvent(key_type, key_code, modifiers?)
TypeParameterDefaultDescription
WebUIKeyTypekey_type
integer key_code
WebUIModifiermodifiers?WebUIModifier.NoneSupports several modifiers separating by | (using bit-wise operations)

SendMouseMoveEvent

Sends a Mouse Move Event into the WebUI programatically
my_webui:SendMouseMoveEvent(mouse_x, mouse_y, modifiers?, mouse_leave?)
TypeParameterDefaultDescription
integer mouse_xPosition X of the mouse
integer mouse_yPosition Y of the mouse
WebUIModifiermodifiers?WebUIModifier.NoneSupports several modifiers separating by | (using bit-wise operations)
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
integer mouse_xPosition X of the mouse
integer mouse_yPosition Y of the mouse
WebUIMouseTypemouse_typeWhich mouse button
boolean is_mouse_upWhether the event was up or down
WebUIModifiermodifiers?WebUIModifier.NoneSupports several modifiers separating by | (using bit-wise operations)
integer 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 integer
local ret = my_webui:GetID()

GetSize

Gets the current size of this WebUI

Returns Vector2D
local ret = my_webui:GetSize()

GetClass

Gets the class of this entity

Returns table
local ret = my_webui:GetClass()

IsVisible

Returns if this WebUI is currently visible

Returns boolean
local ret = my_webui:IsVisible()

IsFrozen

Returns if this WebUI is currently frozen

Returns boolean
local ret = my_webui:IsFrozen()

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
FailTriggered when this page fails to load
ReadyTriggered when this page is fully loaded

Fail

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

end)
TypeArgumentDescription
integer error_code
string message

Ready

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

end)