Optimiser les opérations d'une station d'épuration avec la démo eHMI – Vitrine PLCnext Engineer

Bonjour à tous, cet été c'était ma première fois working with PLCnext technology et je voulais partager ce que j'ai pu faire. Plus spécifiquement, j'ai travaillé avec la technologie eHMI dans PLCnext Engineer. Si certains d'entre vous sont comme moi et n'ont aucune capacité artistique, vous ne voudrez peut-être pas dessiner les écrans à partir de zéro et préférerez utiliser un ensemble d'images déjà dessinées pour vous par un graphiste ou quelqu'un de similaire. C'est là que j'ai commencé.

On m'a donné un dossier avec de nombreuses images SVG déjà conçues par un graphiste. Pour ceux qui ne le savent pas, les SVG sont des Scalable Vector Graphics (graphiques vectoriels redimensionnables). C'est un type d'image spécial car la taille de l'image n'affecte pas sa qualité. Là où une image normale devient pixelisée quand on l'agrandit, une image SVG conserve sa qualité.

Cependant, la partie suivante est là où les choses peuvent devenir délicates. Toute image importée dans PLCnext Engineer ne peut pas avoir d'animations détaillées. Par exemple, si vous importez une image d'un réservoir, vous ne pouvez pas sélectionner le contour du réservoir et changer sa couleur en vert quand il est plein. Tout élément que vous voulez animer dans l'HMI doit être dessiné dans PLCnext Engineer.

J'ai donc dû faire un compromis. En utilisant une ressource externe gratuite appelée Inkscape, j'ai pu manipuler les images qu'on m'avait données pour en faire le système de station d'épuration que je voulais. Ensuite, j'ai pu sélectionner les éléments animés qui devaient être dessinés dans PLCnext Engineer et les supprimer. J'ai obtenu ce que j'ai appelé la "couche détaillée" (detailed layer) montrée ci-dessous :

Je voulais aussi animer l'eau remplissant les tuyaux, donc j'ai créé un clip-path ou une couche de découpe (cutout layer) qui se placerait derrière la couche détaillée pour masquer les éléments d'arrière-plan utilisés pour l'animation de l'eau :

Après avoir importé les images ci-dessus et créé les éléments animés dans PLCnext Engineer, j'ai obtenu l'écran HMI suivant :

Ce projet se trouve sur mon GitHub avec une explication détaillée de sa création et un projet bonus : plcnextusa/eHMI_water_plant_demo: High Graphic Water Plant Animation