Description
You already have a drawing of your plant, in Inkscape, Figma, Illustrator or draw.io. hmi-synoptic turns it into a live process graphic inside any web application: name the elements to animate (LT101--level, P101--spin, FT101--flow), load the file into <hmi-synoptic>, send your values. Tanks fill, pumps spin with inertia, fluid moves through the pipes, states and alarms show up.
What you get
- The
<hmi-synoptic>component: zero-dependency Web Component, about 10 KB gzip. Works in plain HTML, Angular, React, Vue and Svelte. - 13 bindings: level, continuous rotation, angle, translation, flow, value, state, visibility, blink, alarm, fill colour, stroke colour, clickable element.
- ISA-18.2 style alarms: LL, L, H, HH limits with hysteresis, priorities 1 to 4 (shape, colour and number), acknowledgement, an event for your log.
- Data quality: good, uncertain, bad, stale, shown without relying on colour alone. Automatic "stale" when the data link drops.
- Adapters: WebSocket (progressive reconnection), Server-Sent Events and polling, plus MQTT and OPC UA examples.
- Animated symbol library generated from code: tanks, pumps, valves, control valves, fans, motors, agitators, ISA-5.1 instrument bubbles, analog bars, exchangers, filters, boilers, piping. 14 families, already wired.
- Two ready-made simulated graphics: drinking water plant and central boiler plant, with faceplates, trends, confirmed commands, alarm banner, event log and scenarios (pump fault, clogging, leak, flame loss, communication loss).
- The workbench: drop your own SVG, see the detected bindings, test them with sliders and copy the integration code. Everything stays in your browser.
- English and French:
setLocale('en')switches the built-in texts (states, alarm messages, number format); every demo runs in English. - Security: loaded SVGs are sanitized (scripts, event handlers, external links and resources removed).
- Frugal: a single animation loop, no frames rendered at rest, paused off screen, respects "reduce motion".
- Quality: commented TypeScript sources, 46 unit tests, 9 browser tests, published benchmark (400 bindings at 60 fps on a server CPU with no graphics card).
- English documentation: 5-minute start, Angular, React and Vue integration, theming, accessibility, FAQ and troubleshooting.
What hmi-synoptic does not do
- It does not read your PLCs: your application fetches the measurements (OPC UA, MQTT, Modbus, API…) and passes them to the component.
- It is not a graphics editor or a full SCADA: you draw in your usual tool.
- It is not ISA-101 certified and does not replace process safety functions: it is a display layer.
- Source code comments and test names are in French; the API, README, demos and examples are in English.
Licence
Commercial licence: unlimited projects, including for your clients; distribution in compiled or embedded form; reselling or redistributing the sources is not allowed. Team licence: the same rights for 10 developers. Refund within 14 days if the product does not work as described.
Support
support@consignestudio.fr, reply within 3 business days.
Transparency
Code written with the help of an AI tool, reviewed and checked by executed tests. The demos use fictitious data simulated in the browser.
FAQ (on the listing)
Do I need to code? A little HTML is enough to display the graphic. To connect real measurements you need one line of JavaScript (update({...})) called by your application.
Will my Inkscape or Figma drawing work? Yes, any SVG works. Name the elements to animate by their id or layer; the workbench shows what is detected before any integration.
How is it different from the free edition? The free edition is the component alone (MIT). The full edition adds the symbol library, the two simulated graphics, the workbench, the catalogue, the full documentation, the tests and support.
And with hmi-kit? hmi-kit provides screen components (trends, alarm lists, commands). hmi-synoptic animates your drawings. Both share the same theme variables and work together.
How many bindings per screen? The published benchmark holds 400 animated bindings at 60 fps on a server CPU with no graphics card; an operator station does better.
