Demonstração da Usina de Água eHMI

Olá a todos, este verão foi a primeira vez que trabalhei com a tecnologia PLCnext e queria partilhar 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, talvez não queira desenhar as telas do zero e prefira usar um conjunto de imagens já elaboradas para você por um designer gráfico ou alguém semelhante. Então, foi aqui que eu comecei.

Recebi uma pasta com muitas imagens SVG diferentes já desenhadas por um designer gráfico. Para quem não sabe, SVGs são Scalable Vector Graphics. Este é um tipo especial de imagem porque o tamanho da imagem não afetará a qualidade da imagem. Portanto, onde uma imagem normal, quando ampliada, se tornar pixelizada, uma imagem SVG manterá sua qualidade.

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

Portanto, eu tive que chegar a um compromisso. Ao usar um recurso externo gratuito chamado Inkscape, consegui manipular as imagens que recebi no sistema de planta de água que eu queria. Então consegui selecionar os elementos animados que precisariam ser desenhados no PLCnext Engineer e excluí-los. Terminei com o que chamei de camada detalhada mostrada abaixo:

Eu também queria animar a água enchendo os canos, então criei um caminho de recorte ou camada de recorte que ficaria atrás da camada detalhada para ocultar os elementos de fundo que usei para animar a água:

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


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