Interface

When we want to interact with the engine in a graphical & human-friendly way, we use Randar's user interface.

The Host Browser

Many native applications use "interface" frameworks like GTK or Qt. While these golden standards have their place, we're trying something a little more robust: We've embedded a Chromium browser into the main Randar program, and are using it to display our interface.

Truly, the interface is just a web page shown by this embedded browser. It acts like your typical web page in every single way with complete CSS3 and modern JavaScript capabilities.

Sending information to the Engine

The engine automatically creates some special JavaScript functions onto the document's window, like setMonitorTarget and createResource.

Instead of invoking a piece of JavaScript as you might expect, these special functions invoke Randar program code. Check out the browser architecture for more details.

Receiving information from the Engine

The engine will invoke any arbitrary JavaScript code whenever it needs to share new information. The interface just needs to "watch" the objects that the engine might change, such as the global list of resources, and update the page accordingly.

Reactivity

We use the Vue framework to watch objects that the engine might change, to organize our interface code neatly into components, and to help create a true "app-like" experience.

We're open to other frameworks, but Vue is a simple and straightforward choice for us right now.

Styles

We use Less to keep our CSS tidy and maintainable.

Files

All interface files are in ./bin/ui/:

• ui.html: The page displayed in the embedded browser.
• ui.js: Bootstraps the application.
• ui-helpers.js: Provides miscellaneous helper code.
• ui-components.js: Creates components that make up our interface.
• ui.less: The Less stylesheet, compiled into ui.css.