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!
11 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
3 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
2 Likes
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;
}
22 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:
27 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
Thanks to you
For the connection between the chips-card and the Plex cards:
On the chips-card side, itâs a tap_action:
tap_action:
action: fire-dom-event
local_conditional_card:
action: toggle
ids:
- iphone1
On the Card-Plex side, it has to start with this:
type: custom:local-conditional-card
default: hide
id: iphone1
card:
type: ...what you want
in this configuration, a tap_action makes the card appear or disappear.
But you can very well imagine a tap_action which makes one card appear and another disappear:
Minimum required, 2 chips-card :
tap_action:
action: fire-dom-event
local_conditional_card:
action: set
ids:
- iphone1: toggle
- iphone2: hide
tap_action:
action: fire-dom-event
local_conditional_card:
action: set
ids:
- iphone1: hide
- iphone2: toggle
Minimum required, 2 plex-card (or other card :-)):
type: custom:local-conditional-card
default: hide
id: iphone1
card:
type: ...what you want
type: custom:local-conditional-card
default: hide
id: iphone2
card:
type: ...what you want
PS: it is also possible to define if the card is visible by default or hide
Visible
type: custom:local-conditional-card
default: show
id: iphone1
card:
type: ...what you want
Hide
type: custom:local-conditional-card
default: hide
id: iphone1
card:
type: ...what you want
2 Likes
This is done in the mushroom template card part: icon badge sectionâŚ
You can change it in the UI or remove or change this in the YAML for the badge icon and color:
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 %}
The structure of the card (without card mod) is the following:
6 Likes
Gas-Stations-Card with Gas prices for 2 gas-types (Diesel, Benzin) sorted by price
What you need:
- Tankerkoenig-Integration â Tankerkoenig - Home Assistant
- Input_Boolean for Gas-Type (Benzin = TRUE or FALSE)
- Button-Card â GitHub - custom-cards/button-card: âď¸ Lovelace button-card for home assistant
- Mushroom-Card â GitHub - piitaya/lovelace-mushroom: Mushroom Cards - Build a beautiful dashboard easily đ
- Auto-entities-card â GitHub - thomasloven/lovelace-auto-entities: đšAutomatically populate the entities-list of lovelace cards
- You need to change colors as i use variables from a theme
YAML-Code:
type: grid
columns: 1
square: false
cards:
- type: custom:button-card
template: ueberschrift
name: Tankstellen
- type: custom:button-card
entity: input_boolean.spritpreise_benzin
show_name: false
show_state: false
show_icon: false
styles:
card:
- padding: 0px
grid:
- grid-template-areas: '"tankstelle diesel benzin'
- grid-template-columns: auto 65px 65px
custom_fields:
tankstelle:
card:
type: custom:mushroom-template-card
multiline_secondary: true
entity: '[[[ return entity.entity_id ]]]'
icon: '{{state_attr(config.entity,"icon") }}'
icon_color: blue
primary: Sortierung
secondary: nach Kraftstoff
card_mod:
style: |
ha-card {
padding: 3px 3px 3px 3px !important;
text-align: left !important;
box-shadow: none !important;
border: none !important;
}
tap_action:
action: none
benzin:
card:
type: custom:button-card
name: Benzin
styles:
grid:
- grid-template-areas: '"n"'
card:
- border-radius: 4px
- color: var(--google-blue)
- background: var(--secondary-background-color)
- height: 40px
- width: 60px
- padding: 0px
- border: none
- box-shadow: none
name:
- font-size: 0.7em
- padding: 0px
- font-weight: bold
show_icon: false
show_name: true
show_state: false
entity: '[[[ return entity.entity_id ]]]'
tap_action:
action: call-service
service: input_boolean.turn_on
service_data:
entity_id: input_boolean.spritpreise_benzin
state:
- value: 'on'
styles:
card:
- color: var(--google-blue)
- background: var(--secondary-background-color)
- value: 'off'
styles:
card:
- background-color: gainsboro
- color: grey
diesel:
card:
type: custom:button-card
name: Diesel
styles:
grid:
- grid-template-areas: '"n"'
card:
- border-radius: 4px
- color: var(--google-blue)
- background: var(--secondary-background-color)
- height: 40px
- width: 60px
- padding: 0px
- border: none
- box-shadow: none
name:
- font-size: 0.7em
- padding: 0px
- font-weight: bold
show_icon: false
show_name: true
show_state: false
entity: '[[[ return entity.entity_id ]]]'
tap_action:
action: call-service
service: input_boolean.turn_off
service_data:
entity_id: input_boolean.spritpreise_benzin
state:
- value: 'off'
styles:
card:
- color: var(--google-blue)
- background: var(--secondary-background-color)
- value: 'on'
styles:
card:
- background-color: gainsboro
- color: grey
- type: conditional
conditions:
- entity: input_boolean.spritpreise_benzin
state: 'on'
card:
type: custom:auto-entities
card:
square: false
columns: 1
type: grid
card_param: cards
sort:
method: state
numeric: true
filter:
include:
- entity_id: sensor.*super
not 1:
state: unavailable
not 2:
state: unknown
not 3:
state: 'False'
options:
type: custom:button-card
show_name: false
show_state: false
show_icon: false
styles:
card:
- padding: 0px
grid:
- grid-template-areas: '"tankstelle diesel benzin'
- grid-template-columns: auto 65px 65px
custom_fields:
tankstelle:
card:
type: custom:mushroom-template-card
multiline_secondary: true
entity: '[[[ return entity.entity_id ]]]'
icon: '{{state_attr(config.entity,"icon") }}'
icon_color: blue
primary: '{{state_attr(config.entity,"brand") }}'
secondary: >-
{{state_attr(config.entity,"city") + ", " +
state_attr(config.entity,"street") + " " +
state_attr(config.entity,"house_number") }}
card_mod:
style: |
ha-card {
padding: 3px 3px 3px 3px !important;
text-align: left !important;
border: none !important;
box-shadow: none !important;
}
tap_action:
action: none
benzin:
card:
type: custom:button-card
styles:
grid:
- grid-template-areas: '"n" "s"'
- grid-template-columns: auto
- grid-template-rows: 1fr 1.3fr
card:
- border-radius: 4px
- color: var(--google-blue)
- background: var(--secondary-background-color)
- height: 40px
- width: 60px
- padding: 0px
- border: none
- box-shadow: none
state:
- font-weight: bold
- font-size: 0.8em
name:
- font-size: 0.7em
- padding: 0px
show_icon: false
show_name: true
name: Benzin
show_state: true
entity: '[[[ return entity.entity_id ]]]'
tap_action:
action: more-info
state:
- value: unknown
state_display: geschl.
styles:
card:
- background-color: gainsboro
- color: grey
- value: 'False'
state_display: k.A.
styles:
card:
- background-color: gainsboro
- color: grey
diesel:
card:
type: custom:button-card
styles:
grid:
- grid-template-areas: '"n" "s"'
- grid-template-columns: auto
- grid-template-rows: 1fr 1.3fr
card:
- border-radius: 4px
- color: grey
- background: gainsboro
- height: 40px
- width: 60px
- padding: 0px
- border: none
- box-shadow: none
state:
- font-weight: bold
- font-size: 0.8em
name:
- font-size: 0.7em
- padding: 0px
show_icon: false
show_name: true
name: Diesel
show_state: true
entity: '[[[ return entity.entity_id.replace("super","diesel") ]]]'
tap_action:
action: more-info
state:
- value: unknown
state_display: geschl.
styles:
card:
- background-color: gainsboro
- color: grey
- value: 'False'
state_display: k.A.
styles:
card:
- background-color: gainsboro
- color: grey
- type: conditional
conditions:
- entity: input_boolean.spritpreise_benzin
state: 'off'
card:
type: custom:auto-entities
card:
square: false
columns: 1
type: grid
card_param: cards
sort:
method: state
numeric: true
filter:
include:
- entity_id: sensor.*diesel
not 1:
state: unavailable
not 2:
state: unknown
not 3:
state: 'False'
options:
type: custom:button-card
show_name: false
show_state: false
show_icon: false
styles:
card:
- padding: 0px
grid:
- grid-template-areas: '"tankstelle diesel benzin'
- grid-template-columns: auto 65px 65px
custom_fields:
tankstelle:
card:
type: custom:mushroom-template-card
multiline_secondary: true
entity: '[[[ return entity.entity_id ]]]'
icon: '{{state_attr(config.entity,"icon") }}'
icon_color: blue
primary: '{{state_attr(config.entity,"brand") }}'
secondary: >-
{{state_attr(config.entity,"city") + ", " +
state_attr(config.entity,"street") + " " +
state_attr(config.entity,"house_number") }}
card_mod:
style: |
ha-card {
padding: 3px 3px 3px 3px !important;
text-align: left !important;
border: none !important;
box-shadow: none !important;
}
tap_action:
action: none
benzin:
card:
type: custom:button-card
styles:
grid:
- grid-template-areas: '"n" "s"'
- grid-template-columns: auto
- grid-template-rows: 1fr 1.3fr
card:
- border-radius: 4px
- color: grey
- background: gainsboro
- height: 40px
- width: 60px
- padding: 0px
- border: none
- box-shadow: none
state:
- font-weight: bold
- font-size: 0.8em
name:
- font-size: 0.7em
- padding: 0px
show_icon: false
show_name: true
name: Benzin
show_state: true
entity: '[[[ return entity.entity_id.replace("diesel","super") ]]]'
tap_action:
action: more-info
state:
- value: unknown
state_display: geschl.
styles:
card:
- background-color: gainsboro
- color: grey
- value: 'False'
state_display: k.A.
styles:
card:
- background-color: gainsboro
- color: grey
diesel:
card:
type: custom:button-card
styles:
grid:
- grid-template-areas: '"n" "s"'
- grid-template-columns: auto
- grid-template-rows: 1fr 1.3fr
card:
- border-radius: 4px
- color: var(--google-blue)
- background: var(--secondary-background-color)
- height: 40px
- width: 60px
- padding: 0px
- border: none
- box-shadow: none
state:
- font-weight: bold
- font-size: 0.8em
name:
- font-size: 0.7em
- padding: 0px
show_icon: false
show_name: true
name: Diesel
show_state: true
entity: '[[[ return entity.entity_id ]]]'
tap_action:
action: more-info
state:
- value: unknown
state_display: geschl.
styles:
card:
- background-color: gainsboro
- color: grey
- value: 'False'
state_display: k.A.
styles:
card:
- background-color: gainsboro
- color: grey
9 Likes
Is this working for you? I think youâve got a little mistake in the second conditional card. You select the *diesel values, but the entity for diesel gets replaced. The entity for benzin is âentity.entity_idâ, which is the *diesel one. You should exchange both "entity: " lines in the last card. I hope you understand what I try to say without me posting the whole code again
1 Like
No, i don´t understand and yes, it works for me 
2 Likes
NOW i understand. You were right! I´ve changed the Yaml-Code in my posting above! Thank you!
Can someone help me ⌠I get the icon to âbleed outâ.
Thanks a MILLION!