Démonstration de l'usine d'eau eHMI

Bonjour à tous, cet été, c'était la première fois que je travaillais avec la technologie PLCnext et je voulais partager ce que j'étais capable de faire. Plus spécifiquement, j'ai travaillé avec la technologie eHMI dans PLCnext Engineer. Si l'un d'entre vous est comme moi et n'a aucune capacité artistique, vous ne voudrez peut-être pas créer 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. Donc, c'est là que j'ai commencé.

On m'a donné un dossier avec de nombreuses images SVG différentes déjà conçues par un graphiste. Pour ceux qui ne le savent pas, les SVG sont des graphiques vectoriels évolutifs. Il s'agit d'un type d'image spécial car la taille de l'image n'affectera pas la qualité de l'image. Ainsi, là où une image normale, lorsqu'elle sera agrandie, deviendra pixélisée, une image SVG conservera sa qualité.

Cependant, la partie suivante est celle 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 avez importé une image d'un réservoir, vous ne pouvez pas sélectionner le contour du réservoir et changer sa couleur en vert lorsqu'il est plein. Tout élément que vous souhaitez animer dans l'IHM doit être dessiné dans PLCnext Engineer.

J'ai donc dû trouver un compromis. En utilisant une ressource extérieure gratuite appelée Inkscape, j'ai pu manipuler les images qui m'ont été données dans le système de plantes aquatiques 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 terminé avec ce que j'ai appelé la couche détaillée ci-dessous :

Je voulais aussi animer l'eau remplissant les tuyaux, j'ai donc créé un chemin de détourage ou un calque de découpe qui reposerait derrière le calque détaillé pour masquer les éléments d'arrière-plan que j'ai utilisés pour animer l'eau :

Après avoir importé les images ci-dessus et créé les éléments animés dans PLCnext Engineer, je me suis retrouvé avec l'écran IHM suivant :

Ce projet peut être trouvé sur mon GitHub avec une explication détaillée sur la façon dont il a été créé et un projet bonus :plcnextusa/eHMI_water_plant_demo :animation graphique élevée de plantes aquatiques (github.com)