High-Performance HMI: the practical guide for web developers

Description

Do you build supervision screens, control screens or real-time dashboards in Angular, React, Vue or plain HTML? The process industry spent twenty years learning how to make these screens readable. It is called the "high-performance" approach: a calm background, colour reserved for abnormal situations, measurements that show their normal range, prioritised alarms. This guide translates those practices into concrete web developer decisions: CSS tokens, components, routes, a real-time store and tests.

Inside: 5 parts, 23 chapters, 55 A4 pages

• Understand. Why an over-coloured screen hides the alarm that matters, eight principles and a four-level display hierarchy.
• Draw.
• A palette where each colour has a single meaning, with computed contrasts.
• The analog indicator with a normal range, trends, equipment symbols.
• Number formats per site locale, and text size calculated from the visual angle.
• Light and dark themes.
• Alarms and data.
• Priorities and redundant coding, with a deuteranopia simulation.
• Lifecycle and the alarm list, with response information.
• Data quality: lost-link detection by heartbeat, forced and simulated states, mapping to OPC UA.
• Floods, chattering and shelving.
• Act and build.
• Faceplates and bounded setpoint entry, safe commands with state feedback.
• Multi-screen console, keyboard and accessibility.
• Real time and performance in the browser.
• Web Components architecture, Angular and React examples, testing and acceptance.
• Put it into practice. Two complete cases, rebuilt with fictitious data, and the 40-point audit checklist.
• Appendices. An HMI glossary (with the French terms) and annotated references.

What you get

• The guide as a 55-page A4 PDF, with a paginated table of contents and bookmarks.
• The bonus folder (ZIP):
• a complete, self-contained supervision screen with a simulated process;
• the hmi-analog-bar Web Component and its demo page;
• the real-time store and its tests;
• light and dark CSS tokens;
• a logic module (formatting, quality, alarms, setpoints, commands) and its tests: 18 tests in all;
• a Playwright script that counts the bright-coloured pixels of a screen, with a simulated colour-blindness mode;
• an alarm philosophy template;
• the checklist as Markdown and CSV.
• The free checklist excerpt (10 points) as a PDF, to share with your team.

Périmètre et limites

• This guide does not summarise ISA-101, ISA-18.2, IEC 62682 or EEMUA 191, and gives no official interpretation of them. It reproduces none of their content and guarantees no compliance. For a contractual commitment, the text of the standards prevails.
• It is not a course in control engineering or industrial protocols: the OPC UA or Modbus gateway to the web is described, not provided.
• The code examples use stable APIs (Custom Elements, Intl, Angular signals, React hooks) and depend on no particular framework version.
• The practical cases are rebuilt from common situations and describe no real installation.
• This is a translation of the French edition. Units follow the SI and common process-industry usage (bar, m³/h, °C); the text explains how to configure psi or °F per measurement.

Mentions

• The writing, the example code, the figure code and this English edition were produced with the help of an AI tool, under the author's direction. The figures are drawn in SVG by code; no image was generated by an image model.
• All data, tags and alarms are fictitious.
• Individual licence for one reader, team licence for up to 10 people. The code of the guide and of the bonus folder may be reused freely, including in commercial projects. Redistributing the PDF is not allowed.

FAQ

• Do I need a control engineering background? No. The vocabulary is explained along the way and gathered in a glossary.
• Which framework? The components are Web Components that work anywhere. The guide shows how to integrate them with Angular and with React.
• Is the code tested? Yes. The bonus folder contains 18 unit tests (node --test) and an example screen that opens directly in the browser.
• Individual or team licence? Take the team licence if several people in your organisation use the guide, for example the developers and the project lead who runs acceptance.
• Is there a French edition? Yes, sold separately as « IHM haute performance pour développeurs web ».
• Download problem, question or correction? Write to support@consignestudio.fr.