First, I love this addition to HA, and use it extensively on my UI. I have a fan automation and use mdi:fan as the icon on a button. I also used the “spin” attribute to animate the fan when it is ON. Really cool!
What I didn’t like though, is that the fan spins backwards! I looked into it a bit, and found a way to style the icon to flip horizontal, which worked like a charm, as long as it was off. As soon as it turned on, however, it flipped back and spun in the wrong direction as before. The style is not honored in the JS.
So, I looked a little deeper and found the code for the rotation effect (spin) at about line 1302, and added “reverse” to the CSS, and saved the updated JS file to my config/www folder in place of the original. The lines now look like this:
[rotating] {
-webkit-animation: rotating 2s linear infinite reverse;
-moz-animation: rotating 2s linear infinite reverse;
-ms-animation: rotating 2s linear infinite reverse;
-o-animation: rotating 2s linear infinite reverse;
animation: rotating 2s linear infinite reverse;
}
and it works wonderfully. Just a shout out to RomRider and all who have worked on this code. Perhaps they might consider adding a spin-reverse option to the State section. In the meantime, for others who just can’t get over their fans running backwards, here is an easy solution. My contribution.
Cheers
UPDATE: Hmm… but what’s interesting is that the mobile app for iphone still shows it going the wrong way! How can that be? They should be using the same JS file, located on my host. Even a refresh and updating the app didn’t help. Maybe the browser in the app doesn’t support the ‘reverse’ CSS option? I find that hard to believe. I even updated the resource in Lovelace on the iPhone, thinking maybe it had cached the JS file somewhere. Maybe I’m missing something.