one thing Ive noticed ā¦ change your theme from say mushroom to mushroom shadow and watch your problems disappear
devi vedere lāanimazione per i chip
I donāt know what to suggest, I pasted your code into my dashboard and it worked fine.
Is your indentation correct? Have you tried pasting the code further up or down your page to see if it shows up?
Iām trying some state-based confirmation in a mushroom template card. Hereās what I have:
type: custom:mushroom-template-card
entity: switch.living_room_table_lamp
tap_action:
action: toggle
confirmation:
text: >-
{% set state = (states.switch.living_room_table_lamp.state) %} {% if state
== 'on' %}
null
{% else %}
Are you sure you want to turn on the stove?
{% endif %}
hold_action:
action: more-info
primary: Living Room Stove
secondary: >-
{% set state = (states.switch.living_room_table_lamp.state) %} {% set changed
= as_timestamp(states.switch.living_room_table_lamp.last_changed) %} {% set
diff2 = as_timestamp(now()) - changed %} {% if diff2 <= 1 %}
Just turned {{state}}
{% elif diff2 <= 59 %}
Turned {{state}} {{diff2 | round(0) }} seconds ago
{% elif diff2 <= 3599 and ((diff2/60) | round(0)) == 1 %}
Turned {{state}} 1 minute ago
{% elif diff2 <= 3599 %}
Turned {{state}} {{ (diff2/60) | round(0) }} minutes ago
{% elif diff2 <= 86399 and ((diff2/3600) | round(0)) == 1 %}
Turned {{state}} 1 hour ago
{% elif diff2 <= 86399 %}
Turned {{state}} {{(diff2/3600) | round(0) }} hours ago
{% elif diff2 >= 86400 and ((diff2/86400) | round(0)) == 1 %}
Turned {{state}} 1 day ago
{% elif diff2 >= 86400 %}
Turned {{state}} {{(diff2/86400) | round(0) }} days ago
{% else %}
Unknown
{% endif %}
icon: |-
{% if is_state('switch.living_room_table_lamp', 'on') %}
mdi:fire
{% else %}
mdi:fire-off
{% endif %}
icon_color: |-
{% if is_state('switch.living_room_table_lamp', 'on') %}
deep-orange
{% else %}
#6f6f6f
{% endif %}
style: |
ha-card {
{% if is_state('switch.living_room_table_lamp', 'on') %}
background-color: rgba(255, 0, 0, 0.24);
{% else %}
background-color: rgba(7, 103, 215, 0.24);
{% endif %}
}
Just assume all references to ālampā mean āstove;ā during testing, I donāt want the stove going on and off.
What I want is for confirmation to appear only when the stove is off; if the stove is on, I donāt need confirmation to shut it off. All of the other state-based stuff is working: icon, color, secondary text, background colorā¦ however, my confirmation dialog appears with the full text including {% %}, etc.
EDIT: This doesnāt work, either:
tap_action:
action: toggle
confirmation:
text: |-
{% set state = (states.switch.living_room_table_lamp.state) %}
{% if state == 'off' %}
Are you sure you want to turn on the stove?
{% endif %}
Same issueā¦ the full text between {% and %} appears in the confirmation box.
I know its possible to split ui-lovelace.yaml and views
But is it possible to split even further?
building a dashboard with one view and going to use a lot of browser_mod.popup
- type: vertical-stack
cards:
include! /bla bla bla
or anyone know if its possible to do in browser_mod.popup
data: !include file?
Thanks @SteffenDE,
I used your card example and modified for my purposes:
This is what I have now (bottom card):
However the drum is flashing and i would like to get it spinning like the top one.
Any ideas on how you can modify the animation?
Here is the code:
type: custom:vertical-stack-in-card
card_mod:
style: |
ha-card {
height: 130px !important;
}
horizontal: false
cards:
- type: custom:mushroom-template-card
card_mod:
style:
mushroom-shape-icon$: >
{% if
is_state('sensor.electrolux_sawa_washing_machine_wm1_appliancestate',
'Running') %}
ha-icon {
--icon-animation: shake 400ms ease-in-out infinite, drum 2s ease infinite;
transform-origin: 50% 110%;
}
@keyframes shake {
0%, 100% { transform: translate(0, 0) rotate(0); }
20% { transform: translate(0.4px, -0.4px) rotate(-4deg); }
40% { transform: translate(-0.4px, 0.4px) rotate(4deg); }
60% { transform: translate(0.4px, 0.4px) rotate(-4deg); }
80% { transform: translate(-0.4px, -0.4px) rotate(4deg); }
}
@keyframes drum {
40% { clip-path: polygon(0 0, 0 100%, 35% 100%, 34% 68%, 60% 41%, 71% 56%, 65% 74%, 47% 79%, 32% 69%, 35% 100%, 100% 100%, 100% 0); }
}
{% endif %}
entity: sensor.electrolux_sawa_washing_machine_wm1_appliancestate
layout: horizontal
multiline_secondary: false
primary: |2-
{% set d ={
'Delayed start': 'Delayed Start',
'Running': 'Running',
'Cycle is finished': 'Cycle Ended',
'Off': 'Off'
} %}
{{ d.get(states(entity)) }}
secondary: >
Time to End -
{{states('sensor.electrolux_sawa_washing_machine_wm1_timetoend')}} Min
{{states('sensor.electrolux_sawa_washing_machine_wm1_cyclephase')}}
{{states('sensor.electrolux_sawa_washing_machine_wm1_cyclesubphase')}}
icon: >-
{% if
is_state('sensor.electrolux_sawa_washing_machine_wm1_appliancestate',
'Running') %}
mdi:washing-machine
{% elif
is_state('sensor.electrolux_sawa_washing_machine_wm1_appliancestate',
'Cycle is finished') %}
mdi:washing-machine-alert
{% else %}
mdi:washing-machine
{% endif %}
icon_color: >-
{% set state=states(entity) %}
{% if state=='Running' %}
blue
{% elif state== 'Delayed start' %}
ornage
{% elif state== 'Cycle is finished' %}
purple
{% else %}
grey
{% endif %}
tap_action:
action: more-info
hold_action:
action: none
double_tap_action:
action: none
- type: custom:mushroom-chips-card
alignment: center
chips:
- type: template
icon: mdi:tshirt-crew-outline
entity: sensor.electrolux_sawa_washing_machine_wm1_programuid
double_tap_action:
action: none
tap_action:
action: none
hold_action:
action: none
content: '{{states(''sensor.electrolux_sawa_washing_machine_wm1_programuid'') }} '
- type: template
icon: mdi:thermometer
entity: sensor.electrolux_sawa_washing_machine_wm1_analogtemperature
double_tap_action:
action: none
tap_action:
action: none
hold_action:
action: none
content: >-
{{states('sensor.electrolux_sawa_washing_machine_wm1_analogtemperature')
}}Ā°C
- type: template
icon: mdi:alpha-s-circle-outline
entity: sensor.electrolux_sawa_washing_machine_wm1_analogspinspeed
double_tap_action:
action: none
tap_action:
action: none
hold_action:
action: none
content: >-
{{states('sensor.electrolux_sawa_washing_machine_wm1_analogspinspeed')
}}
- type: template
entity: binary_sensor.electrolux_sawa_washing_machine_wm1_doorlock
double_tap_action:
action: none
tap_action:
action: none
hold_action:
action: none
content: >-
{% set d ={ 'off': 'Locked', 'on': 'Unlocked', } %}
{{d.get(states(entity)) }}
icon: |-
{% set state=states(entity) %}
{% if state=='off' %}
mdi:lock
{% else %}
mdi:lock-open-outline
{% endif %}
Thanks in advance!
8 Likes
The code ypu posted is for which card? You should post the code for both cards. I would assume that an indent ist not right. You should compare carrs line by line or minimize them as much as possible. Linke create the Template with animation and if this works go to the next step.
By the was nice idea - I will copy it, if it is working 
The code is for the bottom card. The top card code is as follows:
type: custom:stack-in-card
cards:
- type: custom:mushroom-template-card
icon: |-
{% set state=states(entity) %}
{% if state=='Running' %}
mdi:washing-machine
{% elif state== 'Delayed start' %}
mdi:washing-machine
{% elif state== 'Cycle is finished' %}
mdi:washing-machine-alert
{% else %}
mdi:washing-machine
{% endif %}
icon_color: blue
entity: sensor.electrolux_sawa_washing_machine_wm1_appliancestate
primary: |2-
{% set d ={
'Delayed start': 'Delayed Start',
'Running': 'Running',
'Cycle is finished': 'Cycle Ended',
'Off': 'Off'
} %}
{{ d.get(states(entity)) }}
secondary: |
{{states('sensor.electrolux_sawa_washing_machine_wm1_timetoend')}} Min
{{states('sensor.electrolux_sawa_washing_machine_wm1_cyclephase')}}
card_mod:
style:
icon: |-
{% set state=states(entity) %}
{% if state=='Running' %}
mdi:washing-machine
{% else %}
mdi:washing-machine-off
{% endif %}
mushroom-shape-icon$: >
ha-icon {
{{ '--icon-animation: shake 400ms ease-in-out infinite;' if
is_state(config.entity, 'Running') }}
transform-origin: 50% 58%;
clip-path: polygon(0 0, 0 100%, 35% 100%, 34% 68%, 60% 41%, 71% 56%, 65% 74%, 47% 79%, 32% 69%, 35% 100%, 100% 100%, 100% 0);
}
@keyframes shake {
0%, 100% { transform: translate(0, 0) rotate(0); }
20% { transform: translate(0.4px, -0.4px) rotate(-4deg); }
40% { transform: translate(-0.4px, 0.4px) rotate(4deg); }
60% { transform: translate(0.4px, 0.4px) rotate(-4deg); }
80% { transform: translate(-0.4px, -0.4px) rotate(4deg); }
}
- type: custom:mushroom-template-card
icon: mdi:washing-machine
icon_color: red
card_mod: null
style:
mushroom-shape-icon$: |
ha-icon {
--icon-animation: spin 1s linear infinite;
transform-origin: 50% 58%;
clip-path: circle(21.7% at 50% 58%);
}
.shape {
--shape-color: none;
}
.: |
ha-card {
width: 80px;
top: -82px;
}
- type: custom:mushroom-template-card
entity: sensor.electrolux_sawa_washing_machine_wm1_cyclephase
- type: custom:mushroom-chips-card
alignment: center
chips:
- type: template
icon: mdi:tshirt-crew-outline
entity: sensor.electrolux_sawa_washing_machine_wm1_programuid
double_tap_action:
action: none
tap_action:
action: none
hold_action:
action: none
content: '{{states(''sensor.electrolux_sawa_washing_machine_wm1_programuid'') }} '
- type: template
icon: mdi:thermometer
entity: sensor.electrolux_sawa_washing_machine_wm1_analogtemperature
double_tap_action:
action: none
tap_action:
action: none
hold_action:
action: none
content: >-
{{states('sensor.electrolux_sawa_washing_machine_wm1_analogtemperature')
}}Ā°C
- type: template
icon: mdi:alpha-s-circle-outline
entity: sensor.electrolux_sawa_washing_machine_wm1_analogspinspeed
double_tap_action:
action: none
tap_action:
action: none
hold_action:
action: none
content: >-
{{states('sensor.electrolux_sawa_washing_machine_wm1_analogspinspeed')
}}
- type: template
entity: binary_sensor.electrolux_sawa_washing_machine_wm1_doorlock
double_tap_action:
action: none
tap_action:
action: none
hold_action:
action: none
content: >-
{% set d ={ 'off': 'Locked', 'on': 'Unlocked', } %}
{{d.get(states(entity)) }}
icon: |-
{% set state=states(entity) %}
{% if state=='off' %}
mdi:lock
{% else %}
mdi:lock-open-outline
{% endif %}
I abandoned the top card idea because I could not get the spin (drum) to work on condition and I could not set the height of the card.
The code I posted previously (bottom card) is a modification on @SteffenDE 's card.
The bottom card works but as I said the drum doesnāt spin.
The spinning drum is a modification on @rhysb animated washing machine which can be found here:
https://community.home-assistant.io/t/mushroom-cards-build-a-beautiful-dashboard-easily/388590/3272
1 Like
USE THIS:
type: custom:stack-in-card
cards:
- type: custom:mushroom-template-card
primary: Cucina
secondary: >-
{{ states('sensor.temperatura_soffitta') | round(0) }}Ā°C | {{
states('sensor.asciugatrice_consumo') | round(0)}}W
icon: mdi:fridge
entity: light.cancello
hold_action:
action: call-service
service: browser_mod.popup
target: {}
data:
dismissable: true
autoclose: false
title: Cucina
content:
type: vertical-stack
cards:
- type: custom:mushroom-chips-card
chips:
- type: back
- type: entity
entity: sensor.temperatura_soffitta
double_tap_action:
action: none
icon_color: purple
use_entity_picture: false
tap_action:
action: none
hold_action:
action: none
- type: entity
entity: sensor.umidita_soffitta
double_tap_action:
action: none
icon_color: cyan
tap_action:
action: none
hold_action:
action: none
- type: custom:mushroom-light-card
entity: light.comodino_mattia
name: Comodino
use_light_color: true
show_color_temp_control: true
show_color_control: true
show_brightness_control: true
layout: horizontal
- type: custom:mushroom-light-card
entity: light.camera_mattia
name: Camera
show_color_temp_control: true
use_light_color: true
show_brightness_control: true
show_color_control: true
tap_action:
action: toggle
icon_color: '{{ ''orange'' if is_state(entity, ''on'') else ''disabled'' }}'
fill_container: true
layout: horizontal
multiline_secondary: false
card_mod:
style: |
:host([dark-mode]) {
background: rgba(var(--rgb-primary-background-color), 0.2);
}
:host {
background: rgba(var(--rgb-primary-text-color), 0.025);
--mush-icon-size: 100px;
height: 84px;
margin-left: -28px !important;
}
- type: custom:mushroom-chips-card
chips:
- type: conditional
conditions:
- entity: light.cancello
state: 'on'
chip:
type: template
icon_color: disabled
icon: mdi:lightbulb-outline
tap_action:
action: more-info
entity: light.cancello
- type: conditional
conditions:
- entity: light.comodino_mattia
state: 'on'
chip:
type: template
icon_color: disabled
icon: mdi:lamp-outline
tap_action:
action: more-info
entity: light.comodino_mattia
- type: conditional
conditions:
- entity: binary_sensor.input_asciugatrice
state: 'on'
chip:
type: template
double_tap_action:
action: none
entity: binary_sensor.input_asciugatrice
icon: mdi:washing-machine
icon_color: grey
tap_action:
action: none
hold_action:
action: none
- type: conditional
conditions:
- entity: binary_sensor.input_asciugatrice
state: 'on'
chip:
type: template
entity: binary_sensor.input_asciugatrice
icon: mdi:washing-machine
icon_color: white
- type: conditional
conditions:
- entity: binary_sensor.input_asciugatrice
state: 'on'
chip:
type: template
double_tap_action:
action: none
entity: binary_sensor.input_asciugatrice
icon: mdi:microwave
icon_color: grey
tap_action:
action: none
hold_action:
action: none
alignment: end
card_mod:
style:
mushroom-conditional-chip:nth-child(3):
mushroom-template-chip$: |
ha-icon {
{{ 'animation: shake 400ms ease-in-out infinite;' if is_state('binary_sensor.input_asciugatrice', 'on') }}
transform-origin: 50% 58%;
clip-path: polygon(0 0, 0 100%, 35% 100%, 34% 68%, 60% 41%, 71% 56%, 65% 74%, 47% 79%, 32% 69%, 35% 100%, 100% 100%, 100% 0);
}
@keyframes shake {
0%, 100% { transform: translate(0, 0) rotate(0); }
20% { transform: translate(0.4px, -0.4px) rotate(-4deg); }
40% { transform: translate(-0.4px, 0.4px) rotate(4deg); }
60% { transform: translate(0.4px, 0.4px) rotate(-4deg); }
80% { transform: translate(-0.4px, -0.4px) rotate(4deg); }
}
mushroom-conditional-chip:nth-child(4):
mushroom-template-chip$: |
mushroom-chip {
cursor: default !important;
}
ha-icon {
position: absolute;
left: -27px;
{{ 'animation: spin 1s linear infinite;' if is_state('binary_sensor.input_asciugatrice', 'on') }}
transform-origin: 50% 58%;
clip-path: circle(21.7% at 50% 58%);
}
@keyframes spin {
100% { transform: rotate(360deg); }
}
mushroom-conditional-chip:nth-child(5):
mushroom-template-chip$: |
ha-icon:before {
content: "";
position: absolute;
width: 25%;
height: 25%;
margin: 11%;
animation: cook 1s linear infinite;
}
@keyframes cook {
0%, 100% { background: linear-gradient(90deg, white 0%, transparent 50%, transparent 100%); }
33% { background: linear-gradient(90deg, transparent 0%, white 50%, transparent 100%); }
66% { background: linear-gradient(90deg, transparent 0%, transparent 50%, white 100%); }
}
.: |
.chip-container :nth-child(4) {
--chip-background: none;
--chip-box-shadow: none;
--chip-border-width: 0;
width: 0px;
margin-left: calc(-1 * var(--chip-spacing));
}
ha-card {
--chip-box-shadow: none;
--chip-background: none;
--chip-spacing: 0;
}
card_mod:
style: |
ha-card {
height: 120px;
{% if is_state('light.cancello', 'on') %}
background: rgba(255, 152, 0, 0.1);
{% endif %}
}
2 Likes
Try with This :
Guys how would I go about changing the badge icon text color to adapt to light/dark mode? Currently itās black.
mushroom-badge-icon:after {
content: "{{ expand(states.light.living_room_all_lights) | selectattr( 'state', 'eq', 'on') | list | count }}";
position: absolute;
display: flex;
justify-content: center;
align-items: center;
background: rgb(var(--rgb-orange));
color: black;
font-weight: bolder;
border-radius: 50%;
top: 0;
width: 100%;
height: 100%;
font-size: 0.8em;
}
1 Like
Never got a response on this one ā is it possible to override the āstandbyā color for a media card? Iād like it to be blue, regardless of state.
Is it possible to get help please?
I want to change the code and I donāt know how. If the value is over 20, letās say rotate the icon. Can someone help me change this please?
icon_washer_2:
styles:
custom_fields:
icon:
- width: 78%
- margin-left: -6%
custom_fields:
icon: >
[[[
let center = `
<path d="M31.8,23.1c3.8,3.8,3.8,9.8,0,13.6c-3.8,3.8-9.8,3.8-13.6,0L31.8,23.1"/>
<path fill="none" d="M25,15.4c-8,0-14.4,6.4-14.4,14.4S17,44.3,25,44.3s14.4-6.4,14.4-14.4S33,15.4,25,15.4z"/>
`,
base = `
<path fill="#9da0a2" d="M10.6,1.1h28.7c2.6,0,4.8,2.1,4.8,4.8v38.4c0,2.6-2.1,4.8-4.8,4.8H10.6c-2.6,0-4.8-2.1-4.8-4.8V5.8C5.8,3.2,8,1.1,10.6,1.1 M13.1,5.8c-1.4,0-2.4,1.1-2.4,2.4c0,1.4,1.1,2.4,2.4,2.4s2.4-1.1,2.4-2.4S14.3,5.8,13.1,5.8 M20.2,5.8c-1.4,0-2.4,1.1-2.4,2.4 c0,1.4,1.1,2.4,2.4,2.4c1.4,0,2.4-1.1,2.4-2.4S21.5,5.8,20.2,5.8 M25,15.4c-8,0-14.4,6.4-14.4,14.4S17,44.3,25,44.3 s14.4-6.4,14.4-14.4S33,15.4,25,15.4z"/>
`,
style = `
<svg viewBox="0 0 50 50">
<style>
@keyframes rotate {
0% {
visibility: visible;
transform: rotate(0deg) translateZ(0);
}
100% {
transform: rotate(720deg) translateZ(0);
}
}
.start {
animation: rotate 2.8s ease-in;
transform-origin: center 60%;
fill: #5daeea;
visibility: hidden;
will-change: transform;
}
.on {
animation: rotate 1.8s linear infinite;
transform-origin: center 60%;
fill: #5daeea;
animation-delay: 2.8s;
visibility: hidden;
will-change: transform;
}
.end {
animation: rotate 2.8s;
transform-origin: center 60%;
fill: #9ca2a5;
animation-timing-function: cubic-bezier(0.61, 1, 0.88, 1);
will-change: transform;
}
.start_timeout {
animation: rotate 1.8s linear infinite;
transform-origin: center 60%;
fill: #5daeea;
visibility: hidden;
will-change: transform;
}
.end_timeout {
fill: #9ca2a5;
}
</style>
`;
if (variables.state_on) {
return `${style}${base}<g class="start">${center}</g><g class="on">${center}</g></svg>`;
}
if (!variables.state_on) {
return `${style}${base}<g class="end">${center}</g></svg>`;
}
if (variables.state_on && variables.timeout > 2000) {
return `${style}${base}<g class="start_timeout">${center}</g></svg>`;
} else {
return `${style}${base}<g class="end_timeout">${center}</g></svg>`;
}
]]]
hi can you please share your code for the page layout ? i would like to how you implemented the bottom bar and so on.
thank you.
Hello all.
Just came across this and was wondering is this something I am doing wrong or an issue?
I have an Aqara Motion Sensor (and Contact) I want to capture the Date and Time when it was triggered last time. I use following:
{{ as_timestamp(states.switch.dining_room_light.last_updated)|timestamp_custom ("%d/%m %H:%M") }}
But the problem are,
1] it gets reset when the system is rebooted.
2] They both have a same date/time stamp, so when the motion is triggered, date time is also updated for Contact sensor and vice a versa
Please someone can look up?
Thank you
Have you tried deleting color: black?
The timestamps will get reset with every restart, as the values from the sensor are read āfreshā at a system (re)start. The only way to safe your value is setting up a helper that can save this value. In this case it would be an input_datetime.
Very nice, thanks for this! Any thoughts on how to make each one appear conditionally?
1 Like
Then it just becomes white!