Build a display plugin

Display page and parameters

A plugin combines a display page with an optional settings panel. The panel produces JSON parameters, delivered as vars and stored per region. A registered plugin uses a name and an optional version v. Obtain the plugin identity from the project service; arbitrary public webpages can use web instead.

{"plugin":{"area":"a1","name":"<registered-plugin-id>","vars":{"label":"IoT Devices"}}}

Read data and receive commands

The player injects window.superScreen with deviceId, area, bench, version and data before page scripts run. Read data at startup and listen to the superscreen event for updates. Render supplied text with textContent. Ordinary browsers need fallback data because the player bridge is absent.

const title = document.querySelector("[data-screen-title]");
function render(data) {
  if (title) title.textContent = String(data?.label ?? "IoT Devices");
}
render(window.superScreen?.data);
window.addEventListener("superscreen", (event) => render(event.detail));

Device bridge capabilities

• SS.onCommand receives control.send payloads. SS.report sends user events, limited to 30 per minute per device. Check the returned result before assuming delivery.
• SS.speech and SS.stopSpeech are local speech controls available to locally hosted plugin pages. Remote webpages do not receive this privilege. Offline operation still depends on cached resources and any external data the plugin needs.
• Test landscape and portrait layouts, missing parameters, lost connectivity and startup recovery. Use HTTPS resource addresses and avoid depending on an interactive website login.