Hello dear community,
I have been working with Home Assistant for a good two years now. My primary focus has been on automation. Since many of them work to my satisfaction, I would like to develop a nice dashboard for them. But this is where my gaps in knowledge of YAML and Jinja2 become apparent 
. On my dashboard, I mainly use the Mushroom Theme and Mushroom Cards. Here is an example of my card for a person, zone, smartphone battery level and information on whether the smartphone is charging or not.
In the same style, I selected animation 42 from Anashost on GitHub and attempted to adapt it. I made some progress with the assistance of Gemini and ChatGPT, but I am not entirely satisfied yet. Perhaps you could assist me?
What do I have?
- An automation that works
- A helper that switches when the machine is running or finished
- A power sensor for the washing machine socket
- A helper that calculates the running time
- An animation that basically works, but is not âperfectâ and in 2 cards
- Template from Anashost and inspiration from member @LiQuid_cOOled and his post
- YAML code, see attachment
What is my target?
- An animated card where I can see whether
â whether the machine is running (animated) including a badge (icon), the text ârunningâ and the current consumption in watts
â is standing but still on (pulsing green? or icon in green) including badge (icon), the text âfinishedâ and the running time
â is off, without animation and grey, including badge (icon), the text âoffâ - all in ONE card
Conditions that are implemented:
- Machine running = helper input.boolean is on and power sensor is above 20 watts
- Machine finished = helper input.boolean is off BUT power sensor is above 5 watts
- Machine off = helper input.boolean is off and power sensor is 0 watts
I canât get the three states to appear in the animated icon and I canât get it to work on ONE map. Unfortunately, Iâm stuck here and hope you can help me.
I know:
âMuch to learn you still have.â and âPatience you must have, my young Padawan.â
Perhaps someone can point me in the right direction or also another ideas. 
YAML Person Card
type: custom:mushroom-template-card
secondary: |-
{% set bl = states('sensor.poco_x7_pro_ronny_battery_level') | int %}
{% set bs = states('sensor.poco_x7_pro_ronny_battery_state') %}
{% if bl < 15 %}
đȘ« {{ bl }} %
{% elif bs == 'charging' %}
⥠{{ bl }} %
{% else %}
đ {{ bl }} %
{% endif %}
icon: mdi:account
features_position: bottom
entity: person.ronny
primary: |-
{% set loc = states('person.ronny') %}
{% set map = {
"home": "Zuhause",
"not_home": "Unterwegs",
"Schule": "Schule",
"Uni Freiberg PrĂŒferstraĂe": "Uni",
"Uni Freiberg Gustav-Zeuner-StraĂe": "Uni",
"Uni Freiberg WinklerstraĂe": "Uni",
"Constantins Wohnung": "Wohnung"
} %}
{{ map.get(loc, loc) }}
picture: "{{ state_attr('person.ronny', 'entity_picture') }}"
badge_icon: |-
{% set location = states(entity) %}
{% if location == 'not_home' %}
mdi:home-export-outline
{% elif location == 'home' %}
{{ state_attr('zone.home', 'icon') or 'mdi:home' }}
{% else %}
{{ states.zone | selectattr('name', 'eq', location)
| map(attribute='attributes.icon') | first | default('mdi:map-marker') }}
{% endif %}
badge_color: |-
{% if is_state(entity, "home") %}
green
{% elif is_state(entity, "not_home") %}
red
{% else %}
light-blue
{% endif %}
color: |2-
{% if is_state(entity, ["home"]) -%}
var(--rgb-accent-color)
{%- endif %}
multiline_secondary: false
grid_options:
columns: 5
rows: auto
card_mod:
style: |
ha-card {
background: transparent;
border-color: transparent;
border-radius: 18px;
color: #ffffff;
}
current animation washing-machine
type: custom:mushroom-entity-card
entity: input_boolean.waschmaschine_lauft
tap_action:
action: toggle
icon: mdi:washing-machine
icon_color: blue
name: Waschmaschine
primary_info: none
secondary_info: none
card_mod:
style:
mushroom-shape-icon$: >
{% set power = states('sensor.steckdose_waschmaschine_energy_power') |
float(0) %}
{% set running = is_state('input_boolean.waschmaschine_lauft', 'on') %}
{% set active = running and power > 0 %}
{% set ready = (not running) and power > 0 %}
.shape {
{% if active %}
--icon-color: rgb(var(--rgb-blue));
--wash-glow: ultra-wash-glow 1.8s ease-in-out infinite;
--wash-drum: spin-laundry 0.6s linear infinite;
animation: ultra-wash-thump 1.8s ease-in-out infinite;
opacity: 1;
{% elif ready %}
--icon-color: rgb(var(--rgb-green));
--wash-glow: none;
--wash-drum: none;
animation: none;
opacity: 1;
{% else %}
--icon-color: rgb(var(--rgb-disabled));
--wash-glow: none;
--wash-drum: none;
animation: none;
opacity: 0.6;
{% endif %}
isolation: isolate;
position: relative;
}
.shape::after {
content: "";
position: absolute;
top: 58%;
left: 50%;
width: 24px;
height: 24px;
border-radius: 50%;
background: conic-gradient(
transparent,
var(--icon-color),
transparent
);
transform: translate(-50%, -50%);
animation: var(--wash-drum);
{% if not active %}
display: none;
{% endif %}
}
.shape::before {
content: "";
position: absolute;
inset: -4px;
border-radius: 50%;
animation: var(--wash-glow);
}
@keyframes spin-laundry {
0% { transform: translate(-50%, -50%) rotate(0deg); }
100% { transform: translate(-50%, -50%) rotate(360deg); }
}
@keyframes ultra-wash-glow {
0% {
box-shadow:
0 0 10px 3px rgba(var(--rgb-blue), 0.6),
0 0 20px 8px rgba(var(--rgb-blue), 0.3);
}
50% {
box-shadow:
0 0 18px 6px rgba(var(--rgb-blue), 0.9),
0 0 32px 12px rgba(var(--rgb-blue), 0.4);
}
100% {
box-shadow:
0 0 10px 3px rgba(var(--rgb-blue), 0.6),
0 0 20px 8px rgba(var(--rgb-blue), 0.3);
}
}
.: |
ha-card {
background: transparent;
border-color: transparent;
border-radius: 18px;
color: #ffffff;
}
2nd card washing machine
type: custom:mushroom-template-card
entity: sensor.steckdose_waschmaschine_energy_power
primary: |
{% set power = states(entity) | float(0) %} {% if power == 0 %}
aus
{% elif is_state('input_boolean.waschmaschine_lauft', 'on') %}
lÀuft
{% else %}
fertig/bereit
{% endif %}
secondary: |-
{% set power = states(entity) | float(0) %}
{% if power == 0 %}
{% elif is_state('input_boolean.waschmaschine_lauft', 'on') %}
{{ power | round(0) }} W
{% else %}
{{ states('input_number.dauer_letzter_waschgang') | int }} min
{% endif %}
icon: mdi:power-plug
badge_icon: |
{% set power = states(entity) | float(0) %} {% if power == 0 %}
mdi:power-off
{% elif is_state('input_boolean.waschmaschine_lauft', 'on') %}
mdi:progress-clock
{% else %}
mdi:check-circle
{% endif %}
badge_color: |
{% set power = states(entity) | float(0) %} {% if power == 0 %}
grey
{% elif is_state('input_boolean.waschmaschine_lauft', 'on') %}
blue
{% else %}
green
{% endif %}
features_position: bottom
multiline_secondary: false
card_mod:
style: |
ha-card {
background: transparent;
border-color: transparent;
border-radius: 18px;
color: #ffffff;
}
visibility:
- condition: screen
media_query: "(min-width: 768px)"
grid_options:
columns: 5
rows: 1
Little legend for translation:
Schule = School
steckdose_waschmaschine = plug washing machine
waschmaschine_lauft = washmachine is running
dauer_letzter Waschgang = duration of last wash cycle
Thank you all in advance for trying to help me.
Ronny
