Otimizando Operações de Estação de Tratamento de Água com Demo eHMI – Showcase PLCnext Engineer

Olá a todos, este verão foi minha primeira vez trabalhando com tecnologia PLCnext e queria compartilhar o que consegui fazer. Mais especificamente, trabalhei com a tecnologia eHMI no PLCnext Engineer. Se algum de vocês é como eu e não tem habilidades artísticas, pode não querer desenhar as telas do zero e preferir usar um conjunto de imagens já desenhadas para você por um designer gráfico ou alguém similar. Então, foi aqui que comecei.

Recebi uma pasta com muitas imagens SVG diferentes já desenhadas por um designer gráfico. Para aqueles que não sabem, SVGs são Scalable Vector Graphics (Gráficos Vetoriais Escaláveis). Este é um tipo especial de imagem porque o tamanho da imagem não afeta a qualidade. Então, onde uma imagem normal quando escalada fica pixelada, uma imagem SVG mantém sua qualidade.

No entanto, a próxima parte é onde as coisas podem ficar complicadas. Qualquer imagem importada no PLCnext Engineer não pode ter animações detalhadas. Por exemplo, se você importou uma imagem de um tanque, não poderia selecionar o contorno do tanque e mudar sua cor para verde quando estiver cheio. Qualquer elemento que você queira animar no HMI deve ser desenhado no PLCnext Engineer.

Portanto, tive que chegar a um compromisso. Usando um recurso externo gratuito chamado Inkscape, consegui manipular as imagens que me deram no sistema de estação de tratamento de água que queria. Então, consegui selecionar os elementos animados que precisariam ser desenhados no PLCnext Engineer e deletá-los. Terminei com o que chamei de camada detalhada mostrada abaixo:

Também queria animar água enchendo os tubos, então criei um clip-path ou camada de recorte que ficaria atrás da camada detalhada para esconder os elementos de fundo que usei para animar a água:

Após importar as imagens acima e criar os elementos animados no PLCnext Engineer, terminei com a seguinte tela HMI:

Este projeto pode ser encontrado no meu GitHub junto com uma explicação detalhada de como foi criado e um projeto bônus: plcnextusa/eHMI_water_plant_demo: High Graphic Water Plant Animation