battery-charging-optimizer/legacy/v3/README_Dashboard.md

📊 Batterie-Optimierung Dashboard Überarbeitung

🎯 Übersicht

Ich habe 3 Dashboard-Varianten erstellt, alle mit maximal 4 Spalten für bessere Übersichtlichkeit:

1. Standard-Version (battery_optimizer_dashboard.yaml)

• Am umfangreichsten: Alle Features und Details
• Beste Wahl für: Desktop-Nutzung, Detailanalyse
• Highlights:
  • Power Flow Card Plus für Energie-Visualisierung
  • 3 Plotly Graphen (Preis, SOC, Energie-Flüsse)
  • Vollständige Plan-Tabelle mit Statistiken
  • System-Informationen ausklappbar

2. Kompakt-Version (battery_optimizer_dashboard_compact.yaml)

• Ausgewogen: Kompakt aber vollständig
• Beste Wahl für: Tablet, ausgewogene Darstellung
• Highlights:
  • Stack-in-Card für platzsparendes Layout
  • 2 Plotly Graphen (Preis + SOC kombiniert)
  • Bubble Cards für moderne Optik
  • Kompakte Plan-Anzeige

3. Minimal-Version (battery_optimizer_dashboard_minimal.yaml)

• Am übersichtlichsten: Nur das Wichtigste
• Beste Wahl für: Smartphone, Quick-Check
• Highlights:
  • Quick Status Bar (3 Bubble Buttons)
  • Nächste 5 Ladungen im Fokus
  • 2 kleine Graphen (Preis + SOC)
  • Schnelleinstellungen nur wenn aktiv

---

📦 Installation

Schritt 1: Dashboard in Home Assistant importieren

# In deiner Home Assistant Konfiguration (configuration.yaml oder dashboards.yaml)
lovelace:
  mode: yaml
  dashboards:
    battery-optimizer:
      mode: yaml
      filename: dashboards/battery_optimizer_dashboard.yaml
      title: Batterie Optimierung
      icon: mdi:battery-charging
      show_in_sidebar: true

Schritt 2: Datei hochladen

1. Kopiere eine der YAML-Dateien nach: /config/dashboards/
2. Oder: Füge den Inhalt direkt in den Dashboard-Editor ein
3. Neustart von Home Assistant (eventuell nötig)

Schritt 3: Fehlende Entities anpassen

Wichtig: Passe folgende Entity-IDs an deine tatsächlichen IDs an:

# Beispiele - ersetze durch deine tatsächlichen IDs:
sensor.openems_ess0_activepower          # Batterie-Leistung
sensor.esssoc                            # Batterie SOC
sensor.openems_grid_activepower          # Netz-Leistung
sensor.openems_production_activepower    # PV-Produktion
sensor.openems_consumption_activepower   # Verbrauch
sensor.hastrom_flex_extended_current_price # Strompreis
sensor.battery_charging_plan_status      # Plan-Status
sensor.battery_next_charge_time          # Nächste Ladung

---

🎨 Verwendete Custom Cards

Diese HACS-Karten werden verwendet:

✅ Installiert bei dir:

1. Bubble Card - Moderne Button- und Toggle-Cards
2. Plotly Graph Card - Professionelle interaktive Graphen
3. Power Flow Card Plus - Energie-Fluss-Visualisierung
4. Stack-in-Card - Kompaktes Stapeln von Cards

📋 Falls noch nicht installiert:

# In HACS → Frontend → Suche nach:
- Bubble Card
- Plotly Graph Card  
- Power Flow Card Plus
- Stack-in-Card

---

🔧 Anpassungen

Layout ändern

# Von 4 auf 3 Spalten ändern (in horizontal-stack):
- type: horizontal-stack
  cards:
    - card1  # Spalte 1
    - card2  # Spalte 2
    - card3  # Spalte 3 (entferne 4. Card)

Farben anpassen

# In Plotly Graphen:
line:
  color: '#FF9800'  # Deine Wunschfarbe (Hex)

Graph-Zeitraum ändern

hours_to_show: 48  # Von 48h auf z.B. 24h ändern

---

📱 Responsive Verhalten

Automatische Anpassung

Alle Dashboards passen sich automatisch an:

• Desktop (>1024px): Volle Breite, alle Spalten
• Tablet (768-1024px): 2-3 Spalten, kompaktere Ansicht
• Smartphone (<768px): 1 Spalte, vertikales Stacking

Mobile Optimierungen

Die Minimal-Version ist speziell für Smartphones optimiert:

• Große Touch-Targets (Bubble Cards)
• Weniger Scroll-Bedarf
• Schneller Überblick

---

🎯 Empfohlene Nutzung

Gerät	Dashboard-Version	Warum?
Desktop PC	Standard	Volle Details, alle Graphen sichtbar
Tablet	Kompakt	Ausgewogen zwischen Detail und Übersicht
Smartphone	Minimal	Quick-Check, wichtigste Infos
Wall Panel	Kompakt oder Minimal	Übersichtlich aus der Distanz

---

🐛 Fehlerbehebung

Problem: Cards werden nicht angezeigt

Lösung:

1. Prüfe ob alle Custom Cards installiert sind (HACS)
2. Lösche Browser-Cache
3. Neustart Home Assistant

Problem: Entities nicht gefunden

Lösung:

# In Developer Tools → States nachschauen:
# Welche Entity-IDs existieren wirklich?
# Dann im Dashboard anpassen

Problem: Plotly Graph zeigt keine Daten

Lösung:

# Prüfe ob die Entity historische Daten hat:
# Developer Tools → History → Entity auswählen
# Falls nicht: InfluxDB/Recorder-Integration prüfen

---

📊 Dashboard-Vergleich

Feature	Standard	Kompakt	Minimal
Power Flow Card	✅	✅	✅
Preis-Graph	✅	✅	✅ (klein)
SOC-Graph	✅	✅	✅ (klein)
Energie-Fluss-Graph	✅	❌	❌
Detaillierte Plan-Tabelle	✅	✅	❌
Plan-Statistiken	✅	✅	❌
Nächste Ladungen	✅	✅	✅
System-Infos	✅	✅	✅ (minimal)
Schnelleinstellungen	✅	✅	✅ (conditional)
Bubble Cards	✅	✅✅	✅✅✅
Stack-in-Card	❌	✅✅	❌

---

🔮 Nächste Schritte

Nach der Dashboard-Installation kannst du:

1. Plan-Historie implementieren (wie im vorherigen Chat besprochen)
2. InfluxDB-Integration für Langzeit-Datenanalyse
3. Notifications bei Ladestart/-ende
4. Grafana-Dashboard für erweiterte Analysen

---

💡 Tipps

Performance-Optimierung

# Reduziere refresh_interval bei Plotly:
refresh_interval: 300  # Nur alle 5 Minuten aktualisieren

Conditional Cards

# Zeige Card nur wenn Optimizer aktiv:
- type: conditional
  conditions:
    - entity: input_boolean.battery_optimizer_enabled
      state: 'on'
  card:
    # Deine Card hier

Dark Mode Anpassungen

# In card_mod für bessere Lesbarkeit:
card_mod:
  style: |
    ha-card {
      background: rgba(0, 0, 0, 0.3);
      border: 1px solid rgba(255, 255, 255, 0.1);
    }

---

📞 Support

Bei Fragen oder Problemen:

1. Prüfe die Entity-IDs in Developer Tools
2. Schaue in die Browser-Konsole (F12) nach Fehlern
3. Prüfe das Home Assistant Log

---

Viel Erfolg mit deinem neuen Dashboard! 🚀