Importar símbolos HMI para o Ignition Perspective
O Ignition tem o caminho de importação mais limpo de qualquer HMI: coloque SVGs no Image Management, coloque um componente Image e use uma expressão switch() para escolher a imagem certa com base numa tag de estado. Funciona de forma idêntica para Perspective e Vision. Os SVGs vêm do Symbol Builder (o seu próprio equipamento), da biblioteca da comunidade (CC BY 4.0) ou da biblioteca de ícones (distintivos, setas, ícones de navegação).
Passo a passo
Exporte os seus símbolos como SVG
- Desenhe-o: no Symbol Builder, componha o equipamento a partir de formas, elementos ISA e carimbos (tela de 512 × 512 para símbolos quadrados, 256 × 128 para o formato largo de motor-e-etiqueta) e clique em
↓ SVG. A exportação é SVG simples com cores hexadecimais literais — sem classes CSS, sem scripts, sem fontes externas — que é exatamente aquilo de que os renderizadores do Perspective e do Vision gostam. - Reutilize-o: abra um símbolo dos motores da comunidade, válvulas, bombas ou depósitos e clique em Download SVG. Dê crédito ao autor na documentação do seu projeto; Open in builder para o adaptar primeiro.
- Distintivos e ícones: os distintivos de prioridade de alarme, os distintivos de estado, as setas e os ícones de navegação / barra de sistema (início, alarmes, tendências, silenciar buzina) vêm da biblioteca de ícones em SVG.
Um ficheiro por estado: construa a base, Save como modelo, recolore o preenchimento do corpo por estado (cinzento parado, branco ou verde em marcha, amarelo sem feedback, azul manual, cinzento escuro desativado), aplique o distintivo P1 / P2 nas variantes de alarme, exporte cada um como {kind}_{state}.svg — por exemplo motor_3ph_running.svg, motor_3ph_running_p1.svg. Deixe o texto da tag fora do símbolo; o embedded view acrescenta-o (passo 5).
Compor no Builder não exige conta. Transferir exige: uma conta gratuita dá 5 transferências por mês, o Starter 50, o Studio ilimitadas. Os símbolos que publica são sempre gratuitos para transferir.
Carregue para o Image Management
No Designer ou na interface web do Gateway:
- Designer: Tools → Image Management.
- Gateway: Config → System → Images.
Crie uma estrutura de pastas: symbols/motor/, symbols/pump/, symbols/badges/, etc. Arraste os ficheiros SVG para cada pasta (seleção múltipla funciona). O caminho torna-se a referência da imagem (por exemplo symbols/motor/motor_3ph_running.svg).
Coloque um componente Image (Perspective)
Abra uma view Perspective. A partir da Component Palette → Display → Image. Largue na tela.
No Property Editor, defina props.source para o caminho da imagem:
Ligue o estado com uma expressão switch()
Clique com o botão direito em props.source → Edit Binding → Expression. Use:
Esta expressão avalia o INT de estado e devolve o caminho de imagem correspondente. O Ignition recarrega a imagem automaticamente quando o valor da tag muda. Os sufixos são apenas a convenção de nomes do passo 1 — se nomeou os ficheiros de outra forma, altere as strings.
(Recomendado) Encapsule como Embedded View / Template
Para Perspective: crie uma view por tipo de equipamento (FP_Motor3ph) com dois parâmetros, state (INT) e tag (string). Lá dentro, coloque a Image ligada a esses parâmetros e uma Label para a tag. Largue a view como Embedded View onde precisar; ligue state e tag por instância.
Para Vision: use um Template comandado por UDT com um parâmetro int State — mesma estrutura, ao estilo clássico do Vision.
Combinar com o aspeto do Perspective
O tema por omissão do Perspective é plano e claro. Os símbolos desenhados com traços de 2 px, sem gradientes e com o corpo cinzento tranquilo do Builder já assentam bem nele. Se quiser os distintivos e os ícones de navegação da biblioteca de ícones nas cores de destaque do Perspective, a barra lateral da biblioteca tem um preset de estilo Ignition Perspective que os recolore antes da transferência. No Builder, escolha os preenchimentos — e mantenha as cores de estado semânticas (vermelho e laranja apenas para alarmes).
Codificação recomendada no PLC (scripting de tags do Ignition)
Se quiser que o Ignition calcule o estado ele próprio (por exemplo, quando o PLC só expõe booleanos), coloque uma Derived Tag com esta expressão:
Dimensionamento para Perspective
| Alvo | Tamanho da imagem | Notas |
|---|---|---|
| Navegador de desktop | 256×128 | O SVG escala — defina o tamanho do componente Image, não o da fonte |
| Tablet (Mobile) | 192×96 | SVG, quadro de componente mais pequeno |
| Telemóvel | 128×64 | SVG; considere ocultar equipamento não crítico |
| Ecrã de parede (4K) | 320×160 ou 512×256 | O SVG continua a escalar; se tiver de usar PNG, exporte de uma tela de 512×512 ou 640×360 |
Armadilhas comuns
- A expressão devolve uma string vazia: o caso por omissão no
switch()tem de ser uma string entre aspas, não um número."stopped", nãostopped. - A imagem tremeluz na mudança de estado: defina props.fit.mode como
containe um tamanho de componente fixo — caso contrário o Perspective recalcula o layout a cada mudança. - O SVG renderiza com a cor errada no Vision: o Vision rasteriza SVG com o renderizador Batik da JVM, que é conservador com CSS. Os SVGs do Builder e da comunidade usam atributos
fill="#..."literais, por isso funcionam; se editar um SVG à mão, evite classes e variáveis CSS. - O texto dentro do SVG tem aspeto diferente: o texto do Builder é definido em Inter, que a JVM do Vision irá substituir. Mantenha as tags fora do símbolo e use antes um componente Label / Text.
- Cores a variar entre estados: quando recolore variantes à mão, mantenha a paleta:
#9E9E9Eparado,#2E7D32em marcha,#FBC02Dsem feedback,#1976D2manual,#616161desativado,#D32F2FP1,#F57C00P2. As amostras de preenchimento do Builder são exatamente estas.
A seguir
- A codificação dos 9 estados de motor explicada
- Porque é que a paleta de cores HMI tranquila vence
- Referência ISA-101 completa
- Dúvidas sobre ligações ou temas do Perspective? Pergunte no fórum — os tópicos de Ignition vão para a categoria de ferramentas de fabricante.
Construa o símbolo e depois ligue-o
O Symbol Builder não exige conta para compor. Uma conta gratuita dá 5 transferências por mês; publique os seus próprios símbolos sob CC BY 4.0 e transfira-os gratuitamente. Ou parta do que outros engenheiros já desenharam e teste o padrão switch() na sua própria view.