Wasserwerk-Operationen mit eHMI-Demo optimieren – PLCnext Engineer Showcase

Hallo zusammen, diesen Sommer war meine erste Erfahrung mit PLCnext-Technologie, und ich möchte teilen, was ich erreicht habe. Genauer: eHMI-Technologie in PLCnext Engineer. Wenn Sie wie ich keine künstlerischen Fähigkeiten haben, zeichnen Sie Bildschirme nicht gerne von Grund auf neu, sondern nutzen lieber vorgefertigte Bilder von Grafikdesignern. Genau dort habe ich angefangen.

Ich erhielt einen Ordner mit vielen verschiedenen SVG-Bildern, bereits von einem Grafikdesigner entworfen. Für Unwissende: SVGs sind Skalierbare Vektorgrafiken. Besonderheit: Skalierung beeinträchtigt die Bildqualität nicht. Normale Bilder werden beim Vergrößern pixelig, SVGs behalten ihre Qualität.

Aber der nächste Teil wird knifflig: In PLCnext Engineer importierte Bilder können keine detaillierten Animationen haben. Beispiel: Importiertes Bild eines Tanks – man kann den Tankumriss nicht auswählen und bei Füllstand grün färben. Jedes Element, das im HMI animiert werden soll, muss in PLCnext Engineer gezeichnet werden.

Also Kompromiss: Mit der freien Ressource Inkscape die vorgegebenen Bilder in das gewünschte Wasserwerk-System manipulieren. Animierte Elemente, die in PLCnext Engineer gezeichnet werden müssen, auswählen und löschen. Ergebnis: „Detaillierter Layer“:

Wasser in Rohren animieren → clip-path- oder Ausschneide-Layer erstellen, der hinter dem detaillierten Layer liegt, um Hintergrundelemente für Wasseranimation zu verstecken:

Nach Import der Bilder und Erstellung der animierten Elemente in PLCnext Engineer ergibt sich folgender HMI-Bildschirm:

Projekt auf GitHub mit detaillierter Erstellungserklärung und Bonus-Projekt: plcnextusa/eHMI_water_plant_demo