Description
Vous avez déjà le dessin de votre installation, dans Inkscape, Figma, Illustrator ou draw.io. hmi-synoptic le transforme en synoptique vivant dans n'importe quelle application web : nommez les éléments à animer (LT101--level, P101--spin, FT101--flow), chargez le fichier dans <hmi-synoptic>, envoyez vos valeurs. Les cuves se remplissent, les pompes tournent avec leur inertie, le fluide circule dans les tuyauteries, les états et les alarmes s'affichent.
Ce que vous obtenez
- Le composant
<hmi-synoptic>: Web Component sans dépendance, environ 10 Ko gzip. Fonctionne en HTML pur, Angular, React, Vue et Svelte. - 13 liaisons : niveau, rotation continue, angle, translation, flux, valeur, état, visibilité, clignotement, alarme, couleur de remplissage, couleur de trait, élément cliquable.
- Alarmes ISA-18.2 : seuils LL, L, H, HH avec hystérésis, priorités 1 à 4 (forme, couleur et numéro), acquittement, événement pour votre journal.
- Qualité de donnée : bonne, incertaine, mauvaise, figée, affichée sans dépendre de la couleur seule. Passage automatique en « figée » à la perte de liaison.
- Adaptateurs WebSocket (reconnexion progressive), Server-Sent Events et interrogation périodique, plus des exemples MQTT et OPC UA.
- Bibliothèque de symboles animés générés par code : cuves, pompes, vannes, vannes de régulation, ventilateurs, moteurs, agitateurs, bulles d'instrument ISA-5.1, barres analogiques, échangeurs, filtres, chaudières, tuyauteries. 14 familles, déjà câblées.
- Deux synoptiques prêts et simulés : station d'eau potable et chaufferie collective, avec fiches équipement, tendances, commandes confirmées, bandeau d'alarmes, journal d'événements et scénarios (défaut pompe, colmatage, fuite, perte de flamme, perte de communication).
- L'atelier : déposez votre propre SVG, voyez les liaisons détectées, testez-les au curseur et copiez le code d'intégration. Tout reste dans votre navigateur.
- Sécurité : les SVG chargés sont nettoyés (scripts, gestionnaires d'événements, liens et ressources externes retirés).
- Sobriété : une seule boucle d'animation, aucune image calculée au repos, pause hors écran, respect de « réduire les animations ».
- Qualité : sources TypeScript commentées, 45 tests unitaires, 8 tests navigateur, banc de performance publié (400 liaisons à 60 images par seconde sur un processeur de serveur sans carte graphique).
- Documentation en français : démarrage en 5 minutes, intégrations Angular, React et Vue, thème, accessibilité, FAQ et problèmes courants.
Ce que hmi-synoptic ne fait pas
- Il ne lit pas vos automates : votre application récupère les mesures (OPC UA, MQTT, Modbus, API…) et les transmet au composant.
- Ce n'est pas un éditeur graphique ni un SCADA complet : vous dessinez dans votre outil habituel.
- Il n'est pas certifié ISA-101 et ne remplace pas les sécurités du procédé : c'est une couche d'affichage.
Licence
Licence commerciale : nombre illimité de projets, y compris pour vos clients ; distribution sous forme compilée ou intégrée ; revente ou redistribution des sources interdite. Licence équipe : mêmes droits pour 10 développeurs. Remboursement sous 14 jours si le produit ne fonctionne pas comme décrit.
Support
support@consignestudio.fr, réponse sous 3 jours ouvrés.
Transparence
Code écrit avec l'assistance d'un outil d'IA, relu et vérifié par des tests exécutés. Les démos utilisent des données fictives simulées dans le navigateur.
FAQ
Faut-il savoir programmer ? Un peu de HTML suffit pour afficher le synoptique. Pour brancher des mesures réelles, il faut une ligne de JavaScript (update({...})) appelée par votre application.
Mon dessin Inkscape ou Figma fonctionnera-t-il ? Oui, tout SVG convient. Nommez les éléments à animer par leur identifiant ou leur calque ; l'atelier vous montre ce qui est détecté avant toute intégration.
Quelle différence avec l'édition gratuite ? La gratuite contient le composant seul (MIT). La complète ajoute la bibliothèque de symboles, les deux synoptiques simulés, l'atelier, le catalogue, la documentation complète, les tests et le support.
Et avec hmi-kit ? hmi-kit fournit des composants d'écran (tendances, listes d'alarmes, commandes). hmi-synoptic anime vos dessins. Les deux partagent les mêmes variables de thème et s'utilisent ensemble.
Combien de liaisons par écran ? Le banc publié tient 400 liaisons animées à 60 images par seconde sur un processeur de serveur sans carte graphique ; un poste de supervision fait mieux.
