Optimiza operaciones de planta de agua con demo eHMI - Exhibición PLCnext Engineer

Hola a todos, este verano fue mi primera vez trabajando con tecnología PLCnext y quería compartir lo que fui capaz de hacer. Más específicamente, trabajé con la tecnología eHMI en PLCnext Engineer. Si alguno de vosotros es como yo y no tenéis habilidades artísticas, quizás no queráis dibujar las pantallas desde cero y preferiríais usar un conjunto de imágenes ya dibujadas por un diseñador gráfico o alguien similar. Así que, aquí es donde empecé.

Me dieron una carpeta con muchas imágenes SVG ya diseñadas por un diseñador gráfico. Para los que no lo sepan, los SVG son Scalable Vector Graphics (Gráficos Vectoriales Escalables). Este es un tipo especial de imagen porque el tamaño de la imagen no afecta a la calidad de la imagen. Así que, donde una imagen normal al escalarse se pixelaría, una imagen SVG mantendrá su calidad.

Sin embargo, la siguiente parte es donde las cosas se pueden complicar. Cualquier imagen importada en PLCnext Engineer no puede tener animaciones detalladas. Por ejemplo, si importabas una imagen de un tanque no podías seleccionar el contorno del tanque y cambiar su color a verde cuando está lleno. Cualquier elemento que quieras animar en el HMI debería dibujarse en PLCnext Engineer.

Por tanto, tuve que llegar a un compromiso. Usando un recurso externo gratuito llamado Inkscape fui capaz de manipular las imágenes que me dieron en el sistema de planta de agua que quería. Luego pude seleccionar los elementos animados que necesitarían dibujarse en PLCnext Engineer y los eliminé. Terminé con lo que llamé la capa detallada mostrada abajo:

También quería animar agua llenando las tuberías así que creé una clip-path o capa de recorte que descansaría detrás de la capa detallada para ocultar los elementos de fondo que usé para animar el agua:

Después de importar las imágenes anteriores y crear los elementos animados en PLCnext Engineer terminé con la siguiente pantalla HMI:

Este proyecto se puede encontrar en mi GitHub junto con una explicación detallada de cómo se creó y un proyecto extra: plcnextusa/eHMI_water_plant_demo: High Graphic Water Plant Animation