Files
boWave/DASHBOARD_ANLEITUNG.md

8.0 KiB

🎯 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 TabRadio
  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:

# 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:
    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! 🚢