# 🎯 Dashboard Bedienung - Alles auf einen Blick

## ✅ GELÖSTE PROBLEME

### 1. Karten-Crash behoben
- ✅ **Error Handling** eingebaut
- ✅ **Loading-Spinner** beim Laden
- ✅ **Fehleranzeige** wenn Karte nicht lädt (z.B. kein Internet)
- ✅ **"Neu laden" Button** bei Fehlern

### 2. Alles im Dashboard vereint
- ✅ **Kein App-Wechsel mehr nötig**
- ✅ **Overview Tab zeigt alles:** Navigation + Audio + Instrumente
- ✅ **Music Player direkt eingebaut** (Play/Pause/Skip)
- ✅ **Audio-Zonen direkt sichtbar** (Lautstärke/Mute)

---

## 🚀 So benutzt du das Dashboard

### Öffne: http://localhost:8090

---

## 📊 OVERVIEW TAB (Haupt-Screen)

**Das ist der Tab, den du auf dem Boot im Kiosk-Modus siehst!**

### 🗺️ Karte / Instrumente Toggle

**Oben siehst du zwei Buttons:**
```
[📊 Instrumente]  [🗺️ Karte]
```

**Klick auf "📊 Instrumente":**
- Zeigt: Kompass, Geschwindigkeit, Tiefe, Wind
- Ideal zum Segeln: Alle wichtigen Werte auf einen Blick

**Klick auf "🗺️ Karte":**
- Zeigt: Interaktive Seekarte mit deiner Position
- Dein Boot (blaues Dreieck) bewegt sich live
- OpenSeaMap Overlay (Tonnen, Fahrwasser, etc.)
- Zoom +/- Buttons
- "⊙" Button → Zentriert auf Boot

**Wenn Karte nicht lädt:**
- Zeigt: "⚠️ Karte konnte nicht geladen werden"
- Klicke: "Neu laden" Button
- **KEIN Crash mehr!** Dashboard läuft weiter.

---

### 🎵 Music Player (direkt im Overview)

**Du siehst den aktuellen Track:**
```
♫ Track Title
  Artist Name
  Album Name
  ━━━━━━━━━━━━━━━ 2:30 / 4:15
  
  [⏮] [▶] [⏭]
```

**Controls:**
- `⏮` = Vorheriger Track
- `▶` = Play/Pause
- `⏭` = Nächster Track
- **Fortschrittsbalken** zeigt Position

**Musik starten:**
1. Gehe zu **Audio Tab** → "Radio" oder "Library"
2. Wähle einen Song/Sender
3. Player spielt ab → Zurück zu Overview
4. Steuerung funktioniert von Overview aus!

---

### 🔊 Audio Zonen (direkt im Overview)

**Du siehst alle 4 Boot-Zonen:**
```
╔════════════╗  ╔════════════╗
║  Salon     ║  ║  Cockpit   ║
║  🔊 72%    ║  ║  🔊 58%    ║
║  Mopidy    ║  ║  Mopidy    ║
╚════════════╝  ╚════════════╝

╔════════════╗  ╔════════════╗
║  Bug       ║  ║  Heck      ║
║  🔇 Muted  ║  ║  ⚪ Offline║
║  Spotify   ║  ║  AirPlay   ║
╚════════════╝  ╚════════════╝
```

**Jede Zone zeigt:**
- Name (Salon, Cockpit, Bug, Heck)
- Lautstärke (Slider)
- Audio-Quelle (Spotify/AirPlay/Mopidy)
- Mute-Button (🔊/🔇)

**Zone anpassen:**
1. **Lautstärke:** Schieberegler bewegen
2. **Mute:** Klick auf 🔊 Symbol
3. **Quelle wechseln:** Klick auf Source-Name (Dropdown)

**Alle Zonen gleichzeitig:**
- Für erweiterte Gruppen-Funktionen → **Audio Tab**

---

## 🎵 AUDIO TAB (Erweiterte Kontrolle)

**4 Sub-Tabs:**

### 1. **Zones** (Standard)
- Gleiche Zonen wie Overview
- Zusätzliche Funktionen:
  - Zonen gruppieren
  - Master-Lautstärke
  - Source Picker (Spotify/AirPlay/Mopidy)

### 2. **Accounts**
- Spotify Account Manager
- Multi-Account Support
- Geräte-Zuweisung

### 3. **Radio**
- Radio Browser (TuneIn Integration)
- Tausende Sender weltweit
- Suche nach Genre, Land, Sprache

### 4. **Library**
- Lokale Musik-Bibliothek
- Playlists
- Track-Suche

---

## 🗺️ NAVIGATION TAB (Vollbild-Karte)

**Wann nutzen?**
- Wenn du die Karte groß brauchst
- Für Route-Planung
- Waypoint-Management

**Features:**
- Live-Position mit Kurs
- Track-Aufzeichnung (letzten 500 Punkte)
- Waypoints mit Entfernungsanzeige
- Info-Panel (Position, Heading, Speed, Distance)

**Keine Angst vor Crashes:**
- Falls Karte nicht lädt → Fehleranzeige + Reload-Button
- Dashboard bleibt stabil!

---

## ⚙️ SYSTEMS TAB

**Zeigt:**
- 🔋 Batterien (12V Starter + 24V House)
- ⚙️ Motor (RPM, Betriebsstunden, Kraftstoff)
- 🐳 Docker Services (Status aller Container)

---

## 🎯 WORKFLOW-BEISPIELE

