SandDeath
December 15, 2023, 10:46am
292
I would also like to share my experience for the Smartmi Humidifier
Card code
type: custom:stack-in-card
mode: vertical
cards:
- type: custom:layout-card
layout_type: custom:grid-layout
cards:
- type: tile
entity: humidifier.moika_vozduha_gostinaya
name: Humidifier
state_content:
- state
- humidity
features:
- type: target-humidity
view_layout:
grid-area: humidifier
card_mod:
style: |
ha-card {
border-style: none;
box-shadow: 0px 0px;
}
- type: custom:mushroom-template-card
primary: '{{ states(entity)|int }}%'
secondary: Water level
icon: |-
{% if states(entity)|int == 0 %}
mdi:hexagon-outline
{% elif states(entity)|int <= 20 %}
mdi:hexagon-slice-1
{% elif states(entity)|int <= 40 %}
mdi:hexagon-slice-2
{% elif states(entity)|int <= 60 %}
mdi:hexagon-slice-3
{% elif states(entity)|int <= 80 %}
mdi:hexagon-slice-4
{% elif states(entity)|int <= 100 %}
mdi:hexagon-slice-5
{% elif states(entity)|int == 100 %}
mdi:hexagon-slice-6
{% else %}
mdi:progress-question
{% endif %}
entity: sensor.uvlazhnitel_water_level
layout: vertical
icon_color: |-
{% if states(entity)|int == 0 %}
red
{% elif states(entity)|int <= 20 %}
deep-orange
{% elif states(entity)|int <= 40 %}
orange
{% elif states(entity)|int <= 60 %}
amber
{% elif states(entity)|int <= 80 %}
light-green
{% elif states(entity)|int <= 100 %}
green
{% elif states(entity)|int == 100 %}
blue
{% else %}
grey
{% endif %}
card_mod:
style: |
ha-card {
border-style: none;
box-shadow: 0px 0px;
}
view_layout:
grid-area: water_level
- type: custom:mushroom-chips-card
alignment: end
chips:
- type: template
icon: >-
{{ iif(states(entity) == 'on', 'mdi:volume-high',
'mdi:volume-variant-off') }}
icon_color: '{{ iif(states(entity) == ''on'', ''light-green'', ''gray'') }}'
tap_action:
action: toggle
entity: switch.uvlazhnitel_child_lock
card_mod:
style: |
ha-card {
border-style: none;
box-shadow: 0px 0px;
}
- type: template
icon: '{{ iif(states(entity) == ''on'', ''mdi:lock'', ''mdi:lock-open'') }}'
icon_color: '{{ iif(states(entity) == ''on'', ''light-green'', ''gray'') }}'
tap_action:
action: toggle
entity: switch.uvlazhnitel_buzzer
card_mod:
style: |
ha-card {
border-style: none;
box-shadow: 0px 0px;
}
view_layout:
grid-area: chips_button
- type: custom:mushroom-chips-card
chips:
- type: template
icon: mdi:numeric-1-box
icon_color: >-
{% set current_mode =
state_attr('humidifier.moika_vozduha_gostinaya', 'mode') %}
{{ iif(current_mode == 'Silent', 'light-green', '') }}
tap_action:
action: call-service
service: humidifier.set_mode
target:
entity_id: humidifier.moika_vozduha_gostinaya
data:
mode: Silent
card_mod:
style: |
ha-card {
border-style: none;
box-shadow: 0px 0px;
}
- type: template
icon: mdi:numeric-2-box
icon_color: >-
{% set current_mode =
state_attr('humidifier.moika_vozduha_gostinaya', 'mode') %}
{{ iif(current_mode == 'Medium', 'light-green', '') }}
tap_action:
action: call-service
service: humidifier.set_mode
target:
entity_id: humidifier.moika_vozduha_gostinaya
data:
mode: Medium
card_mod:
style: |
ha-card {
border-style: none;
box-shadow: 0px 0px;
}
- type: template
icon: mdi:numeric-3-box
icon_color: >-
{% set current_mode =
state_attr('humidifier.moika_vozduha_gostinaya', 'mode') %}
{{ iif(current_mode == 'High', 'light-green', '') }}
tap_action:
action: call-service
service: humidifier.set_mode
target:
entity_id: humidifier.moika_vozduha_gostinaya
data:
mode: High
card_mod:
style: |
ha-card {
border-style: none;
box-shadow: 0px 0px;
}
- type: template
icon: mdi:alpha-a-box
icon_color: >-
{% set current_mode =
state_attr('humidifier.moika_vozduha_gostinaya', 'mode') %}
{{ iif(current_mode == 'Auto', 'light-green', '') }}
tap_action:
action: call-service
service: humidifier.set_mode
target:
entity_id: humidifier.moika_vozduha_gostinaya
data:
mode: Auto
card_mod:
style: |
ha-card {
border-style: none;
box-shadow: 0px 0px;
}
view_layout:
grid-area: chips_state
layout:
grid-template-columns: 70% 30%
grid-template-rows: auto
grid-template-areas: |
"humidifier water_level"
"chips_state chips_button"
Required resources
card_mod
7 Likes
Question. I created a graph card with ApexChart in combination with the tabbed card. The tabs are on the top and i want them at the bottom Like this
it look like this right now
Maybe somebody now some options?
4 Likes
only Tabbed card developer can help you in this case
nice cards & can you share code pleas ?
type: custom:tabbed-card
styles:
'--mdc-theme-primary': '#00A964'
'--mdc-tab-text-label-color-default': black
'--mdc-typography-button-font-size': 10px
'--mdc-tab-stacked-height': 10px
'--mdc-tab-height': 50px
tabs:
- card:
type: custom:apexcharts-card
apex_config:
chart:
stacked: true
height: 250px
header:
show: false
show_states: true
colorize_states: true
now:
show: true
label: nu
color: red
series:
- entity: sensor.electricity_meter_energy_consumption_tarif_1
type: column
color: '#00A964'
name: Tarief 1
group_by:
duration: 1h
func: delta
- entity: sensor.electricity_meter_energy_consumption_tarif_2
type: column
color: '#00A964'
name: Tarief 2
group_by:
duration: 1h
func: delta
- entity: sensor.solis_energy_today
type: column
color: '#FF9900'
name: Zonnepanelen
group_by:
duration: 1h
func: delta
graph_span: 24h
span:
start: day
attributes:
label: Vandaag
- card:
type: custom:apexcharts-card
apex_config:
chart:
stacked: true
height: 250px
header:
show: false
show_states: true
colorize_states: true
now:
show: true
label: nu
color: red
series:
- entity: sensor.electricity_meter_energy_consumption_tarif_1
type: column
color: '#00A964'
name: Tarief 1
group_by:
duration: 1d
func: delta
- entity: sensor.electricity_meter_energy_consumption_tarif_2
type: column
color: '#00A964'
name: Tarief 2
group_by:
duration: 1d
func: delta
- entity: sensor.solis_energy_today
type: column
color: '#FF9900'
name: Zonnepanelen
group_by:
duration: 1d
func: delta
graph_span: 7d
span:
start: week
attributes:
label: Week
- card:
type: custom:apexcharts-card
apex_config:
chart:
stacked: true
height: 250px
header:
show: false
show_states: true
colorize_states: true
now:
show: true
label: nu
color: red
series:
- entity: sensor.electricity_meter_energy_consumption_tarif_1
type: column
color: '#00A964'
name: Tarief 1
group_by:
duration: 7d
func: delta
- entity: sensor.electricity_meter_energy_consumption_tarif_2
type: column
color: '#00A964'
name: Tarief 2
group_by:
duration: 7d
func: delta
- entity: sensor.solis_energy_today
type: column
color: '#FF9900'
name: Zonnepanelen
group_by:
duration: 7d
func: delta
graph_span: 30d
span:
start: month
attributes:
label: Maand
- card:
type: custom:apexcharts-card
apex_config:
chart:
stacked: true
height: 250px
header:
show: false
show_states: true
colorize_states: true
now:
show: true
label: nu
color: red
series:
- entity: sensor.electricity_meter_energy_consumption_tarif_1
type: column
color: '#00A964'
name: Tarief 1
statistics:
type: state
period: day
group_by:
duration: 1month
func: delta
- entity: sensor.electricity_meter_energy_consumption_tarif_2
type: column
color: '#00A964'
name: Tarief 2
statistics:
type: state
period: day
group_by:
duration: 1month
func: delta
graph_span: 1y
span:
end: year
attributes:
label: Jaar
4 Likes
There is a mod for this, check the link above.
2 Likes
mhoogenbosch
December 27, 2023, 9:43am
299
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?
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
SandDeath
January 7, 2024, 11:08am
301
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
4 Likes
Looks good. I did the same during the holidays
Here´s my take:
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
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
16 Likes
kippesik
January 9, 2024, 9:48am
303
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!
10 Likes
Johanvh
January 13, 2024, 5:38pm
304
Hi Mike,group.master_bedroom contains?
MRobi
January 21, 2024, 12:48am
305
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?
tvds
February 2, 2024, 11:04pm
308
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.
Sorryfor the question - I´m new to HA.
Greetz
Auto entities from HACS (Home Assistant Community Store). Its not a native card.
Wie hole ich mir die Sensordaten von speedtest denn rein?
