Graphical interface

Settings windows and custom interfaces using tera-mod-ui.

Settings window

tera-mod-ui wraps Electron. It is available when Toolbox runs in GUI mode; check global.TeraProxy.GUIMode and retain commands for headless operation.

new Settings(mod, structure, settings, options = {}) creates a schema-driven interface. This example assumes settings are enabled and contain enabled:

module.exports = function SettingsExample(mod) {
    let ui;
    if (global.TeraProxy.GUIMode) {
        const { Settings } = require('tera-mod-ui');
        ui = new Settings(mod, [
            { key: 'enabled', name: 'Enabled', type: 'bool' }
        ], mod.settings);
        ui.on('update', (settings) => {
            mod.settings = settings;
            mod.saveSettings();
        });
    }

    mod.command.add('example-ui', () => {
        if (ui) ui.show();
        else mod.command.message('GUI is unavailable in this mode.');
    });
    this.destructor = () => {
        if (ui) ui.destructor();
    };
};

Schema entries contain key, name and type; this implementation supports bool, select, number, range and string. Additional options depend on the control, such as min/max for numeric values. The update event supplies the entire settings object after a field changes. Methods show(), hide(), close() and update(settings) control the window and values. Call destructor() on unload.

Custom window

new Host(mod, file, options, createWindow = true, rootFolder = null) loads local HTML relative to the module folder or the specified root. options are passed to BrowserWindow. Methods include show, hide, close, send(name, ...args) and destructor. Host is an EventEmitter: on(name, callback) receives window events.

Inside the window, new Renderer() from tera-mod-ui provides send, events through on, and minimize, maximize, close, destructor. Communication uses IPC between the Toolbox main process and renderer, not a web server.

// In a local window script:
const { Renderer } = require('tera-mod-ui');
const renderer = new Renderer();
renderer.on('status', (text) => {
    document.querySelector('#status').textContent = text;
});
renderer.send('ready');

The current Host enables Node.js integration and disables context isolation. Load your own local pages, validate message data and avoid inserting unchecked HTML. The built-in Settings wrapper requires less code for ordinary settings.

Sources: node_modules/tera-mod-ui/{index,settings,host,renderer}.js and settings_ui.