@Valdorama did you manage to add the badge to Mushroom Fan Card in the end? Can you share your code if so?
Try like this. If you dont like that the number now matches the color of the icon selected you can also change the color with color: white;
type: custom:mushroom-template-card
primary: ''
icon: none
layout: horizontal
icon_color: blue
entity: sensor.processor_use
badge_icon: mdi:speedometer
badge_color: '#3498db'
secondary: ''
tap_action:
action: more-info
card_mod:
style:
mushroom-shape-icon$: |
.shape {
/* Radial progress bar */
background: radial-gradient(var(--card-background-color) 60%,
transparent calc(60% + 1px)),
conic-gradient(var(--icon-color) {{ states(config.entity) }}% 0%,
var(--card-background-color) 0% 100%);
}
.shape:after {
content: '';
height: 100%;
width: 100%;
position: absolute;
border-radius: var(--icon-border-radius);
background: var(--shape-color);
}
.: |
ha-state-icon:after {
content: "{{ states(config.entity) | round(0) }}%";
font-size: var(--card-primary-font-size);
position: absolute;
top: 21px;
left: 12px;
}
Remember to change the entity back to your own 
4 Likes
You can add a badge to any card with card-mod like this:
type: custom:mushroom-fan-card
entity: fan.bedroom_fan
show_percentage_control: true
collapsible_controls: true
show_oscillate_control: true
card_mod:
style: |
ha-state-icon:after {
content: "{{state_attr('fan.bedroom_fan','percentage')}}%";
position: absolute;
display: flex;
justify-content: center;
align-items: center;
background: rgb(var(--rgb-green));
color: var(--card-background-color);
font-weight: bolder;
border-radius: 50%;
top: -5px;
right: -5px;
width: 16px;
height: 16px;
font-size: 8px;
}
But in order to add an icon to the badge have a look at the below.
1 Like
some animations no longer work in Mushroom Cards - Build a beautiful dashboard easily.
I mention only a few
- shower
- sprinklers
- motion
thanks for your work
This has already been addressed. Please check the below.
@carlone1
You might want to take a good and long read of this topic:
I mention only a few:
- Preamble (especially!)
- #1
- #2
- #4
- #8
- #15
- #22
1 Like
hahah as usual, the cleanest code possible!
Thanks a lot!
The badge_icon: mdi:bug only works with template card as far as I know and tried. I could possibly try recreating the fan-card into template-card but I am planning to use it in other cases and would end up recreating many other cards as well.
With the code provided, I was able to get closer to what I am trying to achieve and now Iām struggling with the following:
- The badge gets animated/rotated with the
icon_animation: truesetting in mushroom-fan-card - I would like to use mdi icon in the badge
This is my current code
type: custom:mushroom-fan-card
entity: fan.whisper_flex
icon_animation: true
show_percentage_control: true
collapsible_controls: true
tap_action:
action: call-service
service: script.fan_on_off_with_automation
card_mod:
style: |
ha-state-icon:after {
content: "A";
position: absolute;
display: flex;
justify-content: center;
align-items: center;
background: rgb(var(--rgb-blue));
color: var(--card-background-color);
font-weight: bolder;
border-radius: 50%;
top: -5px;
right: -5px;
width: 16px;
height: 16px;
font-size: 8px;
}
Anyone can please help me with that?
Anohter one for You Dimitriā¦
i saw your rotaing drum on washmachine icon in hereā¦
i did fiddle around with it what im trying to do but somehow i failā¦
sofar this icon works perfectā¦only not the rotaing drum
is this able to do it?
mushroom-entity-chip:nth-child(8)$: |
ha-state-icon {
{% if is_state('switch.wasmachine','on') %}
animation: shake 400ms ease-in-out infinite, wash 1s ease-in-out infinite;
transform-origin: 50% 58%;
{% else %}
{% endif %}
}
@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 wash {
50% { clip-path: polygon(0 0, 0 100%, 35% 100%, 36% 74%, 31% 43%, 61% 40%, 71% 69%, 62% 78%,
36% 73%, 35% 100%, 100% 100%, 100% 0); }
If you read the post i linked you it is definitely possible to set an mdi icon in the fake badge that we have created. You will need to download an icon pack etc. But the post makes it quite clear how to do it.
You dont need to use badge_icon: at all.
We can base the ābadgeā on the mushroom-shape-icon. Instead of the ha-state-icon so it doesnt inherit any animations. Like this:
type: custom:mushroom-fan-card
entity: fan.bedroom_fan
show_percentage_control: true
collapsible_controls: true
show_oscillate_control: true
icon_animation: true
card_mod:
style: |
mushroom-shape-icon:after {
content: "{{state_attr('fan.bedroom_fan','percentage')}}%";
position: absolute;
display: flex;
justify-content: center;
align-items: center;
background: rgb(var(--rgb-green));
color: var(--card-background-color);
font-weight: bolder;
border-radius: 50%;
top: -5px;
right: -5px;
width: 16px;
height: 16px;
font-size: 8px;
}
just to be 100% clear. not my animation. credit to @rhysb.
What you seem to be missing is that when we have the rotating drum we are actually using 2 chips and overlaying them. currently in your code i see only 1 chip.
so you would need something like this:
type: custom:mushroom-chips-card
chips:
- type: template
- type: template
- type: template
- type: template
- type: template
- type: template
- type: template
- type: entity
entity: switch.office_screen_left
icon: mdi:washing-machine
content_info: none
icon_color: orange
- type: template
icon: mdi:washing-machine
icon_color: orange
card_mod:
style: |
ha-card {
left: -44.5px;
top: 0px;
background: none !important;
border: none !important;
box-shadow: none !important;
}
card_mod:
style:
mushroom-entity-chip:nth-child(8)$: |
ha-state-icon {
{% if is_state('switch.wasmachine','on') %}
animation: shake 400ms ease-in-out infinite;
{% else %}
{% endif %}
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);
filter: drop-shadow(2px 2px 3px rgba(var(--rgb-black), 0.4));
}
@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-template-chip:nth-child(9)$: |
ha-state-icon {
{% if is_state('switch.wasmachine','on') %}
animation: spin 1s linear infinite;
{% else %}
{% endif %}
transform-origin: 50% 58%;
clip-path: circle(21.7% at 50% 58%);
}
@keyframes spin {
0% { transform: rotate(0); }
100% { transform: rotate(360deg); }
}
I have put in a bunch of template chips because i noticed that your entity chip is the 8th chip.
Keep in mind that this code provided only works if the chips being overlayed with eachother are next to eachother in the main chip card. if they arent you would need to adjust the values and my recommendation is then to put your chip that is being overlayed at the very end and never put any new chip after it. you can then adjust the left: amount and set the position: absolute like this:
type: custom:mushroom-chips-card
chips:
- type: template
- type: entity
entity: switch.office_screen_left
icon: mdi:washing-machine
content_info: none
icon_color: orange
- type: template
- type: template
- type: template
- type: template
- type: template
- type: template
- type: template
icon: mdi:washing-machine
icon_color: orange
card_mod:
style: |
ha-card {
position: absolute;
left: 44.5px;
top: 0px;
background: none !important;
border: none !important;
box-shadow: none !important;
}
card_mod:
style:
mushroom-entity-chip:nth-child(2)$: |
ha-state-icon {
{% if is_state('switch.office_screen_left','on') %}
animation: shake 400ms ease-in-out infinite;
{% else %}
{% endif %}
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);
filter: drop-shadow(2px 2px 3px rgba(var(--rgb-black), 0.4));
}
@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-template-chip:nth-child(9)$: |
ha-state-icon {
{% if is_state('switch.office_screen_left','on') %}
animation: spin 1s linear infinite;
{% else %}
{% endif %}
transform-origin: 50% 58%;
clip-path: circle(21.7% at 50% 58%);
}
@keyframes spin {
0% { transform: rotate(0); }
100% { transform: rotate(360deg); }
}
1 Like
Thank You again Dimitri!!!
You rock!!
1 Like
hello, my code is this but animation is always on. can you help me please?
- type: custom:mushroom-template-card
entity: sensor.microonde_power
name: Microonde
icon: mdi:microwave
icon_color: blue
icon_type: icon
primary: Microonde
tap_action:
action: navigate
navigation_path: consumi
card_mod:
style: |
ha-card {
padding: 12px;
margin-left: 12px;
background: none;
box-shadow: none;
}
ha-state-icon:before {
content: "";
position: absolute;
width: 25%;
height: 25%;
margin: 10%;
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%); }
}
{{ 'animation: java 4s linear infinite;' if states('sensor.microonde_power') | float > 4 }}
is the last line not correct?
The last line is not needed for anything.
it doesnt refer to the animations that you have keyframes for.
you have 2 options on how to do your if statement. either like this:
(my preference)
{% if states('sensor.microonde_power') | float > 4 %}
animation: cook 1s linear infinite;
{% else %}
{% endif %}
or you can do it like this:
{{ 'animation: cook 1s linear infinite;' if states('sensor.microonde_power') | float > 4 }}
so in all it would look like this (with my preference).
card_mod:
style: |
ha-card {
padding: 12px;
margin-left: 12px;
background: none;
box-shadow: none;
}
ha-state-icon:before {
content: "";
position: absolute;
width: 25%;
height: 25%;
margin: 10%;
{% if states('sensor.microonde_power') | float > 4 %}
animation: cook 1s linear infinite;
{% else %}
{% endif %}
}
@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%); }
}
ok, thank you. i understand.
can i use also for color?
icon_color: '{{ ''blue'' if states('sensor.microonde_power') | float > 4 % }}'
sure.
like this:
icon_color: |-
{% if states('sensor.microonde_power') | float > 4 %}
blue
{% else %}
green
{% endif %}
or like this:
icon_color: |-
{{ 'blue' if states('sensor.microonde_power') | float > 4 }}
1 Like
OK, I see now how it works. I was expecting a somehow consistent approach with other icons but if that is the only way then why not. Thanks for that!
Here is my mushroom-fan-card with a custom badge.
Code
type: custom:mushroom-fan-card
entity: fan.whisper_flex
icon_animation: true
show_percentage_control: true
collapsible_controls: true
tap_action:
action: call-service
service: script.fan_on_off_with_automation
card_mod:
style: |
mushroom-shape-icon:after {
content: "autorenew";
position: absolute;
display: flex;
justify-content: center;
align-items: center;
background: rgb(var(--rgb-blue));
color: white;
font-weight: bolder;
border-radius: 50%;
top: -5px;
right: -5px;
width: 16px;
height: 16px;
font-size: 12px;
font-family: 'Material Icons';
}
See this post for more details Mushroom Cards - Build a beautiful dashboard easily š - #6539 by rhysb
3 Likes
Do you know what is wrong with this code? Animation it is not working.
type: custom:stack-in-card
cards:
- type: custom:mushroom-chips-card
alignment: end
style: |-
ha-card {
--chip-box-shadow: none !important;
--chip-background: none !important;
--chip-border-width: 0px !important;
--chip-spacing: 0px !important;
}
chips:
- type: template
entity: media_player.living_room_tv
icon: mdi:monitor
icon_color: blue
card_mod:
style:
mushroom-template-chip:nth-child(1)$: |
ha-state-icon:before {
animation: refresh 300ms linear infinite;
}
@keyframes refresh {
0% { background: linear-gradient(180deg, rgba(var(--rgb-{{ config.icon_color }}), 0.2) 0%, transparent 50%, transparent 100%); }
25% { background: linear-gradient(180deg, transparent 0%, rgba(var(--rgb-{{ config.icon_color }}), 0.2) 25%, transparent 100%); }
50% { background: linear-gradient(180deg, transparent 0%, rgba(var(--rgb-{{ config.icon_color }}), 0.2) 50%, transparent 100%); }
75% { background: linear-gradient(180deg, transparent 0%, rgba(var(--rgb-{{ config.icon_color }}), 0.2) 75%, transparent 100%); }
100% { background: linear-gradient(180deg, transparent 0%, transparent 50%, rgba(var(--rgb-{{ config.icon_color }}), 0.2) 100%); }
}
Quite a number of things.
-
You are trying to drill to the specific chip which is correct for icon styling, but you have placed it under the specific chip rather than the main chip card.
-
We cant use
config.icon_colorbecause there may be multiple entities in the main chip card. Drilling to the specific chip doesnt expose the actual entity to you. So you cant dorgba(var(--rgb-{{config.icon_color}}), 0.2)
You have to just tell it what color you want to use unfortunately.rgba(var(--rgb-blue), 0.2) -
You cant have a pseudo element (what
:beforeand:aftercreates) without havingcontentbe specified. Even if set to nothingcontent: ''it needs to be declared. It is also recommended to set the position of your pseudo element to absolute. -
Your pseudo element also had no size so even if it was created you wouldnt have been able to see it because the size is nothing.
The below should work.
type: custom:stack-in-card
cards:
- type: custom:mushroom-chips-card
chips:
- type: template
entity: media_player.living_room_tv
icon: mdi:monitor
icon_color: blue
card_mod:
style: |
ha-card {
--chip-box-shadow: none !important;
--chip-background: none !important;
--chip-border-width: 0px !important;
--chip-spacing: 0px !important;
}
alignment: end
card_mod:
style:
mushroom-template-chip:nth-child(1)$: |
ha-state-icon:before {
content: '';
position: absolute;
width: 40%;
height: 30%;
margin: 5%;
animation: refresh 300ms linear infinite;
}
@keyframes refresh {
0% { background: linear-gradient(180deg, rgba(var(--rgb-blue), 0.2) 0%, transparent 50%, transparent 100%); }
25% { background: linear-gradient(180deg, transparent 0%, rgba(var(--rgb-blue), 0.2) 25%, transparent 100%); }
50% { background: linear-gradient(180deg, transparent 0%, rgba(var(--rgb-blue), 0.2) 50%, transparent 100%); }
75% { background: linear-gradient(180deg, transparent 0%, rgba(var(--rgb-blue), 0.2) 75%, transparent 100%); }
100% { background: linear-gradient(180deg, transparent 0%, transparent 50%, rgba(var(--rgb-blue), 0.2) 100%); }
}
1 Like