### Beispiel 1: "Ich will Musik hören"

**Schnellstart:**
1. Öffne **Audio Tab** → **Radio**
2. Wähle einen Sender (z.B. "NDR 2")
3. Klick auf Play
4. Zurück zu **Overview** → Player läuft!
5. Lautstärke in Zonen anpassen (direkt im Overview)

### Beispiel 2: "Ich will navigieren"

**Mit Karte:**
1. **Overview Tab** → Klick auf "🗺️ Karte"
2. Karte zeigt deine Position live
3. Zoom mit +/- oder Scroll
4. "⊙" Button → Zentriert auf Boot

**Mit Instrumenten:**
1. **Overview Tab** → Klick auf "📊 Instrumente"
2. Siehst: Kompass, Geschwindigkeit, Tiefe, Wind
3. Alles auf einen Blick

### Beispiel 3: "Karte lädt nicht"

**Problem:**
- Karte zeigt nur Grau
- Oder: "⚠️ Karte konnte nicht geladen werden"

**Lösung:**
1. Prüfe Internet-Verbindung (Karte braucht OpenStreetMap)
2. Klick auf "Neu laden" Button
3. **ODER:** Nutze "📊 Instrumente" statt Karte
4. **Dashboard crasht NICHT mehr!**

---

## 💡 TIPPS & TRICKS

### Tipp 1: Overview als Haupt-Screen
- **Overview Tab** zeigt 90% von allem
- Du brauchst die anderen Tabs selten
- Perfekt für Kiosk-Modus auf dem Boot

### Tipp 2: Musik im Hintergrund
- Starte Musik im **Audio Tab** → Radio/Library
- Zurück zu **Overview**
- Player läuft weiter, Controls funktionieren

### Tipp 3: Zonen-Management
- **Schnell:** Lautstärke im Overview anpassen
- **Erweitert:** Audio Tab für Gruppierung

### Tipp 4: Karte zu klein?
- Overview Karte: ~400px hoch (für Übersicht)
- **Navigation Tab:** Vollbild-Karte (für Details)

### Tipp 5: Mock-Daten vs. Echte Daten
- **Dev Mode (jetzt):** Mock NMEA-Daten, simuliertes Boot
- **Boot Mode (später):** Echte GPS, echte Sensoren
- Dashboard funktioniert identisch!

---

## 🔧 TASTENKOMBINATIONEN

**Browser:**
- `F11` → Vollbild (Kiosk-Simulation)
- `Ctrl + R` → Seite neu laden (bei Problemen)
- `F12` → Developer Console (für Debugging)

---

## ⚠️ TROUBLESHOOTING

### Problem: "Karte zeigt nur grauen Hintergrund"

**Ursache:** OpenStreetMap-Tiles laden nicht

**Lösung:**
1. Prüfe Internet (http://tile.openstreetmap.org erreichbar?)
2. Klick auf "Neu laden" im Dashboard
3. Falls dauerhaft offline: Nutze "📊 Instrumente" Modus

### Problem: "Audio spielt nicht"

**Check:**
1. **Overview** → Ist im Player ein Track sichtbar?
2. **Audio Tab** → Zones → Sind Zonen verbunden (grün)?
3. **Mopidy:** Öffne http://localhost:6680/iris/ → Spielt dort?
4. Lautstärke > 0? Nicht gemuted?

### Problem: "Dashboard lädt nicht"

**Quick Fix:**
```powershell
# Services neu starten:
docker compose -f docker-compose.yml -f docker-compose.dev.yml restart

# Browser-Cache leeren:
Ctrl + Shift + Delete → "Cached Images" löschen
```

### Problem: "Position bewegt sich nicht"

**Das ist normal im Dev-Mode:**
- Mock-Daten simulieren langsame Fahrt (3-8 Knoten)
- Position ändert sich alle paar Sekunden
- Auf echtem Boot: Live GPS-Updates

---

## 🚢 DEPLOYMENT AUF BOOT (später)

**Wenn du das System aufs Boot bringst:**
1. Ubuntu Server Setup → Siehe `KIOSK_SETUP.md`
2. Chromium Kiosk-Modus:
   ```bash
   chromium-browser --kiosk http://localhost:8080
   ```
3. Dashboard öffnet automatisch in **Overview Tab**
4. Touchscreen-Steuerung funktioniert
5. Alle Features identisch zu Dev!

---

## ✅ ZUSAMMENFASSUNG

### ✅ Was funktioniert jetzt:
- ✅ **Kein Crash** bei Karten-Fehler
- ✅ **Alles im Overview Tab** (Karte + Instrumente + Audio)
- ✅ **Music Player** direkt bedienbar
- ✅ **Audio-Zonen** direkt steuerbar
- ✅ **Kein App-Wechsel** mehr nötig

### 🎯 Dein Workflow:
1. **Dashboard öffnen:** http://localhost:8090
2. **Overview Tab** → Alles auf einen Blick
3. **Karte/Instrumente** → Toggle je nach Bedarf
4. **Musik starten** → Audio Tab → Radio/Library
5. **Zonen anpassen** → Direkt im Overview

### 💡 Wichtig:
- **Kein Snapcast Web UI** mehr nötig → Alles im Dashboard!
- **Kein Mopidy/Iris** mehr nötig → Player im Dashboard!
- **Kein SignalK UI** mehr nötig → Daten im Dashboard!

**→ Ein Dashboard, alles drin! 🚢⚓**