thank you so much, it really gives me another perspective about that. cheers!
1 Like
Now that the TTS field is showing up in the cards again, itās not looking as nice as it once did. Hereās a before and after:
Before
After
ā¦does anyone have an edit to make this look better? How are you handling this?
1 Like
Hello Team, I am new to HA and I am struggling to implement the following:
-
The Washing Machine will show the current state for example if it is Off or running.
-
I have got the washing machine to spin when the washing machine is running.
-
How can I can get the current state to show underneath the washing machine icon?
Here is my working code:
type: custom:stack-in-card
cards:
- type: custom:mushroom-template-card
entity: input_select.washing_machine_status_2
icon: mdi:washing-machine
entity_status: ''
friendly_name: input_select.washing_machine_status_2
value_template: |-
{% if is_state('input_select.washing_machine_status_2', 'running') -%}
running
{% elif is_state('input_select.washing_machine_status_2', 'idle') %}
idle
{%- else -%}
off
{%- endif %}
icon_color: |-
{% if is_state('input_select.washing_machine_status_2','Running') -%}
amber
{%- else -%}
red
{%- endif %}
layout: vertical
primary: Washing Machine
tap_action:
action: Dropdown
card_mod:
style: |
ha-state-icon {
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);
}
ha-card {
border: none;
}
- type: custom:mushroom-template-card
entity: input_select.washing_machine_status_2
icon: mdi:washing-machine
icon_color: |-
{% if is_state('input_select.washing_machine_status_2','Running') -%}
orange
{%- else -%}
grey
{%- endif %}
layout: vertical
tap_action:
action: Dropdown
card_mod:
style: |
ha-state-icon {
{{ 'animation: spin 1s linear infinite;' if is_state('input_select.washing_machine_status_2','Running') }}
transform-origin: 50% 58%;
clip-path: circle(21.7% at 50% 58%);
}
ha-card {
top: -99px;
border: none;
}
card_mod:
style: |
ha-card {
height: 100px;
}
Any help will be very much appreciated. Also, how can I make the Icons a bit bigger?
@LiQuid_cOOled please i still need help on how to make the chip have no background --chip-background: none; and at the same time for the fan animation to work.
Thank you very much for your time
type: custom:mushroom-chips-card
chips:
- type: template
tap_action:
action: more-info
entity: fan.chlazeni_goodwe_ventilator
icon: mdi:fan
card_mod:
style:
mushroom-template-chip:nth-child(1)$: |
ha-state-icon {
{{ 'animation: rotate 2s linear infinite;' if is_state('fan.chlazeni_goodwe_ventilator', 'on') }}
}
@keyframes rotate {
100% { transform: rotate(360deg); }
}
2 ways:
Option 1. Applies to all chips in the chip card.
type: custom:mushroom-chips-card
chips:
- type: template
tap_action:
action: more-info
entity: fan.chlazeni_goodwe_ventilator
icon: mdi:fan
card_mod:
style:
mushroom-template-chip:nth-child(1)$: |
ha-state-icon {
{{ 'animation: rotate 2s linear infinite;' if is_state('fan.chlazeni_goodwe_ventilator', 'on') }}
}
@keyframes rotate {
100% { transform: rotate(360deg); }
}
.: |
ha-card {
--chip-background: none;
}
Option 2. You can no longer use the visual editor, but background is only removed from specific chip targeted.
type: custom:mushroom-chips-card
chips:
- type: template
tap_action:
action: more-info
entity: fan.chlazeni_goodwe_ventilator
icon: mdi:fan
card_mod:
style: |
ha-card {
--chip-background: none;
}
card_mod:
style:
mushroom-template-chip:nth-child(1)$: |
ha-state-icon {
{{ 'animation: rotate 2s linear infinite;' if is_state('fan.chlazeni_goodwe_ventilator', 'on') }}
}
@keyframes rotate {
100% { transform: rotate(360deg); }
}
1 Like
Would love to help you, but please post your code in code blocks. Indentation is important and with the way you have posted this is lost.
Check out this post, section 11.
1 Like
-
Seems like 2 different devices took those screenshots, whilst i am not under the illusion that this would make up the entire difference it will make a difference to how each looks of course.
-
Cant help you achieve how you want it to look if you dont post the code for what you have
Thank you. I solved it like this.
type: custom:mushroom-chips-card
chips:
- type: template
tap_action:
action: toggle
entity: light.wled_loznice
icon: mdi:fan
icon_color: yellow
card_mod:
style:
mushroom-template-chip:nth-child(1)$: |
ha-state-icon {
{{ 'animation: rotate 2s linear infinite;' if is_state('light.wled_loznice', 'on') }}
}
@keyframes rotate {
100% { transform: rotate(360deg); }
}
style: |
ha-card {
--chip-background: none;
}
is there a way you can share your server page with the cards?
For some odd reason my sonos doesnt show volume buttons with the mushroom media cardā¦ My nvidia shield does show the buttonsā¦ Does anyone know how to solve this?
Hello,
I am new to this and I apologize for my mistake, could you please check if the code has been formatted properly?
Kwame
Ill answer each of your points separately if thats ok.
- You can do this like this:
secondary: |-
{{states(config.entity) | capitalize}}
Using config.entity is just used instead of writing the entity id again.
I also had to adjust the height of the second card a bit + the total height of the stack in card.
- You seem to already have this working? You have it so the animation will only play when input_select is
Running
{{ 'animation: spin 1s linear infinite;' if is_state('input_select.washing_machine_status_2','Running') }}
You could also do it like this (IMO a bit easier to read)
{% if is_state('input_select.washing_machine_status_2','Running') %}
animation: spin 1s linear infinite;
{% endif %}
- Same number 1
Here is the full config.
type: custom:stack-in-card
cards:
- type: custom:mushroom-template-card
entity: input_select.washing_machine_status_2
icon: mdi:washing-machine
entity_status: ''
friendly_name: input_select.washing_machine_status_2
value_template: |-
{% if is_state('input_select.washing_machine_status_2', 'running') -%}
running
{% elif is_state('input_select.washing_machine_status_2', 'idle') %}
idle
{%- else -%}
off
{%- endif %}
icon_color: |-
{% if is_state('input_select.washing_machine_status_2','Running') -%}
amber
{%- else -%}
red
{%- endif %}
layout: vertical
primary: Washing Machine
secondary: |-
{{states(config.entity) | capitalize}}
tap_action:
action: Dropdown
card_mod:
style: |
ha-state-icon {
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);
}
ha-card {
border: none;
}
- type: custom:mushroom-template-card
entity: input_select.washing_machine_status_2
icon: mdi:washing-machine
icon_color: |-
{% if is_state('input_select.washing_machine_status_2','Running') -%}
orange
{%- else -%}
grey
{%- endif %}
layout: vertical
tap_action:
action: Dropdown
card_mod:
style: |
ha-state-icon {
{% if is_state('input_select.washing_machine_status_2','Running') %}
animation: spin 1s linear infinite;
{% endif %}
transform-origin: 50% 58%;
clip-path: circle(21.7% at 50% 58%);
}
ha-card {
top: -117px;
border: none;
}
card_mod:
style: |
ha-card {
height: 120px;
}
Hello Dimitri,
Thanks so much for your quick responds, used your code and is working for now.
Again, I greatly appreciate all your assistance Sir.
Does somebody know why some of my cards are looking like this?
type: custom:stack-in-card
keep:
margin: false
box_shadow: false
background: false
cards:
- type: custom:mushroom-title-card
title: Climate
subtitle: ''
- type: grid
square: false
columns: 2
cards:
- type: custom:mushroom-template-card
style: |
ha-card {
padding-bottom: 14px !important;
}
primary: Thermostat
secondary: |
Currently: {{ state_attr('climate.toon_thermostat', 'hvac_action') }}
icon: |-
{% set mode = states('climate.toon_thermostat') %}
{% if mode == 'off' %}
mdi:radiator-off
{% elif mode == 'heating' %}
mdi:radiator
{% else %}
mdi:radiator-disabled
{% endif %}
icon_color: |-
{% set status = state_attr('climate.toon_thermostat','hvac_action') %}
{% if status == 'heating' %}
red
{% else %}
grey
{% endif %}
tap_action: none
- type: vertical-stack
cards:
- type: custom:simple-thermostat
style: |
ha-card {
--st-spacing: 0px;
}
ha-card .current--value {
color: #ffffff;
}
header {
margin-bottom: 10px !important;
padding-bottom: 0px !important;
}
ha-card .thermostat-trigger {
color: #6f6f6f;
}
entity: climate.toon_thermostat
header:
name: false
icon: false
decimals: '1'
fallback: 'Off'
hide:
temperature: true
state: true
layout:
mode:
names: false
icons: false
headings: false
step: row
step_size: '0.5'
control:
hvac:
'off': false
heat: false
cool: false
heat_cool: false
- type: custom:simple-thermostat
style: |
ha-card {
--st-font-size-toggle-label: 6px
--st-spacing: 0px;
--st-default-spacing: 0px;
--st-mode-background: #2d2d2d;
margin-left: 12px;
margin-right: 12px;
}
ha-card .mode-item.active.off {
background: #363636;
color: #9e9e9e;
}
ha-card .mode-item.active.heat {
background: #472421;
color: #f44336;
}
ha-card .mode-item.active {
background: #263926;
color: #4caf50;
}
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: 10px;
border-radius: 10px;
}
ha-card .modes {
grid-gap: 12px
}
entity: climate.toon_thermostat
header: false
setpoints: false
hide:
temperature: true
state: true
layout:
mode:
headings: false
icons: true
names: false
step: row
control:
hvac:
'off':
name: Power
heat:
name: Heat
- type: custom:mushroom-chips-card
style: |
ha-card {
--chip-box-shadow: none;
--chip-background: none;
--chip-spacing: 0px;
--chip-padding: 0 0.2em
}
alignment: justify
chips:
- type: template
content: '{{state_attr(entity, "current_temperature")}} Ā°C'
entity: climate.toon_thermostat
icon: mdi:home-thermometer
tap_action:
action: more-info
icon_color: |-
{% set state=states(entity) %}
{% if state=='cool' %}
blue
{% elif state=='heat' %}
red
{% else %}
grey
{% endif %}
style: |
ha-card {
margin-left: 6px;
}
- type: template
double_tap_action:
action: none
content: >-
{{ states(entity) }}{{ state_attr(entity, "unit_of_measurement") }}
Humidity
entity: sensor.slaapkamer_luchtvochtigheid
icon: mdi:water
icon_color: blue
tap_action:
action: none
hold_action:
action: none
- type: template
double_tap_action:
action: none
content: '{{ states(entity) }} {{ state_attr(entity, "unit_of_measurement") }}'
entity: sensor.temperatuur_buiten
icon: mdi:thermometer
icon_color: grey
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: 2
cards:
- type: custom:mushroom-template-card
entity: sensor.temperatuur_woonkamer
primary: >-
{{ states(entity) }} {{ state_attr(entity,
"unit_of_measurement") }}
secondary: Binnen
icon_color: |-
{% set temp = states(entity) %}
{% if temp >= '21' %}
red
{% elif temp >= '17' and temp < '21' %}
orange
{% elif temp == 'unknown' %}
grey
{% else %}
blue
{% endif %}
icon: mdi:home-thermometer-outline
- type: custom:mushroom-template-card
entity: sensor.temperatuur_buiten
primary: >-
{{ states(entity) }} {{ state_attr(entity,
"unit_of_measurement") }}
secondary: Buiten
icon_color: |-
{% set temp = states(entity) %}
{% if temp >= '22' %}
red
{% elif temp >= '15' and temp < '22' %}
orange
{% elif temp == 'unknown' %}
grey
{% else %}
blue
{% endif %}
icon: mdi:thermometer
- type: custom:mini-graph-card
entities:
- entity: sensor.temperatuur_woonkamer
name: Inside Temperature
color: '#4caf50'
- entity: sensor.temperatuur_buiten
name: Outside Temperature
color: '#2196f3'
y_axis: secondary
hours_to_show: 24
line_width: 3
font_size: 50
animate: true
show:
name: false
icon: false
state: false
legend: false
fill: fade
Hey @rhysb this looks amazing! I cant get that redbutton Bellmenu to pop out, im not getting any error messages either, what can i do to get that bottom half, sticky menu to work properly?
hello Dimitri,
in this post Mushroom Cards - Build a beautiful dashboard easily š - #3683 by Sylwester
i have seen an history āmushroomā graph. I would use it with a binary_sensor of my car position. Itās possible to reply this card?
could you help me?
thank you
Im trying to recreate the top card, but somehow i cant get it to work, ive tried chatgpt and forums and discord, no use. Could it be that this code is not supported anymore by the version that im running (2023.12.3)?
Not OP but I have similar card setup, hereās my code:
type: custom:stack-in-card
cards:
- type: horizontal-stack
cards:
- type: custom:mini-graph-card
hours_to_show: 6
points_per_hour: 30
animate: true
hour24: false
height: 140
entities:
- sensor.processor_use
state_adaptive_color: true
show_state: true
name: CPU
line_color: '#28A95D'
line_width: 3
color_thresholds:
- value: 10
color: '#28A95D'
- value: 30
color: '#179FE7'
- value: 60
color: '#E5DF26'
- value: 80
color: '#E58B26'
- value: 90
color: '#EF302A'
show:
extrema: true
average: true
name_adaptive_color: true
icon_adaptive_color: true
- type: custom:mini-graph-card
hours_to_show: 6
points_per_hour: 60
height: 140
animate: true
hour24: false
entities:
- sensor.processor_temperature
name: CPU Temp
line_color: '#28A95D'
line_width: 3
color_thresholds:
- value: 30
color: '#28A95D'
- value: 40
color: '#179FE7'
- value: 50
color: '#E5DF26'
- value: 60
color: '#E58B26'
- value: 70
color: '#EF302A'
show:
extrema: true
average: true
name_adaptive_color: true
icon_adaptive_color: true
- type: horizontal-stack
cards:
- type: custom:bar-card
entity: sensor.disk_use_percent_config
name: HDD
decimal: 0
height: 50
direction: right
severity:
- color: '#28A95D'
from: 0
to: 20
- color: '#53A8E2'
from: 20
to: 40
- color: '#F2BF41'
from: 40
to: 60
- color: '#F28D35'
from: 60
to: 80
- color: '#EF5350'
from: 80
to: 100
card_mod:
style: |-
ha-card{
--bar-card-border-radius: 10px;
border-radius: 10px;
box-shadow:
}
bar-card-value {
font-size: 12px;
font-weight: bold;
}
bar-card-name {
font-size: 12px;
font-weight: bold;
}
- type: custom:bar-card
entity: sensor.memory_use_percent
height: 50
direction: right
name: RAM
decimal: 0
severity:
- color: '#28A95D'
from: 0
to: 20
- color: '#53A8E2'
from: 20
to: 40
- color: '#F2BF41'
from: 40
to: 60
- color: '#F28D35'
from: 60
to: 80
- color: '#EF5350'
from: 80
to: 100
card_mod:
style: |-
ha-card{
--bar-card-border-radius: 10px;
border-radius: 10px;
box-shadow:
}
bar-card-value {
font-size: 12px;
font-weight: bold;
}
bar-card-name {
font-size: 12px;
font-weight: bold;
}
4 Likes
Ciao Rhysb,
Iām using your configuration for climate-card all works fine but there is no appear the badge icon.
Could you help me please?
- type: custom:mushroom-climate-card
entity: climate.fujitsu
name: Condizionatore
show_temperature_control: true
hvac_modes:
- heat_cool
- heat
- cool
- fan_only
- dry
card_mod:
style: |
mushroom-shape-icon {
--card-mod-icon:
{% if is_state(config.entity, 'heat_cool') %}
mdi:autorenew
{% elif is_state(config.entity, 'heat') %}
mdi:fire
{% elif is_state(config.entity, 'cool') %}
mdi:snowflake
{% elif is_state(config.entity, 'dry') %}
mdi:water-percent
{% elif is_state(config.entity, 'fan_only') %}
mdi:fan
{% else %}
mdi:air-conditioner
{% endif %};
display: flex;
{% if is_state(config.entity, 'fan_only') %}
animation: rotation 1s linear infinite;
{% endif %}
}
@keyframes rotation {
100% {
transform: rotate(360deg);
}
}
Thanks!
Is it possible to get the icon the colour of an attribute from an entity ?
the colour of a light changes depending of time. so I want to see the colour changed of the icon. Is that possible ?