#Mushroom animation | Solar panels

1 messages · Page 1 of 1 (latest)

humble tendon
#

Hi all,

Playing around with a mushroom card for my solar panels when power is being generated. Right now I have the base:

type: custom:mushroom-template-card
icon: mdi:solar-power-variant
icon_color: amber
primary: Solar Panel
card_mod:
  style: |
    ha-state-icon {
        animation: rays 2s infinite;
      }
      @keyframes rays {
        0%, 100% { clip-path: inset(0 0 0 0); }
        80% { clip-path: polygon(100% 99%, 0% 99%, 11% 50%, 57% 48%, 56% 31%, 41% 31%, 33% 25%, 29% 18%, 27% 11%, 27% 6%, 74% 6%, 73% 15%, 69% 23%, 62% 29%, 71% 42%, 87% 47%); }
      }

I want to add an " if is_state" and came up with the idea of, if this sensor sensor.envoy_122325142784_current_power_production (this is one solar panel) is not 0, then play the animation.
But I don't really know the correct syntax for the != state.

I tried this:
{{ 'animation: rays 2s infinite;' if is_state('sensor.envoy_122325142784_current_power_production')| int != 0 %}}

But that doesnt seem to work. Any tips on how to achieve the is not 0 state?
Thanks!

#

Nvm, this seems to work:

icon: mdi:solar-power-variant
icon_color: amber
primary: Solar Panel
card_mod:
  style: |
    ha-state-icon {
      {% if states('sensor.envoy_122325142784_current_power_production') | int != 0 %}
      animation: rays 2s infinite;
      {% else %}
      animation: none;
      {% endif %}
    }
    @keyframes rays {
      0%, 100% { clip-path: inset(0 0 0 0); }
      80% { clip-path: polygon(100% 99%, 0% 99%, 11% 50%, 57% 48%, 56% 31%, 41% 31%, 33% 25%, 29% 18%, 27% 11%, 27% 6%, 74% 6%, 73% 15%, 69% 23%, 62% 29%, 71% 42%, 87% 47%); }
    }

If anyone ever needs something simular 🙂

upbeat condor
#

What does this end up looking like? do you need another plug-in or integration to make it animate?

humble tendon