259 lines
6.2 KiB
Markdown
259 lines
6.2 KiB
Markdown
# 🎯 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:
|
|
|
|
```yaml
|
|
# 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):
|
|
1. **Energie-Übersicht** - Power Flow Card
|
|
2. **Steuerung** - Toggles & Parameter
|
|
3. **Ladeplan-Status** - Plan-Info
|
|
4. **Strompreis & Ladeplan** - Graph
|
|
5. **Batterie SOC & Leistung** - Graph
|
|
6. **Energie-Flüsse** - PV/Netz/Batterie Graph
|
|
7. **Plan-Statistiken** - Bubble Cards
|
|
8. **Stunden-Details** - Tabelle
|
|
9. **Alle Einstellungen** - Parameter
|
|
10. **System-Status** - Infos
|
|
|
|
### KOMPAKT-Version (7 Sections):
|
|
1. **Status & Steuerung** - Power Flow + Toggles
|
|
2. **Ladeplanung** - Plan-Status
|
|
3. **Strompreis-Visualisierung** - Graph
|
|
4. **Batterie-Übersicht** - Graph
|
|
5. **Detaillierter Plan** - Statistiken + Tabelle
|
|
6. **Einstellungen** - Parameter
|
|
7. **System** - Status
|
|
|
|
### MINIMAL-Version (7 Sections):
|
|
1. **Quick Status** - 3 Bubble Buttons
|
|
2. **Steuerung** - Toggles
|
|
3. **Energie-Fluss** - Power Flow
|
|
4. **Geplante Ladungen** - Liste
|
|
5. **Preis-Trend** - Graph
|
|
6. **SOC-Trend** - Graph
|
|
7. **Schnelleinstellungen** - Conditional
|
|
|
|
---
|
|
|
|
## 🚀 Installation
|
|
|
|
### Methode 1: Via UI (Empfohlen für Sections)
|
|
|
|
1. **Home Assistant öffnen**
|
|
2. **Einstellungen** → **Dashboards**
|
|
3. **"+ Dashboard hinzufügen"** klicken
|
|
4. **"Mit Sections erstellen"** wählen ⭐
|
|
5. Name: `Batterie Optimierung`
|
|
6. Icon: `mdi:battery-charging`
|
|
7. **"Erstellen"** klicken
|
|
8. **⋮** (3 Punkte) → **"Rohe Konfiguration bearbeiten"**
|
|
9. Alles löschen und YAML-Inhalt einfügen
|
|
10. **"Speichern"** klicken
|
|
|
|
### Methode 2: Via Datei
|
|
|
|
```yaml
|
|
# 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:
|
|
|
|
```yaml
|
|
type: sections
|
|
max_columns: 3 # Statt 4 für kompaktere Ansicht
|
|
```
|
|
|
|
### Neue Section hinzufügen:
|
|
|
|
```yaml
|
|
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:
|
|
```yaml
|
|
- type: heading
|
|
heading: Mein Titel
|
|
icon: mdi:icon-name
|
|
```
|
|
|
|
### Grid-Layout:
|
|
|
|
Cards innerhalb einer Section werden automatisch im Grid angeordnet:
|
|
```yaml
|
|
- 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:
|
|
|
|
```yaml
|
|
# 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
|
|
|
|
1. ✅ **Dashboard wählen** - Kompakt empfohlen
|
|
2. ✅ **Via UI installieren** - Mit Sections-Layout
|
|
3. ✅ **Entity-IDs anpassen** - Developer Tools nutzen
|
|
4. ✅ **Testen** - Auf verschiedenen Geräten
|
|
5. ✅ **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.yaml`
|
|
- `battery_optimizer_sections_compact.yaml`
|
|
- `battery_optimizer_sections_minimal.yaml`
|
|
|
|
### Klassisches Layout (ALT):
|
|
- `battery_optimizer_dashboard.yaml`
|
|
- `battery_optimizer_dashboard_compact.yaml`
|
|
- `battery_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
|