added status-anzeige

configs/dampflok1.json

@@ -1,23 +1,12 @@
 {
-  "name": "BR 01 Dampflok",
+  "name": "Dampflok BR 01",
   "image": "dampflok1.jpg",
   "hub_id": 0,
   "hub_type": "4channel",
   "channels": [
-    {
+    {"port": "A", "type": "motor", "name": "Fahrtrichtung", "invert": false, "negative_only": false},
-      "port": "A",
+    {"port": "B", "type": "motor", "name": "Unterstützung", "invert": false, "negative_only": false},
-      "type": "motor",
+    {"port": "C", "type": "light", "name": "Licht vorne", "on_value": 1.0, "off_value": 0.0, "negative_only": false},
-      "name": "Fahrtrichtung"
+    {"port": "D", "type": "fogger", "name": "Dampf", "on_value": -1.0, "off_value": 0.0, "negative_only": true}
-    },
-    {
-      "port": "B",
-      "type": "motor",
-      "name": "Dampf / Kohle"
-    },
-    {
-      "port": "C",
-      "type": "light",
-      "name": "Spitzenlicht"
-    }
   ]
 }

docs/changelog.md

@@ -0,0 +1,8 @@
+Kurze Zusammenfassung des aktuellen Stands
+
+Verbinden → funktioniert
+Kanäle rendern (Slider + Toggle + Stop-Buttons) → funktioniert
+Motor ansteuern (Slider) → funktioniert
+Einzelstop pro Kanal + Slider-Reset → funktioniert
+Alle stoppen + alle Slider zurücksetzen → funktioniert
+Erneut verbinden → Button ist da und funktioniert (wenn nötig)

docs/ideensammlung.md

@@ -0,0 +1,26 @@
+
+Was jetzt noch fehlen könnte / sinnvoll wäre
+Hier ein paar kleine Verbesserungen / Nice-to-haves, die man jetzt noch einbauen könnte – je nachdem, was dir am wichtigsten ist:
+
+Status-Anzeige (grün/rot Punkt „Verbunden“ / „Getrennt“)
+→ Kleiner Kreis oben rechts, der sich bei Connect/Reconnect/Fehler ändert
+Automatischer Reconnect-Versuch oder Warnung bei Verbindungsverlust
+→ z. B. alle 10 Sekunden einen Dummy-Befehl senden und bei Fehler showReconnect() aufrufen
+Visuelles Feedback bei Befehlen
+→ Slider kurz grün aufleuchten, Toggle-Button kurz pulsieren
+Slider-Skalierung anpassen
+→ Bei negative_only: true Slider nur von -100 bis 0 zeigen
+→ Bei Licht/Sound ggf. andere Werte (z. B. 0/1 statt -1..1)
+Admin-Seite weiter ausbauen
+→ Config-Editor mit Formular (Name, Hub-ID, Kanäle hinzufügen/entfernen) statt nur Textarea
+Verbindung beim Verlassen der Seite sauber trennen
+→ window.onbeforeunload → current_device.Disconnect() aufrufen (falls möglich)
+
+
+Sag einfach, was du als Nächstes priorisieren möchtest:
+
+Status-Anzeige + Verbindungsprüfung
+Bessere visuelle Rückmeldung (Farben, Animationen)
+Config-Editor in Admin-Seite (Formular statt Textarea)
+Automatische Stopps bei Verbindungsverlust
+Oder etwas ganz anderes (z. B. mehrere Hubs gleichzeitig, Sound- oder Fogger-Spezialbehandlung)

static/js/app.js

@@ -2,6 +2,28 @@
 
 document.addEventListener('DOMContentLoaded', () => {
 
+    const statusBadge = document.getElementById('connection-status');
+
+    function updateStatus(connected) {
+    if (!statusBadge) return;
+    if (connected) {
+        statusBadge.className = 'badge bg-success px-3 py-2';
+        statusBadge.innerHTML = '<i class="bi bi-circle-fill me-2"></i> Verbunden';
+        reconnectSection.style.display = 'none';
+    } else {
+        statusBadge.className = 'badge bg-danger px-3 py-2';
+        statusBadge.innerHTML = '<i class="bi bi-circle-fill me-2"></i> Getrennt';
+        showReconnect();
+    }
+    }
+
+    // Nach erfolgreichem Connect / Reconnect
+    // in if (result.success) { ... }
+    updateStatus(true);
+
+    // Nach Fehler in sendControl (z. B. am Ende von sendControl)
+    updateStatus(false);
+
   const config = window.mkConfig || {};
   console.log("app.js verwendet config:", config);
   console.log('MK Control Frontend geladen');

templates/control.html

@@ -30,6 +30,13 @@
     </div>
   </div>
 
+    <!-- Status-Anzeige -->
+    <div class="position-fixed top-0 end-0 m-3" style="z-index: 1050;">
+        <div id="connection-status" class="badge bg-secondary px-3 py-2">
+            <i class="bi bi-circle-fill me-2 text-muted"></i> Nicht verbunden
+        </div>
+    </div>
+
   <!-- Connect-Button -->
   <div class="text-center mb-5" id="connect-section">
     <button id="connect-btn" class="btn btn-lg btn-success px-5 py-3">