Waterzuiveringsinstallaties stroomlijnen met eHMI-demo – PLCnext Engineer Showcase

Hallo iedereen, deze zomer was mijn eerste keer werken met PLCnext-technologie en ik wilde delen wat ik kon bereiken. Meer specifiek werkte ik met de eHMI-technologie in PLCnext Engineer. Als jullie zoals ik geen artistieke vaardigheden hebben, wil je misschien niet de schermen vanaf nul tekenen, maar liever een set afbeeldingen gebruiken die al door een grafisch ontwerper of iemand dergelijks zijn getekend. Daar ben ik gestart.

Ik kreeg een map met veel verschillende SVG-afbeeldingen die al door een grafisch ontwerper waren ontworpen. Voor wie het niet weet: SVG's zijn Scalable Vector Graphics. Dit is een speciaal soort afbeelding omdat de grootte van de afbeelding de kwaliteit niet beïnvloedt. Waar een normale afbeelding gepixeliseerd raakt bij vergroten, behoudt een SVG-afbeelding zijn kwaliteit.

Het volgende deel is echter waar het lastig kan worden. Elke afbeelding die in PLCnext Engineer geïmporteerd wordt, kan geen gedetailleerde animaties hebben. Als je bijvoorbeeld een afbeelding van een tank importeert, kun je de omtrek van de tank niet selecteren en de kleur groen maken als hij vol is. Elk element dat je geanimeerd wilt zien in de HMI, moet in PLCnext Engineer getekend worden.

Daarom moest ik een compromis sluiten. Door gebruik te maken van een gratis extern hulpmiddel genaamd Inkscape, kon ik de afbeeldingen die ik kreeg manipuleren tot het waterzuiveringsinstallatiesysteem 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, hieronder getoond:

Ik wilde ook water animeren dat de pijpen vult, dus ik maakte een clip-path of "uitknippingslaag" die achter de gedetailleerde laag zou rusten om de achtergrondelementen die ik voor de wateranimatie gebruikte te verbergen:

Na het importeren van de bovenstaande afbeeldingen en het aanmaken 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 gemaakt is en een bonusproject: plcnextusa/eHMI_water_plant_demo: High Graphic Water Plant Animation