Please keep this in mind 
3 Likes
Made a Mushroom/Homekit inspired dashboard. All of the tiles are Mushroom and I use the custom-layout-card and other various HACS integrations in order to get the proper layout. It’s the same dashboard that works in both desktop and mobile.
24 Likes
I’d love to see how you setup that layout card. Right now on desktop I just have the 2 rows like on my mobile. I was going to just build out a completely separate dashboard but this seems much more efficient.
I used a layout-card, vertical-layout for the whole page. And then I used a break card to indicate when to move to column 2.
title: ''
views:
- theme: Backend-selected
icon: mdi:home
path: default_view
title: Home
layout:
max_cols: 2
width: 300
type: custom:vertical-layout
badges: []
cards:
- card for livingroom stuff
bla bla
- card for family room stuff
bla bla
- type: custom:layout-break
- card for garage that is on the 2nd column
1 Like
so nice… hoiw did you do the menu on the left?
could share the yaml code please
Nice work! Would love to see the code 
Can you share your code ?
My mobile dashboard is almost finished.
Using mushrooms, popups, animated icons, dark/light alternator and a simple picture on top of it make it shiny!
9 Likes
How did you make the dark/light theme toggler work? Code?
It is a simple automation, based on a input_boolean state.
You need browser mod and after registering the device you change the ID.
alias: Geral Casa - Dark/Light Mobile
description: Mudar tema para claro ou escuro
trigger:
- platform: state
entity_id: input_boolean.change_theme
to:
- "on"
- "off"
condition: []
action:
- service: browser_mod.set_theme
target:
device_id: de4bf60eb27fa46a24e57ea4228bcd0c
data:
dark: |-
{% if states('input_boolean.change_theme') == 'on' %}
dark
{% else %}
light
{% endif %}
mode: single
Then the chip is this.
- type: custom:mushroom-chips-card
style:
top: 5%
left: 95%
chips:
- type: template
icon: |-
{% if states('input_boolean.change_theme') == 'on' %}
mdi:sun-wireless-outline
{% else %}
mdi:moon-waning-crescent
{% endif %}
icon_color: |-
{% if states('input_boolean.change_theme') == 'on' %}
yellow
{% else %}
black
{% endif %}
content: ''
tap_action:
action: toggle
entity: input_boolean.change_theme
alignment: end
2 Likes
mind sharing the code for your “header”? the top part with the background
Sure, here it is, you have to adjust it for your phone screen on width/height and margin.
type: picture-elements
image: local/images/ios-themes/homekit-bg-dark-blue.jpg
card_mod:
style: |
ha-card {
width: 102% !important;
height: 180px !important;
margin: -9px 0px 0px -4px;
border-radius: 5px 5px 0px 0px;
box-shadow: none;
--ha-card-border-width: 0;
margin-bottom: calc(-1 * var(--ha-card-border-radius, 12px));
--paper-item-icon-active-color: rgb(var(--rgb-brown-color));
--mdc-icon-size: 120%;
}
ha-card:after {
content: "";
position: absolute;
background-color: var(--primary-background-color);
height: calc(2.3 * var(--ha-card-border-radius, 15px));
width: 100%;
bottom: calc(-1 * var(--ha-card-border-radius, 12px));
left: 0px;
border-top-left-radius: var(--ha-card-border-radius, 12px);
border-top-right-radius: var(--ha-card-border-radius, 12px);
box-shadow: var(--ha-card-box-shadow) inset;
}
elements:
- type: custom:simple-weather-card
style:
top: 20%
left: 50%
entity: weather.forecast_casa
backdrop:
day: transparent
night: transparent
primary_info:
- wind_bearing
- humidity
secondary_info:
- precipitation
- pressure
custom:
- temp: sensor.wupws_temp
- wind_bearing: sensor.wupws_windspeed
- humidity: sensor.wupws_humidity
- precipitation: sensor.wupws_preciptotal
- pressure: sensor.wupws_uv
card_mod:
style: |
ha-card {
width: 400px !important;
box-shadow: none;
color: white !important;
- type: custom:mushroom-chips-card
style:
top: 5%
left: 5%
chips:
- type: menu
- type: custom:mushroom-chips-card
style:
top: 5%
left: 95%
chips:
- type: template
icon: |-
{% if states('input_boolean.change_theme') == 'on' %}
mdi:sun-wireless-outline
{% else %}
mdi:moon-waning-crescent
{% endif %}
icon_color: |-
{% if states('input_boolean.change_theme') == 'on' %}
yellow
{% else %}
black
{% endif %}
content: ''
tap_action:
action: toggle
entity: input_boolean.change_theme
alignment: end
1 Like
Can you share your code ?
Hi
Here is my little contribution, I had fun creating a media_player card (inspired by various elements of the community)
idle
music
movie
tvshow
The same card for the TV with the display of the last download on standby
Prerequisites:
For hide/show card
Template Sensor to extract poster
- platform: template
sensors:
plex_recently_all_poster_1:
friendly_name: "All 1 poster"
icon_template: mdi:movie-roll
value_template: "{{ state_attr('sensor.recently_added', 'data')[1]['poster'] }}"
Template Binary_sensor to extract the type of media currently playing
- platform: template
sensors:
plex_iphone_music_content_type:
friendly_name: 'Plex Iphone Music'
value_template: >-
{{ (state_attr('media_player.plex_iphone_damien','media_content_type') == 'music') }}
plex_iphone_tvshow_content_type:
friendly_name: 'Plex Iphone TV Show'
value_template: >-
{{ (state_attr('media_player.plex_iphone_damien','media_content_type') == 'tvshow') }}
plex_iphone_movie_content_type:
friendly_name: 'Plex Iphone Movie'
value_template: >-
{{ (state_attr('media_player.plex_iphone_damien','media_content_type') == 'movie') }}
Card
type: custom:local-conditional-card
default: hide
id: iphone1
card:
type: custom:stack-in-card
keep:
box_shadow: false
border_radius: true
margin: true
outer_padding: false
background: false
cards:
- type: grid
columns: 2
square: false
cards:
- type: grid
columns: 1
square: false
cards:
- type: vertical-stack
cards:
- type: custom:mushroom-title-card
title: iPhone Dam
subtitle: >
{% if is_state('media_player.plex_iphone_damien', 'playing')
%}
Lecture en cours
{% elif is_state('media_player.plex_iphone_damien',
'paused') %}
En pause
{% else %}
En veille
{% endif %}
alignment: center
- type: conditional
conditions:
- entity: media_player.plex_iphone_damien
state_not: unavailable
- entity: media_player.plex_iphone_damien
state_not: idle
card:
type: custom:mushroom-chips-card
chips:
- type: template
icon: mdi:skip-backward
entity: media_player.plex_iphone_damien
tap_action:
action: call-service
service: media_player.media_previous_track
data: {}
target:
entity_id: media_player.plex_iphone_damien
card_mod:
style:
style: |
ha-card {
margin: 0px 10px 0px 0;
--chip-background: rgba(var(--rgb-disabled), 0.15);
--ha-card-box-shadow: none;
--chip-border-radius: 12px;
--chip-height: 35px;
--chip-padding: 10px;
}
- type: template
entity: media_player.plex_iphone_damien
icon: >-
{% if is_state('media_player.plex_iphone_damien',
'playing') %}
mdi:pause
{% else %}
mdi:play
{% endif %}
tap_action:
action: call-service
service: media_player.media_play_pause
data: {}
target:
entity_id: media_player.plex_iphone_damien
card_mod:
style:
style: |
ha-card {
margin: 0px 0px 0px 0px;
--chip-background: rgba(var(--rgb-disabled), 0.15);
--ha-card-box-shadow: none;
--chip-border-radius: 12px;
--chip-height: 35px;
--chip-padding: 10px;
}
- type: template
entity: media_player.plex_iphone_damien
icon: mdi:skip-forward
tap_action:
action: call-service
service: media_player.media_next_track
data: {}
target:
entity_id: media_player.plex_iphone_damien
card_mod:
style:
style: |
ha-card {
margin: 0px 0px 0px 10px;
--chip-background: rgba(var(--rgb-disabled), 0.15);
--ha-card-box-shadow: none;
--chip-border-radius: 12px;
--chip-height: 35px;
--chip-padding: 10px;
}
alignment: center
- type: conditional
conditions:
- entity: binary_sensor.plex_iphone_movie_content_type
state: 'on'
card:
type: custom:mushroom-chips-card
chips:
- type: template
content: >
{{ state_attr('media_player.plex_iphone_damien',
'media_library_title') }}
entity: media_player.plex_iphone_damien
tap_action:
action: none
alignment: center
card_mod:
style:
style: |
ha-card {
margin: 20px 0 0 0;
--chip-background: rgba(var(--rgb-disabled), 0.15);
--ha-card-box-shadow: none;
--chip-border-radius: 12px;
--chip-height: 35px;
--chip-padding: 60px;
}
- type: conditional
conditions:
- entity: binary_sensor.plex_iphone_music_content_type
state: 'on'
card:
type: custom:mushroom-title-card
title: ''
alignment: center
subtitle: >-
{{ state_attr('media_player.plex_iphone_damien',
'media_artist') }} - {{
state_attr('media_player.plex_iphone_damien',
'media_title') }}
- type: conditional
conditions:
- entity: binary_sensor.plex_iphone_movie_content_type
state: 'on'
card:
type: custom:mushroom-title-card
title: ''
alignment: center
subtitle: >-
{{ state_attr('media_player.plex_iphone_damien',
'media_title') }}
- type: conditional
conditions:
- entity: binary_sensor.plex_iphone_tvshow_content_type
state: 'on'
card:
type: custom:mushroom-title-card
title: ''
alignment: center
subtitle: >-
{{ state_attr('media_player.plex_iphone_damien',
'media_series_title') }}
- type: conditional
conditions:
- entity: media_player.plex_iphone_damien
state_not: playing
- entity: media_player.plex_iphone_damien
state_not: paused
card:
type: vertical-stack
cards:
- type: custom:mushroom-media-player-card
entity: media_player.plex_iphone_damien
primary_info: none
secondary_info: none
icon_type: none
use_media_info: false
use_media_artwork: false
show_volume_level: false
fill_container: false
card_mod:
style: |
ha-card:before {
transform: translate3d(0,0,0);
-webkit-transform: translate3d(0,0,0);
content: "";
background: url('/local/mushroom/idle_art.png') center no-repeat;
{% if not is_state(config.entity, 'unavailable') and not is_state(config.entity, 'idle') %}
background: url( '{{ state_attr(config.entity, "entity_picture") }}') center no-repeat;
{% endif %}
background-size: contain;
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 %}
}
ha-card {
transform: translate3d(0,0,0);
-webkit-transform: translate3d(0,0,0);
border-radius: 30px;
overflow: visible !important;
box-shadow: none !important;
background-color: transparent;
border: none !important;
}
- type: conditional
conditions:
- entity: binary_sensor.plex_iphone_tvshow_content_type
state: 'on'
card:
type: vertical-stack
cards:
- type: custom:mushroom-media-player-card
entity: media_player.plex_iphone_damien
primary_info: none
secondary_info: none
icon_type: none
use_media_info: false
use_media_artwork: false
show_volume_level: false
fill_container: false
card_mod:
style: |
ha-card:before {
transform: translate3d(0,0,0);
-webkit-transform: translate3d(0,0,0);
content: "";
background: url('/local/mushroom/idle_art.png') center no-repeat;
{% if not is_state(config.entity, 'unavailable') %}
background: url( '{{ state_attr(config.entity, "entity_picture") }}') center no-repeat;
{% endif %}
background-size: contain;
border-radius: var(--control-border-radius);
{% set media_type = state_attr(config.entity, 'media_content_type') %}
{% if media_type == 'tvshow' %}
aspect-ratio: 16 / 9;
margin: 0px 0px 0px -45px;
margin-top: 1px;
{% elif media_type == 'movie' %}
aspect-ratio: 2 / 3;
{% else %}
aspect-ratio: 1 / 1;
width: 99%;
{% endif %}
}
ha-card {
transform: translate3d(0,0,0);
-webkit-transform: translate3d(0,0,0);
border-radius: 30px;
overflow: visible !important;
box-shadow: none !important;
background-color: transparent;
border: none !important;
}
- type: conditional
conditions:
- entity: binary_sensor.plex_iphone_tvshow_content_type
state: 'on'
card:
type: custom:mushroom-chips-card
chips:
- type: template
content: >
{{ state_attr('media_player.plex_iphone_damien',
'media_library_title') }}
entity: media_player.plex_iphone_damien
tap_action:
action: none
alignment: center
card_mod:
style:
style: |
ha-card {
margin: 0px 40px 10px 0px;
--chip-background: rgba(var(--rgb-disabled), 0.15);
--ha-card-box-shadow: none;
--chip-border-radius: 12px;
--chip-height: 35px;
--chip-padding: 60px;
}
- type: conditional
conditions:
- entity: binary_sensor.plex_iphone_music_content_type
state: 'on'
card:
type: vertical-stack
cards:
- type: custom:mushroom-media-player-card
entity: media_player.plex_iphone_damien
primary_info: none
secondary_info: none
icon_type: none
use_media_info: false
use_media_artwork: false
show_volume_level: false
fill_container: false
card_mod:
style: |
ha-card:before {
transform: translate3d(0,0,0);
-webkit-transform: translate3d(0,0,0);
content: "";
background: url('/local/mushroom/idle_art.png') center no-repeat;
{% if not is_state(config.entity, 'unavailable') %}
background: url( '{{ state_attr(config.entity, "entity_picture") }}') center no-repeat;
{% endif %}
background-size: contain;
border-radius: var(--control-border-radius);
{% set media_type = state_attr(config.entity, 'media_content_type') %}
{% if media_type == 'tvshow' %}
aspect-ratio: 16 / 9;
margin: 0px -5px -20px -20px;
margin-top: 20px;
{% elif media_type == 'movie' %}
aspect-ratio: 2 / 3;
{% else %}
aspect-ratio: 1 / 1;
width: 99%;
{% endif %}
ha-card {
transform: translate3d(0,0,0);
-webkit-transform: translate3d(0,0,0);
border-radius: 30px;
overflow: visible !important;
box-shadow: none !important;
background-color: transparent;
border: none !important;
}
- type: conditional
conditions:
- entity: binary_sensor.plex_iphone_music_content_type
state: 'on'
card:
type: custom:mushroom-chips-card
chips:
- type: template
content: >
{{ state_attr('media_player.plex_iphone_damien',
'media_library_title') }}
entity: media_player.plex_iphone_damien
tap_action:
action: none
alignment: center
card_mod:
style:
style: |
ha-card {
margin: -10px 0px 10px 0;
--chip-background: rgba(var(--rgb-disabled), 0.15);
--ha-card-box-shadow: none !important;
--chip-border-radius: 12px;
--chip-height: 35px;
--chip-padding: 60px;
}
- type: conditional
conditions:
- entity: binary_sensor.plex_iphone_movie_content_type
state: 'on'
card:
type: vertical-stack
cards:
- type: custom:mushroom-media-player-card
entity: media_player.plex_iphone_damien
primary_info: none
secondary_info: none
icon_type: none
use_media_info: false
use_media_artwork: false
show_volume_level: false
fill_container: false
card_mod:
style: |
ha-card:before {
transform: translate3d(0,0,0);
-webkit-transform: translate3d(0,0,0);
content: "";
background: url('/local/mushroom/idle_art.png') center no-repeat;
{% if not is_state(config.entity, 'unavailable') %}
background: url( '{{ state_attr(config.entity, "entity_picture") }}') center no-repeat;
{% endif %}
background-size: contain;
border-radius: var(--control-border-radius);
{% set media_type = state_attr(config.entity, 'media_content_type') %}
{% if media_type == 'tvshow' %}
aspect-ratio: 16 / 9;
margin: 0px -5px -20px -20px;
margin-top: 20px;
{% elif media_type == 'movie' %}
aspect-ratio: 2 / 3;
{% else %}
aspect-ratio: 1 / 1;
width: 99%;
{% endif %}
}
card_mod:
style: |
ha-card:before {
transform: translate3d(0,0,0);
-webkit-transform: translate3d(0,0,0);
content: "";
position: absolute;
height: 100%;
width: 100%;
ha-card {
transform: translate3d(0,0,0);
-webkit-transform: translate3d(0,0,0);
border-radius: 30px;
overflow: visible !important;
box-shadow: none;
background-color: transparent;
border: none !important;
}
@media (min-width: 1200px) {
ha-card {
margin-top: 30px;
}
}
:host {
margin-top: 50px !important;
--album-art-color:
{% if not is_state('media_player.plex_iphone_damien', 'idle') and not is_state('media_player.plex_iphone_damien', 'off') %}
{{ states('sensor.plex_recently_all_poster_1') }}
{% else %}
var(--rgb-indigo-color)
{% endif %};
}
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('{{ state_attr('media_player.plex_iphone_damien', "entity_picture") }}') center no-repeat;
filter: blur(150px) saturate(200%);
background-size: 100% 100%;
}
ha-card {
transform: translate3d(0,0,0);
-webkit-transform: translate3d(0,0,0);
}
I use chip-cards to show/hide media_player cards:
Chip card - Local Conditional Card
type: custom:mushroom-chips-card
chips:
- type: template
double_tap_action:
action: none
icon: mdi:television
content: ''
hold_action:
action: none
tap_action:
action: fire-dom-event
local_conditional_card:
action: toggle
ids:
- tv
icon_color: >-
{% if is_state('media_player.plex_tv', 'playing') or
is_state('media_player.plex_tv', 'paused') %}
green
{% else %}
red
{% endif %}
card_mod:
style: |
ha-card {
{% if is_state('media_player.plex_tv', 'playing') or
is_state('media_player.plex_tv', 'paused') %}
box-shadow: 0px 0px 7px 4px rgba(var(--rgb-green), 0.8);
transition: 0s;
{% else %}
box-shadow: none;
{% endif %}
- type: template
double_tap_action:
action: none
icon: mdi:apple
content: ''
hold_action:
action: none
tap_action:
action: fire-dom-event
local_conditional_card:
action: toggle
ids:
- iphone1
icon_color: >-
{% if is_state('media_player.plex_iphone_damien', 'playing') or
is_state('media_player.plex_iphone_damien', 'paused') %}
green
{% else %}
red
{% endif %}
card_mod:
style: |
ha-card {
{% if is_state('media_player.plex_iphone_damien', 'playing') or
is_state('media_player.plex_iphone_damien', 'paused') %}
--chip-box-shadow: 0px 0px 7px 4px rgba(var(--rgb-green), 0.8);
transition: 0s;
{% else %}
box-shadow: none;
{% endif %}
- type: template
double_tap_action:
action: none
icon: mdi:apple
content: ''
hold_action:
action: none
tap_action:
action: fire-dom-event
local_conditional_card:
action: toggle
ids:
- iphone2
icon_color: >-
{% if is_state('media_player.plex_iphone_angelique', 'playing') or
is_state('media_player.plex_iphone_angelique', 'paused') %}
green
{% else %}
red
{% endif %}
card_mod:
style: |
ha-card {
{% if is_state('media_player.plex_iphone_angelique', 'playing') or
is_state('media_player.plex_iphone_angelique', 'paused') %}
--chip-box-shadow: 0px 0px 7px 4px rgba(var(--rgb-green), 0.8);
transition: 0s;
{% else %}
box-shadow: none;
{% endif %}
- type: template
double_tap_action:
action: none
icon: mdi:menu
content: ''
hold_action:
action: none
tap_action:
action: fire-dom-event
local_conditional_card:
action: toggle
ids:
- menu
icon_color: grey
alignment: center
card_mod:
style:
style: |
ha-card {
margin: 30px 0px 0px;
--ha-card-box-shadow: none;
--chip-border-radius: 15px;
--chip-height: 45px;
--chip-padding: 25px;
--chip-spacing: 10px;
}
20 Likes
I get the question directly thus I share also the answer here…
Following the post from @MRobi I tried to modify/simplify it to try to keep as much as possible the UI working.
I ended up with something like this, based on one mushroom template card and one mushroom chip card, stacked together and remapped with card mod:
it is not square to help fitt various screen sizes and keep it coherent in grid:
Hereafter the example of my living room card:
- Basic behaviour of template card and chip card is still controlable via UI, despite using card mod and stacking.
- All the pop up behaviour are directly in the YAML code and could be disregarded if you want to go back to simple design or could be set in different pop up card in the dashboard (but would generate a high amount of pop up cards…).
The modifications / detailled widgets are the followings:
- Icon of the template card is moved and made bigger (sofa icon) with card mod, Icon is fixed, but color depend on the state of elements in the room (here at least one light on). Icon and color are still controlled via UI.
- secondary line is displaying the temperature in the room (simple template in UI)
- icon badge used to display room occupancy (icon and color via templates in UI and moved with card mod)
- Short press on big icon (in fact on all card…) is a shortcut to a room dedicated page (UI controlled)
- Long press on the big icon (in fact all card) is a toggle to the group “room light” (UI controlled)
- Line of chips moved and transformed in column (width and position modified via card mod)
- Short press on lightbulb icon is opening a pop up (based on browser mod) with all room light (defined in YAML)
- Long press on lightbulb icon toggle the main room light only (UI controlled)
- Short press on shutter icon is opening a pop up (based on browser mod) with all room covers (defined in YAML)
- Long press on shutter icon toggle the rooms cover state (UI controlled)
- Short press on the media icon open a pop up of the mini media card dedicated to the amazon echo in the room, and some shortcut to play multiroom bookmarks. (defined in YAML)
- Shortpress on the flower icon opens a pop up with the miflora data. (defined in YAML)
None of my room required more than 4 small icons, thus I did not implement any conditional chips, but that is still a possibility to display more information while keeping it decluttered.
On this design, most of the features are working with UI, and some not (mainly pop up) but could be if the pop up card was defined in the dashboard and not via fire-dom-event.
I have stopped my research there as it fitted my needs…
The code:
type: custom:vertical-stack-in-card
cards:
- type: custom:mushroom-template-card
entity: group.lumieres_salon
icon: mdi:sofa
icon_color: |
{% if is_state(entity, 'on') %}
#03A9F4
{% else %}
grey
{% endif %}
primary: Salon
secondary: '{{ states(''sensor.echo_jeanne_temperature'') }}°C'
layout: horizontal
tap_action:
action: navigate
navigation_path: /lovelace-smartphone/salon
double_tap_action:
action: navigate
navigation_path: /lovelace-smartphone/salon
hold_action:
action: toggle
badge_icon: |
{% if is_state('binary_sensor.echo_salon_mouvement', 'on') %}
mdi:motion-sensor
{% else %}
mdi:motion-sensor-off
{% endif %}
badge_color: |
{% if is_state('binary_sensor.echo_salon_mouvement', 'on') %}
orange
{% else %}
grey
{% endif %}
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;
}
style: |
mushroom-badge-icon {
left: 60px;
top: 25px;
}
- type: custom:mushroom-chips-card
chips:
- type: template
entity: light.0x84ba20fffe4b2581
tap_action:
action: fire-dom-event
browser_mod:
service: browser_mod.popup
data:
title: Lumières salon
content:
type: vertical-stack
cards:
- type: custom:mushroom-light-card
entity: light.0x84ba20fffe4b2581
name: Petite Lampe
use_light_color: true
show_brightness_control: true
show_color_temp_control: true
show_color_control: false
collapsible_controls: true
- type: custom:mushroom-light-card
entity: light.lampadaire
use_light_color: false
show_brightness_control: false
show_color_temp_control: false
show_color_control: false
collapsible_controls: true
- type: custom:mushroom-light-card
entity: light.elephants
use_light_color: false
show_brightness_control: false
show_color_temp_control: false
show_color_control: false
collapsible_controls: true
- type: custom:mushroom-light-card
entity: light.cerisier
use_light_color: false
show_brightness_control: false
show_color_temp_control: false
show_color_control: false
collapsible_controls: true
icon: mdi:lightbulb
hold_action:
action: toggle
icon_color: |-
{% if is_state(entity, 'on') %}
orange
{% elif is_state(entity, 'off') %}
grey
{% else %}
grey
{% endif %}
- type: template
entity: cover.salon
hold_action:
action: toggle
tap_action:
action: fire-dom-event
browser_mod:
service: browser_mod.popup
data:
title: Volets du salon
content:
type: vertical-stack
cards:
- type: custom:mushroom-cover-card
entity: cover.volet_du_salon_apero
name: Volet Apero
show_position_control: true
show_tilt_position_control: false
show_buttons_control: true
- type: custom:mushroom-cover-card
entity: cover.volet_du_salon_tv
name: Volet TV
show_position_control: true
show_tilt_position_control: false
show_buttons_control: true
icon: |-
{% if is_state(entity, 'open') %}
mdi:window-shutter-open
{% elif is_state(entity, 'closed') %}
mdi:window-shutter
{% else %}
mdi:window-shutter-alert
{% endif %}
icon_color: |-
{% if is_state(entity, 'open') %}
grey
{% elif is_state(entity, 'closed') %}
grey
{% else %}
orange
{% endif %}
- type: template
entity: media_player.echo_jeanne
icon: mdi:play-pause
icon_color: |-
{% if is_state(entity, 'playing') %}
#03A9F4
{% else %}
grey
{% endif %}
tap_action:
action: fire-dom-event
browser_mod:
service: browser_mod.popup
data:
title: Echo salon
content:
type: custom:stack-in-card
cards:
- type: custom:mini-media-player
entity: media_player.echo_jeanne
source: full
volume_stateless: false
group: true
artwork: full-cover
tts:
platform: alexa
entity_id: media_player.echo_jeanne
type: announce
shortcuts:
hide_when_off: true
columns: 3
buttons:
- name: Playlist Jeanne
type: AMAZON_MUSIC
id: Playlist Jeanne
- name: RTL2
type: custom
id: joue la station RTL deux
- name: Pop- Rock
type: custom
id: joue du pop rock
- name: Rock
type: custom
id: joue du rock
- name: Musique douce
type: custom
id: joue de la musique douce
- name: Piano
type: custom
id: joue de la musique au piano
- name: Queen
type: custom
id: joue du Queen
- name: Vianney
type: custom
id: joue du Vianney
- name: Louane
type: custom
id: joue du Louane
- name: Playlist Jeanne
type: AMAZON_MUSIC
id: Playlist Jeanne sur le groupe rez_de_chaussee
icon: mdi:multicast
- name: RTL2
type: custom
id: >-
joue la station RTL deux sur le groupe
rez_de_chaussee
icon: mdi:multicast
- name: Pop- Rock
type: custom
id: joue du pop rock sur le groupe rez_de_chaussee
icon: mdi:multicast
- name: Rock
type: custom
id: joue du rock sur le groupe rez_de_chaussee
icon: mdi:multicast
- name: Musique douce
type: custom
id: >-
joue de la musique douce sur le groupe
rez_de_chaussee
icon: mdi:multicast
- name: Piano
type: custom
id: >-
joue de la musique au piano sur le groupe
rez_de_chaussee
icon: mdi:multicast
- name: Queen
type: custom
id: joue du Queen sur le groupe rez_de_chaussee
icon: mdi:multicast
- name: Vianney
type: custom
id: joue du Vianney sur le groupe rez_de_chaussee
icon: mdi:multicast
- name: Louane
type: custom
id: joue du Louane sur le groupe rez_de_chaussee
icon: mdi:multicast
- type: template
entity: plant.alocatia
icon: mdi:flower
icon_color: |-
{% if is_state(entity, 'problem') %}
orange
{% else %}
grey
{% endif %}
tap_action:
action: fire-dom-event
browser_mod:
service: browser_mod.popup
data:
title: Plante Marsupilami
content:
type: custom:mod-card
card:
type: custom:flower-card
entity: plant.alocatia
show_bars:
- moisture
- temperature
- illuminance
- conductivity
card_mod:
style:
.: |
ha-card {
width: 66px;
margin-left: 80%;
top: -170px;
background: none;
--chip-border-width: 0;
}
card_mod:
style: |
ha-card {
height: 178px ;
margin-left: auto;
margin-right: auto;
}
Nice effect both in clear:
and dark:
26 Likes
Funnily enough I found these just yesterday on a French site - absolutely beautiful, Bravo Sir !
Could you explain how you combine these with the chip cards ?
Am I assuming correctly that you have built a version of this beautiful Plex card for different devices and the chip cards switch between them ?
These are great
Can you tell me how to remove the badge icon which shows the motion sensor ? I can’t find the right code to delete completely