I do not understand the meaning of the burining icon of the climate card:
Those are my smart TRV radiator valvles, the actual measured temperature is above (or same) the set temperature for all TRVs but some are showing the heating icon and some not (None is really warming at the moment)
Thx for sharing your code. But i have some questions:
Did you make this look for your mobile? And what should the links to the lovelace dashboards (e.g. bedroom) are for?
It would be very nice if you could share some more information. Otherwise very nicely done 
I’ve had some dashboards being casted to google nest hubs for a while now, using various mushroom cards. None of the cards show up anymore. All the non-mushroom cards are appearing, it’s only mushroom cards not showing up at all on the nest hubs. It’s the weirdest thing. They all show up just fine in the mobile app and web though.
Hi, I want to trigger this boolean in the frontend when I click the button the Boolean turns on and off but the state is not updating. What is wrong?
type: custom:mushroom-template-card
primary: Slapen
secondary: |-
{% if is_state('input_boolean.slapen_boven', 'on') %}
Aan
{% else %}
Uit
{% endif %}
icon: |-
{% if is_state('input_boolean.slapen_boven', 'on') %}
mdi:sleep
{% else %}
mdi:sleep-off
{% endif %}
badge_icon: ''
badge_color: ''
layout: vertical
fill_container: true
picture: ''
icon_color: |-
{% if is_state('input_boolean.slapen_boven', 'on') %}
yellow
{% else %}
blue
{% endif %}
tap_action:
action: call-service
service: input_boolean.toggle
data: {}
target:
entity_id: input_boolean.slapen
entity: input_boolean.slapen
This is probably pretty simple, but is it possible to have the cover card’s icon change depending on state (on/off) like the lock card? Ideally green for closed, red for open?
Loving all the examples, so helpful for developing a beautiful layout.
Having some trouble with the size of the card, I’m trying to get the tiles only take up the space displayed.
Any help would be appreciated
type: custom:vertical-stack-in-card
cards:
- type: custom:mushroom-template-card
entity: input_boolean.office_room_occupied
icon: |
{% if is_state(entity, 'on') %}
mdi:chair-rolling
{% else %}
mdi:chair-rolling
{% endif %}
icon_color: |
{% if is_state(entity, 'on') %}
#03A9F4
{% else %}
grey
{% endif %}
primary: Office
secondary: >-
{{ states('sensor.office_air_temperature') | round(0) }}°F | {{
states('sensor.office_ac_humidity') | round(0) }}%
layout: horizontal
tap_action:
action: navigate
navigation_path: /new-dashboard/office
double_tap_action:
action: navigate
navigation_path: /new-dashboard/office
hold_action:
action: toggle
badge_icon: |
{% if is_state('climate.office_ac', 'heat') %}
mdi:radiator
{% elif is_state('climate.office_ac', 'cool') %}
mdi:snowflake
{% else %} {% endif %}
badge_color: |
{% if is_state('climate.office_ac', 'heat') %}
red
{% elif is_state('climate.office_ac', 'cool') %}
#03A9F4
{% else %} {% endif %}
fill_container: false
card_mod:
style:
mushroom-state-info$: |
.primary {
font-size: 16px !important;
position: relative;
top: -50px;
left: -155px;
overflow: visible !important;
white-space: normal !important;
}
.secondary {
position: relative;
overflow: visible !important;
top: -52px;
left: -155px;
}
mushroom-shape-icon$: |
.shape {
position: relative;
left: -43px;
top: 55px;
}
.: |
:host {
--mush-icon-size: 146px;
--secondary-text-color:
{% if is_state('climate.office_ac', 'heat') %}
red
{% elif is_state('climate.office_ac', 'cool') %}
#03A9F4
{% else %}
#6c6c75
{% endif %}
}
style: |
mushroom-badge-icon {
left: 69px;
top: 25px;
}
- type: custom:mushroom-template-card
primary: none
icon_color: disabled
icon: mdi:lightbulb
secondary: none
entity: light.office_lights
tap_action:
action: fire-dom-event
browser_mod:
service: browser_mod.popup
data:
title: Living Room Lights
content:
type: custom:stack-in-card
mode: vertical
cards:
- type: horizontal-stack
cards:
- type: custom:mushroom-light-card
entity: light.tv_lights
layout: vertical
primary_info: name
card_mod:
style: |
ha-card {
--ha-card-border-width: 0px;
}
- type: custom:mushroom-light-card
entity: light.overhead_tv_lights
name: Overhead
layout: vertical
primary_info: name
card_mod:
style: |
ha-card {
--ha-card-border-width: 0px;
}
- type: custom:mushroom-light-card
entity: light.black_series_dimmer
layout: vertical
primary_info: name
card_mod:
style: |
ha-card {
--ha-card-border-width: 0px;
}
- type: custom:text-divider-row
text: Presets
- type: custom:mushroom-chips-card
chips:
- type: light
entity: light.living_room
name: Daylight
icon: mdi:lightbulb
content_info: name
use_light_color: false
tap_action:
action: call-service
service: light.turn_on
data:
kelvin: 5500
brightness: 50
transition: 2
target:
entity_id: light.living_room
card_mod:
style: |
ha-card {
--chip-background: rgb(255, 236, 224);
--text-color: black;
}
- type: light
entity: light.living_room
name: Cool White
tap_action:
action: call-service
service: light.turn_on
data:
kelvin: 3500
brightness: 50
transition: 2
target:
entity_id: light.living_room
content_info: name
use_light_color: false
icon: mdi:lightbulb
card_mod:
style: |
ha-card {
--chip-background: rgb(255, 196, 137);
--text-color: black;
}
- type: light
entity: light.living_room
icon: mdi:lightbulb
name: Cozy
use_light_color: false
content_info: name
tap_action:
action: call-service
service: light.turn_on
data:
transition: 2
brightness: 50
kelvin: 2700
target:
entity_id: light.living_room
card_mod:
style: |
ha-card {
--chip-background: rgb(255, 169, 87);
--text-color: black;
}
alignment: center
- type: custom:text-divider-row
text: Manual Adjustments
- type: custom:mushroom-light-card
entity: light.living_room
show_brightness_control: true
show_color_control: false
name: Brightness
layout: horizontal
fill_container: false
use_light_color: true
secondary_info: none
icon: mdi:brightness-7
card_mod:
style: |
ha-card {
--ha-card-border-width: 0px;
}
- type: custom:mushroom-light-card
entity: light.living_room
show_color_control: true
name: Color
use_light_color: true
layout: horizontal
secondary_info: none
icon: mdi:palette
card_mod:
style: |
ha-card {
--ha-card-border-width: 0px;
}
- type: custom:mushroom-light-card
entity: light.living_room
show_color_temp_control: true
name: Temperature
use_light_color: true
layout: horizontal
secondary_info: none
icon: mdi:white-balance-sunny
card_mod:
style: |
ha-card {
--ha-card-border-width: 0px;
}
hold_action:
action: toggle
double_tap_action:
action: more-info
badge_color: ''
card_mod:
style:
mushroom-shape-icon$: |
.shape {
{% if is_state(config.entity, 'on') %}
{% if state_attr(config.entity, 'rgb_color') == none %}
--icon-color: rgb(255,190,137) !important;
--shape-color: rgb(255,190,137, 0.2 ) !important;
{% else %}
{% set r = state_attr(config.entity, 'rgb_color')[0] %}
{% set g = state_attr(config.entity, 'rgb_color')[1] %}
{% set b = state_attr(config.entity, 'rgb_color')[2] %}
--icon-color: rgb( {{r}}, {{g}}, {{b}} ) !important;
--shape-color: rgba( {{r}}, {{g}}, {{b}}, 0.2 ) !important;
{% endif %}
{% endif %}
}
.: |
ha-card {
width: 66px;
margin-left: 68%;
top: -178px;
background: none;
}
:host {
--mush-icon-size: 38px;
}
- type: custom:mushroom-chips-card
chips:
- type: conditional
conditions:
- entity: input_boolean.living_room_room_occupied
state: 'on'
chip:
type: entity
entity: input_boolean.living_room_room_occupied
icon: mdi:motion-sensor
icon_color: blue
content_info: none
- type: conditional
conditions:
- entity: media_player.living_room_tv_2
state: playing
chip:
type: entity
entity: media_player.living_room_tv_2
icon: mdi:play-pause
icon_color: blue
content_info: none
tap_action:
action: fire-dom-event
browser_mod:
service: browser_mod.popup
data:
title: Master Bedroom Media Player
content:
type: custom:stack-in-card
cards:
- type: custom:mushroom-media-player-card
entity: media_player.garage_tv_2
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 %}
}
@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(--rgb-indigo), 1); }
32%, 33%, 35%, 36%, 37%, 40%, 68%, 69%, 96%, 97%, 98%, 99% { --icon-color: rgba(var(--rgb-indigo), 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;
}
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') %}
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;
{% else %}
aspect-ratio: 1 / 1;
{% endif %}
}
- type: conditional
conditions:
- entity: media_player.garage_tv_2
state_not: 'off'
- entity: media_player.garage_tv_2
state_not: idle
card:
entity: media_player.garage_tv_2
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 {
{{ '--paper-progress-container-color: rgba(var(--rgb-indigo-color), 0.2) !important;' if is_state(config.entity, 'playing') }}
}
.: |
ha-card {
margin: 0px 12px 12px;
--mmp-progress-height: 12px !important;
height: var(--mmp-progress-height);
--mmp-accent-color: rgb(var(--rgb-indigo-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.emby_bedroom', 'idle') %}
background: url( '{{ state_attr('media_player.emby_bedroom', "entity_picture") }}' ) center no-repeat;
{% endif %}
filter: blur(150px) saturate(200%);
background-size: 100% 100%;
}
ha-card {
transform: translate3d(0,0,0);
-webkit-transform: translate3d(0,0,0);
}
name: TV
card_mod:
style:
.: |
ha-card {
width: 66px;
margin-left: 76%;
top: -186px;
background: none;
--chip-border-width: 0;
}
:host {
--mush-icon-size: 20px;
--mush-chip-spacing: -2.9px
}
card_mod:
style: |
ha-card {
height: 178px !important;
width: 178px !important;
}
Hi
I’ve done this on the desktop and tried on the mobile the best looking one, and I figure it out that the two columns size is the best one, but you can change whatever you want.
I have another dashboard for the desktop and for the tablet made specifically for that devices.
The other links was the first ones that I have one for each house division, With that you don’t need that, because you can have all the devices in the swipe card.
Add --ha-card-border-width: 0; like so:
- type: custom:stack-in-card
cards:
- type: custom:apexcharts-card
chart_type: radialBar
series:
- entity: sensor.processor_use_percent
color: rgb(76, 175, 80)
max: 100
show:
legend_value: false
apex_config:
plotOptions:
radialBar:
offsetY: 0
startAngle: -108
endAngle: 108
hollow:
size: 65%
dataLabels:
name:
show: false
value:
show: false
track:
strokeWidth: 100%
margin: 0
legend:
show: false
chart:
height: 170px
card_mod:
style: |
ha-card {
--ha-card-border-width: 0;
}
- type: custom:mushroom-entity-card
entity: sensor.processor_use_percent
primary_info: name
secondary_info: state
name: Core
icon_color: green
layout: vertical
card_mod:
style: |
ha-card {
top: -63px;
--ha-card-background: none;
--ha-card-border-width: 0;
}
card_mod:
style: |
ha-card {
height: 158px;
}
Or use vertical-stack-in-card like so:
- type: custom:vertical-stack-in-card
cards:
- type: custom:apexcharts-card
chart_type: radialBar
series:
- entity: sensor.memory_use_percent
color: rgb(33, 150, 243)
max: 100
show:
legend_value: false
apex_config:
plotOptions:
radialBar:
offsetY: 0
startAngle: -108
endAngle: 108
hollow:
size: 65%
dataLabels:
name:
show: false
value:
show: false
track:
strokeWidth: 100%
margin: 0
legend:
show: false
chart:
height: 170px
- type: custom:mushroom-entity-card
entity: sensor.memory_use_percent
primary_info: name
secondary_info: state
name: Memory
icon_color: blue
layout: vertical
card_mod:
style: |
ha-card {
top: -63px;
--ha-card-background: none;
}
card_mod:
style: |
ha-card {
height: 158px;
}
Ok let’s start sharing from my new setup
As you all know Mushroom have an alarm chip. there is not much to be done with this chip. It is just a simple one providing information about the state of the alarm. the only thing i like about it is that the alarm icon is animated while it is arming.
But this animation only applies to the chip itself. So I decided to animate my whole topbar while alarm is in “armed” state and also when it’s “armed_away” I would also like the topbar to stay in red color reminding me that alarm has been turned on.
and the outcome is :
Now I don’t even need the alarm chip to be on my topbar. This can also be implemented into any card.
Enjoy!
type: custom:vertical-stack-in-card
square: false
columns: 1
cards:
- type: vertical-stack
cards:
- type: custom:mushroom-chips-card
chips:
- type: template
icon_color: ''
icon: mdi:menu
tap_action:
action: call-service
service: input_boolean.turn_on
data: {}
target:
entity_id: input_boolean.kiosk_mode
double_tap_action:
action: call-service
service: input_boolean.turn_off
data: {}
target:
entity_id: input_boolean.kiosk_mode
- type: alarm-control-panel
entity: alarm_control_panel.ha_alarm
- type: light
entity: light.all_light_and_switches
- type: weather
entity: weather.colak_ismail_2
- type: entity
entity: person.berkan_sezer
alignment: justify
card_mod:
style: |
:host {
--ha-card-background: rgba(var(--rgb-primary-text-color), 0.025);
}
ha-card {
--chip-icon-size: 22px;
--chip-background: none;
--chip-font-size: 12px;
--chip-spacing: 2px;
margin-top: 0px;
padding-right: auto;
padding-top: 1px;
padding-left: auto;
padding-bottom: 1px;
}
card_mod:
style: |
ha-card {
{% if is_state('alarm_control_panel.ha_alarm', 'arming') %}
background: url('/local/png/konum/alarm4.gif') center no-repeat;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
background-color: rgba(var(--rgb-card-background-color), 0.7);
background-blend-mode: overlay;
position: relative;
{%elif is_state('alarm_control_panel.ha_alarm', 'armed_away') %}
box-shadow: 0px 0px 6px 6px rgba(156,27,12,0.46) !important;
background: rgba(150, 0, 25, 0.35);
{% else %}
background: rgba(var(--rgb-card-background-color), 0.5);
{% endif %}
margin-top: 5px;
margin-left: auto;
margin-right: auto;
margin-bottom: 0px;
width: auto;
}
and the gif I used :
Hi Willem,
I see you are using to booleans.
For secondary, icon and icon_color you are using: input_boolean.slapen_boven
For entity and the entity_id in the tapaction you are using: input_boolean.slapen.
Maybe that has something to do with your problem.
Groeten,
Rob
Waiting for the new one page setup 
stupid… that was the error.
Loving the Mushroom cards. Is there a way to have a switch directly on an entity card instead od having to click thru to get to it? Trying to use the mushroom entity cards instead of the default but not liking the extra step. TIA
Here are some more updates for my Mushroom Media Player. These ones use extracted album art colors for the background and controls and use Node-Red to extract the colors.
Mushroom Mini Media Player & Popup:
type: custom:mushroom-media-player-card
entity: media_player.currently_playing
icon: mdi:play
use_media_info: true
icon_type: entity-picture
show_volume_level: false
media_controls:
- play_pause_stop
- next
volume_controls:
- volume_set
fill_container: false
layout: horizontal
tap_action:
action: fire-dom-event
browser_mod:
service: browser_mod.popup
data:
title: Currently Playing
content:
type: custom:stack-in-card
cards:
- type: custom:mushroom-media-player-card
entity: media_player.currently_playing
icon_type: none
layout: vertical
media_controls:
- previous
- play_pause_stop
- next
volume_controls:
- volume_set
- volume_buttons
show_volume_level: false
use_media_info: true
collapsible_controls: false
card_mod:
style:
mushroom-state-info$: |
/* CSS for Mushroom Popup Media Player */
.secondary:before {
/* Add album name between song title and artist name */
{% if state_attr(config.entity, 'media_album_name') != none %}
content: "{{ state_attr(config.entity, 'media_album_name')}}\A";
{% endif %}
/* Format title to fit on seperate line */
white-space: pre;
text-overflow: ellipsis;
}
.: |
ha-card {
/* Remove border from media player */
--ha-card-border-width: 0;
/* Apply album art color to media player icon & volume bar */
--rgb-state-media-player: var(--album-art-color);
/* Disable transitions */
transition: all 0s;
}
.actions {
/* Apply album art color to media player controls */
--rgb-primary-text-color: var(--album-art-color);
--primary-text-color: rgb(var(--album-art-color));
/* Move volume button to seperate row */
display: block !important;
}
ha-card:before {
content: "";
/* Show album art above media player when active and default image when idle */
{% if is_state(config.entity, ['playing', 'paused']) %}
background: url( '{{ state_attr(config.entity, "entity_picture") }}') center no-repeat;
{% else %}
background: url('/local/idle_art.png') center no-repeat;
{% endif %}
/* Add padding around album art */
margin: 0px 4px 16px;
/* Add drop shadow to album art */
filter: drop-shadow(4px 4px 6px rgba(var(--album-art-color), 0.3));
/* Round borders of album art */
border-radius: var(--control-border-radius);
/* Adjust the album art aspect ratio based on media type */
{% 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;
{% else %}
aspect-ratio: 1 / 1;
{% endif %}
/* Stretch album art to fit box. Fix for if album art is not sized correctly */
background-size: 100% 100%;
}
mushroom-button {
/* Size volume button to match other controls and center */
display: flex;
width: calc((100% / 3) - (var(--spacing) / 3) * 2);
margin: auto;
}
mushroom-media-player-media-control,
mushroom-media-player-volume-control {
/* Correct margins for volume button on second row */
display: flex;
margin-right: 0px !important;
/* Check if PLAY|STOP are supported and adjust margin accordingly */
{% if state_attr(config.entity, 'supported_features') | int | bitwise_and(20480) > 0 %}
margin-bottom: var(--spacing) !important;
{% endif %}
}
- 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 {
/* Apply album art color to progress bar when paused */
--paper-progress-container-color: rgba(var(--album-art-color), 0.2) !important;
/* Apply album art color to progress bar when playing */
--paper-progress-active-color: rgb(var(--album-art-color)) !important;
}
.: |
ha-card {
/* Move progress bar up into gap. Check if PLAY|STOP are supported */
--base-offset: calc(4 * var(--mush-spacing, 12px)
+ 1.33 * var(--mush-spacing, 12px)
+ var(--mush-card-primary-line-height, 1.5) * var(--mush-card-primary-font-size, 14px)
+ var(--mush-card-secondary-line-height, 1.5) * var(--mush-card-secondary-font-size, 12px)
+ var(--mush-control-height, 42px));
/* Check if Play (16385) or Stop (4096) are supported and add control button height if they are */
{% if state_attr(config.entity, 'supported_features') | int | bitwise_and(20480) > 0 %}
--control-offset: calc(var(--mush-spacing, 12px) + var(--mush-control-height, 42px));
{% else %}
--control-offset: 0px;
{% endif %}
/* Check if album name is present and add to height if it is */
{% set album_name = state_attr(config.entity, 'media_album_name') %}
{% if album_name == None or album_name == "" %}
--album-offset: 0px;
{% else %}
--album-offset: calc(var(--mush-card-secondary-line-height, 1.5) * var(--mush-card-secondary-font-size, 12px));
{% endif %}
bottom: calc(var(--base-offset) + var(--control-offset) + var(--album-offset));
/* Correct margins for progress bar */
margin: 0px 28px -12px;
/* Set height of card to match pregress bar height */
height: var(--mmp-progress-height);
/* Remove border outline */
--ha-card-border-width: 0;
/* Round corners of progress bar */
--mmp-border-radius: var(--control-border-radius, 12px) !important;
/* Set height of progress bar */
--mmp-progress-height: 12px !important;
/* Remove transitions to prevent progress bar floating in */
transition: all 0s;
}
card_mod:
style: |
:host {
/* Assign album art color to variable used in popup */
--album-art-color:
{% if is_state('media_player.currently_playing', ['playing', 'paused']) %}
{{ states('sensor.muted_color') }}
{% else %}
141, 117, 238
{% endif %};
/* Remove background because it is applied to popup */
--ha-card-background: none;
}
card_mod:
style:
ha-dialog$: |
.mdc-dialog__surface {
/* Apply gradient background to popup using album art colors. Set to default colors when idle */
{% if is_state('media_player.currently_playing', ['playing', 'paused']) %}
background: linear-gradient(305deg, transparent 50%, rgba({{ states('sensor.dark_vibrant_color') }}, 0.4)),
linear-gradient(55deg, transparent 50%, rgba({{ states('sensor.vibrant_color') }}, 0.2)),
linear-gradient(180deg, transparent 40%, rgba({{ states('sensor.dark_muted_color') }}, 0.3));
{% else %}
background: linear-gradient(0deg, transparent 40%, rgba(192, 127, 190, 0.3)),
linear-gradient(240deg, transparent 40%, rgba(143, 119, 237, 0.3)),
linear-gradient(120deg, transparent 40%, rgba(122, 181, 239, 0.3));
{% endif %}
}
ha-header-bar$: |
.mdc-top-app-bar {
/* Remove header background so that popup background is visible */
--mdc-theme-primary: none;
/* Reduced the gap between header and album art */
margin-bottom: -16px;
}
.: |
:host {
/* Set width of popup */
--popup-min-width: 450px;
}
card_mod:
style: |
/* CSS for Mushroom Mini Media Player */
ha-card {
/* Apply album art color to volume bar */
--rgb-state-media-player: var(--album-art-color);
/* Apply gradient background to sticky media player using album art colors */
{% if is_state('media_player.currently_playing', ['playing', 'paused']) %}
--ha-card-background: linear-gradient(135deg, rgba({{ states('sensor.dark_vibrant_color') }}, 0.3),
rgba({{ states('sensor.dark_muted_color') }}, 0.3));
{% endif %}
}
.actions {
/* Apply album art color to sticky media player controls */
--rgb-primary-text-color: var(--album-art-color);
--primary-text-color: rgb(var(--album-art-color));
/* Allow the album info to display more text */
max-width: fit-content;
min-width: calc(2 * var(--mush-spacing, 12px) + 3 * var(--mush-control-height, 42px));
}
mushroom-media-player-volume-control {
/* Fix the width of the volume bar */
width: 200px;
}
:host {
/* Add background to host to prevent transparent card */
border-radius: var(--ha-card-border-radius, 12px);
background: var(--card-background-color);
/* Assign album art color to variable used in sticky media player */
{% if is_state('media_player.currently_playing', ['playing', 'paused']) %}
--album-art-color: {{ states('sensor.muted_color') }};
{% else %}
/* Hide the sticky media player when it is idle */
display: none !important;
{% endif %}
/* Make the media player sticky at the bottom of the page */
position: sticky;
bottom: 12px;
}
Mushroom Media Player:
type: custom:stack-in-card
cards:
- type: custom:mushroom-media-player-card
entity: media_player.office
icon: mdi:play
name: Media Player
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
collapsible_controls: true
card_mod:
style:
mushroom-shape-icon:
$: |
ha-icon {
/* Animate media player icon based on media type */
{% set media_type = state_attr(config.entity, 'media_content_type') %}
--icon-animation:
{% if media_type == 'tvshow' %}
flicker 1s linear infinite alternate
{% elif media_type == 'movie' %}
spin 2s linear infinite reverse
{% elif media_type == 'music' %}
beat 1.3s ease-out infinite both
{% elif media_type == 'playlist' %}
beat 1.3s ease-out infinite both
{% endif %};
/* Stop animation while paused */
{{ '--icon-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% { opacity: 1; }
32%, 33%, 35%, 36%, 37%, 40%, 68%, 69%, 96%, 97%, 98%, 99% { opacity: 0.6; }
}
@keyframes beat {
0% { transform: scale(1); }
10% { transform: scale(1.1); }
17% { transform: scale(1.05); }
33% { transform: scale(1.25); }
60% { transform: scale(1); }
}
.: |
mushroom-shape-icon {
/* Change media player icon based on media type */
{% set media_type = state_attr(config.entity, 'media_content_type') %}
--card-mod-icon:
{% if media_type == 'tvshow' %}
mdi:television-classic
{% elif media_type == 'movie' %}
mdi:movie-roll
{% elif media_type == 'music' %}
mdi:music
{% elif media_type == 'playlist' %}
mdi:music
{% else %}
mdi:play
{% endif %};
}
ha-card {
/* Remove border from media player */
--ha-card-border-width: 0;
/* Apply album art color to media player icon & volume bar */
--rgb-state-media-player: var(--album-art-color);
/* Disable transitions */
transition: all 0s;
}
.actions {
/* Apply to controls only when active */
{% if is_state(config.entity, ['playing', 'paused']) %}
/* Apply album art color to media player controls */
--rgb-primary-text-color: var(--album-art-color);
--primary-text-color: rgb(var(--album-art-color));
/* Add space for progress bar */
padding-top: 24px;
{% endif %}
}
- entity: media_player.office
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 {
/* Hide the progress bar when not playing or paused */
{{ 'display: none;' if not is_state(config.entity, ['playing', 'paused']) }}
/* Apply album art color to progress bar when paused */
--paper-progress-container-color: rgba(var(--album-art-color), 0.2) !important;
/* Apply album art color to progress bar when playing */
--paper-progress-active-color: rgb(var(--album-art-color)) !important;
}
.: |
ha-card {
/* Move progress bar up into gap */
bottom: calc(3 * var(--mush-spacing, 12px) + var(--mush-control-height, 42px));
/* Correct margins for progress bar */
margin: 0px calc(1.618 * var(--mush-spacing, 12px)) calc(-1 * var(--mush-spacing, 12px));
/* Set height of card to match pregress bar height */
height: var(--mmp-progress-height);
/* Remove border outline */
--ha-card-border-width: 0;
/* Round corners of progress bar */
--mmp-border-radius: var(--control-border-radius, 12px) !important;
/* Set height of progress bar */
--mmp-progress-height: var(--mush-spacing, 12px) !important;
/* Remove transitions to prevent progress bar floating in */
transition: all 0s;
}
card_mod:
style: |
ha-card:before {
content: "";
/* Position and size background color */
position: absolute;
height: 100%;
width: 100%;
/* Apply background to media player using album art color */
{% if is_state('media_player.office', ['playing', 'paused']) %}
background: rgba({{ states('sensor.office_dark_vibrant_color') }}, 0.3);
{% endif %}
}
ha-card {
/* Apply blended album art background */
{% if is_state('media_player.office', ['playing', 'paused']) %}
background: url( '{{ state_attr("media_player.office", "entity_picture") }}' ) no-repeat,
linear-gradient(to left, transparent, rgb(var(--rgb-card-background-color)) 50%);
/* Adjust for different aspect ratio of TV shows episode art */
{% if state_attr('media_player.office', 'media_content_type') == 'tvshow' %}
background-size: 50% 100%, cover;
{% else %}
background-size: 50% auto, cover;
{% endif %}
/* Position art on right side */
background-position: right;
/* Blend art with background using saturation */
background-blend-mode: saturation;
{% endif %}
}
:host {
/* Assign album art color to variable used in media player. Default to indigo when idle */
--album-art-color:
{% if is_state('media_player.office', ['playing', 'paused']) %}
{{ states('sensor.office_muted_color') }}
{% else %}
var(--mush-rgb-indigo, 63, 81, 181)
{% endif %};
}
Node-Red Album Art Color Flow:
[{"id":"eacdc375eb4de995","type":"server-state-changed","z":"f05a616e.f2aef","name":"Currently Playing Changed","server":"84a6d09c.5336e","version":4,"exposeToHomeAssistant":false,"haConfig":[{"property":"name","value":""},{"property":"icon","value":""}],"entityidfilter":"media_player.currently_playing","entityidfiltertype":"exact","outputinitially":true,"state_type":"str","haltifstate":"playing","halt_if_type":"re","halt_if_compare":"is","outputs":2,"output_only_on_state_change":false,"for":"0","forType":"num","forUnits":"minutes","ignorePrevStateNull":false,"ignorePrevStateUnknown":false,"ignorePrevStateUnavailable":false,"ignoreCurrentStateUnknown":true,"ignoreCurrentStateUnavailable":true,"outputProperties":[{"property":"payload","propertyType":"msg","value":"","valueType":"entityState"},{"property":"data","propertyType":"msg","value":"","valueType":"eventData"},{"property":"topic","propertyType":"msg","value":"","valueType":"triggerId"}],"x":210,"y":3670,"wires":[["bd9143fe7b314177"],[]]},{"id":"bd9143fe7b314177","type":"function","z":"f05a616e.f2aef","name":"Format Album Art URL","func":"msg.payload = 'https://**homeassistant.url**:8123' + msg.data.new_state.attributes.entity_picture\nreturn msg;","outputs":1,"noerr":0,"initialize":"","finalize":"","libs":[],"x":530,"y":3670,"wires":[["c309c0f5a752ecdd"]]},{"id":"c309c0f5a752ecdd","type":"vibrant","z":"f05a616e.f2aef","name":"Extract Album Art Color","x":840,"y":3670,"wires":[["7882f420860746b9"]]},{"id":"7882f420860746b9","type":"function","z":"f05a616e.f2aef","name":"Colors","func":"var msg1 = { payload: msg.payload.Vibrant.rgb[0] + ',' + msg.payload.Vibrant.rgb[1] + ',' + msg.payload.Vibrant.rgb[2] };\nvar msg2 = { payload: msg.payload.DarkVibrant.rgb[0] + ',' + msg.payload.DarkVibrant.rgb[1] + ',' + msg.payload.DarkVibrant.rgb[2] };\nvar msg3 = { payload: msg.payload.LightVibrant.rgb[0] + ',' + msg.payload.LightVibrant.rgb[1] + ',' + msg.payload.LightVibrant.rgb[2] };\nvar msg4 = { payload: msg.payload.Muted.rgb[0] + ',' + msg.payload.Muted.rgb[1] + ',' + msg.payload.Muted.rgb[2] };\nvar msg5 = { payload: msg.payload.DarkMuted.rgb[0] + ',' + msg.payload.DarkMuted.rgb[1] + ',' + msg.payload.DarkMuted.rgb[2] };\nvar msg6 = { payload: msg.payload.LightMuted.rgb[0] + ',' + msg.payload.LightMuted.rgb[1] + ',' + msg.payload.LightMuted.rgb[2] };\n\nreturn [msg1, msg2, msg3, msg4, msg5, msg6];","outputs":6,"noerr":0,"initialize":"","finalize":"","libs":[],"x":1090,"y":3670,"wires":[["cf6ff890cadf96ef"],["63e066959f858c54"],["6efb0dc3953b3240"],["5806b87267d02bc3"],["77b1979bc5ad11f3"],["e5b91489990a01ea"]]},{"id":"cf6ff890cadf96ef","type":"ha-sensor","z":"f05a616e.f2aef","name":"Vibrant Color","entityConfig":"dfb12e11b7a6e846","version":0,"state":"payload","stateType":"msg","attributes":[],"inputOverride":"allow","outputProperties":[],"x":1460,"y":3540,"wires":[[]]},{"id":"63e066959f858c54","type":"ha-sensor","z":"f05a616e.f2aef","name":"Dark Vibrant Color","entityConfig":"3e58f341fe905599","version":0,"state":"payload","stateType":"msg","attributes":[],"inputOverride":"allow","outputProperties":[],"x":1480,"y":3590,"wires":[[]]},{"id":"6efb0dc3953b3240","type":"ha-sensor","z":"f05a616e.f2aef","name":"Light Vibrant Color","entityConfig":"70d8791a24738ee6","version":0,"state":"payload","stateType":"msg","attributes":[],"inputOverride":"allow","outputProperties":[],"x":1480,"y":3640,"wires":[[]]},{"id":"5806b87267d02bc3","type":"ha-sensor","z":"f05a616e.f2aef","name":"Muted Color","entityConfig":"be0a1e0059e1713e","version":0,"state":"payload","stateType":"msg","attributes":[],"inputOverride":"allow","outputProperties":[],"x":1460,"y":3690,"wires":[[]]},{"id":"77b1979bc5ad11f3","type":"ha-sensor","z":"f05a616e.f2aef","name":"Dark Muted Color","entityConfig":"90991e9dde96cec6","version":0,"state":"payload","stateType":"msg","attributes":[],"inputOverride":"allow","outputProperties":[],"x":1480,"y":3740,"wires":[[]]},{"id":"e5b91489990a01ea","type":"ha-sensor","z":"f05a616e.f2aef","name":"Light Muted Color","entityConfig":"13f67da67efbf0ae","version":0,"state":"payload","stateType":"msg","attributes":[],"inputOverride":"allow","outputProperties":[],"x":1480,"y":3790,"wires":[[]]},{"id":"84a6d09c.5336e","type":"server","name":"Home Assistant","version":5,"addon":true,"rejectUnauthorizedCerts":true,"ha_boolean":"y|yes|true|on|home|open","connectionDelay":true,"cacheJson":true,"heartbeat":false,"heartbeatInterval":"30","areaSelector":"friendlyName","deviceSelector":"friendlyName","entitySelector":"friendlyName","statusSeparator":"at: ","statusYear":"hidden","statusMonth":"short","statusDay":"numeric","statusHourCycle":"h23","statusTimeFormat":"h:m","enableGlobalContextStore":true},{"id":"dfb12e11b7a6e846","type":"ha-entity-config","server":"84a6d09c.5336e","deviceConfig":"","name":"Vibrant Color","version":"6","entityType":"sensor","haConfig":[{"property":"name","value":"Vibrant Color"},{"property":"icon","value":""},{"property":"entity_category","value":""},{"property":"device_class","value":""},{"property":"unit_of_measurement","value":""},{"property":"state_class","value":""}],"resend":false,"debugEnabled":false},{"id":"3e58f341fe905599","type":"ha-entity-config","server":"84a6d09c.5336e","deviceConfig":"","name":"Dark Vibrant Color","version":"6","entityType":"sensor","haConfig":[{"property":"name","value":"Dark Vibrant Color"},{"property":"icon","value":""},{"property":"entity_category","value":""},{"property":"device_class","value":""},{"property":"unit_of_measurement","value":""},{"property":"state_class","value":""}],"resend":false,"debugEnabled":false},{"id":"70d8791a24738ee6","type":"ha-entity-config","server":"84a6d09c.5336e","deviceConfig":"","name":"Light Vibrant Color","version":"6","entityType":"sensor","haConfig":[{"property":"name","value":"Light Vibrant Color"},{"property":"icon","value":""},{"property":"entity_category","value":""},{"property":"device_class","value":""},{"property":"unit_of_measurement","value":""},{"property":"state_class","value":""}],"resend":false,"debugEnabled":false},{"id":"be0a1e0059e1713e","type":"ha-entity-config","server":"84a6d09c.5336e","deviceConfig":"","name":"Muted Color","version":"6","entityType":"sensor","haConfig":[{"property":"name","value":"Muted Color"},{"property":"icon","value":""},{"property":"entity_category","value":""},{"property":"device_class","value":""},{"property":"unit_of_measurement","value":""},{"property":"state_class","value":""}],"resend":false,"debugEnabled":false},{"id":"90991e9dde96cec6","type":"ha-entity-config","server":"84a6d09c.5336e","deviceConfig":"","name":"Dark Muted Color","version":"6","entityType":"sensor","haConfig":[{"property":"name","value":"Dark Muted Color"},{"property":"icon","value":""},{"property":"entity_category","value":""},{"property":"device_class","value":""},{"property":"unit_of_measurement","value":""},{"property":"state_class","value":""}],"resend":false,"debugEnabled":false},{"id":"13f67da67efbf0ae","type":"ha-entity-config","server":"84a6d09c.5336e","deviceConfig":"","name":"Light Muted Color","version":"6","entityType":"sensor","haConfig":[{"property":"name","value":"Light Muted Color"},{"property":"icon","value":""},{"property":"entity_category","value":""},{"property":"device_class","value":""},{"property":"unit_of_measurement","value":""},{"property":"state_class","value":""}],"resend":false,"debugEnabled":false}]
You will need to replace **homeassistant.url** with the URL for your Home Assistant instance.
In addition to Node-Red the Vibrant Node is Required:
This looks brilliant - have you got a virtual media player set up to show whats currently playing?
I use Universal Media Player. Have a look here:
Here is some bling that someone might like. You can use any image, including animated GIFs, or none if you prefer.
Mushroom Animated Header:
type: custom:stack-in-card
cards:
- type: custom:mushroom-chips-card
chips:
- type: back
card_mod:
style: |
ha-card {
/* Position Back Chip on the left */
position: absolute;
left: 0px;
}
- type: conditional
conditions:
- entity: binary_sensor.rhys_office_left_window_contact
state: 'on'
chip:
type: template
content: Left
icon: mdi:window-open
icon_color: grey
tap_action:
action: none
hold_action:
action: none
- type: conditional
conditions:
- entity: binary_sensor.rhys_office_right_window_contact
state: 'on'
chip:
type: template
content: Right
icon: mdi:window-open
icon_color: grey
tap_action:
action: none
hold_action:
action: none
- type: conditional
conditions:
- entity: binary_sensor.rhys_pc_in_use
state: 'on'
chip:
type: template
icon: mdi:mouse
icon_color: grey
tap_action:
action: none
hold_action:
action: none
- type: conditional
conditions:
- entity: binary_sensor.rhys_office_motion_occupancy
state: 'on'
chip:
type: template
icon: mdi:motion-sensor
icon_color: grey
tap_action:
action: none
hold_action:
action: none
- type: conditional
conditions:
- entity: binary_sensor.rhys_office_smoke
state: 'on'
chip:
type: template
icon_color: red
tap_action:
action: none
hold_action:
action: none
icon: mdi:fire-alert
card_mod:
style: |
.content {
animation: blink 1s linear infinite;
}
@keyframes blink {
50% {opacity: 0;}
}
- type: conditional
conditions:
- entity: binary_sensor.rhys_office_door_contact
state: 'on'
chip:
type: template
icon: mdi:door-open
icon_color: grey
tap_action:
action: none
hold_action:
action: none
alignment: end
card_mod:
style:
mushroom-template-chip:
$: |
mushroom-chip {
/* Set default cursor for all Chips except back */
cursor: default !important;
}
.: |
ha-card {
/* Correct chips height when none active */
height: var(--chip-height);
/* Fix inconsistent right margin spacing */
margin-right: calc(-1 * var(--chip-spacing));
/* Disable transition animation */
transition: all 0s;
}
/* Fix Chip positioning */
.chip-container * {
/* Apply consistent margin to Chips */
margin: 0px calc(var(--chip-spacing)) 0px 0px;
display: flex;
}
mushroom-conditional-chip {
/* Don't apply margins to conditional Chip */
margin: 0px !important;
}
- type: custom:mushroom-title-card
title: Rhys' Office
alignment: center
card_mod:
style: |
:host {
/* Stick header to top of page */
position: sticky;
/* Offset header below HA header */
top: var(--header-height);
/* Bring header to the front */
z-index: 1;
/* Reduce padding on title */
--mush-title-padding: 12px 0px 12px;
}
ha-card {
/* Blend card background with header and adjust transparency. Set to 'none' for fully transparent */
background: rgba(var(--rgb-card-background-color), 0.2);
/* Blur cards behind header */
backdrop-filter: blur(5px);
-webkit-backdrop-filter: blur(5px);
/* Add padding around chips */
padding: var(--mush-chip-spacing, 8px);
/* Square top corners and round bottom */
border-radius: 0 0 var(--ha-card-border-radius, 12px) var(--ha-card-border-radius, 12px);
/* Adjust for gap at top of header and spacing below */
margin: -8px 0px 34px;
/* Add shadow below header */
box-shadow: 0px 4px 8px -2px rgba(0, 0, 0, 0.16);
/* Disable transition animation */
transition: all 0s;
}
/* Pseudo element to overlay image on header. Remove if image is not
required */
ha-card:before {
content: "";
/* Position & size header background */
position: absolute;
width: 100%;
height: 100%;
left: 0px;
/* Background image of header */
background: url('/local/particles1.gif') top center / 100%;
/* Set transparency of header */
opacity: 0.4;
/* Move background behind title */
z-index: -1;
/* Match top magin to underlying card */
margin-top: -8px;
}
You can change the Tap action to Toggle.
Is there a was to show a card or chip during a specific time of the day? I would like to set the alarm clock in the evening.
Stefan