Mushroom template-card with icon animation

Configuration Frontend
1

Hi all,

I am using this code:

type: custom:mushroom-template-card
primary: 'IR Empfänger: {{ ''ein'' if states(entity) == ''on'' else ''aus'' }}'
multiline_secondary: true
secondary: ''
icon: mdi:leak
tap_action:
  action: toggle
icon_color: '{{ ''green'' if states(entity) == ''on'' else ''#636363'' }}'
badge_icon: ''
fill_container: false
entity: binary_sensor.ir_input
card_mod:
  style:
    mushroom-shape-icon$: |
      .shape {
          
         --icon-symbol-size: 20px;
           --icon-size: 40px;
             {% set light_state = states(config.entity) %}
            {% if light_state == 'on' %}
            --shape-animation: ping 8s infinite; 
           }
           @keyframes ping {
           0% {box-shadow: 0 0 0 0 green }

            90% {box-shadow: 0 0 0 10px transparent;}
            100% {box-shadow: 0 0 0 0 transparent;}
                 }
              {% else %} 
              {% endif %}
    mushroom-state-info$: |
      .container {
        --card-primary-font-size: 12px;
              }
    .: |
      ha-card{
       border: none !important;
       --card-primary-color: grey;
         }

as soon as the ir-sensor switches from off to on, the animation starts. (@keyframe ping). The detection sequense off-on-off is very short, and you will not see really a detection.

Is there a possibliliy to set the icon color to green for at least 5s and to repeat the keyframe ping during this time or do I have to set the delay within the automation when the ir switches from off to on!

What is beste way to get this solved?

2

I believe the easiest way is to adjust the delay within the automation or create a script. The animation and the color change are only looking at the state of the entity.

3

hm!
ok, let me try to understand.
I use the entity trigger of “binary_sensor.ir_input” (edge from off-> on) to set a helper entity to “on” for e.g. 2s
Then this helper entity triggers my automation and is also used as entity in the template-card.

4

Yes sir…The delay is built into the automation and the automation is triggered by the binary sensor.

type: custom:mushroom-template-card
primary: 'IR Empfänger: {{ ''ein'' if states(entity) == ''on'' else ''aus'' }}'
multiline_secondary: true
secondary: ''
icon: mdi:leak
tap_action:
  action: toggle
icon_color: '{{ ''green'' if states(entity) == ''on'' else ''#636363'' }}'
badge_icon: ''
fill_container: false
entity: input_boolean.test4
card_mod:
  style:
    mushroom-shape-icon$: |
      .shape {
        {% set light_state = states('input_boolean.test4') %}
        {% if light_state == 'on' %}
        --shape-animation: ping 1s infinite;
        }
       @keyframes ping {
        0% {box-shadow: 0 0 0 0 green;}
        70% {box-shadow: 0 0 0 10px transparent;}
        100% {box-shadow: 0 0 0 0 transparent;}
        }
        {% endif %}
        }

image

5

Hi,

I have it now implemented and it works fine! Now, I wanted to add the icon wobbling, but I do not find a way to integrate this code

card_mod:
  style: |
    ha-state-icon {
      animation: wobbling 0.7s linear infinite alternate;
    }
    @keyframes wobbling {
      0% {transform: rotate(-80deg);}
      100% {transform: rotate(40deg);}
    }

into my existing code.

type: custom:mushroom-template-card
primary: |-
  IR Empfänger:
  {{ 'aus' if (states("switch.k05_ir_sender") == 'off') else
     'idle' if (states("switch.k05_ir_sender") == 'on') else
     'detect' if (states(entity) == 'on')
  }}
multiline_secondary: true
secondary: ''
icon: mdi:leak
tap_action:
  action: none
icon_color: |-
  {{ '#636363' if (states("switch.k05_ir_sender") == 'off') else
     'green' if (states("switch.k05_ir_sender") == 'on') else
     '#FFC107' if (states(entity) == 'on')
  }}
badge_icon: ''
fill_container: false
entity: input_boolean.delay_ir_detection
hold_action:
  action: none
double_tap_action:
  action: none
card_mod:
  style:
    mushroom-shape-icon$: |
      .shape 
       {
        --icon-symbol-size: 20px;
        --icon-size: 40px;
        --shape-color: transparent !important;
           {% set state = states(config.entity) %}
           {% if state == 'on' %}
             --shape-animation: ping 2s infinite; 
           {% else %} 
           {% endif %}
       }
          @keyframes ping
          {
           0% {box-shadow: 0 0 0 0 #DC143C }
           90% {box-shadow: 0 0 0 3px transparent;}
           100% {box-shadow: 0 0 0 0 transparent;}
          }
    mushroom-state-info$: |
      .container {
        --card-primary-font-size: 14px;
              }
    .: |
      ha-card{
       border: none !important;
       --card-primary-color: #E0E0E0;
         }

If I try to add the “ha.state-icon”-section, it get a “configuration error”.

6

chrome-capture-2024-4-10 (1)
This should do it for you…

type: custom:mushroom-template-card
primary: |-
  IR Empfänger:
  {{ 'aus' if (states("switch.k05_ir_sender") == 'off') else
     'idle' if (states("switch.k05_ir_sender") == 'on') else
     'detect' if (states(entity) == 'on')
  }}
multiline_secondary: true
secondary: ''
icon: mdi:leak
tap_action:
  action: none
icon_color: |-
  {{ '#636363' if (states("switch.k05_ir_sender") == 'off') else
     'green' if (states("switch.k05_ir_sender") == 'on') else
     '#FFC107' if (states(entity) == 'on')
  }}
badge_icon: ''
fill_container: false
entity: input_boolean.delay_ir_detection
hold_action:
  action: toggle
double_tap_action:
  action: none
card_mod:
  style:
    mushroom-shape-icon$: |
      .shape 
       {
        --icon-symbol-size: 20px;
        --icon-size: 40px;
        --shape-color: transparent !important;
           {% set state = states(config.entity) %}
           {% if state == 'on' %}
             --shape-animation: ping 2s infinite, wobbling 0.7s linear infinite alternate; 
           {% else %} 
           {% endif %}
           }
          @keyframes ping
          {
           0% {box-shadow: 0 0 0 0 #DC143C }
           90% {box-shadow: 0 0 0 3px transparent;}
           100% {box-shadow: 0 0 0 0 transparent;}
          }
         @keyframes wobbling {
          0% {transform: rotate(-80deg);}
          100% {transform: rotate(40deg);}
          }
    mushroom-state-info$: |
      .container {
        --card-primary-font-size: 14px;
              }
    .: |
      ha-card{
       border: none !important;
       --card-primary-color: #E0E0E0;
         }
7

Thank you very much!

I tried it in a similar way, but it seems to be that there are some errors in my code! I will check it again!

8

Try the code I posted in it’s own card and use a different entity like a light. That will determine if its the automation or your code.

9

Hi again,

now it is clear and thanks for support. I found the issue and everthing is fine!
Great support, thanks!

1 Like