Importer des symboles HMI dans Ignition Perspective
Ignition offre le chemin d'import le plus propre de tous les HMI : déposez des SVG dans Image Management, placez un composant Image, et utilisez une expression switch() pour choisir la bonne image en fonction d'un tag d'état. Fonctionne à l'identique pour Perspective et Vision. Les SVG viennent du Symbol Builder (votre propre équipement), de la bibliothèque communautaire (CC BY 4.0) ou de la bibliothèque d'icônes (badges, flèches, icônes de navigation).
Pas à pas
Exportez vos symboles en SVG
- Dessinez-le : dans le Symbol Builder, composez l'équipement à partir de formes, d'éléments ISA et de tampons (canevas 512 × 512 pour les symboles carrés, 256 × 128 pour l'empreinte large moteur-et-étiquette) et cliquez sur
↓ SVG. L'export est du SVG simple avec des couleurs hexadécimales littérales — pas de classes CSS, pas de scripts, pas de polices externes — ce qui est exactement ce qu'aiment les moteurs de rendu de Perspective et Vision. - Réutilisez-le : ouvrez un symbole parmi les moteurs de la communauté, les vannes, les pompes ou les réservoirs et cliquez sur Download SVG. Créditez l'auteur dans la documentation de votre projet ; Open in builder pour l'adapter d'abord.
- Badges et icônes : les badges de priorité d'alarme, les badges d'état, les flèches et les icônes de navigation / barre système (accueil, alarmes, courbes, silence klaxon) viennent de la bibliothèque d'icônes en SVG.
Un fichier par état : construisez la base, enregistrez-la comme modèle, recolorez le remplissage du corps par état (gris arrêté, blanc ou vert en marche, jaune sans retour, bleu manuel, gris foncé désactivé), apposez le badge P1 / P2 pour les variantes d'alarme, exportez chacune sous la forme {kind}_{state}.svg — par ex. motor_3ph_running.svg, motor_3ph_running_p1.svg. Laissez le texte du tag hors du symbole ; l'embedded view l'ajoute (étape 5).
La composition dans le Builder ne nécessite pas de compte. Le téléchargement, si : un compte gratuit donne 5 téléchargements par mois, Starter 50, Studio illimité. Les symboles que vous publiez vous-même sont toujours téléchargeables gratuitement.
Chargez dans Image Management
Dans le Designer ou l'interface web du Gateway :
- Designer : Tools → Image Management.
- Gateway : Config → System → Images.
Créez une arborescence de dossiers : symbols/motor/, symbols/pump/, symbols/badges/, etc. Faites glisser les fichiers SVG dans chaque dossier (la sélection multiple fonctionne). Le chemin devient la référence de l'image (par ex. symbols/motor/motor_3ph_running.svg).
Placez un composant Image (Perspective)
Ouvrez une vue Perspective. Depuis la Component Palette → Display → Image. Déposez-la sur le canevas.
Dans le Property Editor, réglez props.source sur le chemin de l'image :
Liez l'état avec une expression switch()
Clic droit sur props.source → Edit Binding → Expression. Utilisez :
Cette expression évalue l'INT d'état et renvoie le chemin d'image correspondant. Ignition recharge l'image automatiquement lorsque la valeur du tag change. Les suffixes ne sont que la convention de nommage de l'étape 1 — si vous avez nommé vos fichiers différemment, changez les chaînes.
(Recommandé) Encapsulez sous forme d'Embedded View / Template
Pour Perspective : créez une view par type d'équipement (FP_Motor3ph) avec deux paramètres, state (INT) et tag (chaîne). À l'intérieur, placez l'Image liée à ces paramètres et un Label pour le tag. Déposez la vue en tant qu'Embedded View partout où vous en avez besoin ; liez state et tag par instance.
Pour Vision : utilisez un Template piloté par UDT avec un paramètre entier State — même structure, style Vision classique.
S'accorder au look de Perspective
Le thème par défaut de Perspective est plat et clair. Les symboles dessinés avec des traits de 2 px, sans dégradés et avec le corps gris apaisé du Builder s'y intègrent déjà bien. Si vous voulez les badges et icônes de navigation de la bibliothèque d'icônes dans les couleurs d'accentuation de Perspective, la barre latérale de la bibliothèque dispose d'un préréglage de style Ignition Perspective qui les recolore avant le téléchargement. Dans le Builder, choisissez les remplissages vous-même — et gardez les couleurs d'état sémantiques (rouge et orange uniquement pour les alarmes).
Encodage API recommandé (scripting de tag Ignition)
Si vous voulez qu'Ignition calcule l'état lui-même (par ex. quand l'API n'expose que des booléens), déposez un Derived Tag avec cette expression :
Dimensionnement pour Perspective
| Cible | Taille d'image | Remarques |
|---|---|---|
| Navigateur de bureau | 256×128 | Le SVG s'adapte — réglez la taille du composant Image, pas de la source |
| Tablette (Mobile) | 192×96 | SVG, cadre de composant plus petit |
| Téléphone | 128×64 | SVG ; envisagez de masquer les équipements non critiques |
| Affichage mural (4K) | 320×160 ou 512×256 | Le SVG s'adapte toujours ; si vous devez utiliser du PNG, exportez depuis un canevas 512×512 ou 640×360 |
Pièges fréquents
- L'expression renvoie une chaîne vide : le cas par défaut de
switch()doit être une chaîne entre guillemets, pas un nombre."stopped", passtopped. - L'image clignote au changement d'état : réglez props.fit.mode sur
containet une taille de composant fixe — sinon Perspective recalcule la mise en page à chaque changement. - Le SVG s'affiche à la mauvaise couleur dans Vision : Vision rastérise le SVG à l'aide du moteur de rendu Batik de la JVM, qui est prudent avec le CSS. Les SVG du Builder et de la communauté utilisent des attributs
fill="#..."littéraux, donc ils passent bien ; si vous éditez un SVG à la main, évitez les classes et variables CSS. - Le texte à l'intérieur du SVG a un aspect différent : le texte du Builder est composé en Inter, que la JVM de Vision remplacera. Gardez les tags hors du symbole et utilisez plutôt un composant Label / Text.
- Couleurs qui dérivent entre les états : quand vous recolorez les variantes à la main, respectez la palette :
#9E9E9Earrêté,#2E7D32en marche,#FBC02Dsans retour,#1976D2manuel,#616161désactivé,#D32F2FP1,#F57C00P2. Les échantillons de remplissage du Builder sont exactement ceux-là.
Et ensuite
- L'encodage des 9 états de moteur expliqué
- Pourquoi la palette HMI apaisée l'emporte
- Référence ISA-101 complète
- Des questions sur les liaisons ou le thème de Perspective ? Posez-les dans le forum — les sujets Ignition vont dans la catégorie outils-fabricants.
Construisez le symbole, puis liez-le
Le Symbol Builder ne nécessite pas de compte pour composer. Un compte gratuit vous donne 5 téléchargements par mois ; publiez vos propres symboles sous CC BY 4.0 et téléchargez-les gratuitement. Ou partez de ce que d'autres ingénieurs ont déjà dessiné, et testez le motif switch() dans votre propre vue.