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)
Printer Card with Bubbles for toner:
YAML-Code for the card:
type: custom:button-card
entity: sensor.ecosys_m5521cdn
show_name: false
show_state: false
show_icon: false
styles:
card:
- overflow: unset
- padding: 0px
grid:
- grid-template-areas: '"mushroom colors" "mushroom colors"'
- grid-template-columns: auto 13rem
custom_fields:
mushroom:
card:
type: custom:mushroom-entity-card
tap_action:
action: more-info
icon: mdi:printer-outline
entity: '[[[ return entity.entity_id ]]]'
card_mod:
style: |
ha-card {
padding: 3px 3px 3px 3px !important;
text-align: left !important;
border: none !important;
box-shadow: none !important;
}
colors:
card:
type: custom:auto-entities
card:
type: grid
square: false
columns: 4
card_param: cards
sort:
method: state
numeric: true
reverse: true
filter:
include:
- entity_id: sensor.ecosys*
attributes:
friendly_name: Magenta
options:
type: custom:button-card
template: filled_circle_card
variables:
full_color: magenta
light_color: rgb(255,0,255,0.2)
- entity_id: sensor.ecosys*
attributes:
friendly_name: Cyan
options:
type: custom:button-card
template: filled_circle_card
variables:
full_color: darkcyan
light_color: rgb(0, 139, 139,0.2)
- entity_id: sensor.ecosys*
attributes:
friendly_name: Schwarz
options:
type: custom:button-card
template: filled_circle_card
variables:
full_color: black
light_color: rgb(0, 0, 0,0.2)
- entity_id: sensor.ecosys*
attributes:
friendly_name: Gelb
options:
type: custom:button-card
template: filled_circle_card
variables:
full_color: darkorange
light_color: rgb(255, 140, 0,0.2)
Custom-Button-Card Template for the bubbles:
filled_circle_card:
type: custom:button-card
variables:
full_color: magenta
light_color: rgba(255, 0, 255, 0.2)
show_name: false
show_icon: false
show_state: true
show_label: false
state_display: '[[[ return entity.state + entity.attributes.unit_of_measurement ]]]'
styles:
card:
- border-radius: 50%
- height: 40px
- width: 40px
- background-color: var(--card-background-color)
- border: '[[[ return "1px solid " + variables.full_color ]]]'
- background: |
[[[
var ink_level = 100 - entity.state;
return 'linear-gradient(rgb(255, 255, 255)' + ink_level + '%,' + variables.light_color + '0%)';
]]]
state:
- color: '[[[ return variables.full_color ]]]'
- font-size: 1.0em
- font-weight: bold
12 Likes
Internet-Card with toggle for Guest-wifi and Bubbles for Download, Upload and Ping
YAML-Code for the card:
type: custom:button-card
entity: binary_sensor.fb_keller_connection
show_name: false
show_state: false
show_icon: false
styles:
card:
- overflow: unset
- padding: 0px
grid:
- grid-template-areas: '"mushroom colors" "mushroom colors"'
- grid-template-columns: auto 13rem
custom_fields:
mushroom:
card:
type: custom:mushroom-template-card
tap_action:
action: more-info
icon: |
{% if is_state(config.entity, "on") %}
mdi:web-check
{% elif is_state(config.entity, "off") %}
mdi:web-cancel
{% endif %}
icon_color: |
{% if is_state(config.entity, "on") %}
green
{% elif is_state(config.entity, "off") %}
red
{% endif %}
entity: '[[[ return entity.entity_id ]]]'
primary: |
{% if is_state(config.entity, "on") %}
online
{% elif is_state(config.entity, "off") %}
offline
{% endif %}
secondary: '{{ state_attr(config.entity,"friendly_name") }}'
card_mod:
style: |
ha-card {
padding: 3px 3px 3px 3px !important;
text-align: left !important;
border: none !important;
box-shadow: none !important;
}
colors:
card:
type: custom:auto-entities
card:
type: grid
square: false
columns: 4
card_param: cards
filter:
include:
- entity_id: switch.fb_keller_wi_fi_gast_wlan
options:
type: custom:button-card
size: 70%
entity: this.entity_id
show_name: true
show_state: false
state:
- value: 'on'
color: var(--google-blue)
name: Gast123!
- value: 'off'
color: grey
name: ' '
styles:
name:
- font-size: 10px
card:
- height: 100%
- border: none
- box-shadow: none
- background: none
- entity_id: sensor.speedtest_download
options:
type: custom:button-card
template: filled_circle_card_max
variables:
min: 0
max: 400
- entity_id: sensor.speedtest_upload
options:
type: custom:button-card
template: filled_circle_card_max
variables:
min: 0
max: 200
- entity_id: sensor.speedtest_ping
options:
type: custom:button-card
template: filled_circle_card_max
variables:
min: 0
max: 50
Custom-Button-Card Template for the bubbles:
filled_circle_card_max:
type: custom:button-card
variables:
color: rgb(255, 140, 0, 0.5)
min: 0
max: 400
show_icon: true
show_name: false
show_state: true
state_display: '[[[ return Math.round(Number(entity.state)).toFixed(0) ]]]'
styles:
card:
- border: none
- box-shadow: none
- height: 40px
- width: 40px
- border-radius: 50%
- border: '[[[ return "1px solid " + variables.color ]]]'
- background: |
[[[
var ink_level = 100 - (entity.state / variables.max * 100);
return 'linear-gradient(rgb(255, 255, 255)' + ink_level + '%,' + variables.color + '0%)';
]]]
icon:
- color: black
state:
- font-size: 0.7em
- color: black
- font-weight: bold
15 Likes
Upcoming garbage card with today, tomorrow, weekday (for the next 6 days) and date (for more than 6 days). For “tomorrow” and “today” the cards gets a warning-badge and an other background-color:
The card displays the next garbage appointments sorted by “days_to”.
When a schedule is today or tomorrow it looks like this:
I use the the waste collection schedule
YAML-Code for the Card:
type: custom:auto-entities
card:
square: false
columns: 1
type: grid
card_param: cards
sort:
method: attribute
attribute: daysTo
numeric: true
filter:
exclude:
- entity_id: sensor.muellsensor_alle
include:
- entity_id: sensor.muellsensor_*
not:
state: unknown
options:
type: custom:mushroom-template-card
card_mod:
style: |
ha-card {
padding: 3px !important;
--ha-card-background:
{%- set sensor = state_attr(config.entity,'friendly_name') %}
{%- set days = state_attr(config.entity,'daysTo') %}
{%- if days > 1 %} var(--card-background) !important;
{%- elif sensor == 'Gelbe Tonne' %}rgb(245,217,82,0.25) !important;
{%- elif sensor == 'Papiermüll' %}rgb(0,105,175,0.25) !important;
{%- elif sensor == 'Bioabfall' %}rgb(153,69,33,0.25) !important;
{%- elif sensor == 'Restmüll' %}rgb(79,79,79,0.25) !important;
{%- endif %}
}
tap_action:
action: more-info
badge_color: red
badge_icon: |-
{% if state_attr(config.entity, "daysTo") < 2 %}
mdi:alert
{% endif %}
picture: |-
{% if is_state_attr(config.entity, "friendly_name", "Gelbe Tonne") %}
/local/img/tonne-gelb-square.png
{% elif is_state_attr(config.entity, "friendly_name", "Papiermüll") %}
/local/img/tonne-blau-square.png
{% elif is_state_attr(config.entity, "friendly_name", "Bioabfall") %}
/local/img/tonne-braun-square.png
{% elif is_state_attr(config.entity, "friendly_name", "Restmüll") %}
/local/img/tonne-schwarz-square.png
{% endif %}
primary: '{{ state_attr(config.entity,"friendly_name") }}'
secondary: >-
{% if is_state_attr(config.entity, "daysTo", 0) %}
heute am {{ states(config.entity) | regex_replace(".+\|","") | replace("0","Sonntag") | replace("1","Montag") | replace("2","Dienstag") | replace("3","Mittwoch") | replace("4","Donnerstag") | replace("5","Freitag") | replace("6","Samstag") }}
{% elif is_state_attr(config.entity, "daysTo", 1) %}
morgen am {{ states(config.entity) | regex_replace(".+\|","") | replace("0","Sonntag") | replace("1","Montag") | replace("2","Dienstag") | replace("3","Mittwoch") | replace("4","Donnerstag") | replace("5","Freitag") | replace("6","Samstag") }}
{% elif is_state_attr(config.entity, "daysTo", 2) %}
in {{ state_attr(config.entity,'daysTo') }} Tagen am {{
states(config.entity) | regex_replace(".+\|","") |
replace("0","Sonntag") | replace("1","Montag") |
replace("2","Dienstag") | replace("3","Mittwoch") |
replace("4","Donnerstag") | replace("5","Freitag") |
replace("6","Samstag") }}
{% elif is_state_attr(config.entity, "daysTo", 3) %}
in {{ state_attr(config.entity,'daysTo') }} Tagen am {{
states(config.entity) | regex_replace(".+\|","") |
replace("0","Sonntag") | replace("1","Montag") |
replace("2","Dienstag") | replace("3","Mittwoch") |
replace("4","Donnerstag") | replace("5","Freitag") |
replace("6","Samstag") }}
{% elif is_state_attr(config.entity, "daysTo", 4) %}
in {{ state_attr(config.entity,'daysTo') }} Tagen am {{
states(config.entity) | regex_replace(".+\|","") |
replace("0","Sonntag") | replace("1","Montag") |
replace("2","Dienstag") | replace("3","Mittwoch") |
replace("4","Donnerstag") | replace("5","Freitag") |
replace("6","Samstag") }}
{% elif is_state_attr(config.entity, "daysTo", 5) %}
in {{ state_attr(config.entity,'daysTo') }} Tagen am {{
states(config.entity) | regex_replace(".+\|","") |
replace("0","Sonntag") | replace("1","Montag") |
replace("2","Dienstag") | replace("3","Mittwoch") |
replace("4","Donnerstag") | replace("5","Freitag") |
replace("6","Samstag") }}
{% elif is_state_attr(config.entity, "daysTo", 6) %}
in {{ state_attr(config.entity,'daysTo') }} Tagen am {{
states(config.entity) | regex_replace(".+\|","") |
replace("0","Sonntag") | replace("1","Montag") |
replace("2","Dienstag") | replace("3","Mittwoch") |
replace("4","Donnerstag") | replace("5","Freitag") |
replace("6","Samstag") }}
{% else %}
in {{ state_attr(config.entity,'daysTo') }} Tagen am {{ states(config.entity) | regex_replace("[A-Z,a-z,ä,ö,ü]","") | regex_replace("\|.$","") | regex_replace("\s","") | regex_replace("^\|.+\|","") }}
{% endif %}
11 Likes
I am attempting to us your yaml code but all I am getting for display is below. Suggestions?
type: custom:button-card
entity: sensor.canon_tr8500_series
show_name: false
show_state: false
show_icon: false
styles:
card:
- overflow: unset
- padding: 0px
grid:
- grid-template-areas: '"mushroom colors" "mushroom colors"'
- grid-template-columns: auto 13rem
custom_fields:
mushroom:
card:
type: custom:mushroom-entity-card
tap_action:
action: more-info
icon: mdi:printer-outline
entity: '[[[ return entity.entity_id ]]]'
card_mod:
style: |
ha-card {
padding: 3px 3px 3px 3px !important;
text-align: left !important;
border: none !important;
box-shadow: none !important;
}
colors:
card:
type: custom:auto-entities
card:
type: grid
square: false
columns: 4
card_param: cards
sort:
method: state
numeric: true
reverse: true
filter:
include:
- entity_id: sensor.canon_tr8500_series*
attributes:
friendly_name: Magenta
options:
type: custom:button-card
template: filled_circle_card
variables:
full_color: magenta
light_color: rgb(255,0,255,0.2)
- entity_id: sensor.canon_tr8500_series*
attributes:
friendly_name: Cyan
options:
type: custom:button-card
template: filled_circle_card
variables:
full_color: darkcyan
light_color: rgb(0, 139, 139,0.2)
- entity_id: sensor.canon_tr8500_series*
attributes:
friendly_name: Schwarz
options:
type: custom:button-card
template: filled_circle_card
variables:
full_color: black
light_color: rgb(0, 0, 0,0.2)
- entity_id: sensor.canon_tr8500_series*
attributes:
friendly_name: Gelb
options:
type: custom:button-card
template: filled_circle_card
variables:
full_color: darkorange
light_color: rgb(255, 140, 0,0.2)
filled_circle_card:
type: custom:button-card
variables:
full_color: magenta
light_color: rgba(255, 0, 255, 0.2)
show_name: false
show_icon: false
show_state: true
show_label: false
state_display: '[[[ return entity.state + entity.attributes.unit_of_measurement ]]]'
styles:
card:
- border-radius: 50%
- height: 40px
- width: 40px
- background-color: var(--card-background-color)
- border: '[[[ return "1px solid " + variables.full_color ]]]'
- background: |
[[[
var ink_level = 100 - entity.state;
return 'linear-gradient(rgb(255, 255, 255)' + ink_level + '%,' + variables.light_color + '0%)';
]]]
state:
- color: '[[[ return variables.full_color ]]]'
- font-size: 1.0em
- font-weight: bold
The auto-entities-card filter filters for a specific “friendly name” like “Schwarz” or “Magenta”. Does your entities have these specific friendly names?
- entity_id: sensor.canon_tr8500_series*
attributes:
friendly_name: Schwarz # Filter for a specific friendly name
options:
type: custom:button-card
template: filled_circle_card
variables:
full_color: black
light_color: rgb(0, 0, 0,0.2)
nice!
Still very new to Mushroom, I have been playing around a bit with that config, and, with the exception of the template in the folder header, came up with:
Yaml here
type: entities
entities:
- type: custom:hui-element
card_mod:
style: |
ha-card {
box-shadow: none;
margin: -16px;
}
card_type: picture-entity
image: >-
https://img.freepik.com/free-photo/pillow-bed_1203-9518.jpg?w=1800&t=st=1666202344~exp=1666202944~hmac=7531e58884b24b8d2b847a8d0b04e59005362e7fdad1fabbc3c7678247086a4a
entity: light.living
show_state: false
show_name: false
aspect_ratio: '3'
tap_action:
action: toggle
- type: custom:fold-entity-row
head:
type: section
label: Living lights
card_mod: &style
style: |
.label {
margin-left: 0px;
}
padding: 0
entities:
- type: custom:auto-entities
card:
type: entities
card_mod:
style: |
ha-card {
box-shadow: none;
margin: 0 -16px -16px -16px;
}
filter:
exclude:
- entity_id: light.living
include:
- domain: light
area: living
options:
type: custom:hui-element
card_type: custom:mushroom-light-card
fill_container: true
layout: horizontal
use_light_color: true
show_brightness_control: true
show_color_temp_control: true
show_color_control: true
collapsible_controls: true
card_mod:
style: |
ha-card {
box-shadow: none;
margin: -8px -16px;
}
shows just like that, only auto builds a bit more. (ofc, change the card options to your liking)
(btw, replacing mushroom with core tile is rather nice too… )
though I guess the empty spaces then would want me to use a grid of smaller tile. But that’s off topic here, sorry ;0( )
8 Likes
Looks good. What value_template and date_template are you using for your sensors?
I’m using these templates:
- platform: waste_collection_schedule
name: Muellsensor_Gelbe_Tonne
value_template: '{{value.types|join(", ")}}|{{value.daysTo}}|{{value.date.strftime("%d.%m.%Y")}}|{{value.date.strftime("%u")}}'
add_days_to: true
date_template: '{{value.date.strftime("%d.%m.%Y")}}'
types:
- "Gelbe Tonne"
- "Gelbe Tonne 2"
- platform: waste_collection_schedule
name: Muellsensor_Restmuell
value_template: '{{value.types|join(", ")}}|{{value.daysTo}}|{{value.date.strftime("%d.%m.%Y")}}|{{value.date.strftime("%u")}}'
add_days_to: true
date_template: '{{value.date.strftime("%d.%m.%Y")}}'
types:
- "Restmüll"
- platform: waste_collection_schedule
name: Muellsensor_Papiertonne
add_days_to: true
date_template: '{{value.date.strftime("%d.%m.%Y")}}'
value_template: '{{value.types|join(", ")}}|{{value.daysTo}}|{{value.date.strftime("%d.%m.%Y")}}|{{value.date.strftime("%u")}}'
types:
- "Papiermüll"
- platform: waste_collection_schedule
name: Muellsensor_Bioabfall
add_days_to: true
date_template: '{{value.date.strftime("%d.%m.%Y")}}'
value_template: '{{value.types|join(", ")}}|{{value.daysTo}}|{{value.date.strftime("%d.%m.%Y")}}|{{value.date.strftime("%u")}}'
types:
- "Bioabfall"
1 Like
Great, thanks alot…
1 Like