1 Like
There is a mod for this, check the link above.
2 Likes
Have been using this since the day you posted, but today i’m getting “i.setConfig is not a function”. Have recreated the card, but seems to give the same error. Any pointers?
And as sudden as it came, it went away. Let it gooo 
1 Like
Greetings to you all,
today i wanted to share with you a very simple but effective light control card for 4 lights that came about more or less by chance. Through a lot of combining and experimenting with cards from this thread, I came up with this absolutely beautiful combination of different cards. I really like it, so it would be a shame not to share it with you. It’s also interesting that the layout changes a lot depending on how you view your dashboard (grid layout, horizontal and vertical layout), as you can see in the two pictures. But don’t ask me why this happens. Maybe you can tell me. and now have fun with it
type: custom:layout-card
layout_type: custom:vertical-layout
layout: {}
cards:
- type: custom:stack-in-card
card_mod:
style: |
ha-card {
background-image: url('https://hueblog.de/wp-content/uploads/2018/01/Philips_Hue-Lounge.jpg');
background-size: cover;
background-position: center center;
}
cards:
- type: custom:layout-card
layout_type: custom:grid-layout
layout:
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr))
cards:
- type: custom:mushroom-light-card
entity: light.kugellampe
layout: vertical
use_light_color: true
secondary_info: none
card_mod:
style: |
ha-card {
{% set r = state_attr(config.entity, 'rgb_color')[0] %}
{% set g = state_attr(config.entity, 'rgb_color')[1] %}
{% set b = state_attr(config.entity, 'rgb_color')[2] %}
background: rgba( {{r}}, {{g}}, {{b}}, 0.2 );
}
- type: custom:mushroom-light-card
entity: light.spot
layout: vertical
primary_info: name
use_light_color: true
secondary_info: none
card_mod:
style: |
ha-card {
{% set r = state_attr(config.entity, 'rgb_color')[0] %}
{% set g = state_attr(config.entity, 'rgb_color')[1] %}
{% set b = state_attr(config.entity, 'rgb_color')[2] %}
background: rgba( {{r}}, {{g}}, {{b}}, 0.2 );
}
- type: custom:mushroom-light-card
entity: light.strahler
layout: vertical
primary_info: name
use_light_color: true
secondary_info: none
card_mod:
style: |
ha-card {
{% set r = state_attr(config.entity, 'rgb_color')[0] %}
{% set g = state_attr(config.entity, 'rgb_color')[1] %}
{% set b = state_attr(config.entity, 'rgb_color')[2] %}
background: rgba( {{r}}, {{g}}, {{b}}, 0.2 );
}
- type: custom:mushroom-light-card
entity: light.ball
layout: vertical
use_light_color: true
secondary_info: none
card_mod:
style: |
ha-card {
{% set r = state_attr(config.entity, 'rgb_color')[0] %}
{% set g = state_attr(config.entity, 'rgb_color')[1] %}
{% set b = state_attr(config.entity, 'rgb_color')[2] %}
background: rgba( {{r}}, {{g}}, {{b}}, 0.2 );
}
5 Likes
Everyone with the past holidays, while everyone was on vacation, I decided that it would be convenient to monitor the state of heating in my house and that’s what I did. I will be glad if this is also useful to someone
Card code
type: horizontal-stack
cards:
- type: custom:apexcharts-card
graph_span: 24h
apex_config:
chart:
height: 220px
span:
start: day
now:
show: true
label: Сейчас
show:
last_updated: true
header:
show_states: true
colorize_states: true
show: true
title: ''
series:
- entity: sensor.inside_home_temperature
color: orangered
type: column
name: Температура
show:
in_chart: true
legend_value: false
group_by:
func: last
duration: 30min
- entity: sensor.inside_home_humidity
type: line
name: Влажность
show:
in_chart: true
legend_value: false
group_by:
func: last
duration: 30min
card_mod:
style: |
ha-card {
height: 290px !important;
}
- type: custom:stack-in-card
mode: vertical
cards:
- type: custom:layout-card
layout_type: custom:grid-layout
cards:
- type: custom:mushroom-template-card
primary: Отопление
secondary: '{{ iif(states(entity) == ''on'', ''Нагревает'', ''Ожидает'') }}'
icon: >-
{{ iif(states(entity) == 'on', 'mdi:heat-wave',
'mdi:clock-outline') }}
entity: binary_sensor.hot_water_heating_radiators
icon_color: '{{ iif(states(entity) == ''on'', ''deep-orange'', ''grey'') }}'
fill_container: true
layout: vertical
view_layout:
grid-area: all
card_mod:
style: |
ha-card {
border-style: none;
box-shadow: 0px 0px;
}
- type: custom:mushroom-chips-card
chips:
- type: template
entity: climate.living_room_thermostat
icon: mdi:sofa
content: |
{% if state_attr(entity, 'hvac_action') == 'heating' %}
Нагревает
{% elif state_attr(entity, 'hvac_action') == 'idle' %}
Ожидает
{% elif states(entity) == 'off' %}
Выключено
{% else %}
Неизвестно
{% endif %}
icon_color: |
{% if state_attr(entity, 'hvac_action') == 'heating' %}
deep-orange
{% elif state_attr(entity, 'hvac_action') == 'idle' %}
grey
{% elif states(entity) == 'off' %}
red
{% else %}
indigo
{% endif %}
tap_action:
action: more-info
card_mod:
style: |
ha-card {
border-style: none;
box-shadow: 0px 0px;
}
- type: template
entity: climate.hallway_thermostat
icon: mdi:hanger
content: |
{% if state_attr(entity, 'hvac_action') == 'heating' %}
Нагревает
{% elif state_attr(entity, 'hvac_action') == 'idle' %}
Ожидает
{% elif states(entity) == 'off' %}
Выключено
{% else %}
Неизвестно
{% endif %}
icon_color: |
{% if state_attr(entity, 'hvac_action') == 'heating' %}
deep-orange
{% elif state_attr(entity, 'hvac_action') == 'idle' %}
grey
{% elif states(entity) == 'off' %}
red
{% else %}
indigo
{% endif %}
tap_action:
action: more-info
card_mod:
style: |
ha-card {
border-style: none;
box-shadow: 0px 0px;
}
- type: template
entity: climate.bathroom_thermostat
icon: mdi:shower
content: |
{% if state_attr(entity, 'hvac_action') == 'heating' %}
Нагревает
{% elif state_attr(entity, 'hvac_action') == 'idle' %}
Ожидает
{% elif states(entity) == 'off' %}
Выключено
{% else %}
Неизвестно
{% endif %}
icon_color: |
{% if state_attr(entity, 'hvac_action') == 'heating' %}
deep-orange
{% elif state_attr(entity, 'hvac_action') == 'idle' %}
grey
{% elif states(entity) == 'off' %}
red
{% else %}
indigo
{% endif %}
tap_action:
action: more-info
card_mod:
style: |
ha-card {
border-style: none;
box-shadow: 0px 0px;
}
- type: template
entity: climate.kitchen_thermostat
icon: mdi:fridge
content: |
{% if state_attr(entity, 'hvac_action') == 'heating' %}
Нагревает
{% elif state_attr(entity, 'hvac_action') == 'idle' %}
Ожидает
{% elif states(entity) == 'off' %}
Выключено
{% else %}
Неизвестно
{% endif %}
icon_color: |
{% if state_attr(entity, 'hvac_action') == 'heating' %}
deep-orange
{% elif state_attr(entity, 'hvac_action') == 'idle' %}
grey
{% elif states(entity) == 'off' %}
red
{% else %}
indigo
{% endif %}
tap_action:
action: more-info
card_mod:
style: |
ha-card {
border-style: none;
box-shadow: 0px 0px;
}
- type: template
entity: climate.bedroom_thermostat
icon: mdi:bed-king
content: |
{% if state_attr(entity, 'hvac_action') == 'heating' %}
Нагревает
{% elif state_attr(entity, 'hvac_action') == 'idle' %}
Ожидает
{% elif states(entity) == 'off' %}
Выключено
{% else %}
Неизвестно
{% endif %}
icon_color: |
{% if state_attr(entity, 'hvac_action') == 'heating' %}
deep-orange
{% elif state_attr(entity, 'hvac_action') == 'idle' %}
grey
{% elif states(entity) == 'off' %}
red
{% else %}
indigo
{% endif %}
tap_action:
action: more-info
card_mod:
style: |
ha-card {
border-style: none;
box-shadow: 0px 0px;
}
- type: template
entity: climate.cabinet_thermostat
icon: mdi:gamepad-variant
content: |
{% if state_attr(entity, 'hvac_action') == 'heating' %}
Нагревает
{% elif state_attr(entity, 'hvac_action') == 'idle' %}
Ожидает
{% elif states(entity) == 'off' %}
Выключено
{% else %}
Неизвестно
{% endif %}
icon_color: |
{% if state_attr(entity, 'hvac_action') == 'heating' %}
deep-orange
{% elif state_attr(entity, 'hvac_action') == 'idle' %}
grey
{% elif states(entity) == 'off' %}
red
{% else %}
indigo
{% endif %}
tap_action:
action: more-info
card_mod:
style: |
ha-card {
border-style: none;
box-shadow: 0px 0px;
}
- type: template
entity: climate.childroom_thermostat
icon: mdi:teddy-bear
content: |
{% if state_attr(entity, 'hvac_action') == 'heating' %}
Нагревает
{% elif state_attr(entity, 'hvac_action') == 'idle' %}
Ожидает
{% elif states(entity) == 'off' %}
Выключено
{% else %}
Неизвестно
{% endif %}
icon_color: |
{% if state_attr(entity, 'hvac_action') == 'heating' %}
deep-orange
{% elif state_attr(entity, 'hvac_action') == 'idle' %}
grey
{% elif states(entity) == 'off' %}
red
{% else %}
indigo
{% endif %}
tap_action:
action: more-info
card_mod:
style: |
ha-card {
border-style: none;
box-shadow: 0px 0px;
}
alignment: center
card_mod:
style: |
ha-card {
border-style: none;
box-shadow: 0px 0px;
}
- type: custom:tabbed-card
options: {}
styles:
'--mdc-theme-primary': OrangeRed
'--mdc-tab-text-label-color-default': white
'--mdc-typography-button-font-size': 10px
'-—mdc-tab-text-label-color-default': red
'-–mdc-tab-color-default': red
'-–mdc-tab-height': 20px
tabs:
- card:
type: custom:mushroom-climate-card
entity: climate.hallway_thermostat
show_temperature_control: true
hvac_modes: []
layout: horizontal
name: Отопление
icon: mdi:radiator
collapsible_controls: false
tap_action:
action: more-info
card_mod:
style: |
ha-card {
border-style: none;
box-shadow: 0px 0px;
}
attributes:
icon: mdi:hanger
label: Прихожая
stacked: true
isMinWidthIndicator: true
isFadingIndicator: true
- card:
type: custom:mushroom-climate-card
entity: climate.bedroom_thermostat
show_temperature_control: true
hvac_modes: []
layout: horizontal
name: Отопление
icon: mdi:radiator
collapsible_controls: false
tap_action:
action: more-info
card_mod:
style: |
ha-card {
border-style: none;
box-shadow: 0px 0px;
attributes:
icon: mdi:bed-king
stacked: true
label: Спальная
isMinWidthIndicator: true
isFadingIndicator: true
- card:
type: custom:mushroom-climate-card
entity: climate.living_room_thermostat
show_temperature_control: true
hvac_modes: []
layout: horizontal
name: Отопление
icon: mdi:radiator
collapsible_controls: false
tap_action:
action: more-info
card_mod:
style: |
ha-card {
border-style: none;
box-shadow: 0px 0px;
attributes:
icon: mdi:sofa
stacked: true
label: Гостиная
isMinWidthIndicator: true
isFadingIndicator: true
- card:
type: custom:mushroom-climate-card
entity: climate.kitchen_thermostat
show_temperature_control: true
hvac_modes: []
layout: horizontal
name: Отопление
icon: mdi:radiator
collapsible_controls: false
tap_action:
action: more-info
card_mod:
style: |
ha-card {
border-style: none;
box-shadow: 0px 0px;
attributes:
icon: mdi:fridge
stacked: true
label: Кухня
isMinWidthIndicator: true
isFadingIndicator: true
- card:
type: custom:mushroom-climate-card
entity: climate.childroom_thermostat
show_temperature_control: true
hvac_modes: []
layout: horizontal
name: Отопление
icon: mdi:radiator
collapsible_controls: false
tap_action:
action: more-info
card_mod:
style: |
ha-card {
border-style: none;
box-shadow: 0px 0px;
attributes:
icon: mdi:teddy-bear
stacked: true
label: Детская
isMinWidthIndicator: true
isFadingIndicator: true
- card:
type: custom:mushroom-climate-card
entity: climate.cabinet_thermostat
show_temperature_control: true
hvac_modes: []
layout: horizontal
name: Отопление
icon: mdi:radiator
collapsible_controls: false
tap_action:
action: more-info
card_mod:
style: |
ha-card {
border-style: none;
box-shadow: 0px 0px;
attributes:
icon: mdi:microsoft-xbox-controller
stacked: true
label: Кабинет
isMinWidthIndicator: true
isFadingIndicator: true
- card:
type: custom:mushroom-climate-card
entity: climate.bathroom_thermostat
show_temperature_control: true
hvac_modes: []
layout: horizontal
name: Ванная
icon: mdi:radiator
collapsible_controls: false
tap_action:
action: more-info
card_mod:
style: |
ha-card {
border-style: none;
box-shadow: 0px 0px;
attributes:
icon: mdi:shower
stacked: true
label: Ванная
isMinWidthIndicator: true
isFadingIndicator: true
view_layout:
grid-area: tabbed
layout:
grid-template-columns: 30% 70%
grid-template-rows: auto
grid-template-areas: |
"all stats"
"tabbed tabbed"
Required resources
card_mod
mushroom-cards
stack-in-card
tabbed-card
4 Likes
Looks good. I did the same during the holidays 
Here´s my take:
Goal
I wanted to have a card that displays my heating, the temperature and humitiy in each room and the weather and weather-forecast.
This card uses
- Stack-in-a-Card (HACS)
- Apex Charts (HACS)
- Tabbed-Card (HACS)
- Card-Mod (HACS)
- Weather-Radar-Card (HACS)
- Weather-Chart-Card (HACS)
- Clock-Weather-Card (HACS)
- Button-Card (HACS)
- Tile-Card
YAML-Code
type: custom:stack-in-card
card_mod:
style: |
ha-card {
padding: 0px !important;
@media only screen and (min-width: 1000px) {
min-height: 52rem;
}
}
mode: vertical
keep:
background: true
border_radius: true
box_shadow: false
margin: true
outer_padding: true
cards:
- type: vertical-stack
cards:
- type: custom:mushroom-chips-card
alignment: justify
chips:
- type: template
content: Heizung und Wetter
icon: mdi:weather-partly-cloudy
tap_action: none
card_mod:
style: |
ha-card {
padding: 0px !important;
border: none !important;
box-shadow: none !important;
font-size: 3.5rem !important;
background: none !important;
}
- type: vertical-stack
cards:
- type: custom:mod-card
card_mod:
style:
tabbed-card:
$:
mwc-tab:
$:
mwc-tab-indicator $: ''
.: |
.mdc-tab {
min-width: 25px !important;
}
.material-icons {
display: contents !important;
}
.: |
tabbed-card {
--mdc-tab-horizontal-padding: 0px;
--mdc-ripple-color: transparent
}
card:
type: custom:tabbed-card
styles:
'--mdc-tab-horizontal-padding': 0px !important
'--mdc-theme-primary': var(--google-red)
'--mdc-tab-stacked-height': 4rem !important
tabs:
- attributes:
minWidth: true
stacked: true
label: Heizung
icon: mdi:gas-burner
styles:
'--mdc-tab-horizontal-padding': 0px !important
card:
type: vertical-stack
cards:
- type: tile
card_mod:
style: |
ha-card {
padding: 0px !important;
border: none !important;
box-shadow: none !important;
margin-left: -0.5rem !important;
margin-right: -0.5rem !important;
margin-bottom: -1rem !important;
}
# .content {
# display: none !important;
# }
entity: climate.heizung
icon: mdi:gas-burner
hide_state: false
vertical: false
features:
- type: target-temperature
- style: icons
preset_modes:
- away
- home
- auto
type: climate-preset-modes
- type: climate-hvac-modes
hvac_modes:
- 'off'
- auto
- heat
- type: custom:apexcharts-card
card_mod:
style: |
ha-card {
padding: 0px 0px 0px 0px;
box-shadow: none;
border: none;
}
#state__value > #state {
font-size: 1.2em !important;
}
.apexcharts-tooltip-series-group {
padding-top: 0px !important;
padding-bottom: 0px !important;
margin-top: 0px !important;
margin-bottom: 0px !important;
display: none;
text-align: left;
justify-content: left;
align-items: center;
}
#header {
padding: 3px !important;
}
apex_config:
chart:
height: 150px
offsetX: 0
offsetY: -20
legend:
show: false
span:
end: minute
graph_span: 24h
yaxis:
- apex_config:
tickAmount: 5
forceNiceScale: true
min: ~20
max: ~24
header:
show: true
show_states: true
colorize_states: true
standard_format: true
floating: false
all_series_config:
show:
in_header: raw
legend_value: true
opacity: 0
type: area
stroke_width: 2
fill_raw: last
group_by:
func: avg
duration: 1h
series:
- entity: sensor.eg_temperatur
name: Erdgeschoss
color: var(--google-red)
statistics:
type: mean
- entity: sensor.ug_temperature
name: Keller
color: var(--google-yellow)
- type: custom:apexcharts-card
card_mod:
style: |
ha-card {
padding: 0px 0px 0px 0px;
box-shadow: none;
border: none;
margin-top: -3rem !important;
}
#state__value > #state {
font-size: 1.2em !important;
}
.apexcharts-tooltip-series-group {
padding-top: 0px !important;
padding-bottom: 0px !important;
margin-top: 0px !important;
margin-bottom: 0px !important;
display: none;
text-align: left;
justify-content: left;
align-items: center;
}
#header {
padding: 3px !important;
}
apex_config:
chart:
height: 150px
offsetX: 0
offsetY: -20
legend:
show: false
span:
end: hour
graph_span: 24h
yaxis:
- apex_config:
tickAmount: 5
forceNiceScale: false
id: heizung
min: 0
max: 100
- apex_config:
tickAmount: 5
forceNiceScale: true
id: gas
opposite: true
min: 0
header:
show: true
show_states: true
colorize_states: true
standard_format: true
floating: false
all_series_config:
show:
in_header: raw
legend_value: true
opacity: 0
type: area
stroke_width: 2
fill_raw: last
series:
- entity: sensor.heizung_heizung
yaxis_id: heizung
name: Heizleistung
color: var(--google-red)
statistics:
type: mean
group_by:
func: avg
duration: 1h
- entity: sensor.gm2021_kilowattstunde_gas_per_hour
name: Gasverbrauch
yaxis_id: gas
color: var(--energy-gas-color)
opacity: 0.2
show:
in_chart: true
in_header: false
statistics:
type: sum
type: column
group_by:
func: last
duration: 1h
start_with_last: true
- entity: sensor.gm2021_kilowattstunde_gas_today
name: Gasverbrauch
yaxis_id: heizung
color: var(--energy-gas-color)
opacity: 0.2
show:
in_chart: false
in_header: raw
statistics:
type: sum
type: column
group_by:
func: last
duration: 1h
start_with_last: true
- attributes:
minWidth: true
stacked: true
label: Räume
icon: mdi:floor-plan
styles:
'--mdc-tab-horizontal-padding': 0px !important
'--mdc-theme-primary': var(--google-yellow)
card:
type: custom:stack-in-card
card_mod:
style: |
ha-card {
padding: 0px !important;
box-shadow: none;
}
mode: vertical
keep:
background: true
border_radius: true
box_shadow: false
margin: true
outer_padding: false
cards:
- type: custom:mod-card
card_mod:
style:
tabbed-card:
$:
mwc-tab:
$:
mwc-tab-indicator $: ''
.: |
.mdc-tab {
min-width: 35px !important;
}
.material-icons {
display: contents !important;
}
.: |
tabbed-card {
--mdc-tab-horizontal-padding: 0px;
--mdc-ripple-color: transparent
}
card:
type: custom:tabbed-card
styles:
'--mdc-tab-horizontal-padding': 0px !important
tabs:
- attributes:
minWidth: true
stacked: true
label: Bad
icon: mdi:bathtub
styles:
'--mdc-theme-primary': var(--energy-solar-color)
'--mdc-tab-horizontal-padding': 0px !important
card:
type: custom:button-card
template: climate_card_small
entity: climate.homematicip_raum_badezimmer
- attributes:
minWidth: true
stacked: true
label: Büro
icon: mdi:desk
styles:
'--mdc-theme-primary': var(--energy-solar-color)
'--mdc-tab-horizontal-padding': 0px !important
card:
type: custom:button-card
template: climate_card_small
entity: climate.homematicip_raum_buro
- attributes:
minWidth: true
stacked: true
label: Eltern
icon: mdi:bed
styles:
'--mdc-theme-primary': var(--energy-solar-color)
'--mdc-tab-horizontal-padding': 0px !important
card:
type: custom:button-card
template: climate_card_small
entity: climate.homematicip_raum_schlafzimmer
- attributes:
minWidth: true
stacked: true
label: Greta
icon: mdi:horse-variant
styles:
'--mdc-theme-primary': var(--energy-solar-color)
'--mdc-tab-horizontal-padding': 0px !important
card:
type: custom:button-card
template: climate_card_small
entity: climate.homematicip_raum_greta
- attributes:
minWidth: true
stacked: true
label: Svea
icon: mdi:crown
styles:
'--mdc-theme-primary': var(--energy-solar-color)
'--mdc-tab-horizontal-padding': 0px !important
card:
type: custom:button-card
template: climate_card_small
entity: climate.homematicip_raum_svea
- attributes:
minWidth: true
stacked: true
label: Wohnen
icon: mdi:sofa
styles:
'--mdc-theme-primary': var(--energy-solar-color)
'--mdc-tab-horizontal-padding': 0px !important
card:
type: custom:button-card
template: climate_card_small
entity: climate.homematicip_raum_wohnzimmer
- attributes:
minWidth: true
stacked: true
label: Wetter
icon: mdi:weather-cloudy
styles:
'--mdc-tab-horizontal-padding': 0px !important
'--mdc-theme-primary': var(--google-blue)
card:
type: vertical-stack
cards:
- type: weather-forecast
card_mod:
style: |
ha-card {
border: none;
box-shadow: none;
padding: none;
}
show_current: true
show_forecast: false
name: Coesfeld
entity: weather.openweathermap
forecast_type: hourly
- type: custom:weather-radar-card
static_map: true
show_playback: false
extra_labels: true
show_marker: true
show_scale: true
show_range: true
square_map: false
show_recenter: false
zoom_level: 8
data_source: RainViewer-DarkSky
map_style: Voyager
card_mod:
style: |
ha-card {
border: none;
box-shadow: none;
height: 35.5rem
}
- attributes:
minWidth: true
stacked: true
label: Vorhersage
icon: mdi:weather-cloudy
styles:
'--mdc-tab-horizontal-padding': 0px !important
'--mdc-theme-primary': var(--google-blue)
card:
type: vertical-stack
cards:
- type: custom:weather-chart-card
entity: weather.openweathermap
show_main: true
show_attributes: true
card_mod:
style: |
ha-card {
background: none;
border: none;
box-shadow: none;
}
- type: custom:clock-weather-card
entity: weather.coesfeld
hide_today_section: true
card_mod:
style: |
ha-card {
border: none !important;
box-shadow: none !important;
margin-bottom: -1rem !important;
margin-left: -1rem !important;
margin-right: -1rem !important;
}
The Card uses a button-card-template for the rooms. Here is the yaml-code for that:
climate_card_small:
type: custom:button-card
entity: climate.klimaanlage_anna
variables:
picture: >-
[[[ return
`url("/local/img/${entity.attributes.friendly_name.toLowerCase()}.jpg")`
]]]
climate_entity: '[[[ return `${entity.entity_id}` ]]]'
fan_entity: '[[[ return "fan."+entity.attributes.friendly_name.toLowerCase() ]]]'
temp_entity: >-
[[[ return
`${entity.entity_id.replace("climate","sensor").replace("water_heater","sensor").replace("_raum_","_sensor_")
+ "_temperature"}` ]]]
mode_entity: >-
[[[ return
`${entity.entity_id.replace("climate","input_select").replace("homematicip_raum_","")
+ "_luftung_voreinstellung"}` ]]]
modus_entity: >-
[[[ return
`${entity.entity_id.replace("climate","input_select").replace("homematicip_raum_","")
+ "_luftung_modus"}` ]]]
hum_entity: >-
[[[ return
`${entity.entity_id.replace("climate","sensor").replace("water_heater","sensor").replace("_raum_","_sensor_")
+ "_humidity"}` ]]]
min: '[[[ return `${entity.attributes.min_temp}` ]]]'
max: '[[[ return `${entity.attributes.max_temp}` ]]]'
target: '[[[ return `${entity.attributes.temperature}` ]]]'
show_state: false
show_icon: false
show_name: false
styles:
card:
- padding: 0px
grid:
- grid-template-areas: '"karte"'
- grid-template-columns: 100%
- grid-template-rows: 100%
custom_fields:
karte:
- filter: opacity(100%)
- overflow: visible
custom_fields:
karte:
card:
type: custom:stack-in-card
card_mod:
style: |
ha-card {
padding: 0px !important;
margin-bottom: -2rem !important;
}
mode: vertical
keep:
background: true
border_radius: true
box_shadow: true
margin: true
outer_padding: true
cards:
- type: tile
entity: '[[[ return variables.climate_entity ]]]'
features:
- type: target-temperature
- type: climate-hvac-modes
hvac_modes:
- 'off'
- auto
- heat
- cool
- style: icons
preset_modes:
- none
- boost
- eco
type: climate-preset-modes
card_mod:
style: |
ha-card {
border: none;
box-shadow: none;
padding: 0px;
margin-left: -1rem !important;
margin-right: -1rem !important;
text-align: left !important;
}
- type: custom:apexcharts-card
card_mod:
style: |
ha-card {
padding: 0px 0px 0px 0px;
box-shadow: none;
border: none;
}
#state__value > #state {
font-size: 1em !important;
}
.apexcharts-tooltip-series-group {
padding-top: 0px !important;
padding-bottom: 0px !important;
margin-top: 0px !important;
margin-bottom: 0px !important;
display: none;
text-align: left;
justify-content: left;
align-items: center;
}
#header {
padding: 3px !important;
}
apex_config:
chart:
height: 200px
offsetX: 0
offsetY: -20
legend:
show: false
span:
end: minute
graph_span: 24h
yaxis:
- apex_config:
tickAmount: 5
forceNiceScale: true
floating: false
id: temp
min: 10
max: 30
- apex_config:
tickAmount: 5
forceNiceScale: false
floating: false
id: hum
opposite: true
min: 0
max: 100
header:
show: true
show_states: true
colorize_states: true
standard_format: true
floating: false
all_series_config:
show:
in_header: raw
legend_value: true
opacity: 0
type: area
stroke_width: 2
fill_raw: last
group_by:
func: avg
duration: 1h
series:
- entity: '[[[ return variables.temp_entity ]]]'
name: Temperatur
yaxis_id: temp
color: var(--google-red)
statistics:
type: mean
- entity: '[[[ return variables.climate_entity ]]]'
attribute: temperature
yaxis_id: temp
unit: °C
name: Soll
color: var(--google-grey)
opacity: 0.2
- entity: '[[[ return variables.hum_entity ]]]'
name: Luftfeuchtigkeit
yaxis_id: hum
color: var(--google-blue)
statistics:
type: mean
12 Likes
Thanks for all the inspiration, want to share my piece for this group. See my cards interface at my github. Documentation not finished yet, but good part is already there!
9 Likes
Hi Mike,
Really like your ‘room card’. Can you help me to duplicate it in my scenario?
What does the entity group.master_bedroom contains?
That’s one of the old style groups that can accept multiple entity types. So I use any device that I want to trigger the room’s “on” state. For example, in the master bedroom I’ve got lights, motion sensors, bed sensors, smart plugs, a smart tv and an android tv. If any of these are on, I assume the room is occupied and I use that to show on my dashboard card, but I also use it for automations like temperature control in the room.
Hi Ingo,
I notice you used the Energy Period Selector Plus (Custom HACS) card in your dashboard.
Did you (or anybody else) manage to use the selected dates as variables in a templated apexchart? It’s a pity if this nice period selector can only be used in combination with standard energy cards.
I tried to set the apexchart span and offset using a rather clumsy method as follows:
card:
type: custom:config-template-card
entities:
- input_number.span_days
- input_number.offset_days
card:
type: custom:apexcharts-card
..
..
..
span:
end: day
offset: >-
${ '-' + states['input_number.offset_days'].state *
states['input_number.span_days'].state + 'd'}
graph_span: ${ states['input_number.span_days'].state +'d' }
It works more or less, but very slow and not uer-friendly.
So any tip is welcome!
thnx, Leon
good evening community, i am looking for a sticky navbar, do you have any inspiration for a mushroom navbar?
Definately interested in that too … 
Hey, I like the style. Wich card did I have to use? I´m asking because of the error I get
Custom element doesn’t exist: auto-entities.
type: custom:auto-entities
Sorryfor the question - I´m new to HA.
Greetz
Peter
Auto entities from HACS (Home Assistant Community Store). Its not a native card.
Wie hole ich mir die Sensordaten von speedtest denn rein?
Maybe a stupid question, but how can I leverage your code? Simply copy-pasting it into a card isn’t working. Also tried creating a custom javascript module out of it, but that also did not work.
Hi Frank, is there an error? Try looking at Rhys original work above and see if that works, then add changes from mine (top bar mod) if you want to make adjustments. It’s working fine on the latest build of HA.
The room card is separate and should be a copy\paste without much change. Let me know how you get on.
1 Like
It’s not going to work that way, you need to learn how to use “Button Card Templates.” I have been using HA for 4 years now, unfortunately I haven’t been able to make button card templates to work for once.
Hello Everyone,
type: horizontal-stack
cards:
- type: custom:mushroom-template-card
entity: null
layout: vertical
icon: mdi:page-last
icon_color: blue
primary: Last
tap_action:
action: navigate
navigation_path: /dashboard-main/third
- type: custom:mushroom-template-card
entity: null
layout: vertical
icon: mdi:home-floor-1
icon_color: yellow
tap_action:
action: none
- type: custom:mushroom-template-card
entity: null
layout: vertical
icon: mdi:page-next-outline
icon_color: green
primary: Next
tap_action:
action: navigate
navigation_path: /dashboard-main/second
Please guide how to vertically position the second template card to middle and remove its background color ?
Thank you
As learning someone else’s room card took too long I decided to build my own. Just do note that I am using a panel with a grid to display my dashboard, so this card might not fit your purpose fully. I included as much comments as possible to make it easier for you to tailor to your needs.
Summary
# below I will define the main card and make it square (as that fits my dashboard better)
type: custom:vertical-stack-in-card
card_mod:
style: |
ha-card {
aspect-ratio: 1 / 1;
}
cards:
# this card defines the main card and defines the grid within the card
- type: custom:layout-card
layout_type: grid
layout:
grid-template-columns: 60% 40%
grid-template-rows: 4
grid-template-areas: |
"template zone1"
"template zone2"
"spacer zone3"
"icon zone4"
# this card defines the main title and secondary text and is placed in the top left grid-area called "template"
cards:
- type: custom:mushroom-template-card
primary: Laurens
secondary: >-
🌡️ {{ states('sensor.laurens_atc_temperature') | round(1) }}°C | 💧{{
states('sensor.laurens_atc_humidity') | round(0) }} %
badge_icon: ''
view_layout:
grid-area: template
card_mod:
style: |
ha-card {
--ha-card-border-width: 0;
--chip-border-width: 0;
}
#the below cards define the icons on the left. There is room for 4 icons in total. Their placement is determined by the "grid-area"
- type: custom:mushroom-entity-card
entity: light.laurens_grote_lamp
icon_color: yellow
fill_container: false
primary_info: none
tap_action:
action: toggle
view_layout:
grid-area: zone1
card_mod:
style:
.: |
ha-card {
--ha-card-border-width: 0px;
}
- type: custom:mushroom-entity-card
entity: cover.rolluik_laurens
icon_color: blue
fill_container: false
primary_info: none
tap_action:
action: toggle
view_layout:
grid-area: zone2
card_mod:
style:
.: |
ha-card {
--ha-card-border-width: 0px;
}
- type: custom:mushroom-entity-card
entity: climate.laurens
icon_color: red
fill_container: false
primary_info: none
tap_action:
action: more-info
view_layout:
grid-area: zone3
card_mod:
style:
.: |
ha-card {
--ha-card-border-width: 0px;
}
#the below card is the icon on the bottom left. The css has been customized to fit my screen and dashboard so probably some tweaking is needed before you can leverage it yourself
- type: custom:mushroom-template-card
icon: mdi:bed
icon_color: blue
view_layout:
grid-area: icon
card_mod:
style:
mushroom-shape-icon$: |
.shape {
position: absolute !important!;
bottom: 40px !important;
left: -50px !important;
}
.: |
ha-card {
--ha-card-border-width: 0px;
}
:host {
--mush-icon-size: 120px;
--mush-chip-spacing: -2.9px
}
4 Likes