What is the best way to animate the fan shown below based off the status bit for running. I was looking at having the status bit change the rotate angle some how.
Yes you are on the right track. Use the principles explained on this page:
Component Animation | Ignition User Manual
Looks like that document is for Vision. i am trying to animate this fan is perspective
The correct answer is that you really should not. Animating a normal process is considered a distraction, according to ISA-101.
This may give you some insights.
You can do quite a bit with SVG's if you know how to make it happen.
Personally though, I would caution you against this. Is rotating the fan really needed to show that the fan is running? I think changing the color and text of the label is more than enough to indicate the status. To each their own though.
If I had to do this, I would get an SVG and animate it similar to the link above illustrates.
This is being displayed in the engineering dept. so not gonna be a distraction to the operator. The display in the engineering dept is more for show so more moving components seem to impress the visitors more
In the advanced stylesheet, make the following entry,
@keyframes spinner {
0% {rotate: 0deg;}
100% {rotate: 360deg;}
}
.psc-Rotations\/Fan{
animation: spinner 2s linear infinite;
transform-origin: 50%;
}
Create a blank style class with the path Rotations/Fan. Under the Group_Impeller_Blades group, add the style prop, and set the style class to Rotations/Fan.
dkhayes beat me to the animation part, but to actually control the animation, you can use the status bit in a binding to assign the CSS class to the fan:
if({this.custom.running},"Rotations/Fan", "")
Thanks guys for the help. Just tried it and it works.
Which solution? (You should mark the comment that helped you solve this, not your announcement of your success.)