Verzögerung eingebaut

ExoMy_Software-master/gui/admin.html

@@ -72,6 +72,34 @@
             </div>
           </div>
 
+          <div class="admin_section">
+            <div class="admin_section_header">
+              <p class="eyebrow">Latenz-Simulation</p>
+            </div>
+            <div class="admin_quick_link_card">
+              <div>
+                <strong>Signallaufzeit</strong>
+                <p>Verzögert Steuerbefehle (Controller + Web-GUI) und Kamerabild gleichzeitig.</p>
+              </div>
+              <div class="delay_control">
+                <select id="delay_select" class="delay_select" onchange="setDelay(parseFloat(this.value))">
+                  <option value="0">0 s – kein Delay</option>
+                  <option value="1">1 s</option>
+                  <option value="2">2 s</option>
+                  <option value="3">3 s</option>
+                  <option value="4">4 s</option>
+                  <option value="5">5 s</option>
+                  <option value="6">6 s</option>
+                  <option value="7">7 s</option>
+                  <option value="8">8 s</option>
+                  <option value="9">9 s</option>
+                  <option value="10">10 s</option>
+                </select>
+                <span id="delay_status" class="delay_status_text"></span>
+              </div>
+            </div>
+          </div>
+
           <div class="admin_section">
             <div class="admin_section_header">
               <p class="eyebrow">Systemstatus</p>
@@ -246,9 +274,43 @@
       }
     }
 
+    function updateDelayButtons(seconds) {
+      var sel = document.getElementById('delay_select');
+      if (sel) sel.value = String(seconds);
+    }
+
+    async function fetchDelay() {
+      try {
+        var response = await fetch(adminApiBase + '/api/delay');
+        if (!response.ok) return;
+        var data = await response.json();
+        updateDelayButtons(data.delay_seconds);
+      } catch (e) {}
+    }
+
+    async function setDelay(seconds) {
+      var statusEl = document.getElementById('delay_status');
+      if (statusEl) statusEl.textContent = 'Setze…';
+      try {
+        var response = await fetch(adminApiBase + '/api/delay', {
+          method: 'POST',
+          headers: {'Content-Type': 'application/json'},
+          body: JSON.stringify({delay_seconds: seconds})
+        });
+        var data = await response.json();
+        updateDelayButtons(seconds);
+        if (statusEl) statusEl.textContent = data.status || 'Gesetzt';
+        window.setTimeout(function() { if (statusEl) statusEl.textContent = ''; }, 2000);
+      } catch (e) {
+        if (statusEl) statusEl.textContent = 'Fehler';
+      }
+    }
+
     window.addEventListener('load', function () {
       fetchStatus();
+      fetchDelay();
       window.setInterval(fetchStatus, 10000);
+      window.setInterval(fetchDelay, 5000);
     });
   </script>
 </body>

ExoMy_Software-master/gui/index.html

@@ -629,7 +629,7 @@ header {
         </div>
         <div class="c-br">
           HOST: <span id="cam-host">--</span><br>
-          STREAM: 8081
+          STREAM: 8083
         </div>
         <div class="c-xhair">
           <svg viewBox="-90 -90 180 180" xmlns="http://www.w3.org/2000/svg" width="180" height="180">
@@ -1152,7 +1152,7 @@ window.addEventListener("load", function () {
   statusTimer = window.setInterval(fetchSystemStatus, 5000);
 
   var video = document.getElementById("video_output");
-  video.src = "//" + hostUrl + ":8081/stream.mjpg";
+  video.src = "//" + hostUrl + ":8083/stream.mjpg";
   video.addEventListener("load", function () {
     setText("cam-state", "Online");
   });

ExoMy_Software-master/gui/style.css

@@ -584,6 +584,42 @@ h2 {
     0 8px 18px rgba(109, 126, 132, 0.08);
 }
 
+.delay_control {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-end;
+  gap: 0.45rem;
+}
+
+.delay_select {
+  appearance: none;
+  -webkit-appearance: none;
+  width: 100%;
+  padding: 0.65rem 2.2rem 0.65rem 0.85rem;
+  border-radius: var(--radius-sm);
+  border: 1px solid rgba(116, 143, 152, 0.35);
+  background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23617781' stroke-width='1.6' fill='none' stroke-linecap='round'/%3E%3C/svg%3E") right 0.75rem center no-repeat;
+  font-family: Consolas, "Courier New", monospace;
+  font-size: 0.95rem;
+  font-weight: 700;
+  color: #1a2830;
+  cursor: pointer;
+  transition: border-color 0.15s, box-shadow 0.15s;
+}
+
+.delay_select:focus {
+  outline: none;
+  border-color: var(--pri);
+  box-shadow: 0 0 0 3px rgba(0, 136, 255, 0.15);
+}
+
+.delay_status_text {
+  font-size: 0.78rem;
+  color: var(--muted);
+  min-height: 1em;
+  text-align: right;
+}
+
 .admin-page .admin_quick_link_card p {
   color: #617781;
 }