hello thanks for sharing this but i have a question
about the popup part there you have data a path how did you make this what does it say can you share this please?
I also have a question about image can you also share it?
thanks in advance!
hello thanks for sharing this but i have a question
about the temperature there you have 3 sensor which i don’t have
1. binary_sensor.outdoor_low_temperature_warning
2. binary_sensor.outdoor_high_temperature_warning
3. sensor.nightstate
would you like to share this then I can also make it or how you get it in I use the xiaomi mijia bluetooth thermometer for the indoor temperature & for outside the aqara temperature sensor
thanks in advance!
hello thanks for sharing this but i have a question
I have a few questions about the thermostat?
1. the uptime sensor how did you make it?
2. then under the uptime sensor which times how this done ?
3. than the days with how many hours he got up can you share this?
would you like to share this so I can also make this wall think this is very nice handy card?
thanks in advance!
Hi Guys
Frist of all thanks all for the sharing code you all did on this post, helped me a lot to build my own dashboards.
My question is, how can i remove the background from this cards :
The code is this :
square: false
columns: 1
type: grid
cards:
- type: horizontal-stack
cards:
- type: custom:vertical-stack-in-card
cards:
- type: custom:mushroom-template-card
primary: Sala
icon: mdi:sofa
layout: vertical
icon_color: blue
tap_action:
action: navigate
navigation_path: /lovelace/sala
- type: horizontal-stack
cards:
- type: custom:mushroom-chips-card
chips:
- type: template
icon: mdi:thermometer
icon_color: yellow
content: >-
{{
states('sensor.tuyatec_prhs1rsd_rh3052_temperature')}}°C
card_mod:
style: |
ha-card {
--chip-box-shadow: none;
--ha-card-box-shadow: none;
--chip-border-width: 0;
}
- type: template
icon: mdi:water-percent
icon_color: blue
content: '{{ states(''sensor.tuyatec_prhs1rsd_rh3052_humidity'')}}%'
card_mod:
style: |
ha-card {
--chip-box-shadow: none;
--ha-card-box-shadow: none;
--chip-border-width: 0;
}
alignment: start
card_mod:
style: |
ha-card {
margin: 0px 0px 6px 4px;
}
- type: custom:mushroom-chips-card
chips:
- type: template
entity: light.sala
icon: mdi:lightbulb-group
icon_color: |
{% if is_state('light.sala', 'on') %}
yellow
{% else %}
disabled
{% endif %}
tap_action:
action: toggle
card_mod:
style: |
ha-card {
--chip-box-shadow: none;
--ha-card-box-shadow: none;
--chip-border-width: 0;
}
alignment: end
card_mod:
style: |
ha-card {
margin: 0px 8px 6px 0px;
}
- type: custom:vertical-stack-in-card
cards:
- type: custom:mushroom-template-card
primary: Afonso
icon: mdi:baby-carriage
layout: vertical
icon_color: green
tap_action:
action: navigate
navigation_path: /lovelace/escritorio-quarto-afonso
- type: horizontal-stack
cards:
- type: custom:mushroom-chips-card
chips:
- type: template
icon: mdi:thermometer
icon_color: yellow
content: '{{ states(''sensor.lumi_lumi_weather_temperature'')}}°C'
card_mod:
style: |
ha-card {
--chip-box-shadow: none;
--ha-card-box-shadow: none;
--chip-border-width: 0;
}
- type: template
icon: mdi:water-percent
icon_color: blue
content: '{{ states(''sensor.lumi_lumi_weather_humidity'')}}%'
card_mod:
style: |
ha-card {
--chip-box-shadow: none;
--ha-card-box-shadow: none;
--chip-border-width: 0;
}
alignment: start
card_mod:
style: |
ha-card {
margin: 0px 0px 6px 4px;
}
- type: custom:mushroom-chips-card
chips:
- type: template
entity: light.afonso
icon: mdi:lightbulb-group
icon_color: |
{% if is_state('light.afonso', 'on') %}
yellow
{% else %}
disabled
{% endif %}
tap_action:
action: toggle
card_mod:
style: |
ha-card {
--chip-box-shadow: none;
--ha-card-box-shadow: none;
--chip-border-width: 0;
}
alignment: end
card_mod:
style: |
ha-card {
margin: 0px 8px 6px 0px;
}
- type: custom:vertical-stack-in-card
cards:
- type: custom:mushroom-template-card
primary: Quarto
icon: mdi:bed
layout: vertical
icon_color: yellow
tap_action:
action: navigate
navigation_path: /lovelace/quarto
- type: horizontal-stack
cards:
- type: custom:mushroom-chips-card
chips:
- type: template
icon: mdi:thermometer
icon_color: yellow
content: '{{ states(''sensor.lumi_lumi_weather_temperature_2'')}}°C'
card_mod:
style: |
ha-card {
--chip-box-shadow: none;
--ha-card-box-shadow: none;
--chip-border-width: 0;
}
- type: template
icon: mdi:water-percent
icon_color: blue
content: '{{ states(''sensor.lumi_lumi_weather_humidity_2'')}}%'
card_mod:
style: |
ha-card {
--chip-box-shadow: none;
--ha-card-box-shadow: none;
--chip-border-width: 0;
}
alignment: start
card_mod:
style: |
ha-card {
margin: 0px 0px 6px 4px;
}
- type: custom:mushroom-chips-card
chips:
- type: template
entity: light.quarto
icon: mdi:lightbulb-group
icon_color: |
{% if is_state('light.quarto', 'on') %}
yellow
{% else %}
disabled
{% endif %}
tap_action:
action: toggle
card_mod:
style: |
ha-card {
--chip-box-shadow: none;
--ha-card-box-shadow: none;
--chip-border-width: 0;
}
alignment: end
card_mod:
style: |
ha-card {
margin: 0px 8px 6px 0px;
}
- type: horizontal-stack
cards:
- type: custom:vertical-stack-in-card
cards:
- type: custom:mushroom-template-card
primary: Casa de Banho
icon: mdi:bathtub
layout: vertical
icon_color: red
tap_action:
action: navigate
navigation_path: /lovelace/casa-de-banho
- type: horizontal-stack
cards:
- type: custom:mushroom-chips-card
chips:
- type: template
icon: mdi:thermometer
icon_color: yellow
content: '{{ states('''')}}°C'
card_mod:
style: |
ha-card {
--chip-box-shadow: none;
--ha-card-box-shadow: none;
--chip-border-width: 0;
}
- type: template
icon: mdi:water-percent
icon_color: blue
content: '{{ states('''')}}%'
card_mod:
style: |
ha-card {
--chip-box-shadow: none;
--ha-card-box-shadow: none;
--chip-border-width: 0;
}
alignment: start
card_mod:
style: |
ha-card {
margin: 0px 0px 6px 4px;
}
- type: custom:mushroom-chips-card
chips:
- type: template
entity: light.banho
icon: mdi:lightbulb-group
icon_color: |
{% if is_state('light.banho', 'on') %}
yellow
{% else %}
disabled
{% endif %}
tap_action:
action: toggle
card_mod:
style: |
ha-card {
--chip-box-shadow: none;
--ha-card-box-shadow: none;
--chip-border-width: 0;
}
alignment: end
card_mod:
style: |
ha-card {
margin: 0px 8px 6px 0px;
}
- type: custom:vertical-stack-in-card
cards:
- type: custom:mushroom-template-card
primary: Cozinha
icon: mdi:fridge
layout: vertical
icon_color: orange
tap_action:
action: navigate
navigation_path: /lovelace/cozinha
- type: horizontal-stack
cards:
- type: custom:mushroom-chips-card
chips:
- type: template
icon: mdi:thermometer
icon_color: yellow
content: '{{ states('''')}}°C'
card_mod:
style: |
ha-card {
--chip-box-shadow: none;
--ha-card-box-shadow: none;
--chip-border-width: 0;
}
- type: template
icon: mdi:water-percent
icon_color: blue
content: '{{ states('''')}}%'
card_mod:
style: |
ha-card {
--chip-box-shadow: none;
--ha-card-box-shadow: none;
--chip-border-width: 0;
}
alignment: start
card_mod:
style: |
ha-card {
margin: 0px 0px 6px 4px;
}
- type: custom:mushroom-chips-card
chips:
- type: template
entity: light.cozinha
icon: mdi:lightbulb-group
icon_color: |
{% if is_state('light.cozinha', 'on') %}
yellow
{% else %}
disabled
{% endif %}
tap_action:
action: toggle
card_mod:
style: |
ha-card {
--chip-box-shadow: none;
--ha-card-box-shadow: none;
--chip-border-width: 0;
}
alignment: end
card_mod:
style: |
ha-card {
margin: 0px 8px 6px 0px;
}
I know card-mod have a option for that but i cant find it.
Apreciate the help.
The popup just links to another dashboard view - straight to the included home assistant media browser. You could make it link to a fully custom page if desired.
The image is dynamic based on what ever album art is given via the Sonos integration.
Hi,
I really like that you can directly see whether a light group is on or not using the Chip card depending on its color. However, why isn’t that also implemented for switch groups?
Great view!
Could you please share /local/idle_art.png and /popups/mediabrowser_kitchen_sonos.yaml ?
the image you can find here
Thanks for helping me! It works! 
Has anyone made a sprinkler card by any chance??
Im looking to to show the target amount of water to use and then a slider bar that slowly fills up with the water being consumed?? Thoughts?
Thank you for that.
This is possible to change the position of the primary or secondary text in the card?
I’m currently using the Mushroom chips person card to show the presence status of person entities and have uploaded a picture for each person entity. It displays their picture with the little home/work badge which is cool.
But I also have some input_select helpers with various states such as “Just Left, Just Arrived, Home, Away” along with various automations so I can get a little more information on the presence of people instead of just “Home” or “Away”.
I’m trying to figure out a way of combining the mushroom chips person card idea while being able to display the state of the input_dropdown so I can see the extended state of the person since the default chips card seems to be limited to only showing the state of the person entity.
I think maybe I can do this with a the chips template card since it supports templating for the “picture” attribute but I can’t find an example of templating that would show the picture of a person entity. They all just reference a local picture you’ve put in your config directory somewhere (and I haven’t been able to find a location for the person entity pictures).
If any of this makes sense, anyone tried something similar or know of a way of displaying a person entity’s picture using templating?
lovelace-mushroom/template.md at main · piitaya/lovelace-mushroom · GitHub
Edit: found my solution in a previous post.
I like this style. Can you share your code?
I have created a new Room Card. Light bar and chips are all conditional. Lightbar only appears when a light status is on. The chips are also invisible and only appear when an event like motion occurs. İt’s compact and minimal. I hope you all enjoy it.
type: custom:stack-in-card
square: false
columns: 1
cards:
- type: custom:layout-card
layout: masonry
cards:
- type: grid
columns: 3
square: false
cards:
- type: custom:stack-in-card
cards:
- type: custom:mushroom-template-card
primary: Salon
picture: /local/png/sofa.png
secondary: |
Lights:💡{{ states('sensor.open_light_salon') }}
Temp: 🌡️ {{ states('sensor.hue_motion_temp_salon') }} °C
entity: group.salon
tap_action:
action: toggle
fill_container: false
layout: vertical
multiline_secondary: true
card_mod:
style: |
ha-card {
--icon-size: 68px;
background-size: 55px 40px;
{% if is_state(config.entity, 'on') %}
{% else %}
filter: grayscale(100%);
{% endif %}
}
- type: conditional
conditions:
- entity: light.salon
state: 'on'
card:
type: custom:mushroom-light-card
entity: light.salon
use_light_color: true
show_brightness_control: true
icon_type: none
primary_info: none
secondary_info: none
layout: vertical
tap_action:
action: none
hold_action:
action: none
double_tap_action:
action: none
card_mod:
style: |
ha-card {
background: rgba(var(--rgb-primary-background-color), 0.5);
padding: 0px 11px 11px;
--mush-rgb-disabled: 189,189,189;
--mush-rgb-state-light: 255, 152, 0;
- type: custom:mushroom-chips-card
chips:
- type: conditional
conditions:
- entity: binary_sensor.hue_motion_sensor_3_motion_3
state: 'on'
chip:
type: template
icon_color: orange
icon: mdi:motion-sensor
- type: conditional
conditions:
- entity: media_player.berkan_s_echo_dot
state: playing
chip:
type: template
icon_color: green
icon: mdi:music
card_mod:
style: |
@keyframes rotation {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
ha-card {
animation: rotation linear infinite;
animation-duration: 2s;
}
alignment: end
card_mod:
style: |
ha-card {
--chip-box-shadow: none;
--chip-background: none;
--chip-spacing: 0;
}
card_mod:
style: |
ha-card {
background: #1a1a2a;, 1.25);
{% if is_state('light.light_group_salon', 'on') %}
{% else %}
background: rgba(var(--rgb-primary-background-color), 0.3);
{% endif %}
}
mushroom-card {
background-size: 55px 40px;
{% if is_state('group.salon', 'on') %}
{% else %}
filter: grayscale(100%);
{% endif %}
}
card_mod:
style: |
ha-card {
background: rgba(var(--rgb-primary-background-color), 0.5);
margin-top: -12px;
box-shadow: none;
}
Edit: If you want to get total number of open lights or any other devices in a room just add this template sensor to your configuration.yaml or sensor.yaml file(If you have seperated it). Save and restart HA.
#GİYSİ
- platform: template
sensors:
giysi_cihazlar:
value_template: >-
{% set total = 0 %}
{% if is_state('switch.dressing_room_lokal_tuya', 'on') %}
{% set total = total + 1 %}
{% endif %}
{% if is_state('switch.dressing_room_lokal_tuya_empty', 'on') %}
{% set total = total + 1 %}
{% endif %}
{{total}}
The code is simple. You can add the entity numbers seperately. Lets say if you have 2 switches and 1 lights the code should be like this.
#GİYSİ
- platform: template
sensors:
giysi_cihazlar:
value_template: >-
{% set total = 0 %}
{% if is_state('switch.dressing_room_lokal_tuya', 'on') %}
{% set total = total + 1 %}
{% endif %}
{% if is_state('switch.dressing_room_lokal_tuya_empty', 'on') %}
{% set total = total + 1 %}
{% endif %}
{% if is_state('light.office, 'on') %}
{% set total = total + 1 %}
{% endif %}
{{total}}
4 Likes
I’ve been using the following format (from Counts the lights on - #205 by Vrrroem)
Also, no need to restart HA when adding (or editing) a template sensor, just use the reload Templates option in Dev Tools
#GİYSİ
- platform: template
sensors:
giysi_cihazlar:
value_template: >-
{% set lights = ['switch.dressing_room_lokal_tuya',
'switch.dressing_room_lokal_tuya_empty',
'light.office' ] %}
{{ expand(lights) | selectattr('state','eq','on') | list | count }}
1 Like
@sebbaT I decided to redo this one properly 
Mushroom Media Player with Volume:
type: custom:stack-in-card
cards:
- type: custom:mushroom-media-player-card
entity: media_player.currently_playing
icon: mdi:play
use_media_info: true
use_media_artwork: false
show_volume_level: false
media_controls:
- play_pause_stop
- previous
- next
volume_controls:
- volume_buttons
- volume_set
fill_container: false
card_mod:
style: |
mushroom-shape-icon {
display: flex;
{% set media_type = state_attr(config.entity, 'media_content_type') %}
{% if media_type == 'tvshow' %}
--card-mod-icon: mdi:television-classic;
animation: flicker 1s linear infinite alternate;
{% elif media_type == 'movie' %}
--card-mod-icon: mdi:movie-roll;
animation: spin 2s linear infinite reverse;
{% elif media_type == 'music' %}
--card-mod-icon: mdi:music;
animation: beat 1.3s ease-out infinite both;
{% elif media_type == 'playlist' %}
--card-mod-icon: mdi:music;
animation: beat 1.3s ease-out infinite both;
{% else %}
--card-mod-icon: mdi:play;
{% endif %}
{{ 'animation: none;' if not is_state(config.entity, 'playing') }}
}
@keyframes flicker {
0%, 31.98%, 32.98%, 34.98%, 36.98%, 39.98%, 67.98%, 68.98%, 95.98%, 96.98%, 97.98%, 98.98%, 100% { --icon-color: rgba(var(--album-art-color), 1); }
32%, 33%, 35%, 36%, 37%, 40%, 68%, 69%, 96%, 97%, 98%, 99% { --icon-color: rgba(var(--album-art-color), 0.6); }
}
@keyframes beat {
0%, 60% { --icon-symbol-size: 21px; }
5%, 17%, 57% { --icon-symbol-size: 22px; }
10%, 20%, 51% { --icon-symbol-size: 23px; }
25%, 45% { --icon-symbol-size: 24px; }
30%, 39% { --icon-symbol-size: 25px; }
33% { --icon-symbol-size: 26px; }
}
ha-card {
--ha-card-border-width: 0;
--rgb-state-media-player: var(--album-art-color);
}
.actions {
--rgb-primary-text-color: var(--album-art-color);
--primary-text-color: rgb(var(--album-art-color));
}
ha-card:before {
transform: translate3d(0,0,0);
-webkit-transform: translate3d(0,0,0);
content: "";
background: url('/local/idle_art.png') center no-repeat;
{% if not is_state(config.entity, 'idle') and not is_state(config.entity, 'off') %}
background: url( '{{ state_attr(config.entity, "entity_picture") }}') center no-repeat;
{% endif %}
background-size: contain;
margin: 4px 4px 16px;
filter: drop-shadow(4px 4px 6px rgba(0, 0, 0, 0.5));
border-radius: var(--control-border-radius);
{% set media_type = state_attr(config.entity, 'media_content_type') %}
{% if media_type == 'tvshow' %}
aspect-ratio: 16 / 9;
{% elif media_type == 'movie' %}
aspect-ratio: 2 / 3;
background-size: 100% 100%;
{% else %}
aspect-ratio: 1 / 1;
{% endif %}
}
.actions {
display: block !important;
}
mushroom-button {
display: flex;
width: calc((100% / 3) - (var(--spacing) / 3) * 2);
margin: auto;
}
mushroom-media-player-media-control,
mushroom-media-player-volume-control {
display: flex;
margin-right: 0px !important;
margin-bottom: var(--spacing) !important;
}
- type: conditional
conditions:
- entity: media_player.currently_playing
state_not: 'off'
- entity: media_player.currently_playing
state_not: idle
card:
entity: media_player.currently_playing
hide:
icon: true
name: true
runtime: true
source: true
power: true
state_label: true
volume: true
info: true
progress: false
controls: true
more_info: false
type: custom:mini-media-player
toggle_power: false
group: true
card_mod:
style:
mmp-progress$: |
paper-progress {
{% if is_state(config.entity, 'playing') %}
--paper-progress-container-color: rgba(var(--album-art-color), 0.2) !important;
{% endif %}
}
.: |
ha-card {
margin: 0px 12px 12px;
--mmp-progress-height: 12px !important;
height: var(--mmp-progress-height);
--mmp-accent-color: rgb(var(--album-art-color));
--mmp-border-radius: 12px !important;
--ha-card-border-width: 0;
}
card_mod:
style: |
ha-card:before {
transform: translate3d(0,0,0);
-webkit-transform: translate3d(0,0,0);
content: "";
position: absolute;
height: 100%;
width: 100%;
background: url('/local/idle_art.png') center no-repeat;
{% if not is_state('media_player.currently_playing', 'idle') and not is_state('media_player.currently_playing', 'off') %}
background: url( '{{ state_attr('media_player.currently_playing', "entity_picture") }}' ) center no-repeat;
{% endif %}
filter: blur(150px) saturate(200%) opacity(60%);
background-size: 100% 100%;
}
ha-card {
transform: translate3d(0,0,0);
-webkit-transform: translate3d(0,0,0);
}
:host {
--album-art-color:
{% if not is_state('media_player.currently_playing', 'idle') and not is_state('media_player.currently_playing', 'off') %}
{{ states('sensor.muted_color') }}
{% else %}
var(--rgb-indigo-color)
{% endif %};
}
15 Likes
what is {{ states(‘sensor.muted_color’) }}, can you share the code?
Greetings
Moss
Colors are extracted from the album art using Node-Red. Have a look here:
1 Like
Short question. How is the syntax when I just want to show the state of an attribute for this chip badge
i tried this but no luck
content: “{{ state_attr(’‘sensor.unifi_gateway_wlan’’, ‘‘num_user’’ }}”;
Like this:
content: "{{ state_attr('sensor.unifi_gateway_wlan', 'num_user') }}";
1 Like