Great card! It’s exactly what i’m looking for, can you put your code here? I’m unable to add the fan speed to the card. TKS!
These cards are beautiful. I’m currently using the fan card and wondering if we could get support for the preset_mode attribute to be displayed, perhaps for the primary_info field?
I do notice the preset_mode attribute defaults to null for my device when switched off, which could complicate things I guess.
Another nice idea would be to have something similar to the button available for the climate card that allows selection of preset modes.
I was thinking of trying to rebuild the fan card using a template card, but I haven’t wrapped my head around the nuance required to recreate the same card from scratch. I’m also not sure how easy it would be to recreate the nice spinning fan icon. If I’m sacrificing a spinning icon, perhaps the preset mode information could be displayed as the icon instead…
I’ve had a search through the thread for a similar template to this card without success, can anyone get me on my feet with implementing this attribute into such a layout?
I’ve seen many different configurations regarding remotes but anyone recommend a remote where I can have a slider for volume? Not a big fan of having to click 10 times to go down ten levels.
1 Like
@Freedom_1976 its honeslty a little messy for my liking but havent found the time to ‘polish it’ - it works fine, just my OCD 
This is its current look as i ammened a little from the above - also note i got the idea from another post further up in this post so not taking credit for this one
You will also want to create a helper for the card to work (input_boolean.thermostat_dropdown)
type: custom:stack-in-card
keep:
margin: false
box_shadow: false
background: false
cards:
- type: grid
square: false
columns: 2
cards:
- type: custom:mushroom-template-card
style: |
ha-card {
padding-bottom: 14px !important;
}
primary: Thermostat
secondary: >-
{% set mode = states('climate.daikin_ac') %}
{% set temp_target = state_attr('climate.daikin_ac', 'temperature') %}
{% set temp_current = state_attr('climate.daikin_ac', 'current_temperature') %}
{% if mode == 'cool' %} Cooling to {{ temp_target }} °C
{% elif mode == 'heat' %} Heating to {{ temp_target }} °C
{% elif mode == 'heat_cool' %} Maintaining {{ temp_target }} °C
{% elif mode == 'dry' %} Dry Air Mode
{% elif mode == 'fan_only' %} Fan Only
{% else %} Off
{% endif %}
icon: |-
{% set mode = states('climate.daikin_ac') %}
{% if mode == 'off' %}
mdi:power
{% elif mode == 'cool' %}
mdi:snowflake
{% elif mode == 'heat' %}
mdi:fire
{% elif mode == 'heat_cool' %}
mdi:autorenew
{% elif mode == 'dry' %}
mdi:water-percent
{% elif mode == 'fan_only' %}
mdi:fan
{% else %}
mdi:home-thermometer
{% endif %}
icon_color: |-
{% set mode = states('climate.daikin_ac') %}
{% if mode == 'off' %}
grey
{% elif mode == 'cool' %}
blue
{% elif mode == 'heat' %}
red
{% elif mode == 'heat_cool' %}
green
{% elif mode == 'dry' %}
orange
{% elif mode == 'fan_only' %}
grey
{% else %}
grey
{% endif %}
tap_action: none
- type: vertical-stack
cards:
- type: custom:simple-thermostat
style: |
ha-card {
--st-spacing: 0px;
}
header {
margin-bottom: 10px !important;
padding-bottom: 0px !important;
}
ha-card .thermostat-trigger {
color: #6f6f6f;
}
entity: climate.daikin_ac
header:
name: false
icon: false
decimals: '0'
fallback: 'Off'
hide:
temperature: true
state: true
layout:
mode:
names: false
icons: false
headings: false
step: row
step_size: '1'
control:
hvac:
'off': false
heat: false
cool: false
heat_cool: false
dry: false
fan_only: false
- type: custom:simple-thermostat
style: |
ha-card {
--st-font-size-toggle-label: 6px
--st-spacing: 0px;
--st-default-spacing: 0px;
margin-left: 3px;
margin-right: 3px;
}
ha-card .mode-item.active.cool {
background: #1d3447;
color: #2196f3;
}
ha-card .mode-item.active.heat {
background: #472421;
color: #f44336;
}
ha-card .mode-item.active.heat_cool {
background: #005425;
color: #00C65C;
}
ha-card .mode-item.active.dry {
background: #917204;
color: #EFBD07;
}
ha-card .mode-item.active.fan_only {
background: #8A8A8A;
color: #FFFFFF;
}
ha-card .mode-item.active:hover {
background: #363636;
color: #9e9e9e;
}
ha-card .mode-item:hover {
background: #363636;
color: #9e9e9e;
}
ha-card .mode-item {
--st-spacing: 4px;
border-radius: 4px;
}
ha-card .modes {
grid-gap: 3px
}
entity: climate.daikin_ac
header: false
setpoints: false
hide:
temperature: true
state: true
layout:
mode:
headings: false
icons: true
names: true
step: row
control:
hvac:
'off':
name: 'Off'
heat:
name: Heat
cool:
name: Cool
heat_cool:
name: Auto
dry:
name: Dry
fan_only:
name: Fan
- type: custom:mushroom-chips-card
style: |
ha-card {
--chip-box-shadow: none;
--chip-background: none;
--chip-spacing: 0px;
--chip-padding: 0 2px
}
alignment: justify
chips:
- type: template
content: '{{state_attr(entity, ''current_temperature'')}} °C'
entity: climate.daikin_ac
icon: mdi:home-thermometer
tap_action:
action: none
hold_action:
action: none
icon_color: |-
{% set mode = states('climate.daikin_ac') %}
{% if mode == 'off' %}
grey
{% elif mode == 'cool' %}
blue
{% elif mode == 'heat' %}
red
{% elif mode == 'heat_cool' %}
green
{% elif mode == 'dry' %}
orange
{% elif mode == 'fan_only' %}
grey
{% else %}
grey
{% endif %}
style: |
ha-card {
margin-left: 6px;
}
- type: template
entity: climate.daikin_ac
content: |-
{% set fan_mode = state_attr(entity, 'fan_mode') %}
{% if fan_mode == 'Mid' %}
Medium
{% else %}
{{ fan_mode }}
{% endif %}
icon: mdi:fan
icon_color: green
tap_action: none
- type: weather
entity: weather.hourly
show_conditions: true
show_temperature: true
tap_action:
action: none
hold_action:
action: none
- type: template
double_tap_action:
action: none
content: '{{ state_attr(entity, ''humidity'') }}% Humidity'
entity: weather.hourly
icon: mdi:water
icon_color: blue
tap_action:
action: none
hold_action:
action: none
- type: template
icon: |-
{% if is_state(entity, 'off') %}
mdi:chevron-down
{% elif is_state(entity, 'on') %}
mdi:chevron-up
{% endif %}
tap_action:
action: toggle
entity: input_boolean.thermostat_dropdown
icon_color: disabled
style: |
ha-card {
--chip-icon-size: 1em
}
- type: conditional
conditions:
- entity: input_boolean.thermostat_dropdown
state: 'on'
card:
type: custom:stack-in-card
keep:
margin: false
box_shadow: false
background: false
cards:
- type: grid
square: false
columns: 3
cards:
- type: custom:mushroom-entity-card
entity: sensor.daikin_ac_inside_temperature
primary_info: state
secondary_info: name
name: Inside
icon_color: green
- type: custom:mushroom-template-card
primary: '{{ state_attr( entity, ''temperature'') }} °C'
secondary: Outside
icon: mdi:home
tap_action:
action: more-info
hold_action:
action: none
double_tap_action:
action: none
badge_color: ''
icon_color: blue
entity: weather.hourly
- type: custom:simple-thermostat
style: |
ha-card {
--st-font-size-toggle-label: 6px
--st-spacing: 0px;
--st-default-spacing: 1.6px;
margin-right: 6px;
}
ha-card .mode-item.active {
background: #8A8A8A;
color: #FFFFFF;
}
ha-card .mode-item.active:hover {
background: #363636;
color: #9e9e9e;
}
ha-card .mode-item:hover {
background: #363636;
color: #9e9e9e;
}
ha-card .mode-item {
--st-spacing: 6px;
border-radius: 5px;
}
ha-card .modes {
grid-gap: 6px
}
entity: climate.daikin_ac
header: false
setpoints: false
hide:
temperature: true
state: true
layout:
mode:
headings: false
icons: true
names: false
step: row
control:
hvac:
'off': false
heat: false
cool: false
heat_cool: false
dry: false
fan_only: false
fan:
_hide_when_off: true
Low:
name: Low
icon: mdi:fan-speed-1
Mid:
name: Medium
icon: mdi:fan-speed-2
High:
name: High
icon: mdi:fan-speed-3
Low/Auto: false
Mid/Auto: false
High/Auto: false
- type: custom:mini-graph-card
entities:
- color: '#11A579'
entity: sensor.daikin_ac_inside_temperature
index: 0
name: Inside Temperature
- color: '#2196f3'
entity: weather.current
attribute: temperature
index: 1
- color: red
entity: climate.daikin_ac
attribute: temperature
index: 2
show_fill: false
show_points: false
- color: red
entity: climate.daikin_ac
attribute:
'[object Object]': null
index: 2
show_fill: false
show_points: false
hours_to_show: 24
line_width: 2
font_size: 50
animate: true
aggregate_func: first
show:
extrema: true
name: false
icon: false
state: false
legend: false
fill: fade
8 Likes
Hey @brewston, revisited this to make it a bit simpler.
Mushroom icon animation using clip-path:
type: custom:mushroom-template-card
icon: mdi:radiator
icon_color: red
primary: Radiator
secondary: It's HOT!
card_mod:
style:
mushroom-shape-icon$: |
ha-icon {
--icon-animation: clip 1s linear infinite;
}
@keyframes clip {
0% {
clip-path: inset(50% 0 0 0);
}
100% {
clip-path: inset(0 0 0 0);
}
}
7 Likes
Do you by any chance know if pictures are animatable(?)?
I’m using pictures instead of icons and would like my vacuum to wobble when its active, but cant figure out if its doable…
Thanks @rhysb - so is that now doing what I thought it was doing last time ? ie hide/show the “heatwaves”
I wanted to put the pulsating ring around it, bit like your fan example from about a month ago but I’ve not attempted it yet
1 Like
Yes, they are. You need to animate the Avatar instead of the Icon.
Mushroom Animated Avatar:
type: custom:mushroom-template-card
primary: Mr. Suck
picture: /local/Robovac.png
card_mod:
style: |
mushroom-shape-avatar {
display: flex;
animation: wobbling 0.5s ease-in-out infinite alternate;
}
@keyframes wobbling {
0% {
transform: rotate(-20deg);
}
100% {
transform: rotate(20deg);
}
}
4 Likes
A little off topic. But has anyone found a way of creating a bar gauge to countdown an expiry date from the reset date for recurring reminders?
1 Like
Yes, doing it the proper way now 
Is this what you wanted?
type: custom:mushroom-template-card
icon: mdi:radiator
icon_color: red
primary: Radiator
secondary: It's HOT!
card_mod:
style:
mushroom-shape-icon$: |
ha-icon {
--icon-animation: clip 1s linear infinite;
}
@keyframes clip {
0% {
clip-path: inset(50% 0 0 0);
}
100% {
clip-path: inset(0 0 0 0);
}
}
.shape {
--shape-animation: ping 2s infinite;
}
@keyframes ping {
0% {
box-shadow: 0 0 0 0 rgba(var(--rgb-red), 0.7);
}
70% {
box-shadow: 0 0 0 10px transparent;
}
100% {
box-shadow: 0 0 0 0 transparent;
}
}
10 Likes
You can change the fan speed something like this:
type: custom:stack-in-card
cards:
- type: custom:mushroom-template-card
primary: Fan
icon: mdi:fan
icon_color: teal
entity: input_number.dummy_fan
card_mod:
style:
mushroom-shape-icon$: |
ha-icon {
--icon-animation: rotation {{ 4 / states(config.entity) | float * 10 }}s linear infinite;
}
@keyframes rotation {
100% {
transform: rotate(360deg);
}
}
- type: custom:my-slider-v2
entity: input_number.dummy_fan
styles:
card:
- height: 42px
container:
- border-radius: 12px
track:
- background: >
[[[ if (entity.state == "off") return
"rgba(var(--mush-rgb-disabled), 0.2)";
else return "rgba(var(--mush-rgb-teal), 0.2)";
]]]
progress:
- background: >
[[[ if (entity.state == "off") return
"rgb(var(--mush-rgb-disabled))";
else return "rgb(var(--mush-rgb-teal))";
]]]
thumb:
- width: 0px
card_mod:
style: |
ha-card {
padding: 0px 12px 12px;
--mush-rgb-disabled: 189,189,189;
--mush-rgb-teal: 0, 150, 136;
}
1 Like
Hi, is it possible to do the same with a chip?
Tried to combine this and also the icon based on content type, cannot do both at the same time. how can I combine two styling options?
type: custom:stack-in-card
cards:
- type: custom:mushroom-media-player-card
entity: media_player.lounge_shield
icon: mdi:play
use_media_info: true
use_media_artwork: false
show_volume_level: false
volume_controls:
- volume_set
- volume_mute
media_controls:
- previous
- play_pause_stop
- next
- on_off
- shuffle
- repeat
fill_container: false
card_mod:
style: |
mushroom-shape-icon {
{% set media_type = state_attr(media_player.lounge_shield, 'media_content_type') %}
--card-mod-icon:
{% if media_type == 'tvshow' %}
mdi:television-classic
{% elif media_type == 'movie' %}
mdi:movie-open
{% elif media_type == 'music' %}
mdi:music
{% elif media_type == 'playlist' %}
mdi:music
{% else %}
mdi:play
{% endif %};
}
mushroom-state-info$: |
.primary:before {
content: "{{ state_attr('media_player.lounge_shield', "friendly_name") }} -";
}
1 Like
Question about Mushroom Light Card.Is it possible to have different icon depends on state? When is “on” different and when is “off” different.
Hi,
How can I do this only when the pump is on?
currently I only have it as a blink.
card_mod:
style: |
mushroom-shape-icon{
animation:
{% if is_state('binary_sensor.solar_pumpe', 'on')%} blink 2s linear infinite;
{% endif %}
}
@keyframes blink {
50% {opacity: 0;}
}
even more off topic - what are you using for recurring reminders?
Gotta love going off topic - Recurring Task Notification with datetime calculations (HVAC Filter Replacement Reminder) - #15 by webmediart-github
Its creating a date time helper and then using the card to reset to 0.
Ive made a decluttering template to duplicate them.
3 Likes
Custom element doesn’t exist: mushroom-media-player-card
all other elements mushroom work well
no player
any help
Thanks
Does it have to be done in card-mod? Can it be included in this part of the code where you have the icon itslf changing based on volume?
- type: custom:mushroom-template-card
entity: input_number.fan_slider
icon: |
{% set vol_level = states(entity) | float %}
{% if vol_level == 0 %}
mdi:fan
{% elif vol_level > 80 %}
mdi:fan
{% elif vol_level < 40 %}
mdi:fan
{% else %}
mdi:fan
{% endif %}