Greetings,
I am working on converting a Vision HVAC project to a Perspective Project. In the vision project, I use a timer to animate the rotation of a cooling fan. Is there a good way of going about this in perspective?
1 Like
Can you upload the SVG so we can play with it?
Maybe transform: rotate() ?
I added the key value of transform: rotate() and nothing happened. If I add change it to transform: rotate(30), I end up with the blades moving. I wonder if I am doing the transform wrong
That’s about the extent of my CSS knowledge. @victordcq is the CSS king, I’m sure he can weigh in on this.
Maybe try adding transform-origin: center along with transform: rotate(30)…
2 Likes
This can definitely be done using css.
You’ll need a style prop with 2 components within:
{
"classes": "",
"animation": "spin 1s linear infinite",
"transformOrigin": "center"
}
as well as have an animation keyframe (in my case it’s called spin) defined within a custom theme:
@keyframes spin {
0% {
transform:rotate(0deg);
}
100% {
transform:rotate(360deg);
}
}
Info on how to create a custom theme is housed at this location on your gateway install: %installDirectory%\data\modules\com.inductiveautomation.perspective\themes\README.md
Info on where the @keyframes stuff came from: CSS endless rotation animation - Stack Overflow
3 Likes
I did verify that this works:
/* Spin */
.psc-spin {
animation: spin 1s linear infinite;
transform-origin: center
}
@keyframes spin {
0% {
transform:rotate(0deg);
}
100% {
transform:rotate(360deg);
}
}
Then just apply style “spin”,
Fan.zip (9.5 KB)
1 Like
animation is the way to go like @Matthew.gaitan suggested
You can do like @Matthew.gaitan has shown, that will definitely work, however, you can also just piggyback on IA’s own animation class as well.
The animation value is:
ia_symbolComponent__animate--rotate linear infinite
The transform-origin comes from the center point used in element 4 of the SVG.
8 Likes
nice! I didn’t realize IA had their own animation class already built in
Sorry for the delay in getting back to these responses. I’m attempting to use the suggestion @lrose mentioned, but I cannot find the transform-origin or the animation in the list with I select the + sign next to style. Is there somewhere else I need to look?
Thanks
Many properties are not in the menus, but you can enter them manually.
1 Like
You have to type them in manually. Add a value and change the key as appropriate.
Thanks for the help.
One last question. I have the animation working now (I had a typo on the transform-origin). I would like this animation to be enabled when a tag is true (ie fans running). How would I go about doing this?
There are several ways, one method is to bind to the animation-duration property using an expression. When you want it stopped write 0ms, when you want it running write a non-zero value.
Something like this,
if({[MyTags]Running},'2000ms','0ms')
1 Like
That worked! Thanks!
