Auch das funktioniert.
Beispiel:
Dieses Dashboard mit Layout “Abschnitte” hat insgessamt 6 Abschnitte.
Oben (Close + Date Seloctor) sind auf voll Breite eingestellt (also 6 Abschnitte).
Darunter die 3 nebeneinander sind eingestellt
links+Mitte:
Layout Abschnitte 4
die Stacks im Abschnitt
links:
grid_options:
columns: 24
Mitte:
grid_options:
columns: 24
rechts:
Im Layout Abschnitt 1
Der Untere dann ist eingestellt
Layout Abschnitte 4
Hier der Gesamtcode zum basteln
title: Energie neu
path: energieP
cards: []
type: sections
max_columns: 6
sections:
- type: grid
cards:
- type: custom:button-card
entity: input_button.fake_entity
name: Close
icon: mdi:close
size: 50
show_icon: true
tap_action:
action: navigate
navigation_path: /‘[[[window.history.back()]]]’
double_tap_action:
action: none
hold_action:
action: none
styles:
grid:
- grid-template-areas: "\"i n s\""
- grid-template-columns: 95px auto auto
card:
- background: none
- border: 1px dotted
- height: 50px
- width: 300px
icon:
- color: white
vertical: false
- type: custom:gap-card
- type: energy-date-selection
card_mod:
style: |
ha-card {
background: transparent !important;
box-shadow: none;
input-fill-color: 'rgba(0, 0, 0, 1)' # transparent
}
column_span: 6
- type: grid
cards:
- type: vertical-stack
cards:
- type: horizontal-stack
cards:
- type: custom:energy-entity-card
name: Netzbezug
entity: sensor.netzbezug_energie
card_mod:
style: |
ha-card {
background: var(--color-blue);
}
- type: custom:energy-entity-card
name: Einspeisung
entity: sensor.einspeisung_energie
card_mod:
style: |
ha-card {
background: var(--color-red);
}
- type: custom:energy-entity-card
name: Verbrauch
entity: sensor.gesamtverbrauch
grid_options:
columns: 12
rows: 1
- type: energy-usage-graph
- type: energy-solar-graph
grid_options:
columns: 24
- type: vertical-stack
cards:
- type: horizontal-stack
cards:
- type: horizontal-stack
cards:
- type: vertical-stack
cards:
- type: custom:energy-entity-card
name: PV Ertrag
entity: sensor.sf_solar_gesamt
card_mod:
style: |
ha-card {
background: var(--color-orange);
}
- type: custom:energy-entity-card
name: PV Hub 1
entity: sensor.hub_1200_1_sf1_solar_input_energy
card_mod:
style: |
ha-card {
background: var(--color-orange);
}
- type: custom:energy-entity-card
name: PV Hub 2
entity: sensor.hub_1200_2_sf2_solar_input_energy
card_mod:
style: |
ha-card {
background: var(--color-orange);
}
- type: horizontal-stack
cards:
- type: vertical-stack
cards:
- type: custom:energy-entity-card
name: Batterie OUT gesamt
entity: sensor.sf_batterie_entladung
card_mod:
style: |
ha-card {
background: var(--color-green);
}
- type: custom:energy-entity-card
name: Batterie 1 OUT
entity: sensor.hub_1200_1_sf1_pack_input_energy
card_mod:
style: |
ha-card {
background: var(--color-green);
}
- type: custom:energy-entity-card
name: Batterie 2 OUT
entity: sensor.hub_1200_2_sf2_pack_input_energy
card_mod:
style: |
ha-card {
background: var(--color-green);
}
grid_options:
columns: 4
- type: horizontal-stack
cards:
- type: vertical-stack
cards:
- type: custom:energy-entity-card
name: Batterie IN gesamt
entity: sensor.sf_batterie_ladung_2
card_mod:
style: |
ha-card {
background: var(--color-red);
}
- type: custom:energy-entity-card
name: Batterie 1 IN
entity: sensor.hub_1200_1_sf1_output_pack_energy
card_mod:
style: |
ha-card {
background: var(--color-red);
}
- type: custom:energy-entity-card
name: Batterie 2 IN
entity: sensor.hub_1200_2_sf2_output_pack_energy
card_mod:
style: |
ha-card {
background: var(--color-red);
}
grid_options:
columns: 4
grid_options:
columns: 4
- type: energy-devices-detail-graph
card_mod:
style: |
ha-card {
height: 386px;
}
grid_options:
columns: 24
column_span: 4
- type: grid
cards:
- type: energy-distribution
link_dashboard: false
- type: horizontal-stack
cards:
- type: energy-solar-consumed-gauge
- type: energy-self-sufficiency-gauge
- type: energy-carbon-consumed-gauge
column_span: 1
- type: grid
cards:
- type: energy-sources-table
grid_options:
columns: 48
card_mod:
style: |
ha-card {
background-color: var(--color-blue);
}
column_span: 3
theme: Mushroom GX subsites
badges: []
dense_section_placement: false
