muktheo
December 20, 2023, 11:42pm
9274
Hello, can anyone please help me to find and address the problem in my mushroom chip card?
type: custom:mushroom-chips-card
alignment: start
card_mod:
style: |
ha-card {
--chip-box-shadow: none;
--chip-background: none;
--chip-spacing: 3px;
}
chips:
- type: template
entity: light.lampu_toilet
tap_action:
action: toggle
icon: |-
{% if is_state("light.lampu_toilet", 'on') %}
mdi:lightbulb-on
{% else %}
mdi:lightbulb
{% endif %}
card_mod:
style: |
{% if is_state('light.lampu_toilet', 'on') %}
.content {
animation: boing 2s ease infinite;
transform-origin: 50% 90%;
}
{% endif %}
@keyframes boing {
0% { transform: scale3d(1, 1, 1); }
7% { transform: scale3d(1.25, 0.75, 1); }
10% { transform: scale3d(0.75, 1.25, 1); }
12% { transform: scale3d(1.15, 0.85, 1); }
16% { transform: scale3d(0.95, 1.05, 1); }
19% { transform: scale3d(1.05, 0.95, 1); }
25% { transform: scale3d(1, 1, 1); }
}
ha-card {
justify-content: center;
width: var(--chip-height) !important;
--chip-icon-size: 20px;
--chip-height: 10px;
padding: 8px!important;
border-radius: 100%!important;
--chip-background: {{ 'rgba(243, 182, 100, 0.5)' if is_state('light.lampu_toilet', 'on') else 'rgba(169, 169, 169, 0.5)' }}
}
- type: conditional
conditions:
- entity: binary_sensor.motion_sensor_toilet_occupancy
state: 'on'
chip:
type: template
icon_color: disabled
icon: mdi:motion-sensor
card_mod:
style: |
ha-icon {
--icon-animation: clip 2s linear infinite;
}
@keyframes clip {
50% { clip-path: polygon(0 0, 55% 0, 100% 100%, 0 100%); }
}
.shape {
--shape-animation: motion 2s linear infinite;
}
@keyframes motion {
0%, 100% { --shape-color: rgba(var(--rgb-blue), 0.3); }
50% { --shape-color: rgba(var(--rgb-blue), 0.2); }
}
ha-card {
justify-content: center;
width: var(--chip-height) !important;
--chip-icon-size: 17px;
--chip-height: 10px;
padding: 8px!important;
border-radius: 100%!important;
--chip-background: rgba(199, 0, 57, 0.5)
}
- type: conditional
conditions:
- entity: binary_sensor.pintu_toilet_contact
state: 'on'
chip:
type: template
icon: mdi:door
card_mod:
style: |
ha-icon {
--icon-animation: open 6s ease-in-out infinite;
transform-origin: 30%;
}
@keyframes open {
0%, 66% { transform: rotateY(0deg); }
33% { transform: rotateY(-120deg); }
}
.shape {
perspective: 45px;
}
4 Likes
Common when using card mod.
You will likely need to learn to live with it.
The reason for it is that all assets are loaded. So custom cards and such (this includes card mod itself) but only then after this card mod code is applied. So this will always happen after.
How slow or quick this happens depends on a few things (in order of highest impact that i have observed).
The speed of your connection to your local HA instance. You will very likely notice this taking longer if you are on a slow cellular connection for example.
The processing speed your device (the viewing device, not your homeassistant device). Will take longer to load on lets say a 10 year old smartphone vs your desktop computer. This is because most CSS (what card mod modifies) is processed on the viewing device, not the server it is hosted on.
The amount of card mod being used. Will start to get slower the more card mod is applied to cards.
1 Like
muktheo
December 21, 2023, 2:33am
9276
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
ktakyi
December 21, 2023, 8:47pm
9278
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?
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?
Legnava89
December 21, 2023, 9:10pm
9279
@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.
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
Legnava89
December 21, 2023, 11:39pm
9283
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;
}
Mar1us
December 22, 2023, 7:04am
9284
is there a way you can share your server page with the cards?
laurens362
December 22, 2023, 9:38am
9285
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?
ktakyi
December 22, 2023, 10:45am
9286
Hello,
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;
}
ktakyi
December 22, 2023, 1:15pm
9288
Hello Dimitri,
Thanks so much for your quick responds, used your code and is working for now.
TmcM
December 22, 2023, 3:16pm
9289
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
Airyphyla
December 22, 2023, 4:10pm
9290
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?
FedeL16
December 22, 2023, 4:23pm
9291
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
Airyphyla
December 22, 2023, 6:47pm
9292
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
