Hello, everyone.
Let’s see how to create an animated HMI ...
... in EcoStruxure Automation Expert.
In this video, we will explain how to create this kind of HMI.
First, I’ll start with a simple CAT called "CustomMotor".
It has two variables in the CAT’s HMI,
"Temperature" and "Pressure",
which are linked to the REQ event.
Now, let’s see its “Symbol” in “sDefault”.
For the Temperature,
we can easily use a standard EcoStruxure Automation Expert representation ...
... just by drag and dropping the variable into the scene,
and selecting a “BarValue”, for instance.
If we want something custom,
let’s start by drawing a rectangle called “rectangle1”.
Then, I can select a local image from my computer ...
... to represent the motor.
We can add some text in the HMI to give it a title.
And also to clarify that we will represent the temperature there.
Now, drag and drop the variable temperature again,
but this time select “Execute”.
You can give a name to this execute action.
Now, go to the “Events” tab and find “ValueChanged”.
There, click on the blank space, and press Enter.
You can see that a method in C# has been automatically created ...
... and will be called each time the temperature changes.
Put your code inside this method.
Here, I changed some properties of the rectangle1,
such as it’s color and fill percent ...
... that will be both proportionate to the given temperature.
Focus point:
Now we need to build the solution to generate the CAT instance.
This item will have to be dragged and dropped into a Canvas ...
... to use what we just created.
Let’s deploy and test.
We can navigate to “System”,
then inside the resource where our CustomMotor is represented.
Then, inside this CAT instance, we see the CAT’s HMI.
Right-click to watch the live variables.
Then we can force them and change their values.
Don’t forget to trigger the REQ event to apply.
As you can see, the default BarValue is automatically changed,
as well as our custom representation.
Now, let’s do something a little bit different for the pressure.
We will create a rectangle2 ...
... and text near it.
As before, drag and drop the Pressure variable and select, “Execute”.
This time, when the value changes,
we want to use a global color from the project.
So first, let’s see how to create a global color.
Here is a little tip:
if you right-click on your project and go to “Theme”,
you can see what your current theme is and open it.
A lot of colors are already defined here ...
... that you can use on your project ...
... for uniformity across your canvases.
To create our own color, right-click on the project,
then “Named Style”, and “Open”.
Here, you can create Colors, Brushes, Pens, and Fonts.
Let’s create some colors for the pressure level.
You can either type the hex code of the color ...
... or use the color picker.
If the pressure is too high,
we can use the "Blink Color" as a visual alert.
It is simply two colors that will alternate.
We can navigate back to our “Symbol” ...
... and put the code for pressure part.
Here if the pressure is below 50,
I’ll use the first color we defined.
Between 50 and 80, the second one.
And over 80, I’ll use the Blink Color.
Finally, I’ll change the length of the rectangle2 ...
... to match the pressure level as well.
Let’s deploy and test.
Again, we need to navigate to “System” in the CAT’s HMI ...
... and try different values for the pressure.
As you can see, we used global colors ...
... that can be re-used for other canvases as well.
That’s it!
Now you know how to animate your HMIs!