I’ve reworked my page for the heat pump. It now looks like this:
In this view i make use of
- mushroom-card (HACS)
- button-card (HACS)
- apex-charts-card (HACS)
- stack-in-a-card (HACS)
- grid
It contains 3 columns.
Here is the yaml-code for the first column:
square: false
columns: 1
type: grid
cards:
- type: grid
columns: 1
square: false
cards:
- type: grid
columns: 3
square: false
cards:
- type: custom:mushroom-template-card
icon: mdi:home-automation
entity: input_select.wp_altbau_betriebsart
primary: Programm
secondary: Modus
icon_color: |
{% if is_state(config.entity, 'Programmbetrieb') %}
white
{% else %}
grey
{% endif %}
tap_action:
service: modbus.write_register
service_data:
address: 1500
slave: 1
hub: ISG_Jeschke
value: 2
action: call-service
card_mod:
style: |
ha-card {
padding: 3px !important;
background-color:
{%- set sensor = states(config.entity) %}
{%- if sensor == 'Programmbetrieb' %}var(--google-blue) !important;
{%- endif %}
--icon-color:
{%- set sensor = states(config.entity) %}
{%- if sensor == 'Programmbetrieb' %}white !important;
{%- endif %}
--primary-text-color:
{%- set sensor = states(config.entity) %}
{%- if sensor == 'Programmbetrieb' %}white !important;
{%- endif %}
--secondary-text-color:
{%- set sensor = states(config.entity) %}
{%- if sensor == 'Programmbetrieb' %}lightgrey !important;
{%- endif %}
}
- type: custom:mushroom-template-card
icon: mdi:tree
entity: input_select.wp_altbau_betriebsart
primary: Eco
secondary: Modus
icon_color: |
{% if is_state(config.entity, 'Eco-Betrieb') %}
white
{% else %}
grey
{% endif %}
tap_action:
service: modbus.write_register
service_data:
address: 1500
slave: 1
hub: ISG_Jeschke
value: 4
action: call-service
card_mod:
style: |
ha-card {
padding: 3px !important;
background-color:
{%- set sensor = states(config.entity) %}
{%- if sensor == 'Eco-Betrieb' %}green !important;
{%- endif %}
--icon-color:
{%- set sensor = states(config.entity) %}
{%- if sensor == 'Eco-Betrieb' %}white !important;
{%- endif %}
--primary-text-color:
{%- set sensor = states(config.entity) %}
{%- if sensor == 'Eco-Betrieb' %}white !important;
{%- endif %}
--secondary-text-color:
{%- set sensor = states(config.entity) %}
{%- if sensor == 'Eco-Betrieb' %}lightgrey !important;
{%- endif %}
}
- type: custom:mushroom-template-card
icon: mdi:fire
entity: input_select.wp_altbau_betriebsart
primary: Komfort
secondary: Modus
icon_color: |
{% if is_state(config.entity, 'Komfortbetrieb') %}
white
{% else %}
grey
{% endif %}
tap_action:
service: modbus.write_register
service_data:
address: 1500
slave: 1
hub: ISG_Jeschke
value: 3
action: call-service
card_mod:
style: |
ha-card {
padding: 3px !important;
background-color:
{%- set sensor = states(config.entity) %}
{%- if sensor == 'Komfortbetrieb' %}red !important;
{%- endif %}
--icon-color:
{%- set sensor = states(config.entity) %}
{%- if sensor == 'Komfortbetrieb' %}white !important;
{%- endif %}
--primary-text-color:
{%- set sensor = states(config.entity) %}
{%- if sensor == 'Komfortbetrieb' %}white !important;
{%- endif %}
--secondary-text-color:
{%- set sensor = states(config.entity) %}
{%- if sensor == 'Komfortbetrieb' %}lightgrey !important;
{%- endif %}
}
- type: custom:mushroom-number-card
layout: horizontal
display_mode: buttons
card_mod:
style: |
ha-card {
padding: 3px !important;
{
entity: input_number.wp_altbau_temp_eco
- type: custom:mushroom-number-card
layout: horizontal
display_mode: buttons
card_mod:
style: |
ha-card {
padding: 3px !important;
{
entity: input_number.wp_altbau_temp_komfort
- type: custom:mushroom-number-card
layout: horizontal
display_mode: buttons
card_mod:
style: |
ha-card {
padding: 3px !important;
{
entity: input_number.wp_altbau_ww_temp_eco
- type: custom:mushroom-number-card
layout: horizontal
display_mode: buttons
card_mod:
style: |
ha-card {
padding: 3px !important;
{
entity: input_number.wp_altbau_ww_temp_komfort
- type: custom:mushroom-number-card
layout: horizontal
display_mode: buttons
card_mod:
style: |
ha-card {
padding: 3px !important;
{
entity: input_number.wp_altbau_heizkurve
- type: custom:button-card
template: ueberschrift
name: Aktuell laufende Funktionen der Wärmepumpe
- type: custom:auto-entities
show_empty: false
card:
type: custom:mushroom-chips-card
card_param: chips
filter:
exclude:
- entity_id: binary_sensor.wp_*2*
include:
- entity_id: binary_sensor.wp_altbau_betriebsstatus_*
state: 'on'
options:
type: entity
alignment: justify
tap_action:
action: more-info
content_info: name
icon_color: blue
- entity_id: binary_sensor.wp_altbau_fehler*binary
state: 'on'
options:
type: entity
alignment: justify
tap_action:
action: more-info
content_info: name
card_mod:
style: |
ha-card {
background-color: red !important;
--icon-color: white !important;
--text-color: white !important;
}
sort:
method: name
- type: custom:apexcharts-card
stacked: true
card_mod:
style: |
ha-card {
padding: 0px 0px 0px 0px;
}
#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: 125px
legend:
show: false
dataLabels:
style:
fontSize: 9px
span:
end: day
graph_span: 30d
header:
show: true
title: Stromverbrauch Wärmepumpe
show_states: true
colorize_states: true
floating: false
yaxis:
- id: first
decimals: 0
apex_config:
tickAmount: 4
forceNiceScale: true
all_series_config:
show:
in_header: true
datalabels: false
legend_value: false
type: column
stroke_width: 2
statistics:
type: sum
group_by:
func: diff
start_with_last: true
duration: 1d
series:
- entity: sensor.wp_altbau_stromverbrauch_heizen_tag
yaxis_id: first
name: Heizung
color: var(--google-red)
- entity: sensor.wp_altbau_stromverbrauch_warmwasser_tag
yaxis_id: first
name: Warmwasser
color: var(--google-blue)
- type: custom:apexcharts-card
card_mod:
style: |
ha-card {
padding: 0px 0px 0px 0px;
}
#state__value > #state {
font-size: 1.2em !important;
}
yaxis:
- id: first
min: 0
max: 40
decimals: 0
apex_config:
tickAmount: 4
forceNiceScale: true
- id: second
opposite: true
decimals: 0
min: ~0
max: ~25
apex_config:
tickAmount: 4
forceNiceScale: true
apex_config:
chart:
height: 125px
legend:
show: false
span:
end: day
graph_span: 30d
header:
show: true
title: ' '
show_states: true
colorize_states: true
series:
- entity: sensor.esp_stromzahler_jaschke_total
yaxis_id: first
float_precision: 0
show:
in_header: true
datalabels: false
legend_value: false
type: column
name: Gesamt
color: var(--google-grey)
group_by:
func: diff
duration: 1d
start_with_last: true
- entity: >-
sensor.wp_altbau_stromverbrauch_heizen_und_warmwasser_gesamt_utility_meter
yaxis_id: first
float_precision: 0
show:
in_header: true
datalabels: false
legend_value: false
type: column
name: davon Wärmepumpe
color: var(--google-red)
group_by:
func: diff
duration: 1d
start_with_last: true
- entity: sensor.wp_altbau_ist_temp_aussen
yaxis_id: second
float_precision: 0
show:
in_header: true
datalabels: false
legend_value: false
type: area
name: min. Temp.
color: var(--google-blue)
opacity: 0.2
stroke_width: 2
group_by:
func: min
duration: 1d
- entity: sensor.wp_altbau_ist_temp_aussen
yaxis_id: second
float_precision: 0
show:
in_header: true
datalabels: false
legend_value: false
type: area
opacity: 0.2
stroke_width: 2
name: max. Temp.
color: var(--google-blue)
group_by:
func: max
duration: 1d
And for the second column:
square: false
columns: 1
type: grid
cards:
- type: custom:button-card
template: ueberschrift
name: Heizung
- type: custom:apexcharts-card
card_mod:
style: |
ha-card {
padding: 0px 0px 0px 0px;
}
#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
legend:
show: false
span:
end: minute
graph_span: 30d
header:
show: true
title: ' '
show_states: true
colorize_states: true
all_series_config:
statistics:
type: mean
period: hour
show:
in_header: true
opacity: 0.2
type: area
stroke_width: 2
series:
- entity: sensor.altbau_erdgeschoss_temperatur
name: Erdgeschoss
color: var(--google-red)
- entity: sensor.wp_altbau_ist_temp_aussen
name: Draußen
color: grey
- type: custom:apexcharts-card
card_mod:
style: |
ha-card {
padding: 0px 0px 0px 0px;
}
#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: 125px
legend:
show: false
dataLabels:
style:
fontSize: 9px
span:
end: day
graph_span: 30d
header:
show: true
title: Stromverbrauch Heizen
show_states: true
colorize_states: true
floating: false
yaxis:
- id: first
decimals: 0
apex_config:
tickAmount: 4
forceNiceScale: true
all_series_config:
show:
in_header: true
datalabels: false
legend_value: false
type: column
stroke_width: 2
statistics:
type: sum
group_by:
func: diff
start_with_last: true
duration: 1d
series:
- entity: sensor.wp_altbau_stromverbrauch_heizen_tag
yaxis_id: first
name: Heizung
color: var(--google-red)
- type: custom:apexcharts-card
card_mod:
style: |
ha-card {
padding: 0px 0px 0px 0px;
}
#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: 125px
legend:
show: false
dataLabels:
style:
fontSize: 9px
span:
end: day
graph_span: 30d
header:
show: true
title: Wärmemenge je kWh Strom
show_states: true
colorize_states: true
floating: false
yaxis:
- id: first
decimals: 0
min: 0
max: ~3
apex_config:
tickAmount: 4
forceNiceScale: true
all_series_config:
show:
in_header: false
datalabels: false
legend_value: false
type: column
stroke_width: 2
group_by:
func: avg
start_with_last: true
duration: 1d
series:
- entity: sensor.wp_altbau_scop_heizen_tag
yaxis_id: first
name: Heizung
color: var(--google-red)
- square: false
columns: 3
type: grid
cards:
- type: custom:button-card
template: ueberschrift
name: Stromverbrauch
- type: custom:button-card
template: ueberschrift
name: Wärmemenge
- type: custom:button-card
template: ueberschrift
name: Verhältnis
- type: custom:mushroom-template-card
entity: sensor.wp_altbau_stromverbrauch_heizen_tag
primary: >-
{{states(config.entity) | round(0) }}
{{state_attr(config.entity,"unit_of_measurement") }}
secondary: '{{ state_attr(config.entity,"friendly_name") }}'
icon: mdi:lightning-bolt
icon_color: blue
style: |
ha-card {
padding: 3px !important;
}
tap_action:
action: more-info
- type: custom:mushroom-template-card
entity: sensor.wp_altbau_waermemenge_heizen_tag
primary: >-
{{states(config.entity) | round(0) }}
{{state_attr(config.entity,"unit_of_measurement") }}
secondary: '{{ state_attr(config.entity,"friendly_name") }}'
icon: mdi:fire
icon_color: blue
style: |
ha-card {
padding: 3px !important;
}
tap_action:
action: more-info
- type: custom:mushroom-template-card
entity: sensor.wp_altbau_scop_heizen_tag
primary: 1 / {{states(config.entity) | round(2) }}
secondary: '{{ state_attr(config.entity,"friendly_name") }}'
icon: mdi:ab-testing
icon_color: blue
style: |
ha-card {
padding: 3px !important;
}
tap_action:
action: more-info
- type: custom:mushroom-template-card
entity: sensor.wp_altbau_stromverbrauch_heizen_gesamt
primary: >-
{{states(config.entity) | round(0) }}
{{state_attr(config.entity,"unit_of_measurement") }}
secondary: '{{ state_attr(config.entity,"friendly_name") }}'
icon: mdi:lightning-bolt
icon_color: blue
style: |
ha-card {
padding: 3px !important;
}
tap_action:
action: more-info
- type: custom:mushroom-template-card
entity: sensor.wp_altbau_waermemenge_heizen_gesamt
primary: >-
{{states(config.entity) | round(0) }}
{{state_attr(config.entity,"unit_of_measurement") }}
secondary: '{{ state_attr(config.entity,"friendly_name") }}'
icon: mdi:fire
icon_color: blue
style: |
ha-card {
padding: 3px !important;
}
tap_action:
action: more-info
- type: custom:mushroom-template-card
entity: sensor.wp_altbau_scop_heizen_gesamt
primary: 1 / {{states(config.entity) | round(2) }}
secondary: '{{ state_attr(config.entity,"friendly_name") }}'
icon: mdi:ab-testing
icon_color: blue
style: |
ha-card {
padding: 3px !important;
}
tap_action:
action: more-info
- type: custom:mushroom-template-card
entity: sensor.wp_altbau_stromverbrauch_heizen_je_tag
primary: >-
{{states(config.entity) | round(0) }}
{{state_attr(config.entity,"unit_of_measurement") }}
secondary: '{{ state_attr(config.entity,"friendly_name") }}'
icon: mdi:lightning-bolt
icon_color: blue
style: |
ha-card {
padding: 3px !important;
}
tap_action:
action: more-info
- type: custom:mushroom-template-card
entity: sensor.wp_altbau_waermemenge_heizen_je_tag
primary: >-
{{states(config.entity) | round(0) }}
{{state_attr(config.entity,"unit_of_measurement") }}
secondary: '{{ state_attr(config.entity,"friendly_name") }}'
icon: mdi:fire
icon_color: blue
style: |
ha-card {
padding: 3px !important;
}
tap_action:
action: more-info
- type: custom:mushroom-template-card
entity: sensor.wp_altbau_scop_heizen_je_tag
primary: 1 / {{states(config.entity) | round(2) }}
secondary: '{{ state_attr(config.entity,"friendly_name") }}'
icon: mdi:ab-testing
icon_color: blue
style: |
ha-card {
padding: 3px !important;
}
tap_action:
action: more-info
- type: custom:apexcharts-card
card_mod:
style: |
ha-card {
padding: 0px 0px 0px 0px;
}
#state__value > #state {
font-size: 1.2em !important;
}
apex_config:
chart:
height: 150px
legend:
show: false
span:
end: minute
graph_span: 30d
header:
show: true
title: Wärmepumpe - Vor- und Rücklauf
show_states: true
colorize_states: true
floating: false
all_series_config:
show:
in_header: true
type: area
stroke_width: 2
opacity: 0.2
statistics:
type: mean
period: hour
series:
- entity: sensor.wp_altbau_ist_temp_heizkreis1
name: Vorlauf
color: var(--google-red)
- entity: sensor.wp_altbau_ruecklauf_ist_temp
name: Rücklauf
color: var(--google-blue)
- entity: sensor.wp_altbau_ist_temp_aussen
name: Außen
color: grey
…and for the third one:
square: false
columns: 1
type: grid
cards:
- type: custom:button-card
template: ueberschrift
name: Warmwasser
- type: custom:apexcharts-card
card_mod:
style: |
ha-card {
padding: 0px 0px 0px 0px;
}
#state__value > #state {
font-size: 1.2em !important;
}
apex_config:
chart:
height: 150px
legend:
show: false
tooltip:
enabled: true
shared: true
span:
end: minute
graph_span: 30d
header:
show: true
title: ''
show_states: true
colorize_states: true
floating: false
series:
- entity: sensor.wp_altbau_ist_temp_warmwasser
show:
in_header: true
type: area
opacity: 0.2
stroke_width: 2
name: Ist
color: var(--google-blue)
statistics:
type: mean
period: 5minute
- entity: sensor.wp_altbau_soll_temp_warmwasser
show:
in_header: true
type: area
opacity: 0.2
stroke_width: 2
name: Soll
color: var(--google-grey)
statistics:
type: mean
period: 5minute
- type: custom:apexcharts-card
card_mod:
style: |
ha-card {
padding: 0px 0px 0px 0px;
}
#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: 125px
legend:
show: false
dataLabels:
style:
fontSize: 9px
span:
end: day
graph_span: 30d
header:
show: true
title: Stromverbrauch Warmwasser
show_states: true
colorize_states: true
floating: false
yaxis:
- id: first
decimals: 0
apex_config:
tickAmount: 4
forceNiceScale: true
all_series_config:
show:
in_header: true
datalabels: false
legend_value: false
type: column
stroke_width: 2
statistics:
type: sum
group_by:
func: diff
start_with_last: true
duration: 1d
series:
- entity: sensor.wp_altbau_stromverbrauch_warmwasser_tag
yaxis_id: first
name: Warmwasser
color: var(--google-blue)
- type: custom:apexcharts-card
card_mod:
style: |
ha-card {
padding: 0px 0px 0px 0px;
}
#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: 125px
legend:
show: false
dataLabels:
style:
fontSize: 9px
span:
end: day
graph_span: 30d
header:
show: true
title: Wärmemenge je kWh Strom
show_states: true
colorize_states: true
floating: false
yaxis:
- id: first
decimals: 0
min: 0
max: ~3
apex_config:
tickAmount: 4
forceNiceScale: true
all_series_config:
show:
in_header: false
datalabels: false
legend_value: false
type: column
stroke_width: 2
group_by:
func: avg
start_with_last: true
duration: 1d
series:
- entity: sensor.wp_altbau_scop_warmwasser_tag
yaxis_id: first
name: Heizung
color: var(--google-blue)
- square: false
columns: 3
type: grid
cards:
- type: custom:button-card
template: ueberschrift
name: Stromverbrauch
- type: custom:button-card
template: ueberschrift
name: Wärmemenge
- type: custom:button-card
template: ueberschrift
name: Verhältnis
- type: custom:mushroom-template-card
entity: sensor.wp_altbau_stromverbrauch_warmwasser_tag
primary: >-
{{states(config.entity) | round(0) }}
{{state_attr(config.entity,"unit_of_measurement") }}
secondary: '{{ state_attr(config.entity,"friendly_name") }}'
icon: mdi:lightning-bolt
icon_color: blue
style: |
ha-card {
padding: 3px !important;
}
tap_action:
action: more-info
- type: custom:mushroom-template-card
entity: sensor.wp_altbau_waermemenge_warmwasser_tag
primary: >-
{{states(config.entity) | round(0) }}
{{state_attr(config.entity,"unit_of_measurement") }}
secondary: '{{ state_attr(config.entity,"friendly_name") }}'
icon: mdi:fire
icon_color: blue
style: |
ha-card {
padding: 3px !important;
}
tap_action:
action: more-info
- type: custom:mushroom-template-card
entity: sensor.wp_altbau_scop_warmwasser_tag
primary: 1 / {{states(config.entity) | round(2) }}
secondary: '{{ state_attr(config.entity,"friendly_name") }}'
icon: mdi:ab-testing
icon_color: blue
style: |
ha-card {
padding: 3px !important;
}
tap_action:
action: more-info
- type: custom:mushroom-template-card
entity: sensor.wp_altbau_stromverbrauch_warmwasser_gesamt
primary: >-
{{states(config.entity) | round(0) }}
{{state_attr(config.entity,"unit_of_measurement") }}
secondary: '{{ state_attr(config.entity,"friendly_name") }}'
icon: mdi:lightning-bolt
icon_color: blue
style: |
ha-card {
padding: 3px !important;
}
tap_action:
action: more-info
- type: custom:mushroom-template-card
entity: sensor.wp_altbau_waermemenge_warmwasser_gesamt
primary: >-
{{states(config.entity) | round(0) }}
{{state_attr(config.entity,"unit_of_measurement") }}
secondary: '{{ state_attr(config.entity,"friendly_name") }}'
icon: mdi:fire
icon_color: blue
style: |
ha-card {
padding: 3px !important;
}
tap_action:
action: more-info
- type: custom:mushroom-template-card
entity: sensor.wp_altbau_scop_warmwasser_gesamt
primary: 1 / {{states(config.entity) | round(2) }}
secondary: '{{ state_attr(config.entity,"friendly_name") }}'
icon: mdi:ab-testing
icon_color: blue
style: |
ha-card {
padding: 3px !important;
}
tap_action:
action: more-info
- type: custom:mushroom-template-card
entity: sensor.wp_altbau_stromverbrauch_warmwasser_je_tag
primary: >-
{{states(config.entity) | round(0) }}
{{state_attr(config.entity,"unit_of_measurement") }}
secondary: '{{ state_attr(config.entity,"friendly_name") }}'
icon: mdi:lightning-bolt
icon_color: blue
style: |
ha-card {
padding: 3px !important;
}
tap_action:
action: more-info
- type: custom:mushroom-template-card
entity: sensor.wp_altbau_waermemenge_warmwasser_je_tag
primary: >-
{{states(config.entity) | round(0) }}
{{state_attr(config.entity,"unit_of_measurement") }}
secondary: '{{ state_attr(config.entity,"friendly_name") }}'
icon: mdi:fire
icon_color: blue
style: |
ha-card {
padding: 3px !important;
}
tap_action:
action: more-info
- type: custom:mushroom-template-card
entity: sensor.wp_altbau_scop_warmwasser_je_tag
primary: 1 / {{states(config.entity) | round(2) }}
secondary: '{{ state_attr(config.entity,"friendly_name") }}'
icon: mdi:ab-testing
icon_color: blue
style: |
ha-card {
padding: 3px !important;
}
tap_action:
action: more-info