Importar símbolos HMI en Ignition Perspective
Ignition tiene la ruta de importación más limpia de cualquier HMI: suelta los SVG en Image Management, coloca un componente Image y usa una expresión switch() para elegir la imagen correcta según un tag de estado. Funciona igual en Perspective y en Vision. Los SVG vienen del Symbol Builder (tus propios equipos), de la librería de la comunidad (CC BY 4.0) o de la librería de iconos (badges, flechas, iconos de navegación).
Paso a paso
Exporta tus símbolos como SVG
- Dibújalo: en el Symbol Builder, compón el equipo a partir de formas, elementos ISA y stamps (lienzo de 512 × 512 para símbolos cuadrados, 256 × 128 para el formato ancho de motor con etiqueta) y pulsa
↓ SVG. La exportación es SVG plano con colores hex literales —sin clases CSS, sin scripts, sin fuentes externas—, que es justo lo que le gusta al renderizador de Perspective y Vision. - Reutilízalo: abre un símbolo de motores de la comunidad, válvulas, bombas o depósitos y pulsa Download SVG. Acredita al autor en la documentación de tu proyecto; usa Open in builder para adaptarlo antes.
- Badges e iconos: los badges de prioridad de alarma, los badges de estado, las flechas y los iconos de navegación / barra de sistema (inicio, alarmas, tendencias, silenciar bocina) salen de la librería de iconos en SVG.
Un archivo por estado: construye la base, Save como plantilla, recolorea el relleno del cuerpo por estado (gris parado, blanco o verde en marcha, amarillo sin feedback, azul manual, gris oscuro deshabilitado), estampa el badge P1 / P2 para las variantes de alarma y exporta cada uno como {kind}_{state}.svg — p. ej. motor_3ph_running.svg, motor_3ph_running_p1.svg. Deja el texto del tag fuera del símbolo; la embedded view lo añade (paso 5).
Componer en el Builder no requiere cuenta. Descargar sí: una cuenta gratuita da 5 descargas al mes, Starter 50 y Studio ilimitadas. Los símbolos que publicas tú siempre se descargan gratis.
Súbelos a Image Management
En el Designer o en la interfaz web del Gateway:
- Designer: Tools → Image Management.
- Gateway: Config → System → Images.
Crea una estructura de carpetas: symbols/motor/, symbols/pump/, symbols/badges/, etc. Arrastra los archivos SVG a cada carpeta (la selección múltiple funciona). La ruta pasa a ser la referencia de la imagen (p. ej. symbols/motor/motor_3ph_running.svg).
Coloca un componente Image (Perspective)
Abre una vista de Perspective. Desde el Component Palette → Display → Image. Suéltalo en el lienzo.
En el Property Editor, pon props.source con la ruta de la imagen:
Vincula el estado con una expresión switch()
Clic derecho en props.source → Edit Binding → Expression. Usa:
Esta expresión evalúa el INT de estado y devuelve la ruta de imagen correspondiente. Ignition recarga la imagen automáticamente cuando cambia el valor del tag. Los sufijos son simplemente la convención de nombres del paso 1 — si nombraste tus archivos de otra forma, cambia las cadenas.
(Recomendado) Encapsúlalo como Embedded View / Template
En Perspective: crea una vista por tipo de equipo (FP_Motor3ph) con dos parámetros, state (INT) y tag (string). Dentro, coloca la Image vinculada a esos parámetros y una Label para el tag. Suelta la vista como Embedded View donde la necesites; vincula state y tag por cada instancia.
En Vision: usa un Template dirigido por UDT con un parámetro int State — misma estructura, al estilo clásico de Vision.
Encajar con el aspecto de Perspective
El tema por defecto de Perspective es plano y claro. Los símbolos dibujados con trazos de 2 px, sin degradados y con el cuerpo gris tranquilo del Builder ya encajan bien en él. Si quieres los badges y los iconos de navegación de la librería de iconos en los colores de acento de Perspective, la barra lateral de la librería tiene un preset de estilo Ignition Perspective que los recolorea antes de descargar. En el Builder eliges tú los rellenos — y mantén los colores de estado semánticos (rojo y naranja solo para alarmas).
Codificación recomendada en el PLC (scripting de tags de Ignition)
Si quieres que Ignition calcule el estado por sí mismo (p. ej. cuando el PLC solo expone booleanos), añade un Derived Tag con esta expresión:
Dimensionado para Perspective
| Destino | Tamaño de imagen | Notas |
|---|---|---|
| Navegador de escritorio | 256×128 | El SVG escala — ajusta el tamaño del componente Image, no el del origen |
| Tablet (Mobile) | 192×96 | SVG, marco de componente más pequeño |
| Móvil | 128×64 | SVG; plantéate ocultar equipos no críticos |
| Pantalla mural (4K) | 320×160 o 512×256 | El SVG sigue escalando; si tienes que usar PNG, exporta desde un lienzo de 512×512 o 640×360 |
Errores habituales
- La expresión devuelve una cadena vacía: el caso por defecto de
switch()debe ser una cadena entrecomillada, no un número."stopped", nostopped. - La imagen parpadea al cambiar de estado: pon props.fit.mode en
containy un tamaño de componente fijo — de lo contrario Perspective recalcula el layout en cada cambio. - El SVG se renderiza con el color equivocado en Vision: Vision rasteriza el SVG con el renderizador Batik de la JVM, que es conservador con el CSS. Los SVG del Builder y de la comunidad usan atributos
fill="#..."literales, así que están bien; si editas un SVG a mano, evita clases y variables CSS. - El texto dentro del SVG se ve distinto: el texto del Builder va en Inter, que la JVM de Vision sustituirá. Mantén los tags fuera del símbolo y usa un componente Label / Text en su lugar.
- Los colores se desvían entre estados: cuando recoloreas las variantes a mano, conserva la paleta:
#9E9E9Eparado,#2E7D32en marcha,#FBC02Dsin feedback,#1976D2manual,#616161deshabilitado,#D32F2FP1,#F57C00P2. Los swatches de relleno del Builder son exactamente estos.
Siguientes pasos
- La codificación de los 9 estados de motor, explicada
- Por qué gana la paleta de colores HMI tranquila
- Referencia completa de ISA-101
- ¿Preguntas sobre vinculaciones o temas de Perspective? Pregunta en el foro — los temas de Ignition van a la categoría de herramientas de fabricante.
Construye el símbolo y luego vincúlalo
El Symbol Builder no necesita cuenta para componer. Una cuenta gratuita te da 5 descargas al mes; publica tus propios símbolos bajo CC BY 4.0 y descárgalos gratis. O parte de lo que otros ingenieros ya dibujaron, y prueba el patrón switch() en tu propia vista.