Picture Element card using card_mod for state-based icon rotation

Configuration Frontend
#1

I’ve got a picture-elements card configured nicely. I wanted to add custom CSS to get a fan icon rotating, so I’ve installed card-mod. Using this great post as a starting point, I can make an icon (ha-svg-icon) rotate, but I can’t make it state-based.

If I try to add a [data-state="on"] attribute selector to the ha-icon element, it applies too high up in the CSS, and only gets injected if it matches the state at page refresh.

type: picture-elements
image: /local/home.svg
elements:
  - type: state-icon
    entity: switch.fan
    icon: mdi:fan
    tap_action:
      action: toggle
    style:
      top: 17.5%
      left: 6%
    card_mod:
      style:
        state-badge:
          $:
            ha-icon[data-state="on"]:
              $: |
                ha-svg-icon {
                  animation: rotation 2s linear infinite;
                }
                @keyframes rotation {
                  0% {
                    transform: rotate(0deg);
                  }
                  100% {
                    transform: rotate(360deg);
                  }
                }

If I move the CSS up to the ha-icon, it selectively applies by state in real-time (no refresh required, red background added for testing), but it doesn’t rotate! :sob:

    card_mod:
      style:
        state-badge:
          $: |
            ha-icon[data-state="on"] {
              animation: rotation 2s linear infinite;
              background: red;
            }
            @keyframes rotation {
              0% {
                transform: rotate(0deg);
              }
              100% {
                transform: rotate(360deg);
              }
            }

What am I doing wrong? Why does the ha-icon refuse to rotate, when the ha-icon-svg is happy to?

How to rotate a camera view in a `Picture Glance Card`?
#2

Better use this post.
The style must be applied if some conditions are met.
What are your conditions?

#3

Thanks @Ildar_Gabdullin.
The examples look similar enough to me, regarding rotating fan icons anyway. My condition is [data-state="on"].

I can rotate the ha-svg-icon element just fine, but it is too far down the DOM to use the data-state on ha-icon. And I can’t rotate the ha-icon.

#4

By condition I mean smth like “states(‘some_entity’) == SMTH”.

#5

Oh, you’re saying I should do the condition check through HA state instead of using a CSS selector for the data attribute? Ok, I’ll have a look into that tomorrow. Never tried it.

#6

Not sure if this is any help but this is how I rotate and change colour based on state

            card_mod:
              style:
                hui-generic-entity-row:
                  $:
                    state-badge:
                      $:
                        ha-icon:
                          $: |
                            ha-svg-icon {
                              color: {{ '#FDD835' if states(config.entity) == 'on' else '#44739E'}};
                              animation:
                              {% if states(config.entity) == 'on' -%}
                                rotation 2s linear infinite;
                              {% else %} null
                              {% endif %}
                            }
                            @keyframes rotation {
                              0% {
                                transform: rotate(0deg);
                              }
                              100% {
                                transform: rotate(360deg);
                              }
                            }
1 Like
#7

Thanks @Holdestmade, that example was great. I found some relevant doco and switched to using is_state().

Just for anyone else, you need quotes around the entity name. This is a snippet of my complete element:

type: picture-elements
image: /local/home.svg
elements:
  - type: state-icon
    entity: switch.fan
    icon: mdi:fan
    tap_action:
      action: toggle
    style:
      top: 17.5%
      left: 6%
    card_mod:
      style:
        state-badge:
          $:
            ha-icon:
              $: |
                ha-svg-icon {
                  {% if is_state('switch.fan', 'on') %}
                    animation: rotation 2s linear infinite;
                  {% endif %}
                }
                @keyframes rotation {
                  0% {
                    transform: rotate(0deg);
                  }
                  100% {
                    transform: rotate(360deg);
                  }
                }
#8

I can’t seem to get this working, does this code still work for you?

#9

Doesn’t work for me either… First time trying.

@i_leeder do you still use this and does it still work with current HA?

#10

@arrikhan

I have use this peace of code for my own fan in the study

  - type: state-icon
    entity: fan.study_fan
    title: Study Fan
    tap_action:
      action: toggle
    style:
      top: 25%
      left: 88%
    card_mod:
      style:
        state-badge:
          $:
            ha-state-icon:
              $:
                ha-icon:
                  $: |
                    ha-svg-icon {
                      {% if is_state('fan.study_fan', 'on') %}
                        animation: rotation 2s linear infinite;
                      {% endif %}
                    }
                    @keyframes rotation {
                      0% {
                        transform: rotate(0deg);
                      }
                      100% {
                        transform: rotate(360deg);
                      }
                    }
1 Like
#13

Sorry @arrikhan / @renk1, I have barely used this since I set it up. Took me a few minutes to even find where this was configured!! Anyway, apparently it doesn’t work anymore :pensive: No more rotation.

If I get time/inspiration to look into it AND I find a fix, I’ll post back.

#14

@coenie’s code above works. All good !

#15

if anyone is still interested :slight_smile: heres a youtube tutorial from an awsome dude " [3ATIVE VFX Studio] "
https://www.youtube.com/watch?v=0wg9bdnGD00