WebUI

WebUIs utilize CEF (Chromium Embedded Framework) to render HTML pages directly inside the game. This provides an easy and straightforward way to create modern, beautiful user interfaces using standard web technologies (HTML, CSS, JavaScript).

Quick Reference

Name	Type	Description
Create	Client	Creates a WebUI.
Destroy	Client	Destroys a WebUI.
CallEvent	Client	Calls an event on the WebUIs javascript.
SetFocus	Client	Sets focus on a WebUI (mouse & keyboard input).
SetRect	Client	Changes the size of the WebUI sprite.
IsReady	Client	Returns whether the specified WebUI is ready.

---

Client Functions

Create

Creates a WebUI.

int webuiID = WebUI.Create(string url, int width, int height, [optional] bool transparent)

info

To use a local resource file in the url argument, use "file://[resource]/[file]". Note that the file must be specified in the meta file.

Example:

Lua

Events.Subscribe("chatCommand", function(command)
    if command == "/webui" then
        local testWebUI = WebUI.Create("file://freeroam/webui/index.html", 1920, 1080, true)
    end
end)

JavaScript

Events.Subscribe("chatCommand", (command) => {
    if (command === "/webui") {
        const testWebUI = WebUI.Create("file://freeroam/webui/index.html", 1920, 1080, true);
    }
});

Squirrel (deprecated)

Events.Subscribe("chatCommand", function(command) {
    if (command == "/webui") {
        local testWebUI = WebUI.Create("file://freeroam/webui/index.html", 1920, 1080, true);
    }
});

---

Destroy

Destroys a WebUI.

WebUI.Destroy(int webuiID)

---

CallEvent

Calls an event on the WebUIs javascript.

WebUI.CallEvent(int webuiID, string name, [optional] list arguments)

warning

Events may not be called until the WebUI is ready.

Example:

Lua

-- in client script:
Events.Subscribe("chatCommand", function(command)
    if command == "/webuievent" then
        WebUI.CallEvent(g_webUI, "testEvent", { 3 })
    end
end)

-- in the web page's script:
Events.Subscribe("testEvent", function(testint)
{
    console.log("testEvent was called: " + testint);
});

JavaScript

// in client script:
Events.Subscribe("chatCommand", (command) => {
    if (command === "/webuievent") {
        WebUI.CallEvent(g_webUI, "testEvent", [ 3 ]);
    }
});

// in the web page's script:
Events.Subscribe("testEvent", function(testint)
{
    console.log("testEvent was called: " + testint);
});

Squirrel (deprecated)

// in client script:
Events.Subscribe("chatCommand", function(command) {
    if (command == "/webuievent") {
        WebUI.CallEvent(g_webUI, "testEvent", [ 3 ]);
    }
});

// in the web page's script:
Events.Subscribe("testEvent", function(testint)
{
    console.log("testEvent was called: " + testint);
});

---

SetFocus

Sets focus on a WebUI (mouse & keyboard input).

WebUI.SetFocus(int webuiID, [optional] bool keepGameInput)

info

The current implementation only allows you to focus on one WebUI at a time. Use -1 as webuiID to reset the focus.

---

SetRect

Changes the size and screen placement of the WebUI sprite.

WebUI.SetRect(int webuiID, int left, int top, int right, int bottom)

info

While Create defines the internal rendering resolution of the browser, SetRect defines where and how large the WebUI is actually drawn on the player's screen using bounding box coordinates.

---

IsReady

Returns whether the specified WebUI is ready.

bool ready = WebUI.IsReady(int webuiID)