vertical-stack
vertical-stack-in-card
mushroom-template-card
mushroom-light-card
mushroom-chips-card
When i past your code, the card look like this. i have check all the code but i don’t understand why…
I’m guessing you’ve got a theme applied that changes the radius of the circle so it’s more square. And I can’t see the code but the secondary text template doesn’t seem to be resolving. Possibly an invalid entity since my code is set to pull from a thermostat entity.
I’m guessing you’ve got a theme applied that changes the radius of the circle so it’s more square.
Yes it work now thx a lot
And I can’t see the code but the secondary text template doesn’t seem to be resolving. Possibly an invalid entity since my code is set to pull from a thermostat entity.
For that its ok, i have to put my entity now.
Thx for the help
1 Like
Please read the first post!
I would like this post to be all about pictures with codes, nothing else! So if you have something to share or offer, please do it with pictures and code.
Do not ask any questions here, instead ask them directly to the person or in the original Mushroom post!
Try to keep this as clean as possible and share with pictures and code.
Best regards
Thekholm
11 Likes
My speedtest card using card mod and custom:apexcharts-card.
Version with static colors:
Code
type: custom:stack-in-card
cards:
- type: custom:mushroom-template-card
entity: ''
primary: Voer speedtest uit
secondary: ''
multiline_secondary: true
icon: mdi:speedometer
icon_color: grey
tap_action:
action: call-service
service: speedtestdotnet.speedtest
data: {}
target: {}
- type: custom:mushroom-template-card
card_mod:
style: |
ha-card {
margin: -25px 12px 0px 12px;
border-bottom: solid 2px rgba(var(--rgb-disabled), 0.2);
}
- type: custom:vertical-stack-in-card
horizontal: true
cards:
- type: vertical-stack
cards:
- type: custom:apexcharts-card
chart_type: radialBar
series:
- entity: sensor.speedtest_download
color: rgb(255, 87, 34)
max: 60
show:
legend_value: false
apex_config:
plotOptions:
radialBar:
offsetY: 0
startAngle: -108
endAngle: 108
hollow:
size: 80%
dataLabels:
name:
show: false
value:
show: false
track:
strokeWidth: 70%
margin: 0
fill:
type: gradient
gradient:
shade: light
type: horizontal
shadeIntensity: 0.3
inverseColors: false
opacityFrom: 1
opacityTo: 1
stops:
- 0
- 50
- 55
- 90
legend:
show: false
chart:
height: 130
card_mod:
style: |
ha-card {
box-shadow: none;
background: none;
}
- type: custom:mushroom-entity-card
entity: sensor.speedtest_download
primary_info: state
secondary_info: name
name: Download
icon: mdi:download
icon_color: deep-orange
layout: vertical
card_mod:
style: |
ha-card {
margin-top: -65px;
margin-left: auto;
margin-right: auto;
margin-bottom: 2px;
box-shadow: none;
background: none;
}
- type: vertical-stack
cards:
- type: custom:apexcharts-card
chart_type: radialBar
series:
- entity: sensor.speedtest_upload
color: rgb(33, 150, 243)
max: 60
show:
legend_value: false
apex_config:
plotOptions:
radialBar:
offsetY: 0
startAngle: -108
endAngle: 108
hollow:
size: 80%
dataLabels:
name:
show: false
value:
show: false
track:
strokeWidth: 70%
margin: 0
fill:
type: gradient
gradient:
shade: light
type: horizontal
shadeIntensity: 0.3
inverseColors: false
opacityFrom: 1
opacityTo: 1
stops:
- 0
- 50
- 55
- 90
legend:
show: false
chart:
height: 130
card_mod:
style: |
ha-card {
box-shadow: none;
background: none;
}
- type: custom:mushroom-entity-card
entity: sensor.speedtest_upload
primary_info: state
secondary_info: name
name: Upload
icon: mdi:upload
icon_color: blue
layout: vertical
card_mod:
style: |
ha-card {
margin-top: -65px;
margin-left: auto;
margin-right: auto;
margin-bottom: 2px;
box-shadow: none;
background: none;
}
- type: vertical-stack
cards:
- type: custom:mushroom-entity-card
entity: sensor.speedtest_ping
primary_info: state
secondary_info: name
name: Ping
icon_color: teal
icon: mdi:wan
layout: vertical
card_mod:
style: |
ha-card {
margin-top: 20px;
margin-left: auto;
margin-right: auto;
margin-bottom: 2px;
box-shadow: none;
background: none;
}
card_mod:
style: |
ha-card {
box-shadow: none;
background: none;
}
Version with dynamic colors based on download/upload value, using the experimental color_threshold feature of apex-charts. You can change the min/max/in-between values yourself in the code (currently 50-200 for download and 5-100 for upload):
Code
type: custom:stack-in-card
cards:
- type: custom:mushroom-template-card
entity: ''
primary: Run speedtest
secondary: ''
multiline_secondary: true
icon: mdi:wifi-refresh
icon_color: grey
tap_action:
action: call-service
service: speedtestdotnet.speedtest
data: {}
target: {}
- type: custom:mushroom-template-card
card_mod:
style: |
ha-card {
margin: -25px 12px 0px 12px;
border-bottom: solid 2px rgba(var(--rgb-disabled), 0.2);
}
- type: custom:vertical-stack-in-card
horizontal: true
cards:
- type: vertical-stack
cards:
- type: custom:apexcharts-card
chart_type: radialBar
experimental:
color_threshold: true
series:
- entity: sensor.speedtest_download
color_threshold:
- value: 50
color: rgb(244, 67, 54)
- value: 75
color: rgb(255, 87, 34)
- value: 100
color: rgb(255, 152, 0)
- value: 125
color: rgb(255, 193, 7)
- value: 150
color: rgb(255, 235, 59)
- value: 175
color: rgb(205, 220, 57)
- value: 200
color: rgb(129, 915, 74)
- value: 225
color: rgb(76, 175, 80)
- value: 250
color: rgb(78, 175, 80)
max: 500
show:
legend_value: false
apex_config:
plotOptions:
radialBar:
offsetY: 0
startAngle: -108
endAngle: 108
hollow:
size: 80%
dataLabels:
name:
show: false
value:
show: false
track:
strokeWidth: 70%
margin: 0
fill:
type: gradient
legend:
show: false
chart:
height: 130
card_mod:
style: |
ha-card {
box-shadow: none;
background: none;
}
- type: custom:mushroom-template-card
entity: sensor.speedtest_download
primary: |
{{states('sensor.speedtest_download')|round(1)}} Mbps
secondary: Download
icon: mdi:download
icon_color: |-
{% set value = states('sensor.speedtest_download') | int %}
{% if value < 50 %}
red
{% elif value < 75 %}
deep-orange
{% elif value < 100 %}
orange
{% elif value < 125 %}
amber
{% elif value < 150 %}
yellow
{% elif value < 175 %}
lime
{% elif value < 200 %}
light-green
{% elif value < 225 %}
green
{% else %}
green
{% endif %}
layout: vertical
card_mod:
style: |
ha-card {
margin-top: -65px;
margin-left: auto;
margin-right: auto;
margin-bottom: 2px;
box-shadow: none;
background: none;
}
- type: vertical-stack
cards:
- type: custom:apexcharts-card
chart_type: radialBar
experimental:
color_threshold: true
series:
- entity: sensor.speedtest_upload
color_threshold:
- value: 5
color: rgb(244, 67, 54)
- value: 13
color: rgb(255, 87, 34)
- value: 25
color: rgb(255, 152, 0)
- value: 38
color: rgb(255, 193, 7)
- value: 50
color: rgb(255, 235, 59)
- value: 63
color: rgb(205, 220, 57)
- value: 75
color: rgb(129, 915, 74)
- value: 88
color: rgb(76, 175, 80)
- value: 100
color: rgb(78, 175, 80)
max: 100
show:
legend_value: false
apex_config:
plotOptions:
radialBar:
offsetY: 0
startAngle: -108
endAngle: 108
hollow:
size: 80%
dataLabels:
name:
show: false
value:
show: false
track:
strokeWidth: 70%
margin: 0
fill:
type: gradient
legend:
show: false
chart:
height: 130
card_mod:
style: |
ha-card {
box-shadow: none;
background: none;
}
- type: custom:mushroom-template-card
entity: sensor.speedtest_upload
primary: |
{{states('sensor.speedtest_upload')|round(1)}} Mbps
secondary: Upload
icon: mdi:upload
icon_color: |-
{% set value = states('sensor.speedtest_upload') | int %}
{% if value < 5 %}
red
{% elif value < 13 %}
deep-orange
{% elif value < 25 %}
orange
{% elif value < 38 %}
amber
{% elif value < 50 %}
yellow
{% elif value < 63 %}
lime
{% elif value < 75 %}
light-green
{% elif value < 88 %}
green
{% else %}
green
{% endif %}
layout: vertical
card_mod:
style: |
ha-card {
margin-top: -65px;
margin-left: auto;
margin-right: auto;
margin-bottom: 2px;
box-shadow: none;
background: none;
}
- type: vertical-stack
cards:
- type: custom:mushroom-entity-card
entity: sensor.speedtest_ping
primary_info: state
secondary_info: name
name: Ping
icon_color: teal
icon: mdi:wan
layout: vertical
card_mod:
style: |
ha-card {
margin-top: 20px;
margin-left: auto;
margin-right: auto;
margin-bottom: 2px;
box-shadow: none;
background: none;
}
card_mod:
style: |
ha-card {
box-shadow: none;
background: none;
}
48 Likes
Thank you for this creation and sharing the code. I’m well on my way to bastardizing it and adopting it for my needs. I love it!
One thing I’m having a hard time figuring out though, I have some lights that shut off when a Timer Helper reaches 0. I’d like to show that timer either below the temp/humidity, or somewhere on the bottom of the card (maybe over the icon?). I just can’t figure out how to get it in there, any ideas?
1 Like
My Homepage, inspired by many other people on this forum allowing me to learning bits and pieces from them and puzzling them together into this. Kudos to them!!
I used Mushroom card, Layout card, Browser Mod and Card Mod for the main design elements.
All of this is also located in a “Minimalist UI” Yaml config to allow for some graphic design elements.
The orange bars are for controlling the light, whereas the blue bars allow me to control the volume of my AVR.
The code (Below the pictures) might not be the prettiest, but like a said, it’s a lot of puzzle work based on the amazing work of several others here!
Also I am very open to hear any feedback!
CODE SNIPPETS
Living Room Card Code
type: custom:layout-card
layout_type: custom:grid-layout
layout:
grid-template-columns: auto
grid-template-rows: auto
column-gap: 0px
row-gap: 0px
grid-template-areas: |
"1"
"2"
"3"
"4"
"5"
"6"
"7"
"8"
"9"
"10"
"11"
"12"
cards:
- type: custom:mushroom-light-card
entity: light.living_room_lights
fill_container: true
show_brightness_control: true
use_light_color: false
icon: mdi:sofa
name: Living Room
secondary_info: none
layout: horizontal
tap_action:
# action: navigate
# navigation_path: '/ui-lovelace-minimalist/Living'
action: call-service
service: browser_mod.popup
data:
content:
type: vertical-stack
cards:
- type: 'custom:button-card'
template: card_title
name: Living Room Media
- type: custom:layout-card
layout_type: custom:grid-layout
layout:
grid-template-columns: auto
grid-template-rows: auto
column-gap: 0px
row-gap: 0px
grid-template-areas: |
"1"
"2"
"3"
"4"
"5"
"6"
"7"
"8"
"9"
"10"
"11"
"12"
cards:
- type: custom:stack-in-card
cards:
- type: custom:mushroom-media-player-card
name: Living Room TV
entity: media_player.tv_living_room
media_controls:
- on_off
- play_pause_stop
tap_action:
action: more-info
use_media_info: true
show_volume_level: false
fill_container: false
layout: vertical
volume_controls: []
icon_type: none
primary_info: name
secondary_info: none
view_layout:
grid-column: 1
grid-row: 1
card_mod:
style: |
ha-card {
border-radius: 20px 20px 0px 0px;
height: 100px;
margin-top: 0px;
outline-color: red;
--chip-spacing: 0px;
}
- type: custom:stack-in-card
cards:
- type: custom:mushroom-media-player-card
entity: media_player.home_theater
media_controls: []
tap_action:
action: more-info
use_media_info: true
show_volume_level: false
fill_container: false
layout: vertical
volume_controls:
- volume_set
- volume_mute
icon_type: none
primary_info: none
secondary_info: none
view_layout:
grid-column: 1
grid-row: 2
card_mod:
style: |
ha-card {
border-radius: 0px 0px 0px 0px;
height: 85px;
margin-top: -14px;
outline-color: red;
--chip-spacing: 0px;
}
- type: custom:stack-in-card
cards:
- show_name: true
show_icon: false
type: button
tap_action:
action: more-info
entity: media_player.tv_living_room
name: TV Settings
view_layout:
grid-column: 1
grid-row: 3
card_mod:
style: |
ha-card {
border-radius: 0px 0px 0px 0px;
height: 55px;
margin-top: -40px;
outline-color: red;
--chip-spacing: 0px;
}
- type: custom:stack-in-card
cards:
- show_name: true
show_icon: false
type: button
tap_action:
action: more-info
entity: media_player.home_theater
name: Home Theater Settings
view_layout:
grid-column: 1
grid-row: 4
card_mod:
style: |
ha-card {
border-radius: 0px 0px 20px 20px;
height: 55px;
margin-top: -20px;
outline-color: red;
--chip-spacing: 0px;
}
- type: entities
entities:
- type: divider
- type: 'custom:button-card'
template: card_title
name: Living Room Lights
#label: 'Subtitle'
- type: vertical-stack
cards:
- type: custom:mushroom-light-card
entity: light.bar_table_lights
#layout: horizontal
show_color_temp_control: true
show_brightness_control: true
show_color_control: true
name: Bar Table Lights
- type: custom:mushroom-light-card
entity: light.spotlights
use_light_color: true
show_brightness_control: true
show_color_control: true
show_color_temp_control: true
- type: custom:mushroom-light-card
entity: light.tv_table_lights
show_brightness_control: true
show_color_control: true
show_color_temp_control: true
- type: custom:mushroom-light-card
entity: light.light_bars
show_brightness_control: true
hide_state: false
show_color_control: true
show_color_temp_control: true
use_light_color: true
# layout: vertical
- type: horizontal-stack
cards:
- type: custom:mushroom-light-card
entity: light.upstairs_lights
tap_action:
action: more-info
use_light_color: true
- type: custom:mushroom-light-card
entity: light.sofa_ledstrip
use_light_color: true
tap_action:
action: more-info
- type: entities
entities:
- type: divider
- type: 'custom:button-card'
template: card_title
name: Other
- type: custom:mushroom-vacuum-card
entity: vacuum.roborock_s6_pure
name: Robo Cleaner
commands:
- start_pause
- stop
- return_home
right_button: Close
view_layout:
grid_areas: 1
card_mod:
style: |
:host([dark-mode]) {
--ha-card-background: #2D3033;
--mush-icon-size: 50px;
}
ha-card {
border-radius: 10px 10px 0px 0px;
--control-height: 20px;
--control-top: 16px;
--control-border-radius: 5px;
--control-border-spacing: 2px;
--card-primary-font-size: 17px;
icon-size: 50px;
background: url('/local/images/tv_area.jpg'), linear-gradient(to left, transparent, rgb(var(--rgb-card-background-color)) 90%);
background-size: 80% auto, cover;
background-position: right;
background-repeat: no-repeat;
background-blend-mode: saturation;
}
- type: custom:stack-in-card
cards:
- type: custom:mushroom-media-player-card
entity: media_player.home_theater
show_volume_level: true
volume_controls:
- volume_set
icon_type: none
primary_info: none
fill_container: false
name: Volume
use_media_info: false
tap_action:
action: none
hold_action:
action: none
double_tap_action:
action: none
secondary_info: none
icon: ''
collapsible_controls: false
layout: horizontal
card_mod:
style: |
:host([dark-mode]) {
--ha-card-background: rgb(var(--rgb-card-background-color));
--mush-icon-size: 14px;
}
ha-card {
border-radius: 10px 10px 0px 0px;
--icon-size: 24px;
--control-height: 15px;
--control-top: 16px;
--control-border-radius: 5px;
--control-border-spacing: 2px;
--card-primary-font-size: 14px;
}
view_layout:
grid-column: 1
grid-row: 2
card_mod:
style: |
ha-card {
border-radius: 0px 0px 0px 0px;
height: 45px;
margin-top: -14px;
outline-color: red;
--icon-size: 2px;
--chip-spacing: 0px;
background: url('/local/images/tv_area_bottom.jpg'), linear-gradient(to left, transparent, rgb(var(--rgb-card-background-color)) 90%);
background-size: 300px , cover;
background-position: right;
background-position: bottom;
background-repeat: no-repeat;
background-blend-mode: saturation;
}
- type: custom:stack-in-card
cards:
- type: custom:mushroom-chips-card
fill_container: true
chips:
- type: template
entity: light.livingroom_lights
icon: >-
{% if is_state('group.livingroom_lights', 'on') %}
mdi:lightbulb-on {% else %} mdi:lightbulb {% endif %}
icon_color: >-
{% if is_state('group.livingroom_lights', 'on') %} amber {% else
%} grey {% endif %}
content: >-
{% if is_state('group.livingroom_lights', 'on') %} {{
expand(state_attr('group.livingroom_lights', 'entity_id')) |
selectattr('state','eq','on') | list | count }}{% endif %}
- type: template
content: '{{ states(''sensor.kitchen_temperature'') }} ºC'
icon: mdi:thermometer
icon_color: >-
{% set state=states('sensor.kitchen_temperature')|float(0) %} {%
if state<20 %} blue {% elif state<23 %} green {% elif state<25 %}
amber {% else %} red {% endif %}
alignment: start
card_mod:
style: |
ha-card {
--chip-box-shadow: none;
--chip-background: none;
--chip-spacing: -16px;
--chip-height: 40px;
}
view_layout:
grid-column: 1
grid-row: 3
card_mod:
style: |
ha-card {
border-radius: 0px 0px 10px 10px;
height: 40px;
margin-top: -14px;
outline-color: red;
--chip-spacing: 0px;
--ha-card-background: #352E1F;
}
- type: custom:stack-in-card
cards:
- type: custom:mushroom-chips-card
fill_container: true
chips:
- type: action
icon: mdi:audio-video
tap_action:
action: call-service
service: media_player.toggle
data: {}
target:
entity_id: media_player.home_theater
- type: action
icon: mdi:power
tap_action:
action: call-service
service: wake_on_lan.send_magic_packet
data:
mac: XX:XX:XX:XX:XX:XX
broadcast_address: XXX.XXX.XX.XX
- type: action
icon: mdi:remote-tv
tap_action:
action: call-service
service: browser_mod.popup
data:
content:
type: custom:lg-remote-control
entity: media_player.tv_living_room
mac: XX:XX:XX:XX:XX:XX
title: TV Remote
size: fullscreen
target: {}
- type: action
tap_action:
action: call-service
service: script.upstairs_light_movie_mode
data: {}
target: {}
icon: mdi:movie-play-outline
- type: action
tap_action:
action: call-service
service: script.upstairs_light_bright
data: {}
target: {}
icon: mdi:white-balance-sunny
- type: action
icon: mdi:weather-night
tap_action:
action: call-service
service: script.living_room_cozy
data: {}
target: {}
alignment: end
card_mod:
style: |
ha-card {
--chip-box-shadow: none;
--chip-background: none;
--chip-spacing: 0;
--chip-height: 40px;
}
view_layout:
grid-column: 1
grid-row: 3
card_mod:
style: |
ha-card {
height: 40px;
margin-top: -14px;
border-radius: 0px 0px 10px 10px;
--ha-card-background: none;
}
- type: custom:gap-card
height: 25
Dining Area card Code
###### Dining room card
type: custom:layout-card
layout_type: custom:grid-layout
layout:
grid-template-columns: auto
grid-template-rows: auto
column-gap: 0px
row-gap: 0px
grid-template-areas: |
"1"
"2"
"3"
"4"
"5"
"6"
"7"
"8"
"9"
"10"
"11"
"12"
cards:
- type: custom:mushroom-light-card
entity: light.dining_table_lights
fill_container: true
show_brightness_control: true
use_light_color: false
icon: mdi:silverware
name: Dining Area
secondary_info: none
layout: horizontal
tap_action:
action: call-service
service: browser_mod.popup
data:
content:
type: vertical-stack
cards:
- type: 'custom:button-card'
template: card_title
name: Dining Lights
#label: 'Subtitle'
- type: custom:mushroom-light-card
entity: light.dining_table_lights
show_brightness_control: true
show_color_temp_control: true
icon: mdi:lightbulb-variant-outline
use_light_color: true
- type: custom:mushroom-light-card
entity: light.liqour_cabinet_led_strip
show_brightness_control: true
show_color_temp_control: false
icon: mdi:led-strip-variant
show_color_control: true
use_light_color: true
right_button: Close
# action: navigate
# navigation_path: /ui-lovelace-minimalist/Dining
view_layout:
grid_areas: 1
card_mod:
style: |
:host([dark-mode]) {
--ha-card-background: #2D3033;
--mush-icon-size: 50px;
height: 113px;
}
ha-card {
border-radius: 10px 10px 0px 0px;
--control-height: 40px;
--control-top: 16px;
--control-border-radius: 5px;
--control-border-spacing: 2px;
--card-primary-font-size: 17px;
icon-size: 50px;
background: url('/local/images/dining_area.jpg'), linear-gradient(to left, transparent, rgb(var(--rgb-card-background-color)) 80%);
background-size: 80% auto, cover;
background-position: right;
background-repeat: no-repeat;
background-blend-mode: saturation;
}
- type: custom:stack-in-card
cards:
- type: custom:mushroom-chips-card
fill_container: true
chips:
- type: template
entity: light.livingroom_lights
icon: >-
{% if is_state('light.dining_table_lights', 'on') %}
mdi:lightbulb-on {% else %} mdi:lightbulb {% endif %}
icon_color: >-
{% if is_state('light.dining_table_lights', 'on') %} amber {% else
%} grey {% endif %}
content: >-
{% if is_state('light.dining_table_lights', 'on') %} {{
expand(state_attr('light.dining_table_lights', 'entity_id')) |
selectattr('state','eq','on') | list | count }}{% endif %}
- type: template
content: '{{ states(''sensor.kitchen_temperature'') }} ºC'
icon: mdi:thermometer
icon_color: >-
{% set state=states('sensor.kitchen_temperature')|float(0) %} {%
if state<20 %} blue {% elif state<23 %} green {% elif state<25 %}
amber {% else %} red {% endif %}
- type: template
content: '{{ states(''sensor.kitchen_humidity'') }} %'
icon: mdi:water-percent
icon_color: >-
{% set state=states('sensor.kitchen_humidity')|float(0) %} {%
if state<40 %} red {% elif state<50 %} amber {% elif state<60 %}
blue {% else %} blue {% endif %}
alignment: start
card_mod:
style: |
ha-card {
--chip-box-shadow: none;
--chip-background: none;
--chip-spacing: 0;
--chip-height: 40px;
}
view_layout:
grid-column: 1
grid-row: 3
card_mod:
style: |
ha-card {
border-radius: 0px 0px 10px 10px;
height: 40px;
margin-top: -14px;
outline-color: red;
--chip-spacing: 0px;
--ha-card-background: #352E1F;
}
- type: custom:stack-in-card
cards:
- type: custom:mushroom-chips-card
fill_container: true
chips:
- type: template
- type: action
tap_action:
action: call-service
service: light.turn_off
data: {}
target:
entity_id:
- light.dining_table_lights
- light.liqour_cabinet_led_strip
icon: mdi:lightbulb-group-off-outline
- type: action
tap_action:
action: call-service
service: scene.turn_on
data: {}
target:
entity_id: scene.dining_area_bright_2
icon: mdi:white-balance-sunny
- type: action
icon: mdi:weather-night
tap_action:
action: call-service
service: scene.turn_on
data: {}
target:
entity_id: scene.dining_area_cozy
alignment: end
card_mod:
style: |
ha-card {
--chip-box-shadow: none;
--chip-background: none;
--chip-spacing: 0;
--chip-height: 40px;
}
view_layout:
grid-column: 1
grid-row: 3
card_mod:
style: |
ha-card {
height: 40px;
margin-top: -14px;
border-radius: 0px 0px 10px 10px;
--ha-card-background: none;
}
Kitchen Room Card Code
type: custom:layout-card
layout_type: custom:grid-layout
layout:
grid-template-columns: auto
grid-template-rows: auto
column-gap: 0px
row-gap: 0px
grid-template-areas: |
"1"
"2"
"3"
"4"
"5"
"6"
"7"
"8"
"9"
"10"
"11"
"12"
cards:
- type: custom:gap-card
height: 25
- type: custom:mushroom-light-card
entity: light.kitchen_spotlights
fill_container: true
show_brightness_control: true
use_light_color: false
icon: mdi:lightbulb-spot
name: Kitchen Area
secondary_info: none
layout: horizontal
tap_action:
action: call-service
service: light.toggle
data: {}
target:
entity_id:
- light.kitchen_spotlights
view_layout:
grid_areas: 1
card_mod:
style: |
:host([dark-mode]) {
--ha-card-background: #2D3033;
--mush-icon-size: 50px;
height: 113px;
}
ha-card {
border-radius: 10px 10px 0px 0px;
--control-height: 40px;
--control-top: 16px;
--control-border-radius: 5px;
--control-border-spacing: 2px;
--card-primary-font-size: 20px;
icon-size: 50px;
background: url('/local/images/kitchen.jpg'), linear-gradient(to left, transparent, rgb(var(--rgb-card-background-color)) 80%);
background-size: 80% auto, cover;
background-position: right;
background-repeat: no-repeat;
background-blend-mode: saturation;
}
- type: custom:stack-in-card
cards:
- type: custom:mushroom-chips-card
fill_container: true
chips:
- type: template
entity: light.kitchen_spotlights
icon: >-
{% if is_state('light.kitchen_spotlights', 'on') %}
mdi:lightbulb-on {% else %} mdi:lightbulb {% endif %}
icon_color: >-
{% if is_state('light.kitchen_spotlights', 'on') %} amber {% else
%} grey {% endif %}
content: >-
{% if is_state('light.kitchen_spotlights', 'on') %} {{
expand(state_attr('light.kitchen_spotlights', 'entity_id')) |
selectattr('state','eq','on') | list | count + 1}}{% endif %}
- type: template
content: '{{ states(''sensor.kitchen_temperature'') }} ºC'
icon: mdi:thermometer
icon_color: >-
{% set state=states('sensor.kitchen_temperature')|float(0) %} {%
if state<20 %} blue {% elif state<23 %} green {% elif state<25 %}
amber {% else %} red {% endif %}
- type: template
content: '{{ states(''sensor.kitchen_humidity'') }} %'
icon: mdi:water-percent
icon_color: >-
{% set state=states('sensor.kitchen_humidity')|float(0) %} {%
if state<40 %} red {% elif state<50 %} amber {% elif state<60 %}
blue {% else %} blue {% endif %}
alignment: start
card_mod:
style: |
ha-card {
--chip-box-shadow: none;
--chip-background: none;
--chip-spacing: 0;
--chip-height: 40px;
}
view_layout:
grid-column: 1
grid-row: 3
card_mod:
style: |
ha-card {
border-radius: 0px 0px 10px 10px;
height: 40px;
margin-top: -14px;
outline-color: red;
--chip-spacing: 0px;
--ha-card-background: #352E1F;
}
- type: custom:stack-in-card
cards:
- type: custom:mushroom-chips-card
fill_container: true
chips:
- type: template
content: >-
{% if is_state('switch.grill', 'on') %} The Grill Is Turned On!!!!{% endif %}
alignment: center
card_mod:
style: |
ha-card {
--chip-box-shadow: none;
--chip-background: {% if is_state('switch.grill', 'on') %} red{% endif %};
--chip-spacing: 0;
--chip-height: 38px;
}
view_layout:
grid-column: 1
grid-row: 3
card_mod:
style: |
ha-card {
height: 40px;
margin-top: -14px;
border-radius: 0px 0px 10px 10px;
--ha-card-background: none;
}
- type: custom:stack-in-card
cards:
- type: custom:mushroom-chips-card
fill_container: true
chips:
- type: template
- type: action
icon: mdi:grill
tap_action:
action: call-service
service: switch.toggle
data: {}
target:
entity_id:
- switch.grill
alignment: end
card_mod:
style: |
ha-card {
--chip-box-shadow: none;
--chip-background: none;
--chip-spacing: 0;
--chip-height: 40px;
}
view_layout:
grid-column: 1
grid-row: 3
card_mod:
style: |
ha-card {
height: 40px;
margin-top: -14px;
border-radius: 0px 0px 10px 10px;
--ha-card-background: none;
}
39 Likes
Amazing!
Good job!
1 Like
Been working on this one for a while. A weather forecast card, for weather entities that report weather variables for the upcoming days, with basic high/low temperatures. The day names can be localized to your language. The pictures are Googles weather icons, which has the consequence that the card background cannot be white, as that is the color of the clouds… You could use mdi icons instead. I recommend using the custom decluttering card as well.
Card
type: custom:stack-in-card
mode: horizontal
cards:
- type: custom:decluttering-card
template: weather_day_template
variables:
- index: 0
- day: 1
- type: custom:decluttering-card
template: weather_day_template
variables:
- index: 1
- day: 2
- type: custom:decluttering-card
template: weather_day_template
variables:
- index: 2
- day: 3
- type: custom:decluttering-card
template: weather_day_template
variables:
- index: 3
- day: 4
- type: custom:decluttering-card
template: weather_day_template
variables:
- index: 4
- day: 5
card_mod:
style: |
ha-card {
background: rgba(var(--mush-rgb-blue), 0.3);
}
Decluttering template
decluttering_templates:
weather_day_template:
card:
type: vertical-stack
cards:
- type: custom:mushroom-template-card
layout: vertical
card_mod:
style: |
ha-card {
box-shadow: none;
background: none;
margin-bottom: -18px;
}
primary: ''
secondary: >
{% set dict = {'Mon': 'ma', 'Tue': 'di', 'Wed': 'wo', 'Thu': 'do',
'Fri': 'vr', 'Sat': 'za', 'Sun': 'zo'} %}
{% set str = as_timestamp(state_attr('weather.buienradar',
'forecast')[[[index]]].datetime) | timestamp_custom("%a") %}
{{ dict[str] }}
- type: custom:mushroom-template-card
layout: vertical
entity: weather.buienradar
tap_action:
action: more-info
icon: mdi:weather-partly-cloudy
picture: >-
{% set cloud = 100 -
states("sensor.buienradar_sunchance_[[day]]d")|int %}
{% set rain = states("sensor.buienradar_rain_[[day]]d")|float %}
{% set entity =
states("sensor.buienradar_detailed_condition_[[day]]d") %}
{% if entity == "exceptional" %}
http://www.gstatic.com/images/icons/material/apps/weather/2x/isolated_scattered_tstorms_day_dark_color_96dp.png
{% elif entity == "fog" %}
http://www.gstatic.com/images/icons/material/apps/weather/2x/haze_fog_dust_smoke_dark_color_96dp.png
{% elif entity == "hail" %}
http://www.gstatic.com/images/icons/material/apps/weather/2x/wintry_mix_rain_snow_dark_color_96dp.png
{% elif entity == "lightning" %}
http://www.gstatic.com/images/icons/material/apps/weather/2x/strong_tstorms_dark_color_96dp.png
{% elif entity == "lightning-rainy" %}
http://www.gstatic.com/images/icons/material/apps/weather/2x/strong_tstorms_dark_color_96dp.png
{% elif entity == "snowy" %}
http://www.gstatic.com/images/icons/material/apps/weather/2x/flurries_dark_color_96dp.png
{% elif entity == "snowy-rainy" %}
http://www.gstatic.com/images/icons/material/apps/weather/2x/wintry_mix_rain_snow_dark_color_96dp.png
{% elif rain > 0.3 and rain <= 1 %}
http://www.gstatic.com/images/icons/material/apps/weather/2x/drizzle_dark_color_96dp.png
{% elif rain > 1 and rain <= 6 %}
http://www.gstatic.com/images/icons/material/apps/weather/2x/showers_rain_dark_color_96dp.png
{% elif rain > 6 %}
http://www.gstatic.com/images/icons/material/apps/weather/2x/heavy_rain_dark_color_96dp.png
{% else %}
{% if cloud < 20 %}
http://www.gstatic.com/images/icons/material/apps/weather/2x/sunny_dark_color_96dp.png
{% elif cloud < 40 %}
http://www.gstatic.com/images/icons/material/apps/weather/2x/mostly_sunny_dark_color_96dp.png
{% elif cloud < 60 %}
http://www.gstatic.com/images/icons/material/apps/weather/2x/partly_cloudy_dark_color_96dp.png
{% elif cloud < 80 %}
http://www.gstatic.com/images/icons/material/apps/weather/2x/mostly_cloudy_day_dark_color_96dp.png
{% elif cloud <= 100 %}
http://www.gstatic.com/images/icons/material/apps/weather/2x/cloudy_dark_color_96dp.png
{% else %} none {% endif %}
{% endif %}
primary: '{{states(''sensor.buienradar_temperature_[[day]]d'')}},'
secondary: '{{states(''sensor.buienradar_minimum_temperature_[[day]]d'')}},'
multiline_secondary: true
card_mod:
style: |
ha-card {
box-shadow: none;
background: none;
}
6 Likes
Have something similar created.
type: custom:stack-in-card
cards:
- type: custom:layout-card
layout_type: grid
layout:
width: 100%
grid-template-columns: 10% 80%
grid-template-rows: auto
cards: null
- type: custom:layout-card
layout_type: grid
cards:
- type: custom:mushroom-chips-card
chips:
- type: template
entity: sensor.speedtest_ping
icon: mdi:speedometer
icon_color: null
content: Speedtest
- type: template
entity: sensor.speedtest_ping
icon: null
icon_color: deep-orange
content: ''
alignment: left
- square: false
columns: 3
type: grid
cards:
- type: custom:stack-in-card
cards:
- type: custom:apexcharts-card
chart_type: radialBar
series:
- entity: sensor.speedtest_download
color: rgb(255, 87, 34)
max: 500
show:
legend_value: false
apex_config:
plotOptions:
radialBar:
offsetY: 0
startAngle: -108
endAngle: 108
hollow:
size: 80%
dataLabels:
name:
show: false
value:
show: false
track:
strokeWidth: 70%
margin: 0
fill:
type: gradient
gradient:
shade: light
type: horizontal
shadeIntensity: 0.3
inverseColors: false
opacityFrom: 1
opacityTo: 1
stops:
- 0
- 50
- 55
- 90
legend:
show: false
chart:
height: 130
- type: custom:mushroom-entity-card
entity: sensor.speedtest_download
primary_info: state
secondary_info: name
name: Download
icon_color: deep-orange
layout: vertical
card_mod:
style: |
ha-card {
margin-top: -65px;
width: auto%;
margin-left: auto;
margin-right: auto;
--card-primary-font-size: 12px;
--card-secondary-font-size: 10px;
}
- type: custom:stack-in-card
cards:
- type: custom:mushroom-entity-card
entity: sensor.speedtest_ping
primary_info: state
secondary_info: name
name: Ping
icon_color: light-green
icon: mdi:wan
layout: vertical
card_mod:
style: |
ha-card {
margin-top: auto;
width: auto;
margin-left: auto;
margin-right: auto;
--card-primary-font-size: 12px;
--card-secondary-font-size: 10px;
}
- type: custom:stack-in-card
cards:
- type: custom:apexcharts-card
chart_type: radialBar
series:
- entity: sensor.speedtest_upload
color: rgb(33, 150, 243)
max: 50
show:
legend_value: false
apex_config:
plotOptions:
radialBar:
offsetY: 0
startAngle: -108
endAngle: 108
hollow:
size: 80%
dataLabels:
name:
show: false
value:
show: false
track:
strokeWidth: 70%
margin: 0
fill:
type: gradient
gradient:
shade: light
type: horizontal
shadeIntensity: 0.3
inverseColors: false
opacityFrom: 1
opacityTo: 1
stops:
- 0
- 40
- 50
- 60
legend:
show: false
chart:
height: 130
- type: custom:mushroom-entity-card
entity: sensor.speedtest_upload
primary_info: state
secondary_info: name
name: Upload
icon_color: blue
layout: vertical
card_mod:
style: |
ha-card {
margin-top: -65px;
width: auto;
margin-left: auto;
margin-right: auto;
--card-primary-font-size: 12px;
--card-secondary-font-size: 10px;
}
- type: custom:fold-entity-row
head:
type: custom:mushroom-template-card
label: padding
secondary: meer
tap_action: null
multiline_secondary: true
card_mod:
style: |
ha-card {
margin-left: 250px;
}
padding: 0
entities:
- type: custom:stack-in-card
cards:
- type: custom:mini-graph-card
entities:
- entity: sensor.speedtest_download
line_color: deep-orange
- entity: sensor.speedtest_upload
show_adaptive_color: true
y_axis: secondary
hours_to_show: 24
points_per_hour: 4
line_width: 1
font_size: 50
animate: true
show:
name: false
icon: false
state: false
legend: true
fill: fade
18 Likes
Also, a server card that’s similar to the Speedtest.
type: custom:stack-in-card
cards:
- type: custom:layout-card
layout_type: grid
layout:
width: 100%
grid-template-columns: 10% 80%
grid-template-rows: auto
cards: null
- type: custom:layout-card
layout_type: grid
cards:
- type: custom:mushroom-chips-card
chips:
- type: template
entity: sensor.speedtest_ping
icon: phu:nas
icon_color: null
content: Unraid
- type: template
entity: sensor.speedtest_ping
icon: null
icon_color: deep-orange
content: ''
alignment: left
- square: false
columns: 3
type: grid
cards:
- type: custom:stack-in-card
cards:
- type: custom:apexcharts-card
chart_type: radialBar
series:
- entity: sensor.192_168_178_37_cpu_used
color: green
max: 100
show:
legend_value: false
apex_config:
plotOptions:
radialBar:
offsetY: 0
startAngle: -108
endAngle: 108
hollow:
size: 70%
dataLabels:
name:
show: false
value:
show: false
track:
strokeWidth: 80%
margin: 0
fill:
type: gradient
gradient:
shade: light
type: horizontal
shadeIntensity: 0.3
inverseColors: false
opacityFrom: 1
opacityTo: 1
stops:
- 0
- 50
- 55
- 90
legend:
show: false
chart:
height: 140
- type: custom:mushroom-entity-card
entity: sensor.192_168_178_37_cpu_used
primary_info: state
secondary_info: name
name: CPU
icon_color: green
icon: phu:intel-cpu
layout: vertical
card_mod:
style: |
ha-card {
margin-top: -57px;
width: auto;
margin-left: auto;
margin-right: auto;
--card-primary-font-size: 12px;
--card-secondary-font-size: 10px;
}
- type: custom:stack-in-card
cards:
- type: custom:apexcharts-card
chart_type: radialBar
series:
- entity: sensor.192_168_178_37_ram_used_percent
color: rgb(33, 150, 243)
max: 100
show:
legend_value: false
apex_config:
plotOptions:
radialBar:
offsetY: 0
startAngle: -108
endAngle: 108
hollow:
size: 70%
dataLabels:
name:
show: false
value:
show: false
track:
strokeWidth: 80%
margin: 0
fill:
type: gradient
gradient:
shade: light
type: horizontal
shadeIntensity: 0.3
inverseColors: false
opacityFrom: 1
opacityTo: 1
stops:
- 0
- 50
- 55
- 90
legend:
show: false
chart:
height: 140
- type: custom:mushroom-entity-card
entity: sensor.192_168_178_37_ram_used_percent
primary_info: state
secondary_info: name
name: Memory
icon_color: blue
icon: phu:ram-memory
layout: vertical
card_mod:
style: |
ha-card {
margin-top: -57px;
width: auto;
margin-left: auto;
margin-right: auto;
--card-primary-font-size: 12px;
--card-secondary-font-size: 10px;
}
- type: custom:stack-in-card
cards:
- type: custom:apexcharts-card
chart_type: radialBar
series:
- entity: sensor.192_168_178_37_package_id_0_temperature
color: red
max: 100
show:
legend_value: false
apex_config:
plotOptions:
radialBar:
offsetY: 0
startAngle: -108
endAngle: 108
hollow:
size: 70%
dataLabels:
name:
show: false
value:
show: false
track:
strokeWidth: 80%
margin: 0
fill:
type: gradient
gradient:
shade: light
type: horizontal
shadeIntensity: 0.3
inverseColors: false
opacityFrom: 1
opacityTo: 1
stops:
- 0
- 50
- 55
- 90
legend:
show: false
chart:
height: 140
- type: custom:mushroom-entity-card
entity: sensor.192_168_178_37_package_id_0_temperature
primary_info: state
secondary_info: name
name: CPU
icon_color: red
layout: vertical
card_mod:
style: |
ha-card {
margin-top: -57px;
width: auto;
margin-left: auto;
margin-right: auto;
--card-primary-font-size: 12px;
--card-secondary-font-size: 10px;
}
- type: custom:stack-in-card
cards:
- type: custom:apexcharts-card
chart_type: radialBar
series:
- entity: sensor.192_168_178_37_mnt_disk1_used_percent
color: rgb(255, 233, 0)
max: 100
show:
legend_value: false
apex_config:
plotOptions:
radialBar:
offsetY: 0
startAngle: -108
endAngle: 108
hollow:
size: 70%
dataLabels:
name:
show: false
value:
show: false
track:
strokeWidth: 80%
margin: 0
fill:
type: gradient
gradient:
shade: light
type: horizontal
shadeIntensity: 0.3
inverseColors: false
opacityFrom: 1
opacityTo: 1
stops:
- 0
- 50
- 55
- 90
legend:
show: false
chart:
height: 140
- type: custom:mushroom-entity-card
entity: sensor.192_168_178_37_mnt_disk1_used_percent
primary_info: state
secondary_info: name
name: Storage
icon_color: yellow
layout: vertical
card_mod:
style: |
ha-card {
margin-top: -57px;
width: auto;
margin-left: auto;
margin-right: auto;
--card-primary-font-size: 12px;
--card-secondary-font-size: 10px;
}
- type: custom:stack-in-card
cards:
- type: custom:apexcharts-card
chart_type: radialBar
series:
- entity: sensor.192_168_178_37_mnt_ssd_cache_used_percent
color: rgb(255, 233, 0)
max: 100
show:
legend_value: false
apex_config:
plotOptions:
radialBar:
offsetY: 0
startAngle: -108
endAngle: 108
hollow:
size: 70%
dataLabels:
name:
show: false
value:
show: false
track:
strokeWidth: 80%
margin: 0
fill:
type: gradient
gradient:
shade: light
type: horizontal
shadeIntensity: 0.3
inverseColors: false
opacityFrom: 1
opacityTo: 1
stops:
- 0
- 50
- 55
- 90
legend:
show: false
chart:
height: 140
- type: custom:mushroom-entity-card
entity: sensor.192_168_178_37_mnt_ssd_cache_used_percent
primary_info: state
secondary_info: name
name: SSD Cache
icon_color: yellow
icon: phu:seagate-ssd
layout: vertical
card_mod:
style: |
ha-card {
margin-top: -57px;
width: auto;
margin-left: auto;
margin-right: auto;
--card-primary-font-size: 12px;
--card-secondary-font-size: 10px;
}
- type: custom:stack-in-card
cards:
- type: custom:apexcharts-card
chart_type: radialBar
series:
- entity: sensor.192_168_178_37_mnt_hdd_cache_used_percent
color: rgb(255, 233, 0)
max: 100
show:
legend_value: false
apex_config:
plotOptions:
radialBar:
offsetY: 0
startAngle: -108
endAngle: 108
hollow:
size: 70%
dataLabels:
name:
show: false
value:
show: false
track:
strokeWidth: 80%
margin: 0
fill:
type: gradient
gradient:
shade: light
type: horizontal
shadeIntensity: 0.3
inverseColors: false
opacityFrom: 1
opacityTo: 1
stops:
- 0
- 50
- 55
- 90
legend:
show: false
chart:
height: 140
- type: custom:mushroom-entity-card
entity: sensor.192_168_178_37_mnt_hdd_cache_used_percent
primary_info: state
secondary_info: name
name: HDD Cache
icon_color: yellow
layout: vertical
card_mod:
style: |
ha-card {
margin-top: -57px;
width: auto;
margin-left: auto;
margin-right: auto;
--card-primary-font-size: 12px;
--card-secondary-font-size: 10px;
}
22 Likes
This is a simple Tile for RGBs lights with the RGB component inside stack-in-a-card, since the Tile light does not have the color options yet.
type: custom:stack-in-card
mode: vertical
cards:
- type: tile
entity: light.luz_qua_abajur
show_entity_picture: false
features:
- type: light-brightness
- type: custom:rgb-light-card
option: null
justify: center
entity: light.luz_qua_abajur
colors:
- rgb_color:
- 243
- 156
- 18
- rgb_color:
- 230
- 126
- 34
- rgb_color:
- 211
- 84
- 0
- rgb_color:
- 192
- 57
- 43
brightness: 150
transition: 1
5 Likes
Mushroom Uptime Card:
required card: uptime card
GitHub - dylandoamaral/uptime-card: Minimalistic uptime card for Home Assistant Lovelace UI
code:
- type: custom:stack-in-card
mode: horizontal
cards:
- type: custom:mushroom-template-card
entity: switch.iot_docker_adguardhome
primary: AdGuard
icon_color: |
{% if is_state(config.entity, 'on') %}
var(--color-background-green)
{% else %}
var(--color-background-red)
{% endif %}
badge_icon: |
{% if is_state('update.wud_container_local_adguardhome', 'on') %}
mdi:update
{% elif is_state('update.wud_container_local_adguardhome', 'unknown') %}
mdi:help
{% else %}
disabled
{% endif %}
badge_color: |
{% if is_state('update.wud_container_local_adguardhome', 'on') %}
disabled
{% elif is_state('update.wud_container_local_adguardhome', 'unknown') %}
orange
{% else %}
transparent
{% endif %}
name: AdGuard
icon: si:adguard
fill_container: true
layout: horizontal
card_mod:
style:
mushroom-state-info$: |
.primary {
font-size: 15px !important;
position: relative;
top: -10px;
left: 0px;
overflow: visible !important;
color: var(primary-text-color);
font-weight: bold;
text-overflow: ellipsis;
}
.primary:after {
content: "{{ states(config.entity) }}";
position: absolute;
display: flex;
justify-content: center;
align-items: center;
{% if is_state(config.entity, 'on') %}
color: var(--google-green);
{% else %}
color: var(--google-red);
{% endif %}
font-weight: bolder;
border-radius: 50%;
top: 5px;
left: 115px;
width: 16px;
height: 16px;
font-size: 14px;
}
- type: custom:uptime-card
entity: binary_sensor.uptimekuma_docker_adguard_iot
hours_to_show: 48
alignment:
tooltip_first: true
show:
footer: false
header: false
status: false
bar:
height: 40
round: 10
spacing: 10
amount: 6
card_mod:
style: |
ha-card {
position: relative;
top: 10px;
left: -55%;
overflow: visible !important;
width: 150%;
}
may you need to do some adjustment for your setup with the position. Maybe there is also a better way to do it with css. Feel free to make the code better 
Cheers.
31 Likes
Mushroom card showing the number of unit on or off in a group:
type: horizontal-stack
cards:
- type: custom:mushroom-template-card
primary: Lumières
secondary: |
{% set all = expand('group.lumieres_toutes')| list -%}
{% set ND1 = all | selectattr('state','eq','on')|list|count%}
{% set D1 = all | selectattr('state','eq','off')|list|count%}
allumées : {{ND1}} / éteintes : {{D1}}
icon: |
{% if is_state('group.lumieres_toutes', 'on') %}
mdi:lightbulb-group
{% else %}
mdi:lightbulb-group-off
{% endif %}
icon_color: |
{% if is_state('group.lumieres_toutes','on') %}
orange
{% else %}
grey
{% endif %}
badge_icon: |-
{% set all = expand('group.lumieres_toutes')| list -%}
{% set open1 = all | selectattr('state','eq','on')|list|count%}
{% if open1 == 0 %}
mdi:numeric-0
{% elif open1 == 1 %}
mdi:numeric-1
{% elif open1 == 2 %}
mdi:numeric-2
{% elif open1 == 3 %}
mdi:numeric-3
{% elif open1 == 4 %}
mdi:numeric-4
{% elif open1 == 5 %}
mdi:numeric-5
{% elif open1 == 6 %}
mdi:numeric-6
{% elif open1 == 7 %}
mdi:numeric-7
{% elif open1 == 8 %}
mdi:numeric-8
{% elif open1 == 9 %}
mdi:numeric-9
{% elif open1 >= 9 %}
mdi:numeric-9-plus
{% else %}
none
{% endif %}
badge_color: |
{% set all = expand('group.lumieres_toutes')| list -%}
{% set open1 = all | selectattr('state','eq','on')|list|count%}
{% if open1 == 0 %}
grey
{% else %}
orange
{% endif %}
entity: group.lumieres_toutes
layout: vertical
tap_action:
action: more-info
hold_action:
action: call-service
service: homeassistant.turn_off
data: {}
target:
entity_id:
- group.lumieres_toutes
- switch.prise_tradfri_1
double_tap_action:
action: more-info
multiline_secondary: true
- type: custom:mushroom-template-card
primary: Volets
secondary: |
{% set all = expand('cover.tous_les_volets')| list -%}
{% set ND1 = all | selectattr('state','eq','open')|list|count%}
{% set D1 = all | selectattr('state','eq','closed')|list|count%}
ouverts : {{ND1}} / fermés : {{D1}}
icon: |
{% if is_state('cover.tous_les_volets', 'open') %}
mdi:window-shutter-open
{% else %}
mdi:window-shutter
{% endif %}
icon_color: |
{% if is_state('cover.tous_les_volets','open') %}
light-blue
{% else %}
green
{% endif %}
badge_icon: |-
{% set all = expand('cover.tous_les_volets')| list -%}
{% set open1 = all | selectattr('state','eq','open')|list|count%}
{% if open1 == 0 %}
mdi:numeric-0
{% elif open1 == 1 %}
mdi:numeric-1
{% elif open1 == 2 %}
mdi:numeric-2
{% elif open1 == 3 %}
mdi:numeric-3
{% elif open1 == 4 %}
mdi:numeric-4
{% elif open1 == 5 %}
mdi:numeric-5
{% elif open1 == 6 %}
mdi:numeric-6
{% elif open1 == 7 %}
mdi:numeric-7
{% elif open1 == 8 %}
mdi:numeric-8
{% else %}
none
{% endif %}
badge_color: |
{% set all = expand('cover.tous_les_volets')| list -%}
{% set open1 = all | selectattr('state','eq','open')|list|count%}
{% if open1 == 0 %}
green
{% else %}
orange
{% endif %}
entity: cover.tous_les_volets
layout: vertical
hold_action:
action: navigate
navigation_path: /lovelace-smartphone/volets
double_tap_action:
action: more-info
multiline_secondary: true
tap_action:
action: more-info
- type: custom:mushroom-template-card
primary: Présence
secondary: |
{% set all = expand('binary_sensor.presence')| list -%}
{% set ND1 = all | selectattr('state','eq','off')|list|count%}
{% set D1 = all | selectattr('state','eq','on')|list|count%}
présence : {{D1}} / non détectée : {{ND1}}
icon: |
{% if is_state('binary_sensor.presence', 'on') %}
mdi:motion-sensor
{% else %}
mdi:thumb-up
{% endif %}
icon_color: |
{% if is_state('binary_sensor.presence','on') %}
red
{% else %}
green
{% endif %}
badge_icon: |-
{% set all = expand('binary_sensor.presence')| list -%}
{% set open1 = all | selectattr('state','eq','on')|list|count%}
{% if open1 == 1 %}
mdi:numeric-1
{% elif open1 == 2 %}
mdi:numeric-2
{% elif open1 == 0 %}
mdi:numeric-0
{% elif open1 == 3 %}
mdi:numeric-3
{% elif open1 == 4 %}
mdi:numeric-4
{% elif open1 == 5 %}
mdi:numeric-5
{% elif open1 == 6 %}
mdi:numeric-6
{% elif open1 == 7 %}
mdi:numeric-7
{% elif open1 == 8 %}
mdi:numeric-8
{% else %}
none
{% endif %}
badge_color: |
{% set all = expand('binary_sensor.presence')| list -%}
{% set open1 = all | selectattr('state','eq','on')|list|count%}
{% if open1 == 0 %}
green
{% else %}
red
{% endif %}
tap_action:
action: navigate
navigation_path: /lovelace-smartphone/securite
layout: vertical
multiline_secondary: true
15 Likes
Hi !
I love the idea and the compact and efficient use of the space.
I will probably use and modify it a lot !
On the other hand, I am trying to remove as much as possible cardmod and stack-in-card in order to stay closer to mushroom initial idea and be capable to use UI only.
I am thus trying to bring the same simplicity using only mushroom template and chips, but I have one problem remaining : Removing card mod is easy (despite less beautifull), but I struggle to find the equivalent of grid or horizontal/vertical stack that would allow to merge borders of cards while not breaking UI. Does this exist ?
When i use this room card in a h-stack, the left border is smaller then the right (i have 2 cards per row)
