251 lines
5.5 KiB
Markdown
251 lines
5.5 KiB
Markdown
# 🎯 Dashboard mit SECTIONS-Layout (AKTUELL!)
|
||
|
||
## ⚡ Das solltest du wissen
|
||
|
||
Ich habe **3 neue Dashboards** mit dem **modernen Sections-Layout** erstellt!
|
||
|
||
### 🆕 Sections-Layout (EMPFOHLEN)
|
||
|
||
Das neue Layout ist seit Home Assistant 2024.x der Standard und bietet:
|
||
|
||
✅ Bessere Organisation durch Section-Überschriften
|
||
✅ Automatisches responsive Grid-System
|
||
✅ Einfachere Anpassung und Wartung
|
||
✅ Moderne Struktur mit `max_columns`
|
||
✅ Zukunftssicher und von HA unterstützt
|
||
|
||
---
|
||
|
||
## 📦 Verfügbare Dashboards
|
||
|
||
### 🆕 **SECTIONS-LAYOUT** (2024.x) - NUTZE DIESE!
|
||
|
||
| Datei | Sections | Beste für |
|
||
|-------|----------|-----------|
|
||
| `battery_optimizer_sections_compact.yaml` ⭐ | 7 | Tablet/Desktop |
|
||
| `battery_optimizer_sections_minimal.yaml` | 7 | Smartphone |
|
||
| `battery_optimizer_sections_standard.yaml` | 10 | Desktop Detail |
|
||
|
||
### 📜 Klassisches Layout (Fallback)
|
||
|
||
Falls dein Home Assistant älter als 2024.2 ist:
|
||
- `battery_optimizer_dashboard_compact.yaml`
|
||
- `battery_optimizer_dashboard_minimal.yaml`
|
||
- `battery_optimizer_dashboard.yaml`
|
||
|
||
---
|
||
|
||
## 🚀 Quick-Start (3 Minuten)
|
||
|
||
### Schritt 1: Dashboard erstellen
|
||
|
||
1. Home Assistant → **Einstellungen** → **Dashboards**
|
||
2. **"+ Dashboard hinzufügen"**
|
||
3. **"Mit Sections erstellen"** ⭐ (Wichtig!)
|
||
4. Name: `Batterie Optimierung`
|
||
5. Icon: `mdi:battery-charging`
|
||
6. **"Erstellen"**
|
||
|
||
### Schritt 2: Code einfügen
|
||
|
||
1. **⋮** (3 Punkte oben rechts) → **"Rohe Konfiguration bearbeiten"**
|
||
2. Alles löschen
|
||
3. Kopiere Inhalt von `battery_optimizer_sections_compact.yaml`
|
||
4. Einfügen
|
||
5. **"Speichern"**
|
||
|
||
### Schritt 3: Entity-IDs anpassen
|
||
|
||
Prüfe in **Entwicklerwerkzeuge** → **Zustände** ob diese Entities existieren:
|
||
|
||
```yaml
|
||
sensor.openems_ess0_activepower
|
||
sensor.esssoc
|
||
sensor.openems_grid_activepower
|
||
sensor.hastrom_flex_extended_current_price
|
||
pyscript.battery_charging_plan
|
||
```
|
||
|
||
Falls anders: Im Dashboard mit Suchen & Ersetzen anpassen!
|
||
|
||
### Schritt 4: Fertig! 🎉
|
||
|
||
Navigiere zu: **Sidebar** → **"Batterie Optimierung"**
|
||
|
||
---
|
||
|
||
## 💡 Meine Empfehlung
|
||
|
||
**Starte mit:**
|
||
```
|
||
📄 battery_optimizer_sections_compact.yaml
|
||
📊 7 Sections
|
||
📱 Perfekt für Desktop + Tablet
|
||
⚡ max_columns: 4
|
||
```
|
||
|
||
**Warum?**
|
||
- Beste Balance zwischen Detail und Übersicht
|
||
- Nutzt alle deine HACS Cards optimal
|
||
- Funktioniert super auf allen Geräten
|
||
- Nicht überladen, aber vollständig
|
||
|
||
---
|
||
|
||
## 📖 Dokumentation
|
||
|
||
| Datei | Inhalt |
|
||
|-------|--------|
|
||
| **README_SECTIONS.md** ⭐ | Sections-Layout Anleitung |
|
||
| QUICKSTART.md | Schnellstart (für altes Layout) |
|
||
| README_Dashboard.md | Vollständige Anleitung |
|
||
| DASHBOARD_COMPARISON.md | Visueller Vergleich |
|
||
|
||
---
|
||
|
||
## 🎨 Section-Übersicht (Kompakt)
|
||
|
||
Die **Kompakt-Version** enthält 7 Sections:
|
||
|
||
1. 🏠 **Status & Steuerung**
|
||
- Power Flow Card
|
||
- Auto/Manuell Toggles
|
||
- Quick-Status (SOC, Preis)
|
||
|
||
2. 📅 **Ladeplanung**
|
||
- Plan-Status
|
||
- Nächste Ladung
|
||
- Kompakte Plan-Liste
|
||
|
||
3. 💶 **Strompreis-Visualisierung**
|
||
- 48h Preis-Graph
|
||
- Geplante Ladungen als Marker
|
||
|
||
4. 🔋 **Batterie-Übersicht**
|
||
- 24h SOC & Leistung Graph
|
||
- Dual-Achsen
|
||
|
||
5. 📋 **Detaillierter Plan**
|
||
- Statistik-Bubble-Cards
|
||
- Vollständige Plan-Tabelle
|
||
|
||
6. ⚙️ **Einstellungen**
|
||
- Alle Parameter
|
||
- Min/Max SOC, Ladeleistung, etc.
|
||
|
||
7. ℹ️ **System**
|
||
- OpenEMS Status
|
||
- PV-Prognosen
|
||
- Automation-Status
|
||
|
||
---
|
||
|
||
## 🔧 Anpassungen
|
||
|
||
### Spaltenanzahl ändern:
|
||
|
||
```yaml
|
||
type: sections
|
||
max_columns: 3 # Statt 4 für weniger Spalten
|
||
```
|
||
|
||
### Section entfernen:
|
||
|
||
Einfach die komplette Section löschen (von `- type: grid` bis zur nächsten Section)
|
||
|
||
### Reihenfolge ändern:
|
||
|
||
Sections im YAML nach oben/unten verschieben
|
||
|
||
---
|
||
|
||
## 📱 Responsive Verhalten
|
||
|
||
Das Sections-Layout passt sich **automatisch** an:
|
||
|
||
- **Desktop (>1920px):** 4 Spalten nebeneinander
|
||
- **Laptop (1366-1920px):** 3-4 Spalten
|
||
- **Tablet (768-1366px):** 2-3 Spalten
|
||
- **Smartphone (<768px):** 1 Spalte
|
||
|
||
Kein manuelles Responsive-CSS nötig! 🎯
|
||
|
||
---
|
||
|
||
## ✅ Voraussetzungen
|
||
|
||
- ✅ Home Assistant **2024.2 oder neuer**
|
||
- ✅ HACS Custom Cards:
|
||
- Bubble Card ✅
|
||
- Plotly Graph Card ✅
|
||
- Power Flow Card Plus ✅
|
||
- Stack-in-Card (optional)
|
||
|
||
Alle bereits bei dir installiert! 🚀
|
||
|
||
---
|
||
|
||
## 🐛 Fehlerbehebung
|
||
|
||
### "Sections not supported"
|
||
|
||
➜ Home Assistant auf 2024.2+ updaten
|
||
➜ Oder: Klassisches Layout nutzen
|
||
|
||
### Cards werden nicht angezeigt
|
||
|
||
➜ Browser-Cache leeren (Strg+Shift+R)
|
||
➜ Home Assistant neu starten
|
||
|
||
### Plotly zeigt keine Daten
|
||
|
||
➜ Prüfe Entity-Historie in Developer Tools
|
||
➜ Recorder-Integration prüfen
|
||
|
||
---
|
||
|
||
## 🎯 Nächste Schritte
|
||
|
||
Nach Dashboard-Installation:
|
||
|
||
1. ✅ **Plan-Historie** implementieren
|
||
2. ✅ **InfluxDB-Integration** erweitern
|
||
3. ✅ **Notifications** einrichten
|
||
4. ✅ **Grafana-Dashboard** als Alternative
|
||
|
||
Womit möchtest du weitermachen?
|
||
|
||
---
|
||
|
||
## 🆚 Sections vs. Klassisch
|
||
|
||
| Feature | Sections | Klassisch |
|
||
|---------|----------|-----------|
|
||
| HA Version | 2024.2+ | Alle |
|
||
| Struktur | Modern | Traditionell |
|
||
| Responsive | Automatisch | Manuell |
|
||
| Überschriften | Integriert | Manuell |
|
||
| Wartung | Einfacher | Komplexer |
|
||
| Zukunft | ✅ Standard | ⚠️ Legacy |
|
||
|
||
**Empfehlung:** Nutze **Sections** wenn möglich! 🚀
|
||
|
||
---
|
||
|
||
## 🎉 Los geht's!
|
||
|
||
**Starte jetzt:**
|
||
|
||
1. 📖 Lies: `README_SECTIONS.md`
|
||
2. 📄 Öffne: `battery_optimizer_sections_compact.yaml`
|
||
3. 🚀 Folge: Quick-Start oben
|
||
4. ✅ Teste: Auf verschiedenen Geräten
|
||
|
||
**Viel Erfolg mit deinem modernen Dashboard!** 🎊
|
||
|
||
---
|
||
|
||
**Erstellt:** 16. November 2025
|
||
**Layout:** Home Assistant Sections (2024.x)
|
||
**Empfohlung:** COMPACT-Version ⭐
|