Composants web pour écrans de supervision industrielle

Description

hmi-kit fournit les briques d'un écran de supervision (SCADA, IHM, tableau de bord d'exploitation) dans une application web. Vous gardez votre framework et votre source de données ; le kit apporte l'affichage, les règles d'alarme et les commandes sûres.

Les composants suivent les principes du « High Performance HMI » : affichage neutre, la couleur n'apparaît que lorsqu'une valeur sort de sa plage normale. Ce sont des Web Components standards, utilisables dans Angular, React/Next.js ou une simple page HTML.

Contenu

• Synoptiques : hmi-mimic (dessin à taille fixe, mis à l'échelle de l'écran), hmi-pipe (tuyauteries animées en écoulement), hmi-equipment (117 symboles P&ID : pompes, vannes, échangeurs, CVC, électricité… avec états marche, arrêt, ouvert, fermé, défaut, maintenance).
• Mesures : hmi-value (qualité de donnée), hmi-analog-bar (seuils LL / L / H / HH), hmi-tank (cuve).
• Tendances : hmi-trend-chart (plusieurs courbes, échelle par courbe, axe des temps, curseur de lecture), hmi-trend (mini-tendance).
• Alarmes : hmi-alarm-banner, hmi-alarm-list (tri par priorité, acquittement), hmi-event-log (journal filtrable, export CSV).
• Commandes : hmi-command (marche / arrêt confirmé), hmi-setpoint (consigne bornée), hmi-interlock (permissifs, premier défaut, shunts), hmi-sequence (séquence d'étapes, dépassement de durée).
• Système : hmi-comm-status (état de liaison, âge de la donnée).
• Données réelles : bindTags relie vos variables aux composants par un attribut data-tag, avec qualité de donnée et passage en « figée » à la perte de liaison.
• Français et anglais, thèmes clair et sombre, couleurs en variables CSS.
• 3 pages modèles (vue d'ensemble, détail pompe avec séquence de démarrage, alarmes et journal) et un catalogue interactif de chaque composant.
• Exemple Angular 21 compilé et testé ; React 19 testé ; déclarations TypeScript et JSX livrées.
• Sources TypeScript, 93 tests Vitest et 16 tests Playwright, ESLint strict.

Ce que le kit ne fait pas

• Il ne se connecte à aucun automate ni protocole (Modbus, OPC UA, MQTT…) : votre application lit les données et les transmet (bindTags ou attributs).
• Ce n'est pas un logiciel SCADA complet ni un éditeur graphique de synoptiques.
• Il n'est pas certifié ISA-101 : il en applique des principes d'affichage. Ce n'est pas un système de sécurité : il ne remplace pas les sécurités du procédé.

Installation

npm install de l'archive, ou import direct de dist/hmi-kit.min.js (85 Ko minifié, 22 Ko gzip, symboles compris). Documentation en français dans le README.

Licence

Licence commerciale : utilisation dans un nombre illimité de projets, y compris des projets clients, distribution sous forme compilée ; revente ou redistribution des sources interdite. Voir le fichier LICENSE fourni.

Transparence

Code écrit avec l'assistance d'un outil d'IA, relu et vérifié par des tests exécutés. Aucune donnée réelle dans la démo.

FAQ (sur la fiche)

• Faut-il un framework ? Non.
• Comment brancher mon automate ? Par votre passerelle habituelle (OPC UA, MQTT sur WebSocket, API) ; bindTags applique les valeurs reçues. Exemple dans le README.
• React 18 ? Oui, en passant les listes par une ref (React 19 les passe directement).
• Anglais ? Oui : setLocale('en').
• Remboursement ? Oui, sous 14 jours, si le kit ne fonctionne pas comme décrit.
• Support ? Écrivez à support@consignestudio.fr.