eHMI Waterplant Demo

Hallo allemaal, deze zomer werkte ik voor het eerst met PLCnext-technologie en ik wilde delen wat ik kon doen. Meer specifiek werkte ik met de eHMI-technologie in PLCnext Engineer. Als iemand van jullie is zoals ik en geen artistieke vaardigheden heeft, wil je misschien niet de schermen helemaal opnieuw opstellen en liever een reeks afbeeldingen gebruiken die al voor je zijn opgesteld door een grafisch ontwerper of iemand die erop lijkt. Dus hier ben ik begonnen.

Ik kreeg een map met veel verschillende SVG-afbeeldingen die al door een grafisch ontwerper waren ontworpen. Voor degenen die het niet weten, SVG's zijn schaalbare vectorafbeeldingen. Dit is een speciaal soort afbeelding omdat de grootte van de afbeelding geen invloed heeft op de kwaliteit van de afbeelding. Dus waar een normale afbeelding bij het opschalen korrelig wordt, behoudt een SVG-afbeelding zijn kwaliteit.

Het volgende deel is echter waar dingen lastig kunnen worden. Elke afbeelding die in PLCnext Engineer wordt geïmporteerd, kan geen gedetailleerde animaties hebben. Als u bijvoorbeeld een afbeelding van een tank hebt geïmporteerd, kunt u de omtrek van de tank niet selecteren en de kleur ervan wijzigen in groen wanneer deze vol is. Elk element dat u in de HMI wilt laten animeren, moet in PLCnext Engineer worden getekend.

Daarom moest ik tot een compromis komen. Door een gratis externe bron genaamd Inkscape te gebruiken, was ik in staat om de afbeeldingen die ik kreeg te manipuleren in het waterplantsysteem dat ik wilde. Vervolgens kon ik de geanimeerde elementen selecteren die in PLCnext Engineer getekend moesten worden en deze verwijderen. Ik eindigde met wat ik de gedetailleerde laag noemde die hieronder wordt getoond:

Ik wilde ook water animeren dat de pijpen vult, dus maakte ik een clippad of uitgesneden laag die achter de gedetailleerde laag zou rusten om de achtergrondelementen te verbergen die ik gebruikte voor het animeren van water:

Na het importeren van bovenstaande afbeeldingen en het maken van de geanimeerde elementen in PLCnext Engineer eindigde ik met het volgende HMI-scherm:

Dit project is te vinden op mijn GitHub, samen met een gedetailleerde uitleg over hoe het is gemaakt en een bonusproject:plcnextusa/eHMI_water_plant_demo:High Graphic Water Plant Animation (github.com)