Spartacus
April 8, 2024, 2:58pm
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?
Spartacus:
{% else %}
{% endif %}
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.
Spartacus
April 8, 2024, 8:13pm
3
hm!
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 %}
}
Spartacus
April 10, 2024, 9:09pm
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”.
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;
}
Spartacus
April 11, 2024, 6:20am
7
LiQuid_cOOled:
.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);}
}
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!
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.
Spartacus
April 11, 2024, 9:07am
9
Hi again,
now it is clear and thanks for support. I found the issue and everthing is fine!
1 Like
yngwiebach
March 6, 2025, 1:26pm
10
Hello i have stolen this code. However whatever i try it won’t change the background color. The animations work. I managed to change the icon. But it’s either a background or an animation but i cannot get both to work.
Does anyone have an idea? Thank you so much.
type: custom:mushroom-template-card
primary: ""
multiline_secondary: true
secondary: ""
icon: >-
{{ 'mdi:radiator-disabled' if (states("climate.kachel_kinderkam") == 'off')
else
'mdi:fire' if (states("climate.kachel_kinderkam") == 'heat') else
'mdi:radiator-off' if (states(entity) == 'unavailable')
}}
tap_action:
action: toggle
icon_color: |-
{{ 'green' if (states("climate.kachel_kinderkam") == 'off') else
'orange' if (states("climate.kachel_kinderkam") == 'heat') else
'#FFC107' if (states(entity) == 'unavailable')
}}
badge_icon: ""
fill_container: false
entity: climate.kachel_kinderkam
hold_action:
action: more-info
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 == 'heat' %}
--shape-animation: ping 2s infinite, wobbling 0.7s linear infinite alternate;
{% else %}
{% endif %}
}
@keyframes ping
{
0% {box-shadow: 0 0 0 0 orange }
90% {box-shadow: 0 0 0 4px transparent;}
100% {box-shadow: 0 0 0 0 transparent;}
}
@keyframes wobbling {
0% {transform: rotate(-20deg);}
100% {transform: rotate(20deg);}
}
mushroom-state-info$: |
.container {
--card-primary-font-size: 14px;
}
.: |
ha-card{
border: none !important;
--card-primary-color: blue;
}
Edit:
ha-card {
background: blue;
box-shadow: none;
}
And now it all works.
