Trouble with spinning icon logic in mushroom template card

Configuration Frontend
1

Hey all,
I am trying to get my template card to spin the icon if the hvac is running, but can't get it to work with if/then logic. Below is what I am trying and have tried move the if statement around, but no luck. Anyone know how I should structure this?

I know this would only spin the icon if the hvac is "cooling", but I can fix that once I know what I am doing wrong with the if/then

type: custom:mushroom-template-badge
icon: mdi:fan
color: red
entity: climate.downstairs
label: Downstairs
content: "{{ state_attr_translated(entity, 'hvac_action') }}"
card_mod:
  style: |
    ha-state-icon {
      animation: 
        {% if is_state_attr(entity, 'hvac_action', 'cooling') %} 
        spin 1s linear infinite;
        {% endif %}
    }
    @keyframes spin {
      0% {transform: rotate(0deg);}
      100% {transform: rotate(360deg);}
    }
2

0deg = 360deg so keyframe will be doing nothing.

Perhaps try a 50% in there as well.

    @keyframes spin {
      0% {transform: rotate(0deg);
      50% {transform: rotate(180deg);
      100% {transform: rotate(360deg);
    }
3 
{% if is_state_attr(config.entity
4

The spinning animation works without the if statement. As soon as I try and put some logic around it, it stops. Adding the extra keyframe does not fix this.

5

It's probably because there's no return when the hvac_action isn't cooling. Your template outputs nothing to the animation field. I'd wager that's not valid.

6

I've tried it with idle, to match the hvac_action,` and with an else:

card_mod:
  style: |
    ha-state-icon {
      animation: 
        {% if is_state_attr(entity, 'hvac_action', 'cooling') %} 
        spin 1s linear infinite;
        {% else %}
        spin 1s linear infinite;
        {% endif %}
    }
    @keyframes spin {
      0% {transform: rotate(0deg);}
      100% {transform: rotate(360deg);}
    }

Still no spin.

7

what does dev tools say? Have you cleared your cache and refreshed the page?

8

Dev tools helped. It wanted the entity spelled out explicitly ('climate.downstairs', not entity). Looks to be working now. Thank you.

type: custom:mushroom-template-badge
icon: mdi:fan
color: red
entity: climate.downstairs
label: Downstairs
content: "{{ state_attr_translated('climate.downstairs', 'hvac_action') }}"
card_mod:
  style: |
    ha-state-icon {
      animation: 
        {% if is_state_attr('climate.downstairs', 'hvac_action', 'cooling') %} 
        spin 1s linear infinite;
        {% else %}
        spin 1s linear infinite;
        {% endif %}
    }
    @keyframes spin {
      0% {transform: rotate(0deg);}
      100% {transform: rotate(360deg);}
    }
9

Just to note you can use the special config.entoty to refer to the entity used in the card config.

1 Like