Demostración de planta de agua eHMI

Hola a todos, este verano fue la primera vez que trabajé con la tecnología PLCnext y quería compartir lo que pude hacer. Más concretamente, trabajé con la tecnología eHMI en PLCnext Engineer. Si alguno de ustedes es como yo y no tiene habilidades artísticas, es posible que no desee dibujar las pantallas desde cero y prefiera usar un conjunto de imágenes que un diseñador gráfico o alguien similar ya ha elaborado para usted. Entonces, aquí es donde comencé.

Me dieron una carpeta con muchas imágenes SVG diferentes ya diseñadas por un diseñador gráfico. Para aquellos que no lo saben, los SVG son gráficos vectoriales escalables. Este es un tipo especial de imagen porque el tamaño de la imagen no afectará la calidad de la imagen. Por lo tanto, donde una imagen normal cuando se amplía se pixela, una imagen SVG conservará su calidad.

Sin embargo, la siguiente parte es donde las cosas pueden volverse complicadas. Cualquier imagen importada a PLCnext Engineer no puede tener animaciones detalladas. Por ejemplo, si importó una imagen de un tanque, no podría seleccionar el contorno del tanque y cambiar su color a verde cuando esté lleno. Cualquier elemento que desee animar en la HMI debe dibujarse en PLCnext Engineer.

Por lo tanto, tuve que llegar a un compromiso. Mediante el uso de un recurso externo gratuito llamado Inkscape pude 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 que se muestra a continuación:

También quería animar el agua que llenaba las tuberías, así que creé una ruta de recorte o una capa recortada 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 sobre cómo se creó y un proyecto extra:plcnextusa/eHMI_water_plant_demo:High Graphic Water Plant Animation (github.com)