eHMI Water Plant Demo

Hello Everyone, this summer was my first time working with PLCnext technology and I wanted to share what I was able to do. More specifically, I worked with the eHMI technology in PLCnext Engineer. If any of you are like me and have no artistic abilities you may not want to draw up the screens from scratch and would rather use a set of images already drawn up for you by a graphic designer or someone similar. So, this is where I started.

I was given a folder with many different SVG images already designed by a graphic designer. For those that don’t know, SVGs are Scalable Vector Graphics. This is a special kind of image because the size of the image will not affect the quality of the image. So, where a normal image when scaled up will become pixelated a SVG image will retain its quality. 

However, the next part is where things can become tricky. Any image imported into PLCnext Engineer cannot have detailed animations. For example, if you imported an image of a tank you could not select the tank’s outline and change its color to green when it is full. Any element you want to be animated in the HMI should be drawn in PLCnext Engineer. 

Therefore I had to come to a compromise. By using a free outside resource called Inkscape I was able to manipulate the images I was given into the water plant system I wanted. Then I was able to select the animated elements that would need to be drawn in PLCnext Engineer and deleted them. I ended with what I called the detailed layer shown below: 

I also wanted to animate water filling the pipes so I created a clip-path or cutout layer which would rest behind the detailed layer to hide the background elements I used for animating water:

After importing the above images and creating the animated elements in PLCnext Engineer I ended with the following HMI screen: 

This project can be found on my GitHub along with a detailed explanation on how it was created and a bonus project: plcnextusa/eHMI_water_plant_demo: High Graphic Water Plant Animation (github.com)