Anleitungen erstellt und Bildrate einstellbar

index_upload_tmp.html

@@ -57,7 +57,7 @@
     <div class="panel" id="cam-panel">
       <div class="p-hdr">
         <div class="p-dot"></div>
-        <span class="p-lbl">Kamera — CAM01</span>
+        <span class="p-lbl">Kamera - CAM01</span>
         <span class="p-tag">Live Stream</span>
       </div>
       <div class="cam-port">
@@ -288,6 +288,10 @@ var gpsStatusListener = null;
 var gpsDiagnosticsListener = null;
 var rosReconnectTimer = null;
 var rosDisconnectTimer = null;
+var cameraReconnectTimer = null;
+var cameraRecoveryTimers = [];
+var lastCameraServiceState = "";
+var lastCameraSettingsVersion = null;
 var publishTimer = null;
 var statusTimer = null;
 var axes = [0, 0, 0, 0, 0, 0];
@@ -926,6 +930,43 @@ function refreshRosSocketState() {
   }
 }
 
+function clearCameraReconnect() {
+  if (!cameraReconnectTimer) return;
+  window.clearTimeout(cameraReconnectTimer);
+  cameraReconnectTimer = null;
+}
+
+function clearCameraRecoveryTimers() {
+  cameraRecoveryTimers.forEach(function (timerId) {
+    window.clearTimeout(timerId);
+  });
+  cameraRecoveryTimers = [];
+}
+
+function reloadCameraStream() {
+  var video = document.getElementById("video_output");
+  if (!video) return;
+  video.src = "//" + hostUrl + ":8083/stream.mjpg";
+}
+
+function scheduleCameraReconnect(delayMs) {
+  if (cameraReconnectTimer) return;
+  cameraReconnectTimer = window.setTimeout(function () {
+    cameraReconnectTimer = null;
+    reloadCameraStream();
+  }, delayMs || 2500);
+}
+
+function triggerCameraRecovery() {
+  clearCameraReconnect();
+  clearCameraRecoveryTimers();
+  [1200, 2600, 4200, 6500].forEach(function (delayMs) {
+    cameraRecoveryTimers.push(window.setTimeout(function () {
+      reloadCameraStream();
+    }, delayMs));
+  });
+}
+
 function updateUndervoltageDisplay(text, state) {
   var el = document.getElementById("stat-undervoltage");
   if (!el) {
@@ -952,6 +993,8 @@ function updateUndervoltageDisplay(text, state) {
 function updateServiceState(payload) {
   var system = payload.system || {};
   var services = payload.services || {};
+  var cameraServiceState = String(services.camera || "");
+  var cameraSettingsVersion = Number(services.camera_settings_version || 0);
   setText("stat-wifi", system.wifi || "unbekannt");
   setText("stat-ips", system.ips || "unbekannt");
   updateUndervoltageDisplay(system.undervoltage || "unbekannt", system.undervoltage_state || "unknown");
@@ -963,7 +1006,17 @@ function updateServiceState(payload) {
   document.getElementById("bar-cpu").style.width = percentTextToWidth(system.cpu_usage);
   document.getElementById("bar-mem").style.width = percentTextToWidth(system.memory_usage);
   document.getElementById("bar-temp").style.width = temperatureTextToWidth(system.cpu_temperature);
-  setText("cam-state", services.camera === "active" ? "Online" : services.camera || "unbekannt");
+  if (cameraServiceState === "active" && lastCameraServiceState && lastCameraServiceState !== "active") {
+    setText("cam-state", "Verbinde...");
+    triggerCameraRecovery();
+  }
+  if (lastCameraSettingsVersion !== null && cameraSettingsVersion !== lastCameraSettingsVersion) {
+    setText("cam-state", "Verbinde...");
+    triggerCameraRecovery();
+  }
+  lastCameraServiceState = cameraServiceState;
+  lastCameraSettingsVersion = cameraSettingsVersion;
+  setText("cam-state", cameraServiceState === "active" ? "Online" : cameraServiceState || "unbekannt");
 }
 
 function fetchSystemStatus() {
@@ -1236,8 +1289,10 @@ window.addEventListener("load", function () {
   window.setInterval(renderTrajectoryOverlay, 250);
 
   var video = document.getElementById("video_output");
-  video.src = "//" + hostUrl + ":8083/stream.mjpg";
+  reloadCameraStream();
   video.addEventListener("load", function () {
+    clearCameraReconnect();
+    clearCameraRecoveryTimers();
     setText("cam-state", "Online");
     setText("cam-host", hostUrl);
     setText("cam-live-text", "LIVE");
@@ -1254,6 +1309,7 @@ window.addEventListener("load", function () {
     if (liveIndicator) {
       liveIndicator.classList.add("is-offline");
     }
+    scheduleCameraReconnect(2500);
   });
   updateCameraFrameLayout();
   window.addEventListener("resize", updateCameraFrameLayout);