213 lines
13 KiB
Markdown
213 lines
13 KiB
Markdown
# 📊 Dashboard-Varianten Vergleich
|
||
|
||
## 🎨 Visueller Aufbau
|
||
|
||
### 1️⃣ STANDARD-VERSION (11KB)
|
||
|
||
```
|
||
┌─────────────────────────────────────────────────────┐
|
||
│ 🔋 Power Flow Card Plus (Energie-Visualisierung) │
|
||
└─────────────────────────────────────────────────────┘
|
||
┌─────────────────────────┬───────────────────────────┐
|
||
│ 🎛️ STEUERUNG │ 📅 AKTUELLER PLAN │
|
||
│ • Auto-Optimierung │ • Plan-Status │
|
||
│ • Manuelle Steuerung │ • Nächste Ladung │
|
||
│ • Parameter (6 Items) │ • Geplante Stunden │
|
||
└─────────────────────────┴───────────────────────────┘
|
||
┌─────────────────────────────────────────────────────┐
|
||
│ 📈 GRAPH: Strompreis & Ladeplanung (48h) │
|
||
│ - Preis-Linie mit Füllung │
|
||
│ - Geplante Ladungen als Marker │
|
||
└─────────────────────────────────────────────────────┘
|
||
┌─────────────────────────────────────────────────────┐
|
||
│ 📊 GRAPH: Batterie SOC & Leistung (24h) │
|
||
│ - SOC (linke Y-Achse) │
|
||
│ - Leistung (rechte Y-Achse) │
|
||
└─────────────────────────────────────────────────────┘
|
||
┌─────────────────────────────────────────────────────┐
|
||
│ ⚡ GRAPH: Energie-Flüsse (24h) │
|
||
│ - PV-Produktion │
|
||
│ - Netzbezug │
|
||
│ - Batterie │
|
||
└─────────────────────────────────────────────────────┘
|
||
┌─────────────────────────────────────────────────────┐
|
||
│ 📋 DETAILLIERTER PLAN (ausklappbar) │
|
||
│ - Statistiken-Tabelle │
|
||
│ - Stunden-Detail-Tabelle │
|
||
└─────────────────────────────────────────────────────┘
|
||
┌─────────────────────────────────────────────────────┐
|
||
│ ℹ️ SYSTEM-INFORMATIONEN (ausklappbar) │
|
||
│ - OpenEMS Status │
|
||
│ - Kapazitäten │
|
||
│ - PV-Prognosen │
|
||
│ - Automation-Status │
|
||
└─────────────────────────────────────────────────────┘
|
||
```
|
||
|
||
**Verwendete Cards:** 7 verschiedene Typen, 15+ Cards total
|
||
**Beste für:** Desktop, Detailanalyse, Monitoring-Station
|
||
**Scroll-Bedarf:** Hoch (6-7 Bildschirme)
|
||
|
||
---
|
||
|
||
### 2️⃣ KOMPAKT-VERSION (8KB)
|
||
|
||
```
|
||
┌─────────────────────────────────────────────────────┐
|
||
│ 🔋 Power Flow Card Plus (Energie-Visualisierung) │
|
||
└─────────────────────────────────────────────────────┘
|
||
┌─────────────────────────┬───────────────────────────┐
|
||
│ 🎛️ STEUERUNG (Stack) │ 📅 PLAN (Stack) │
|
||
│ ┌─────────────────┐ │ ┌─────────────────┐ │
|
||
│ │ Auto Toggle │ │ │ Plan-Status │ │
|
||
│ │ Manuell Toggle │ │ │ Nächste Ladung │ │
|
||
│ │ SOC + Preis │ │ │ X Std geplant │ │
|
||
│ └─────────────────┘ │ └─────────────────┘ │
|
||
└─────────────────────────┴───────────────────────────┘
|
||
┌─────────────────────────────────────────────────────┐
|
||
│ 💶 Strompreis & Ladeplan (48h) - Plotly │
|
||
└─────────────────────────────────────────────────────┘
|
||
┌─────────────────────────────────────────────────────┐
|
||
│ 🔋 Batterie-Übersicht (24h) - Plotly │
|
||
│ - SOC + Leistung kombiniert │
|
||
└─────────────────────────────────────────────────────┘
|
||
┌─────────────────────────────────────────────────────┐
|
||
│ 📋 DETAILLIERTER PLAN (ausklappbar) │
|
||
│ ┌──────────┬──────────┬──────────┐ │
|
||
│ │ Xh Dauer │ X kWh │ X ct Ø │ (Bubble Cards) │
|
||
│ └──────────┴──────────┴──────────┘ │
|
||
│ Liste der Ladestunden (Markdown) │
|
||
└─────────────────────────────────────────────────────┘
|
||
┌─────────────────────────────────────────────────────┐
|
||
│ ⚙️ EINSTELLUNGEN (ausklappbar) │
|
||
└─────────────────────────────────────────────────────┘
|
||
```
|
||
|
||
**Verwendete Cards:** Stack-in-Card, Bubble Cards, Plotly
|
||
**Beste für:** Tablet, ausgewogene Darstellung
|
||
**Scroll-Bedarf:** Mittel (3-4 Bildschirme)
|
||
|
||
---
|
||
|
||
### 3️⃣ MINIMAL-VERSION (6KB)
|
||
|
||
```
|
||
┌──────────────┬──────────────┬──────────────┐
|
||
│ 🔋 Batterie │ 💶 Preis │ ☀️ PV │
|
||
│ XX% │ XX ct/kWh │ XXXX W │
|
||
└──────────────┴──────────────┴──────────────┘
|
||
┌──────────────────────┬──────────────────────┐
|
||
│ 🤖 Auto │ ✋ Manuell │
|
||
│ [Toggle] │ [Toggle] │
|
||
└──────────────────────┴──────────────────────┘
|
||
┌─────────────────────────────────────────────┐
|
||
│ 🔋 Power Flow Card Plus │
|
||
└─────────────────────────────────────────────┘
|
||
┌─────────────────────────────────────────────┐
|
||
│ 📅 GEPLANTE LADUNGEN │
|
||
│ │
|
||
│ 🟢 JETZT 23:00 Uhr │
|
||
│ 5000W bei 12.5ct/kWh │
|
||
│ Niedriger Preis │
|
||
│ │
|
||
│ ⏰ 00:00 Uhr │
|
||
│ 5000W bei 11.8ct/kWh │
|
||
│ Günstigste Stunde │
|
||
│ │
|
||
│ ⏰ 01:00 Uhr │
|
||
│ 5000W bei 13.2ct/kWh │
|
||
│ Unter Schwellwert │
|
||
└─────────────────────────────────────────────┘
|
||
┌─────────────────────────────────────────────┐
|
||
│ 💶 Strompreis 48h (Mini-Graph) │
|
||
└─────────────────────────────────────────────┘
|
||
┌─────────────────────────────────────────────┐
|
||
│ 🔋 Batterie SOC 24h (Mini-Graph) │
|
||
└─────────────────────────────────────────────┘
|
||
┌─────────────────────────────────────────────┐
|
||
│ ⚙️ Schnelleinstellungen (nur wenn Auto=ON) │
|
||
│ - Min SOC, Max SOC, Ladeleistung │
|
||
└─────────────────────────────────────────────┘
|
||
┌─────────────────────────────────────────────┐
|
||
│ ℹ️ System (Mini) │
|
||
│ OpenEMS | Auto Plan | Auto Exec │
|
||
└─────────────────────────────────────────────┘
|
||
```
|
||
|
||
**Verwendete Cards:** Bubble Cards (hauptsächlich), Plotly (minimal)
|
||
**Beste für:** Smartphone, Quick-Check, Wall Panel
|
||
**Scroll-Bedarf:** Niedrig (2 Bildschirme)
|
||
|
||
---
|
||
|
||
## 🎯 Entscheidungshilfe
|
||
|
||
### Wähle STANDARD wenn:
|
||
- ✅ Du hast einen großen Bildschirm (Desktop, Laptop)
|
||
- ✅ Du möchtest alle Details auf einen Blick
|
||
- ✅ Du machst häufig Detailanalysen
|
||
- ✅ Du hast mehrere Monitore
|
||
- ✅ Scroll-Bedarf ist kein Problem
|
||
|
||
### Wähle KOMPAKT wenn:
|
||
- ✅ Du nutzt hauptsächlich ein Tablet
|
||
- ✅ Du möchtest Balance zwischen Detail und Übersicht
|
||
- ✅ Du magst moderne Card-Designs (Bubble)
|
||
- ✅ Du möchtest Stack-in-Card nutzen
|
||
- ✅ Du brauchst alle Features, aber platzsparend
|
||
|
||
### Wähle MINIMAL wenn:
|
||
- ✅ Du nutzt hauptsächlich ein Smartphone
|
||
- ✅ Du brauchst nur Quick-Status-Checks
|
||
- ✅ Du möchtest wenig scrollen
|
||
- ✅ Du hast ein Wall Panel/Tablet an der Wand
|
||
- ✅ Fokus auf nächste Ladungen, nicht auf Historie
|
||
|
||
---
|
||
|
||
## 📱 Responsivität
|
||
|
||
| Gerät | Standard | Kompakt | Minimal |
|
||
|-------|----------|---------|---------|
|
||
| **Desktop** (>1920px) | ⭐⭐⭐⭐⭐ | ⭐⭐⭐⭐ | ⭐⭐⭐ |
|
||
| **Laptop** (1366-1920px) | ⭐⭐⭐⭐ | ⭐⭐⭐⭐⭐ | ⭐⭐⭐⭐ |
|
||
| **Tablet** (768-1366px) | ⭐⭐⭐ | ⭐⭐⭐⭐⭐ | ⭐⭐⭐⭐⭐ |
|
||
| **Smartphone** (<768px) | ⭐⭐ | ⭐⭐⭐ | ⭐⭐⭐⭐⭐ |
|
||
| **Wall Panel** (1024px) | ⭐⭐⭐ | ⭐⭐⭐⭐⭐ | ⭐⭐⭐⭐⭐ |
|
||
|
||
---
|
||
|
||
## 🔄 Mix & Match
|
||
|
||
Du kannst auch **mehrere Dashboards kombinieren**:
|
||
|
||
```yaml
|
||
# In configuration.yaml oder dashboards.yaml
|
||
lovelace:
|
||
mode: yaml
|
||
dashboards:
|
||
# Für Desktop
|
||
battery-detail:
|
||
mode: yaml
|
||
filename: dashboards/battery_optimizer_dashboard.yaml
|
||
title: Batterie Detail
|
||
icon: mdi:chart-line
|
||
|
||
# Für Tablet/Mobile
|
||
battery-overview:
|
||
mode: yaml
|
||
filename: dashboards/battery_optimizer_dashboard_compact.yaml
|
||
title: Batterie
|
||
icon: mdi:battery-charging
|
||
show_in_sidebar: true
|
||
|
||
# Für Quick-Check
|
||
battery-quick:
|
||
mode: yaml
|
||
filename: dashboards/battery_optimizer_dashboard_minimal.yaml
|
||
title: Batterie Quick
|
||
icon: mdi:battery-lightning
|
||
```
|
||
|
||
Dann hast du alle Varianten verfügbar und kannst je nach Situation wechseln! 🎯
|