Page API

A package's configuration or nodes can define HTML pages that can be opened by the user to interact with the configuration/node.

A typical use is for pages to allow the node's properties to be redefined.

• When a page is opened, the node sends a message describing the current property values.
• The page then renders the properties in input controls
• When the user changes the input controls, updated property values are sent back to the node
• When the node receives updated properties, it sends them to other open pages, and requests to be re-run.

A point to note is that multiple users may have opened the same node or configuration at the same time, and so will need to listen for updates.

The Page API is available to html pages defined for package nodes and the package configuration.

The page's HTML should include the javascript file hyrrokkin-page.js

Basic communication with the node or configuration uses the set_message_handler and send_message APIs

window.addEventListener("load", () => {
    /* register a message handler to get messages sent by the node */
    hyrrokkin.page.set_message_handler((...msg) => {
        /* form a response.  messages are multi-part where parts can be JSON serialisable, strings or ArrayBuffers */
        let response = [ "hello", {"data":123}];
        hyrrokkin.page.send_message(...response);
    });
});

A callback handler can also be registered to be invoked when the connection between the page and the node/configuration is opened...

If the page contains localisation bundle keys of the form {{key}} then the call to hyrrokkin.page.localise_body() will convert these keys to localised strings using the package's localisation bundle.

window.addEventListener("load", () => {
    hyrrokkin.page.set_connection_handler(() => {
        hyrrokkin.page.localise_body();
        document.body.style.visibility = "visible";
    });
})

Pages can support (light/dark) theme switching in CSS

html[data-theme="dark"], html[data-theme="dark"] * {
    background-color: black;
    color: white;
}

html[data-theme="light"], html[data-theme="light"] * {
    background-color: white;
    color: black;
}

The page can also get the currently selected theme using the hyrrokkin.page.get_theme() API call.

• For more details on the API provided by hyrrokkin.page, please see: Page Interface