Industrial
The HMI panel draws plant and process displays - the mimics operators watch - from a library of symbols: tanks and silos that fill, pumps, fans, compressors and conveyors that show running and tripped, valves open and shut, pipes that flow, transmitters, dials, bars, mini trends, and switchgear from busbars to breakers. Each is bound to tags you push in from your own feed, with values marked stale or bad when the feed says so or goes quiet.
Open any item for its faceplate: values against their limits, a trend of the last minutes and the commands it takes, which come back to your page to send on. Alarms follow ISA-18.2 - raised with a deadband and a delay, flagged on the equipment, listed by priority to acknowledge or shelve - and the display itself is edited in place: add symbols, draw pipes, bind tags, check the whole and save it as JSON.
A booster pumping station
An invented water pumping station, simulated a second at a time. Open an item for its faceplate, start and stop the pumps or change the flow setpoint; trip the duty pump or lose a signal to see alarms raised and listed. Press Edit to change the display - the station keeps running as you do.
// Tags in from your own feed (a WebSocket from an OPC UA or MQTT gateway, say); commands back out.
socket.onmessage = event => panel.setTags(JSON.parse(event.data)); // { 'LT-101': 62.4, 'P101.Run': 1, ... }
panel.addEventListener('bmxCommand', event => {
socket.send(JSON.stringify({ write: event.detail.tag, value: event.detail.value, by: event.detail.operator }));
});
A cold store on the office wall
The same element as a read-only display: a chilled store's chamber and plant room, shown in the transport office where people watch but do not operate. No commands are offered; the alarms still come up, and the trends show the last ten minutes.
Get the code
<script src="/assets/bmx-components.min.js"></script> <bmx-hmi-panel id="in-cold" label="Cold store, chamber 1" read-only locale="en-GB" stale-after="10" style="inline-size: 100%"></bmx-hmi-panel>