6.2 KiB
🎯 Dashboard-Überarbeitung mit SECTIONS-Layout
📦 Neue Sections-Layout Dashboards!
Ich habe die Dashboards mit dem modernen Home Assistant Sections-Layout neu erstellt!
✨ Die neuen Sections-Dashboards
| Datei | Größe | Sections | Beste für |
|---|---|---|---|
| battery_optimizer_sections_standard.yaml | 13 KB | 10 | Desktop, alle Details |
| battery_optimizer_sections_compact.yaml | 11 KB | 7 | Tablet, ausgewogen ⭐ |
| battery_optimizer_sections_minimal.yaml | 6 KB | 7 | Smartphone, Quick |
🆕 Was ist neu mit Sections?
Vorteile des Sections-Layouts:
✅ Moderne Struktur - Neue HA-Standard seit 2024.x
✅ Bessere Organisation - Logische Gruppierung in Sections
✅ Responsive Design - Automatische Anpassung an Bildschirmgröße
✅ max_columns - Direkte Steuerung der Spaltenanzahl (3-4)
✅ Klare Überschriften - Heading-Cards für jede Section
✅ Flexibles Grid - Einfachere Anordnung der Cards
Sections-Layout vs. altes Layout:
# ALT (klassisches Layout):
- type: horizontal-stack
cards:
- card1
- card2
# NEU (Sections-Layout):
type: sections
max_columns: 4
sections:
- type: grid
cards:
- type: heading
heading: Meine Section
- card1
- card2
📊 Section-Übersicht
STANDARD-Version (10 Sections):
- Energie-Übersicht - Power Flow Card
- Steuerung - Toggles & Parameter
- Ladeplan-Status - Plan-Info
- Strompreis & Ladeplan - Graph
- Batterie SOC & Leistung - Graph
- Energie-Flüsse - PV/Netz/Batterie Graph
- Plan-Statistiken - Bubble Cards
- Stunden-Details - Tabelle
- Alle Einstellungen - Parameter
- System-Status - Infos
KOMPAKT-Version (7 Sections):
- Status & Steuerung - Power Flow + Toggles
- Ladeplanung - Plan-Status
- Strompreis-Visualisierung - Graph
- Batterie-Übersicht - Graph
- Detaillierter Plan - Statistiken + Tabelle
- Einstellungen - Parameter
- System - Status
MINIMAL-Version (7 Sections):
- Quick Status - 3 Bubble Buttons
- Steuerung - Toggles
- Energie-Fluss - Power Flow
- Geplante Ladungen - Liste
- Preis-Trend - Graph
- SOC-Trend - Graph
- Schnelleinstellungen - Conditional
🚀 Installation
Methode 1: Via UI (Empfohlen für Sections)
- Home Assistant öffnen
- Einstellungen → Dashboards
- "+ Dashboard hinzufügen" klicken
- "Mit Sections erstellen" wählen ⭐
- Name:
Batterie Optimierung - Icon:
mdi:battery-charging - "Erstellen" klicken
- ⋮ (3 Punkte) → "Rohe Konfiguration bearbeiten"
- Alles löschen und YAML-Inhalt einfügen
- "Speichern" klicken
Methode 2: Via Datei
# In dashboards.yaml oder configuration.yaml:
lovelace:
dashboards:
battery-optimizer:
mode: yaml
filename: dashboards/battery_optimizer_sections_compact.yaml
title: Batterie
icon: mdi:battery-charging
show_in_sidebar: true
💡 Meine Empfehlung
Starte mit der KOMPAKT-Version:
✅ Datei: battery_optimizer_sections_compact.yaml
✅ Spalten: max_columns: 4
✅ Sections: 7 übersichtliche Bereiche
✅ Perfekt für: Desktop + Tablet
Diese Version bietet die beste Balance zwischen Detail und Übersichtlichkeit!
🎨 Anpassungen
Spaltenanzahl ändern:
type: sections
max_columns: 3 # Statt 4 für kompaktere Ansicht
Neue Section hinzufügen:
sections:
- type: grid
cards:
- type: heading
heading: Meine neue Section
icon: mdi:star
- type: markdown
content: "Mein Inhalt"
Section-Reihenfolge ändern:
Einfach die Section-Blöcke verschieben - die Reihenfolge im YAML bestimmt die Anzeige!
🔧 Besonderheiten
Heading Cards:
Jede Section beginnt mit einer Heading-Card:
- type: heading
heading: Mein Titel
icon: mdi:icon-name
Grid-Layout:
Cards innerhalb einer Section werden automatisch im Grid angeordnet:
- type: grid
cards:
- card1 # Wird automatisch optimal angeordnet
- card2
- card3
Responsive:
Sections passen sich automatisch an:
- Desktop: 4 Spalten nebeneinander
- Tablet: 2-3 Spalten
- Smartphone: 1 Spalte
⚠️ Wichtig
Kompatibilität:
- Home Assistant 2024.2+ erforderlich für Sections-Layout
- Alle Custom Cards funktionieren genauso wie im alten Layout
- Keine zusätzlichen Installationen nötig
Entity-IDs:
Wie bei den alten Dashboards musst du die Entity-IDs anpassen:
# Prüfe in: Entwicklerwerkzeuge → Zustände
sensor.openems_ess0_activepower
sensor.esssoc
sensor.hastrom_flex_extended_current_price
# ... etc.
📱 Geräte-Matrix
| Gerät | Standard | Kompakt | Minimal |
|---|---|---|---|
| Desktop (4K) | ⭐⭐⭐⭐⭐ | ⭐⭐⭐⭐ | ⭐⭐⭐ |
| Desktop (FHD) | ⭐⭐⭐⭐ | ⭐⭐⭐⭐⭐ | ⭐⭐⭐⭐ |
| Laptop | ⭐⭐⭐ | ⭐⭐⭐⭐⭐ | ⭐⭐⭐⭐ |
| Tablet | ⭐⭐ | ⭐⭐⭐⭐⭐ | ⭐⭐⭐⭐⭐ |
| Smartphone | ⭐ | ⭐⭐⭐ | ⭐⭐⭐⭐⭐ |
| Wall Panel | ⭐⭐⭐ | ⭐⭐⭐⭐⭐ | ⭐⭐⭐⭐⭐ |
🎯 Nächste Schritte
- ✅ Dashboard wählen - Kompakt empfohlen
- ✅ Via UI installieren - Mit Sections-Layout
- ✅ Entity-IDs anpassen - Developer Tools nutzen
- ✅ Testen - Auf verschiedenen Geräten
- ✅ Anpassen - Nach deinen Wünschen
Danach können wir:
- 📊 Plan-Historie implementieren
- 📈 InfluxDB-Integration erweitern
- 🔔 Notifications einrichten
🆚 Sections vs. Klassisch
Beide Versionen sind verfügbar:
Sections-Layout (NEU):
battery_optimizer_sections_standard.yamlbattery_optimizer_sections_compact.yamlbattery_optimizer_sections_minimal.yaml
Klassisches Layout (ALT):
battery_optimizer_dashboard.yamlbattery_optimizer_dashboard_compact.yamlbattery_optimizer_dashboard_minimal.yaml
Empfehlung: Nutze die Sections-Version - sie ist moderner und zukunftssicher! 🚀
Erstellt: 16. November 2025
Layout: Home Assistant Sections (2024.x)
Version: 2.0 - Sections Edition