Skip to main content

WebUI

Class for spawning a dynamic Web Browser.


💂Authority
This class can only be spawned on 🟧 Client side.
👪Inheritance
This class shares methods and events from Base Entity.

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/)
WebUIVisibility.Visible -- Is Visible on Screen
)

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

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

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(), "helix::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, visibility?, is_transparent?, auto_resize?, width?, height?)
TypeNameDefaultDescription
stringnameUsed for debugging logs
HTML PathpathWeb URL or HTML File Path as file://my_file.html
WidgetVisibilityvisibilityWidgetVisibility.Visibleif 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)
integerwidth0size of the WebUI width when you are not using auto_resize
integerheight0size 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​

Inherited Entity Static Functions
Base Entityscripting-reference/classes/base-classes/Entity
ReturnsNameDescription
table of Base EntityGetAllReturns a table containing all Entities of the class this is called on
Base EntityGetByIndexReturns a specific Entity of this class at an index
integerGetCountReturns how many Entities of this class exist
iteratorGetPairsReturns an iterator with all Entities of this class to be used with pairs()
tableInheritInherits this class with the Inheriting System
table of tableGetInheritedClassesGets a list of all directly inherited classes from this Class created with the Inheriting System
table or nilGetParentClassGets the parent class if this Class was created with the Inheriting System
booleanIsChildOfGets if this Class is child of another class if this Class was created with the Inheriting System
functionSubscribeSubscribes to an Event for all entities of this Class
functionSubscribeRemoteSubscribes to a custom event called from server
UnsubscribeUnsubscribes all callbacks from this Event in this Class within this Package, or only the callback passed
This entity doesn't have own static functions.

Functions​

Inherited Entity Functions
Base Entityscripting-reference/classes/base-classes/Entity
ReturnsNameDescription
integerGetIDGets the universal network ID of this Entity (same on both client and server)
tableGetClassGets the class of this entity
booleanIsARecursively checks if this entity is inherited from a Class
functionSubscribeSubscribes to an Event on this specific entity
functionSubscribeRemoteSubscribes to a custom event called from server on this specific entity
UnsubscribeUnsubscribes all callbacks from this Event in this Entity within this Package, or only the callback passed
SetValueSets a Value in this Entity
anyGetValueGets a Value stored on this Entity at the given key
DestroyDestroys this Entity
booleanIsValidReturns true if this Entity is valid (i.e. wasn't destroyed and points to a valid Entity)
CallRemoteEventCalls a custom remote event directly on this entity to a specific Player
CallRemoteEventCalls a custom remote event directly on this entity
BroadcastRemoteEventCalls a custom remote event directly on this entity to all Players
ReturnsNameDescription
BringToFrontPuts this WebUI in the front of all WebUIs and Widgets
CallEventCalls an Event on the Browser's JavaScript
LoadURLLoads a new File/URL in this Browser
LoadHTMLLoads a pure HTML in this Browser
stringGetNameGets this WebUI name
ExecuteJavaScriptExecutes a JavaScript code in the 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 Layout as Canvas on Screen
SetFreezeFreezes the WebUI Rendering to the surface (it will still execute the JS under the hood)
SetVisibilitySets the visibility in screen
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
Vector2DGetSizeGets the current size of this WebUI
WidgetVisibilityGetVisibilityReturns the current WebUI visibility
booleanIsFrozenReturns if this WebUI is currently frozen

BringToFront​

Puts this WebUI in the front of all WebUIs and Widgets

my_webui:BringToFront()

CallEvent​

Calls an Event on the Browser's JavaScript

my_webui:CallEvent(event_name, args...)
TypeParameterDefaultDescription
stringevent_nameThe Event Name to trigger the event
anyargs...Arguments to pass to the event

LoadURL​

Loads a new File/URL in this Browser

my_webui:LoadURL(url)
TypeParameterDefaultDescription
HTML Pathurl

LoadHTML​

Loads a pure HTML in this Browser

my_webui:LoadHTML(html)
TypeParameterDefaultDescription
stringhtml

GetName​

Gets this WebUI name

— Returns string.

local ret = my_webui:GetName()

ExecuteJavaScript​

Executes a JavaScript code in the Browser
Note: This method is experimental and should be used cautiously. Events are still the preferred way of communicating between Packages and WebUI.

my_webui:ExecuteJavaScript(javascript_code)
TypeParameterDefaultDescription
stringjavascript_code

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 Layout as Canvas on Screen. Anchors:

my_webui:SetLayout(screen_location/offset_left_top?, size/offset_right_bottom?, anchors_min?, anchors_max?, alignment?)
TypeParameterDefaultDescription
Vector2Dscreen_location/offset_left_top?Vector(0, 0)
Vector2Dsize/offset_right_bottom?Vector(0, 0)
Vector2Danchors_min?Vector(0, 0)
Vector2Danchors_max?Vector(1, 1)
Vector2Dalignment?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
booleanfreeze

SetVisibility​

Sets the visibility in screen

my_webui:SetVisibility(visibility)
TypeParameterDefaultDescription
WidgetVisibilityvisibility

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
Vectorlocation?Vector(0, 0, 0)
booleanis_2d?true
floatvolume?1.0
integerinner_radius?400
integerfalloff_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
integermouse_xPosition X of the mouse
integermouse_yPosition Y of the mouse
floatdelta_x
floatdelta_y

SendKeyEvent​

Sends a Key Event into the WebUI programatically

my_webui:SendKeyEvent(key_type, key_code, modifiers?)
TypeParameterDefaultDescription
WebUIKeyTypekey_type
integerkey_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
integermouse_xPosition X of the mouse
integermouse_yPosition Y of the mouse
WebUIModifiermodifiers?WebUIModifier.NoneSupports several modifiers separating by | (using bit-wise operations)
booleanmouse_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
integermouse_xPosition X of the mouse
integermouse_yPosition Y of the mouse
WebUIMouseTypemouse_typeWhich mouse button
booleanis_mouse_upWhether the event was up or down
WebUIModifiermodifiers?WebUIModifier.NoneSupports several modifiers separating by | (using bit-wise operations)
integerclick_count?1Use 2 for double click event

GetSize​

Gets the current size of this WebUI

— Returns Vector2D.

local ret = my_webui:GetSize()

GetVisibility​

Returns the current WebUI visibility

— Returns WidgetVisibility.

local ret = my_webui:GetVisibility()

IsFrozen​

Returns if this WebUI is currently frozen

— Returns boolean.

local ret = my_webui:IsFrozen()

Events​

Inherited Entity Events
Base Entityscripting-reference/classes/base-classes/Entity
NameDescription
SpawnTriggered when an Entity is spawned/created
DestroyTriggered when an Entity is destroyed
ValueChangeTriggered when an Entity has a value changed with :SetValue()
ClassRegisterTriggered when a new Class is registered with the Inheriting System
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)
-- Fail was called
end)
TypeArgumentDescription
integererror_code
stringmessage

Ready​

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