Version: latest - a1.30.x ⚖️

🖥️ WebUI

Class for spawning a dynamic Web Browser.

💂Authority

This class can only be spawned on 🟧 Client.

tip

Notre implémentation WebUI est construite en utilisant les dernières versions de Chromium Embedded Framework.

Codecs propriétaires

Les Codecs propriétaires comme MP3 et AAC ne sont pas pris en charge sur les versions publiques de CEF. Nous vous recommandons de convertir vos fichiers multimédias en WEBM ou 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)

Communication entre Lua et 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!");
})

Belle barre de défilement

Depuis que nous avons migré de Webkit vers CEF, certaines barres de défilement sont devenues moches. Voici un petit snippet CSS pour les faire apparaître presque comme celles du Webkit :

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

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

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

Plus d'exemples comme celui-ci:

User Interfacecore-concepts/scripting/user-interface HUD Basique (HTML)getting-started/tutorials-and-examples/basic-hud-html

tip

Vous pouvez utiliser la texture de sortie d'un Canvas avec la méthode :SetMaterialFromWebUI() !

🛠 Constructors

Default Constructor

local my_webui = WebUI(name, path, is_visible?, is_transparent?, auto_resize?, width?, height?)

Type	Name	Default	Description
string	`name`		Used for debugging logs
HTML Path	`path`		Web URL or HTML File Path as `file://my_file.html`
boolean	`is_visible`	`true`	if WebUI is visible on screen
boolean	`is_transparent`	`true`	if WebUI background is transparent
boolean	`auto_resize`	`true`	if should auto resize when screen changes it's size (useful OFF when you are painting meshes with WebUI)
integer	`width`	`0`	size of the WebUI width when you are not using auto_resize
integer	`height`	`0`	size of the WebUI height when you are not using auto_resize

🔍 Chercheurs de chemins HTML

Le chargement d'un fichier .html prend en charge les chercheurs suivants, qui sont consultés dans l'ordre suivant :

Relatif à dossier-courant/
Relatif à package-courant/Client/
Relatif à package-courant/
Relatif à Packages/

🗿 Static Functions

This entity doesn't have own static functions.

🦠 Functions

Returns	Name	Description
	`BringToFront`	Puts this WebUI in the front of all WebUIs
	`CallEvent`	Calls an Event on the Browser's JavaScript
	`Destroy`	Destroys this Browser
	`LoadURL`	Loads a new File/URL in this Browser
	`LoadHTML`	Loads a pure HTML in this Browser
	`SetFocus`	Enables the focus on this browser (i.e. can receive Keyboard input and will trigger input events)
	`RemoveFocus`	Removes the focus from this WebUI (and sets it back to game viewport)
	`SetLayout`	Sets the Canvas Layout on Screen
	`SetFreeze`	Freezes the WebUI Rendering to the surface (it will still execute the JS under the hood)
	`SetVisibility`	Toggles the visibility
Sound	`SpawnSound`	Spawns a Sound entity to plays this WebUI sound
	`SendMouseWheelEvent`	Sends a Mouse Event into the WebUI programatically
	`SendKeyEvent`	Sends a Key Event into the WebUI programatically
	`SendMouseMoveEvent`	Sends a Mouse Move Event into the WebUI programatically
	`SendMouseClickEvent`	Sends a Mouse Click into the WebUI programatically
boolean	`IsValid`	Gets if this entity is Valid
integer	`GetID`	Gets the network ID of this entity
Vector2D	`GetSize`	Gets the current size of this WebUI
table	`GetClass`	Gets the class of this entity
boolean	`IsVisible`	Returns if this WebUI is currently visible
boolean	`IsFrozen`	Returns if this WebUI is currently frozen
function	`Subscribe`	Subscribes for an Event
	`Unsubscribe`	Unsubscribes 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...)

Type	Parameter	Default	Description
string	`event_name`		The 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)

Type	Parameter	Default	Description
HTML Path	`url`

`LoadHTML`

Loads a pure HTML in this Browser

my_webui:LoadHTML(html)

Type	Parameter	Default	Description
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?)

Type	Parameter	Default
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)

Type	Parameter	Default	Description
boolean	`freeze`

`SetVisibility`

Toggles the visibility

my_webui:SetVisibility(is_visible)

Type	Parameter	Default	Description
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?)

Type	Parameter	Default
Vector	`location?`	`Vector(0, 0, 0)`
boolean	`is_2d?`	`true`
float	`volume?`	`1.0`
integer	`inner_radius?`	`400`
integer	`falloff_distance?`	`3600`
AttenuationFunction	`attenuation_function?`	`AttenuationFunction.Linear`

`SendMouseWheelEvent`

Sends a Mouse Event into the WebUI programatically

my_webui:SendMouseWheelEvent(mouse_x, mouse_y, delta_x, delta_y)

Type	Parameter	Description
integer	`mouse_x`	Position X of the mouse
integer	`mouse_y`	Position 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?)

Type	Parameter	Default	Description
WebUIKeyType	`key_type`
integer	`key_code`
WebUIModifier	`modifiers?`	`WebUIModifier.None`	Supports 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?)

Type	Parameter	Default	Description
integer	`mouse_x`		Position X of the mouse
integer	`mouse_y`		Position Y of the mouse
WebUIModifier	`modifiers?`	`WebUIModifier.None`	Supports 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?)

Type	Parameter	Default	Description
integer	`mouse_x`		Position X of the mouse
integer	`mouse_y`		Position Y of the mouse
WebUIMouseType	`mouse_type`		Which mouse button
boolean	`is_mouse_up`		Whether the event was up or down
WebUIModifier	`modifiers?`	`WebUIModifier.None`	Supports several modifiers separating by `\|` (using bit-wise operations)
integer	`click_count?`	`1`	Use 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)

Type	Parameter	Default	Description
string	`event_name`		The Event Name to subscribe
function	`callback`		The 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?)

Type	Parameter	Default	Description
string	`event_name`		The Event Name to unsubscribe
function	`callback?`	`nil`	The callback function to unsubscribe

🚀 Events

	Name	Description
	`Fail`	Triggered when this page fails to load
	`Ready`	Triggered when this page is fully loaded

`Fail`

Triggered when this page fails to load

WebUI.Subscribe("Fail", function(error_code, message)

end)

Type	Argument	Description
integer	`error_code`
string	`message`

`Ready`

Triggered when this page is fully loaded

WebUI.Subscribe("Ready", function()

end)

🎒 Examples​

Using a WebUI as Mesh Material​

Communication entre Lua et JS (WebUI)​

Belle barre de défilement​

🛠 Constructors​

Default Constructor​

🔍 Chercheurs de chemins HTML​

🗿 Static Functions​

🦠 Functions​

BringToFront​

CallEvent​

Destroy​

LoadURL​

LoadHTML​

SetFocus​

RemoveFocus​

SetLayout​

SetFreeze​

SetVisibility​

SpawnSound​

SendMouseWheelEvent​

SendKeyEvent​

SendMouseMoveEvent​

SendMouseClickEvent​

IsValid​

GetID​

GetSize​

GetClass​

IsVisible​

IsFrozen​

Subscribe​

Unsubscribe​

🚀 Events​

Fail​

Ready​