GUI verbessert und Admin console eingebaut

ExoMy_Software-master/gui/admin.html

@@ -0,0 +1,204 @@
+<!DOCTYPE html>
+<html>
+
+<head>
+  <meta charset="utf-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover" />
+  <title>CUNO Admin</title>
+  <link rel="stylesheet" type="text/css" href="style.css">
+</head>
+
+<body class="admin-page">
+  <main>
+    <div class="admin_shell">
+      <section class="panel admin_panel">
+        <div class="panel_header">
+          <div class="pilot_brand">
+            <a class="pilot_logo_link" href="./index.html" aria-label="Zurück zur Steuerung">
+              <img class="pilot_logo" src="./Logo_Cuno.png" alt="CUNO Logo" />
+            </a>
+            <div>
+              <p class="eyebrow">Admin</p>
+              <h1>CUNO System</h1>
+            </div>
+          </div>
+          <p id="admin_status" class="status_badge">Lade...</p>
+        </div>
+
+        <p class="admin_copy">
+          Diese Seite bündelt die wichtigsten Systemfunktionen und Statuswerte des Raspberry Pi.
+        </p>
+
+        <div class="admin_content">
+          <div class="admin_section">
+            <div class="admin_section_header">
+              <p class="eyebrow">Aktionen und Status</p>
+            </div>
+            <div class="admin_action_row">
+              <div class="admin_actions">
+                <button class="button buttonWarm" onclick="runAdminAction('restart-camera')">Kameradienst neu starten</button>
+                <button class="button buttonDanger" onclick="runAdminAction('restart-container')">ExoMy-Container neu starten</button>
+                <button class="button buttonWarm" onclick="runAdminAction('reboot')">Raspberry Pi neu starten</button>
+                <button class="button buttonDanger" onclick="runAdminAction('shutdown')">Raspberry Pi herunterfahren</button>
+              </div>
+
+              <div class="service_compact">
+                <div class="service_compact_row">
+                  <span>cam</span>
+                  <strong id="service_camera" class="service_state">-</strong>
+                </div>
+                <div class="service_compact_row">
+                  <span>api</span>
+                  <strong id="service_admin_api" class="service_state">-</strong>
+                </div>
+                <div class="service_compact_row">
+                  <span>exo</span>
+                  <strong id="service_exomy" class="service_state">-</strong>
+                </div>
+              </div>
+            </div>
+          </div>
+
+          <div class="admin_section">
+            <div class="admin_section_header">
+              <p class="eyebrow">Systemstatus</p>
+            </div>
+            <div class="info_grid">
+              <div class="info_card">
+                <span class="info_label">WLAN-Status</span>
+                <strong id="info_wifi">-</strong>
+              </div>
+              <div class="info_card">
+                <span class="info_label">IP-Adressen</span>
+                <strong id="info_ips">-</strong>
+              </div>
+              <div class="info_card">
+                <span class="info_label">CPU-Temperatur</span>
+                <strong id="info_temp">-</strong>
+              </div>
+              <div class="info_card">
+                <span class="info_label">Uptime</span>
+                <strong id="info_uptime">-</strong>
+              </div>
+              <div class="info_card">
+                <span class="info_label">Freier Speicherplatz</span>
+                <strong id="info_disk">-</strong>
+              </div>
+            </div>
+          </div>
+        </div>
+
+        <a class="admin_back" href="./index.html">Zurück zur Steuerung</a>
+      </section>
+    </div>
+  </main>
+
+  <script type="text/javascript">
+    var adminApiBase = window.location.protocol + '//' + window.location.hostname + ':8082';
+
+    function setAdminStatus(text) {
+      var status = document.getElementById('admin_status');
+      if (status) {
+        status.innerHTML = text;
+      }
+    }
+
+    function setText(id, value) {
+      var node = document.getElementById(id);
+      if (node) {
+        node.textContent = value || '-';
+      }
+    }
+
+    function setServiceState(id, value) {
+      var node = document.getElementById(id);
+      if (!node) {
+        return;
+      }
+
+      node.textContent = value || '-';
+      node.classList.remove('state_active', 'state_inactive', 'state_unknown');
+
+      if (value === 'active' || value === 'running') {
+        node.classList.add('state_active');
+        return;
+      }
+
+      if (value === 'inactive' || value === 'failed' || value === 'exited') {
+        node.classList.add('state_inactive');
+        return;
+      }
+
+      node.classList.add('state_unknown');
+    }
+
+    function renderStatus(data) {
+      setAdminStatus(data.status || 'Bereit');
+
+      setText('info_ips', data.system && data.system.ips);
+      setText('info_wifi', data.system && data.system.wifi);
+      setText('info_temp', data.system && data.system.cpu_temperature);
+      setText('info_uptime', data.system && data.system.uptime);
+      setText('info_disk', data.system && data.system.disk_free);
+
+      setServiceState('service_camera', data.services && data.services.camera);
+      setServiceState('service_admin_api', data.services && data.services.admin_api);
+      setServiceState('service_exomy', data.services && data.services.exomy);
+    }
+
+    async function fetchStatus() {
+      try {
+        var response = await fetch(adminApiBase + '/api/status');
+        if (!response.ok) {
+          throw new Error('status ' + response.status);
+        }
+
+        var data = await response.json();
+        renderStatus(data);
+      } catch (error) {
+        console.error(error);
+        setAdminStatus('API nicht erreichbar');
+      }
+    }
+
+    async function runAdminAction(action) {
+      var labels = {
+        'restart-camera': 'Kameradienst jetzt wirklich neu starten?',
+        'restart-container': 'ExoMy-Container jetzt wirklich neu starten?',
+        'reboot': 'Raspberry Pi jetzt wirklich neu starten?',
+        'shutdown': 'Raspberry Pi jetzt wirklich herunterfahren?'
+      };
+
+      if (!window.confirm(labels[action] || 'Befehl ausführen?')) {
+        return;
+      }
+
+      setAdminStatus('Sende Befehl...');
+
+      try {
+        var response = await fetch(adminApiBase + '/api/' + action, {
+          method: 'POST'
+        });
+
+        if (!response.ok) {
+          throw new Error('status ' + response.status);
+        }
+
+        var data = await response.json();
+        setAdminStatus(data.status || 'Befehl gesendet');
+        window.setTimeout(fetchStatus, 2000);
+      } catch (error) {
+        console.error(error);
+        setAdminStatus('Fehler');
+        alert('Der Admin-Befehl konnte nicht ausgeführt werden.');
+      }
+    }
+
+    window.addEventListener('load', function () {
+      fetchStatus();
+      window.setInterval(fetchStatus, 10000);
+    });
+  </script>
+</body>
+
+</html>

ExoMy_Software-master/gui/index.html

@@ -3,35 +3,72 @@
 
 <head>
   <meta charset="utf-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover" />
 
-  <script type="text/javascript" src="http://static.robotwebtools.org/roslibjs/current/roslib.min.js"></script>
+  <script type="text/javascript" src="./vendor/roslib.min.js"></script>
   <script src="./node_modules/nipplejs/dist/nipplejs.js"></script>
   <script type="text/javascript" type="text/javascript">
     var publishImmidiately = true;
     var host_url = window.location.hostname;
     console.log(host_url);
     var watchdog_handle;
+    var ros = null;
+    var joy_listener = null;
 
-    var ros = new ROSLIB.Ros({
+    function setStatus(text) {
+      var status = document.getElementById("status");
+      if (status) {
+        status.innerHTML = text;
+      }
+    }
+
+    window.addEventListener('load', function () {
+      var video = document.getElementById('video_output');
+      if (video) {
+        video.src = '//' + host_url + ':8081/stream.mjpg';
+      }
+
+      if (typeof nipplejs === 'undefined') {
+        console.error('nipplejs not loaded');
+        setStatus('Joystick-Fehler');
+        return;
+      }
+
+      createJoystick();
+
+      if (typeof ROSLIB === 'undefined') {
+        console.error('ROSLIB not loaded');
+        setStatus('ROSLIB fehlt');
+        return;
+      }
+
+      ros = new ROSLIB.Ros({
         url: 'ws://' + host_url + ':9090'
       });
 
+      ros.on('connection', function () {
+        setStatus("Verbunden");
+      });
+
+      ros.on('error', function () {
+        setStatus("Fehler");
+      });
+
+      ros.on('close', function () {
+        setStatus("Getrennt");
+      });
+
+      joy_listener = new ROSLIB.Topic({
+        ros: ros,
+        name: "/joy",
+        messageType: 'sensor_msgs/Joy'
+      });
+    });
+
     // Initialize Axes and Buttons arrays
     var axes = [0, 0, 0, 0, 0, 0];
     var buttons = [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0];
 
-    ros.on('connection', function () {
-      document.getElementById("status").innerHTML = "Connected";
-    });
-
-    ros.on('error', function (error) {
-      document.getElementById("status").innerHTML = "Error";
-    });
-
-    ros.on('close', function () {
-      document.getElementById("status").innerHTML = "Closed";
-    });
-
     createJoystick = function () {
       var options = {
         zone: document.getElementById('joy_container'),
@@ -79,25 +116,14 @@
         console.log('End function called')
       });
     }
-    window.onload = function () {
-      createJoystick();
-      // Video output
-      stream_url = '//' + host_url + ':8080/stream?topic=/pi_cam/image_raw';
-      console.log(stream_url);
-      document.getElementById("video_output").src = stream_url;
-    }
-
-    joy_listener = new ROSLIB.Topic({
-      ros: ros,
-      name: "/joy",
-      messageType: 'sensor_msgs/Joy'
-    });
-
     joy_event = function () {
       var joy = new ROSLIB.Message({
         axes: axes,
         buttons: buttons
       });
+      if (!joy_listener) {
+        return;
+      }
       joy_listener.publish(joy);
       console.log(axes)
       console.log(buttons)
@@ -122,23 +148,55 @@
 <body>
   <main>
     <div class="wrapper">
-      <div class="left" id="left">
+      <section class="panel panel-video" id="middle">
-        <div class="joy_container" id="joy_container"></div>
+        <div class="modes_strip">
+          <div class="modes_strip_header">
+            <p class="eyebrow">Fahrmodi</p>
+          </div>
+          <div class="button_container">
+            <button class="button buttonY" onclick="button_clicked(3)">Crabbing</button>
+            <button class="button buttonX" onclick="button_clicked(0)">Spot Turn</button>
+            <button class="button buttonA" onclick="button_clicked(1)">Ackermann</button>
+            <button class="button buttonStart" onclick="button_clicked(9)">Motoren</button>
+          </div>
         </div>
 
-      <div class="middle" id="middle">
+        <div class="panel_header">
+          <div>
+            <p class="eyebrow">Livebild</p>
+            <h1>Kamera</h1>
+          </div>
+        </div>
+
+        <div class="image_frame">
           <div class="image_container">
-          <img id="video_output" style="object-fit:cover; width:100%;"></img>
+            <img id="video_output" alt="Kamerabild vom ExoMy" />
           </div>
         </div>
-      <div class="right" id="right">
+      </section>
-        <div class="button_container">
+
-          <button class="button buttonY" onclick="button_clicked(3)">CRABBING</button>
+      <section class="panel panel-control" id="right">
-          <button class="button buttonX" onclick="button_clicked(0)">SPOT TURN</button>
+        <div class="panel_header">
-          <button class="button buttonA" onclick="button_clicked(1)">ACKERMANN</button>
+          <div class="pilot_brand">
-          <button class="button buttonStart" onclick="button_clicked(9)">MOTORS</button>
+            <a class="pilot_logo_link" href="./admin.html" aria-label="Zur Admin-Seite">
+              <img class="pilot_logo" src="./Logo_Cuno.png" alt="CUNO Logo" />
+            </a>
+            <div>
+            <p class="eyebrow">Fahrsteuerung</p>
+            <h2>CUNO Pilot</h2>
             </div>
           </div>
+          <p id="status" class="status_badge">Verbinde...</p>
+        </div>
+
+        <div class="joy_shell">
+          <div class="joy_container" id="joy_container"></div>
+          <div class="joy_hint">
+            <span>Lenken</span>
+            <span>Vor / Zurück</span>
+          </div>
+        </div>
+      </section>
     </div>
   </main>
 

ExoMy_Software-master/gui/style.css

@@ -1,91 +1,676 @@
-header {
+:root {
-    background-color: #f1f1f1;
+  --bg: #f4efe4;
-    padding: 20px;
+  --bg-accent: #ddd3bd;
-    text-align: center;
+  --panel: rgba(255, 252, 245, 0.88);
-    position: relative;
+  --panel-strong: rgba(255, 250, 240, 0.96);
-  }
+  --line: rgba(70, 52, 28, 0.12);
-
+  --text: #201914;
-body {
+  --muted: #6f6256;
-    overflow: scroll;
+  --shadow: 0 18px 40px rgba(55, 38, 18, 0.12);
+  --radius-xl: 28px;
+  --radius-lg: 22px;
+  --radius-md: 18px;
+  --gap: clamp(0.85rem, 2vw, 1.4rem);
 }
 
+* {
+  box-sizing: border-box;
+}
+
+html,
+body {
+  margin: 0;
+  min-height: 100%;
+}
+
+body {
+  min-height: 100dvh;
+  overflow: hidden;
+  font-family: "Segoe UI", "Trebuchet MS", sans-serif;
+  color: var(--text);
+  background:
+    radial-gradient(circle at top left, rgba(255, 255, 255, 0.75), transparent 28%),
+    radial-gradient(circle at bottom right, rgba(193, 163, 107, 0.22), transparent 30%),
+    linear-gradient(135deg, var(--bg), var(--bg-accent));
+}
+
+main {
+  min-height: 100dvh;
+  padding: clamp(0.75rem, 2vw, 1.25rem);
+}
 
 .wrapper {
   display: grid;
-    grid-template-columns: 1fr 1fr 1fr;
+  grid-template-columns: minmax(32rem, 1.9fr) minmax(16rem, 0.92fr);
-    grid-template-rows: 1fr; 
+  grid-template-areas: "video control";
-    width: 100vw;
+  gap: var(--gap);
-    height: 100vh;
+  min-height: calc(100dvh - 2 * clamp(0.75rem, 2vw, 1.25rem));
-}
-.button {
-  border: none;
-  color: white;
-  text-decoration: none;
-  display: inline-block;
-  margin: 10px auto;
-  cursor: pointer;
-  width: 90%;
-  box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19);
-  font-size: 18px;
-  font-weight: bold;
-  border-radius: 8px;
 }
 
-.buttonY{
+.panel-video {
-    background-color: orange;
+  grid-area: video;
-    grid-row: 1;
-}
-.buttonX{
-    background-color: blue;
-    grid-row: 2;
-}
-.buttonA{
-    background-color: green;
-    grid-row: 3;
 }
 
-.buttonStart{
+.panel-control {
-    background-color: red;
+  grid-area: control;
-    grid-row: 4;
+}
-    width: 50%;
-    font-size: 12px;
 
+.panel {
+  min-height: 0;
+  display: flex;
+  flex-direction: column;
+  gap: var(--gap);
+  padding: clamp(1rem, 2vw, 1.5rem);
+  border: 1px solid var(--line);
+  border-radius: var(--radius-xl);
+  background: var(--panel);
+  box-shadow: var(--shadow);
+  backdrop-filter: blur(10px);
+}
+
+.panel_header {
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+  gap: 0.75rem;
+}
+
+.pilot_brand {
+  display: flex;
+  align-items: center;
+  gap: 0.85rem;
+}
+
+.pilot_logo_link {
+  display: inline-flex;
+  border-radius: 18px;
+  transition: transform 120ms ease, filter 120ms ease;
+}
+
+.pilot_logo_link:hover {
+  transform: translateY(-1px);
+  filter: brightness(1.03);
+}
+
+.pilot_logo {
+  width: clamp(3.25rem, 6vw, 4.5rem);
+  height: auto;
+  display: block;
+  object-fit: contain;
+  filter: drop-shadow(0 10px 18px rgba(55, 38, 18, 0.15));
+}
+
+.eyebrow {
+  margin: 0 0 0.35rem;
+  color: var(--muted);
+  font-size: 0.78rem;
+  font-weight: 700;
+  letter-spacing: 0.12em;
+  text-transform: uppercase;
+}
+
+h1,
+h2 {
+  margin: 0;
+  line-height: 1;
+  font-weight: 800;
+}
+
+h1 {
+  font-size: clamp(1.6rem, 3vw, 2.5rem);
+}
+
+h2 {
+  font-size: clamp(1.25rem, 2.3vw, 1.7rem);
+}
+
+.status_badge {
+  margin: 0;
+  padding: 0.55rem 0.9rem;
+  border-radius: 999px;
+  background: var(--panel-strong);
+  border: 1px solid var(--line);
+  color: var(--muted);
+  font-size: 0.92rem;
+  font-weight: 700;
+  white-space: nowrap;
+}
+
+.joy_shell {
+  position: relative;
+  flex: 1;
+  min-height: 17rem;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: clamp(0.85rem, 2.4vw, 1.5rem);
+  border-radius: var(--radius-lg);
+  background:
+    radial-gradient(circle at center, rgba(255, 255, 255, 0.95), rgba(242, 231, 211, 0.8) 55%, rgba(217, 199, 168, 0.55) 100%);
+  border: 1px solid rgba(104, 77, 35, 0.12);
+  overflow: hidden;
+}
+
+.joy_shell::before,
+.joy_shell::after {
+  content: "";
+  position: absolute;
+  inset: 10% 10%;
+  border-radius: 50%;
+  border: 1px dashed rgba(94, 66, 31, 0.14);
+  pointer-events: none;
+}
+
+.joy_shell::after {
+  inset: 24% 24%;
+}
+
+.joy_container {
+  position: relative;
+  width: min(100%, 20rem);
+  aspect-ratio: 1;
+  touch-action: none;
+}
+
+.joy_hint {
+  position: absolute;
+  inset: auto 1rem 1rem 1rem;
+  display: flex;
+  justify-content: space-between;
+  color: var(--muted);
+  font-size: 0.85rem;
+  font-weight: 600;
+}
+
+.image_frame {
+  flex: 1;
+  min-height: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.image_container {
+  position: relative;
+  width: 100%;
+  max-width: none;
+  aspect-ratio: 16 / 9;
+  overflow: hidden;
+  border-radius: var(--radius-lg);
+  background:
+    linear-gradient(145deg, rgba(28, 26, 23, 0.96), rgba(68, 53, 39, 0.96));
+  border: 1px solid rgba(255, 255, 255, 0.08);
+}
+
+.image_container::after {
+  content: "Live";
+  position: absolute;
+  top: 1rem;
+  left: 1rem;
+  padding: 0.35rem 0.7rem;
+  border-radius: 999px;
+  background: rgba(211, 63, 49, 0.92);
+  color: #fff;
+  font-size: 0.8rem;
+  font-weight: 700;
+  letter-spacing: 0.04em;
+}
+
+#video_output {
+  display: block;
+  width: 100%;
+  height: 100%;
+  object-fit: contain;
+  background: #111;
+}
+
+.modes_strip {
+  display: flex;
+  flex-direction: column;
+  gap: 0.75rem;
+}
+
+.modes_strip_header {
+  display: flex;
+  align-items: center;
+  justify-content: flex-start;
+}
+
+.modes_strip .eyebrow {
+  margin-bottom: 0;
 }
 
 .button_container {
-    position: absolute;
   display: grid;
-    left: 25%;
+  grid-template-columns: repeat(4, minmax(0, 1fr));
-    top: 25%;
+  grid-template-rows: 1fr;
-    height: 50%;
+  gap: 0.75rem;
-    width: 50%;
 }
-.image_container {
+
-    position: absolute;
+.button {
-    top: 20%;
-    height: 80%;
-    width: 80%;
-}
-.joy_container {
-    height: 100%;
   width: 100%;
+  min-height: 4rem;
+  border: 0;
+  border-radius: var(--radius-md);
+  color: #fff;
+  cursor: pointer;
+  font-size: clamp(1rem, 1.6vw, 1.15rem);
+  font-weight: 800;
+  letter-spacing: 0.02em;
+  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.16);
+  transition: transform 120ms ease, filter 120ms ease, box-shadow 120ms ease;
 }
 
-.left {
+.button:active {
-    position: relative;
+  transform: scale(0.98);
-    background: rgba(63, 58, 55, 0.1);
-    grid-column: 1;
-    height: 100%;
-}
-.middle {
-    position: relative;
-    background: rgba(45, 48, 45, 0.1);
-    grid-column: 2;
-    height: 100%;
 }
 
-.right {
+.button:hover {
-    position: relative;
+  filter: brightness(1.04);
-    background: rgba(63, 58, 55, 0.1);
+  box-shadow: 0 14px 28px rgba(0, 0, 0, 0.2);
-    grid-column: 3;
+}
+
+.buttonY {
+  background: linear-gradient(180deg, #f09a3c, #d47418);
+}
+
+.buttonX {
+  background: linear-gradient(180deg, #3271da, #184cb0);
+}
+
+.buttonA {
+  background: linear-gradient(180deg, #3aa864, #1d8745);
+}
+
+.buttonStart {
+  background: linear-gradient(180deg, #d4514a, #a92f2a);
+}
+
+.buttonWarm {
+  background: linear-gradient(180deg, #d68a2f, #af6115);
+}
+
+.buttonDanger {
+  background: linear-gradient(180deg, #c84d45, #8f2721);
+}
+
+.admin_shell {
+  min-height: calc(100dvh - 2 * clamp(0.75rem, 2vw, 1.25rem));
+  display: flex;
+  align-items: stretch;
+  justify-content: stretch;
+}
+
+.admin_panel {
+  width: 100%;
+  min-height: calc(100dvh - 2 * clamp(0.75rem, 2vw, 1.25rem));
+  display: grid;
+  grid-template-rows: auto auto auto 1fr auto;
+  gap: 0.9rem;
+  overflow: hidden;
+}
+
+.admin_copy {
+  margin: 0;
+  color: var(--muted);
+  font-size: 0.92rem;
+  line-height: 1.35;
+}
+
+.admin_section {
+  display: flex;
+  flex-direction: column;
+  gap: 0.55rem;
+}
+
+.admin_section_header {
+  display: flex;
+  align-items: center;
+  justify-content: flex-start;
+}
+
+.admin_actions {
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: 0.7rem;
+}
+
+.admin_action_row {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) 9rem;
+  gap: 0.7rem;
+  align-items: stretch;
+}
+
+.admin_actions .button {
+  min-height: 3.75rem;
+  font-size: 0.96rem;
+}
+
+.admin_back {
+  color: var(--muted);
+  text-decoration: none;
+  font-weight: 700;
+}
+
+.admin_back:hover {
+  text-decoration: underline;
+}
+
+.info_grid {
+  display: grid;
+  grid-template-columns: repeat(3, minmax(0, 1fr));
+  gap: 0.7rem;
+}
+
+.info_card {
+  display: flex;
+  flex-direction: column;
+  gap: 0.25rem;
+  min-height: 0;
+  padding: 0.8rem 0.9rem;
+  border-radius: var(--radius-md);
+  border: 1px solid var(--line);
+  background: var(--panel-strong);
+  justify-content: center;
+}
+
+.info_label {
+  color: var(--muted);
+  font-size: 0.74rem;
+  font-weight: 700;
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+}
+
+.info_card strong {
+  font-size: 0.95rem;
+  line-height: 1.2;
+}
+
+.service_compact {
+  display: flex;
+  flex-direction: column;
+  gap: 0.25rem;
+  padding: 0.7rem 0.8rem;
+  border-radius: var(--radius-md);
+  border: 1px solid var(--line);
+  background: var(--panel-strong);
+  justify-content: center;
+}
+
+.service_compact_row {
+  display: grid;
+  grid-template-columns: 2.2rem 1fr;
+  gap: 0.6rem;
+  align-items: center;
+  padding: 0.1rem 0;
+  font-family: Consolas, "Courier New", monospace;
+  font-size: 0.82rem;
+}
+
+.service_compact_row span {
+  color: var(--muted);
+  text-transform: lowercase;
+}
+
+.service_state {
+  text-transform: lowercase;
+  justify-self: end;
+}
+
+.state_active {
+  color: #1d8745;
+}
+
+.state_inactive {
+  color: #a92f2a;
+}
+
+.state_unknown {
+  color: #8a6b35;
+}
+
+.admin-page {
+  color: #d9e6e9;
+  background:
+    radial-gradient(circle at top left, rgba(58, 97, 104, 0.22), transparent 24%),
+    radial-gradient(circle at bottom right, rgba(214, 138, 47, 0.18), transparent 22%),
+    linear-gradient(145deg, #081116, #0c1b22 46%, #09141a);
+}
+
+.admin-page::before {
+  content: "";
+  position: fixed;
+  inset: 0;
+  pointer-events: none;
+  background:
+    linear-gradient(rgba(125, 165, 174, 0.08) 1px, transparent 1px),
+    linear-gradient(90deg, rgba(125, 165, 174, 0.08) 1px, transparent 1px);
+  background-size: 32px 32px;
+  mask-image: radial-gradient(circle at center, black 45%, transparent 100%);
+}
+
+.admin-page .admin_panel {
+  position: relative;
+  border-color: rgba(91, 127, 137, 0.45);
+  background:
+    linear-gradient(180deg, rgba(14, 31, 38, 0.95), rgba(11, 24, 30, 0.96)),
+    linear-gradient(120deg, rgba(255, 255, 255, 0.02), rgba(255, 255, 255, 0));
+  box-shadow:
+    inset 0 0 0 1px rgba(118, 166, 177, 0.08),
+    0 18px 45px rgba(0, 0, 0, 0.38);
+}
+
+.admin-page .admin_panel::before {
+  content: "";
+  position: absolute;
+  inset: 0.9rem;
+  border: 1px solid rgba(99, 143, 154, 0.18);
+  border-radius: 20px;
+  pointer-events: none;
+}
+
+.admin-page .eyebrow {
+  color: #7db0b7;
+  letter-spacing: 0.16em;
+}
+
+.admin-page h1,
+.admin-page h2,
+.admin-page strong,
+.admin-page .admin_back {
+  color: #eef7f8;
+}
+
+.admin-page .admin_copy {
+  color: #93acb2;
+}
+
+.admin-page .status_badge {
+  background: rgba(16, 38, 45, 0.92);
+  border-color: rgba(108, 166, 177, 0.34);
+  color: #9ed4dc;
+  font-family: Consolas, "Courier New", monospace;
+  font-size: 0.85rem;
+  letter-spacing: 0.04em;
+  text-transform: uppercase;
+}
+
+.admin-page .pilot_logo_link {
+  background: radial-gradient(circle at center, rgba(95, 140, 149, 0.16), transparent 70%);
+}
+
+.admin-page .info_card,
+.admin-page .service_compact {
+  border-color: rgba(99, 143, 154, 0.24);
+  background:
+    linear-gradient(180deg, rgba(14, 30, 36, 0.95), rgba(10, 22, 27, 0.98));
+  box-shadow: inset 0 0 0 1px rgba(115, 157, 167, 0.05);
+}
+
+.admin-page .info_label,
+.admin-page .service_compact_row span {
+  color: #76a5ac;
+}
+
+.admin-page .info_card strong {
+  font-family: Consolas, "Courier New", monospace;
+  font-size: 0.92rem;
+}
+
+.admin-page .button {
+  border: 1px solid rgba(143, 187, 197, 0.14);
+  box-shadow:
+    inset 0 1px 0 rgba(255, 255, 255, 0.08),
+    0 10px 24px rgba(0, 0, 0, 0.28);
+  text-transform: uppercase;
+  font-size: 0.88rem;
+  letter-spacing: 0.06em;
+}
+
+.admin-page .buttonWarm {
+  background: linear-gradient(180deg, #d18a2d, #8b5412);
+}
+
+.admin-page .buttonDanger {
+  background: linear-gradient(180deg, #b44942, #711f1b);
+}
+
+.admin-page .admin_back {
+  font-family: Consolas, "Courier New", monospace;
+  font-size: 0.9rem;
+  letter-spacing: 0.04em;
+}
+
+@media (max-width: 1100px) {
+  body {
+    overflow-y: auto;
+  }
+
+  .wrapper {
+    grid-template-columns: 1fr 1fr;
+    grid-template-areas:
+      "video video"
+      "control control";
+    min-height: auto;
+  }
+
+  .button_container {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+    grid-template-rows: repeat(2, minmax(4.75rem, 1fr));
+  }
+
+  .admin_action_row {
+    grid-template-columns: 1fr;
+  }
+
+  .admin_actions {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+  }
+
+  .info_grid {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+  }
+
+  .button {
+    min-height: 5.25rem;
+  }
+}
+
+@media (max-width: 760px) {
+  body {
+    overflow-y: auto;
+  }
+
+  main {
+    padding: 0.75rem;
+  }
+
+  .wrapper {
+    grid-template-columns: 1fr;
+    min-height: auto;
+    grid-template-areas:
+      "video"
+      "control";
+  }
+
+  .panel {
+    min-height: auto;
+    padding: 1rem;
+    border-radius: 22px;
+  }
+
+  .panel_header {
+    align-items: flex-start;
+    flex-direction: column;
+  }
+
+  .pilot_brand {
+    gap: 0.7rem;
+  }
+
+  .status_badge {
+    align-self: flex-start;
+  }
+
+  .joy_shell,
+  .image_container {
+    min-height: 15rem;
+  }
+
+  .joy_container {
+    width: min(100%, 18rem);
+  }
+
+  .button_container {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+    grid-template-rows: repeat(2, minmax(4.25rem, 1fr));
+  }
+
+  .info_grid {
+    grid-template-columns: 1fr;
+  }
+
+  .service_compact_row {
+    font-size: 0.85rem;
+  }
+
+  .admin_panel {
+    min-height: auto;
+    display: flex;
+    overflow: visible;
+  }
+
+  .admin_actions {
+    grid-template-columns: 1fr;
+  }
+}
+
+@media (max-height: 760px) and (min-width: 761px) {
+  .wrapper {
+    min-height: calc(100dvh - 2 * clamp(0.75rem, 2vw, 1.25rem));
+  }
+
+  .joy_shell,
+  .image_container {
+    min-height: 14rem;
+  }
+
+  .admin_panel {
+    gap: 0.7rem;
+  }
+
+  .admin_copy {
+    font-size: 0.86rem;
+  }
+
+  .admin_actions .button {
+    min-height: 3.35rem;
+    font-size: 0.9rem;
+  }
+
+  .info_card {
+    padding: 0.7rem 0.8rem;
+  }
 }

ExoMy_Software-master/scripts/exomy-admin-api.service

@@ -0,0 +1,13 @@
+[Unit]
+Description=ExoMy Admin API
+After=network-online.target
+Wants=network-online.target
+
+[Service]
+Type=simple
+ExecStart=/usr/bin/python3 /home/pi/ExoMy_Software/scripts/exomy_admin_api.py
+Restart=always
+RestartSec=2
+
+[Install]
+WantedBy=multi-user.target

ExoMy_Software-master/scripts/exomy_admin_api.py

@@ -0,0 +1,194 @@
+#!/usr/bin/env python3
+import http.server
+import json
+import shutil
+import socketserver
+import subprocess
+import time
+
+PORT = 8082
+EXOMY_CONTAINER = 'exomy_autostart'
+
+
+class ReusableThreadingTCPServer(socketserver.ThreadingTCPServer):
+    allow_reuse_address = True
+
+
+def run_command(command):
+    result = subprocess.run(command, capture_output=True, text=True, check=False)
+    return result.stdout.strip(), result.stderr.strip(), result.returncode
+
+
+def read_cpu_temperature():
+    try:
+        with open('/sys/class/thermal/thermal_zone0/temp', 'r', encoding='utf-8') as handle:
+            raw_value = handle.read().strip()
+        return f'{int(raw_value) / 1000:.1f} °C'
+    except (FileNotFoundError, ValueError):
+        return 'unbekannt'
+
+
+def format_uptime():
+    try:
+        with open('/proc/uptime', 'r', encoding='utf-8') as handle:
+            uptime_seconds = int(float(handle.read().split()[0]))
+    except (FileNotFoundError, ValueError, IndexError):
+        return 'unbekannt'
+
+    days, remainder = divmod(uptime_seconds, 86400)
+    hours, remainder = divmod(remainder, 3600)
+    minutes, _ = divmod(remainder, 60)
+
+    parts = []
+    if days:
+        parts.append(f'{days}d')
+    if days or hours:
+        parts.append(f'{hours}h')
+    parts.append(f'{minutes}m')
+    return ' '.join(parts)
+
+
+def format_disk_free():
+    usage = shutil.disk_usage('/')
+    free_gb = usage.free / (1024 ** 3)
+    total_gb = usage.total / (1024 ** 3)
+    return f'{free_gb:.1f} GB frei / {total_gb:.1f} GB'
+
+
+def get_ip_addresses():
+    stdout, _, returncode = run_command(['hostname', '-I'])
+    if returncode != 0 or not stdout:
+        return 'unbekannt'
+    ips = [item for item in stdout.split() if item]
+    return ', '.join(ips) if ips else 'unbekannt'
+
+
+def get_wifi_status():
+    stdout, _, returncode = run_command(['nmcli', '-t', '-f', 'DEVICE,STATE,CONNECTION', 'device'])
+    if returncode != 0 or not stdout:
+        return 'unbekannt'
+
+    for line in stdout.splitlines():
+        parts = line.split(':', 2)
+        if len(parts) != 3:
+            continue
+        device, state, connection = parts
+        if device == 'wlan0':
+            if state == 'connected':
+                return f'verbunden: {connection}'
+            return state
+
+    return 'kein wlan0'
+
+
+def get_systemd_state(service_name):
+    stdout, _, returncode = run_command(['systemctl', 'is-active', service_name])
+    if returncode == 0 and stdout:
+        return stdout
+    return stdout or 'unknown'
+
+
+def get_container_state(container_name):
+    stdout, _, returncode = run_command(['docker', 'inspect', '-f', '{{.State.Status}}', container_name])
+    if returncode == 0 and stdout:
+        return stdout
+    return 'unknown'
+
+
+def collect_status():
+    return {
+        'status': 'Bereit',
+        'system': {
+            'wifi': get_wifi_status(),
+            'ips': get_ip_addresses(),
+            'cpu_temperature': read_cpu_temperature(),
+            'uptime': format_uptime(),
+            'disk_free': format_disk_free(),
+        },
+        'services': {
+            'camera': get_systemd_state('exomy-camera-stream.service'),
+            'admin_api': get_systemd_state('exomy-admin-api.service'),
+            'exomy': get_container_state(EXOMY_CONTAINER),
+        }
+    }
+
+
+def restart_camera_service():
+    subprocess.Popen(['systemctl', 'restart', 'exomy-camera-stream.service'])
+
+
+def restart_exomy_container():
+    subprocess.Popen(['docker', 'restart', EXOMY_CONTAINER])
+
+
+def reboot_raspberry_pi():
+    subprocess.Popen(['systemctl', 'reboot'])
+
+
+def shutdown_raspberry_pi():
+    subprocess.Popen(['systemctl', 'poweroff'])
+
+
+class Handler(http.server.BaseHTTPRequestHandler):
+    def end_headers(self):
+        self.send_header('Access-Control-Allow-Origin', '*')
+        self.send_header('Access-Control-Allow-Methods', 'GET, POST, OPTIONS')
+        self.send_header('Access-Control-Allow-Headers', 'Content-Type')
+        super().end_headers()
+
+    def write_json(self, status_code, payload):
+        body = json.dumps(payload).encode('utf-8')
+        self.send_response(status_code)
+        self.send_header('Content-Type', 'application/json; charset=utf-8')
+        self.send_header('Content-Length', str(len(body)))
+        self.end_headers()
+        self.wfile.write(body)
+
+    def do_OPTIONS(self):
+        self.send_response(204)
+        self.end_headers()
+
+    def do_GET(self):
+        if self.path == '/api/status':
+            self.write_json(200, collect_status())
+            return
+        self.write_json(404, {'status': 'Unbekannt'})
+
+    def do_POST(self):
+        actions = {
+            '/api/restart-camera': {
+                'handler': restart_camera_service,
+                'status': 'Kameradienst wird neu gestartet'
+            },
+            '/api/restart-container': {
+                'handler': restart_exomy_container,
+                'status': 'ExoMy-Container wird neu gestartet'
+            },
+            '/api/reboot': {
+                'handler': reboot_raspberry_pi,
+                'status': 'Raspberry Pi wird neu gestartet'
+            },
+            '/api/shutdown': {
+                'handler': shutdown_raspberry_pi,
+                'status': 'Raspberry Pi wird heruntergefahren'
+            }
+        }
+
+        action = actions.get(self.path)
+        if action is None:
+            self.write_json(404, {'status': 'Unbekannt'})
+            return
+
+        self.write_json(202, {'status': action['status']})
+        self.wfile.flush()
+        time.sleep(0.1)
+        action['handler']()
+
+    def log_message(self, fmt, *args):
+        return
+
+
+if __name__ == '__main__':
+    with ReusableThreadingTCPServer(('0.0.0.0', PORT), Handler) as server:
+        server.daemon_threads = True
+        server.serve_forever()

ExoMy_Software-master/scripts/libcamera_mjpeg_server.py

@@ -0,0 +1,132 @@
+#!/usr/bin/env python3
+import http.server
+import socketserver
+import subprocess
+import threading
+import time
+
+BOUNDARY = b'--frame'
+LATEST_JPEG = None
+LATEST_LOCK = threading.Lock()
+
+WIDTH = 1280
+HEIGHT = 720
+FPS = 10
+PORT = 8081
+
+
+def camera_reader():
+    global LATEST_JPEG
+    cmd = [
+        'rpicam-vid',
+        '--timeout', '0',
+        '--nopreview',
+        '--width', str(WIDTH),
+        '--height', str(HEIGHT),
+        '--framerate', str(FPS),
+        '--codec', 'mjpeg',
+        '-o', '-',
+    ]
+
+    while True:
+        proc = subprocess.Popen(cmd, stdout=subprocess.PIPE, stderr=subprocess.DEVNULL, bufsize=0)
+        buffer = bytearray()
+        try:
+            while True:
+                chunk = proc.stdout.read(4096)
+                if not chunk:
+                    break
+                buffer.extend(chunk)
+
+                while True:
+                    start = buffer.find(b'\xff\xd8')
+                    if start == -1:
+                        if len(buffer) > 1024 * 1024:
+                            del buffer[:-2]
+                        break
+                    end = buffer.find(b'\xff\xd9', start + 2)
+                    if end == -1:
+                        if start > 0:
+                            del buffer[:start]
+                        break
+
+                    jpeg = bytes(buffer[start:end + 2])
+                    del buffer[:end + 2]
+                    with LATEST_LOCK:
+                        LATEST_JPEG = jpeg
+        finally:
+            proc.kill()
+            proc.wait()
+            time.sleep(1)
+
+
+class ReusableThreadingTCPServer(socketserver.ThreadingTCPServer):
+    allow_reuse_address = True
+
+
+class Handler(http.server.BaseHTTPRequestHandler):
+    def do_HEAD(self):
+        if self.path in ('/', '/index.html'):
+            self.send_response(200)
+            self.send_header('Content-Type', 'text/html; charset=utf-8')
+            self.end_headers()
+            return
+
+        if self.path == '/stream.mjpg':
+            self.send_response(200)
+            self.send_header('Age', '0')
+            self.send_header('Cache-Control', 'no-cache, private')
+            self.send_header('Pragma', 'no-cache')
+            self.send_header('Content-Type', 'multipart/x-mixed-replace; boundary=frame')
+            self.end_headers()
+            return
+
+        self.send_error(404)
+
+    def do_GET(self):
+        if self.path in ('/', '/index.html'):
+            body = b'<html><body><img src="/stream.mjpg" /></body></html>'
+            self.send_response(200)
+            self.send_header('Content-Type', 'text/html; charset=utf-8')
+            self.send_header('Content-Length', str(len(body)))
+            self.end_headers()
+            self.wfile.write(body)
+            return
+
+        if self.path != '/stream.mjpg':
+            self.send_error(404)
+            return
+
+        self.send_response(200)
+        self.send_header('Age', '0')
+        self.send_header('Cache-Control', 'no-cache, private')
+        self.send_header('Pragma', 'no-cache')
+        self.send_header('Content-Type', 'multipart/x-mixed-replace; boundary=frame')
+        self.end_headers()
+
+        while True:
+            with LATEST_LOCK:
+                frame = LATEST_JPEG
+            if frame is None:
+                time.sleep(0.1)
+                continue
+            try:
+                self.wfile.write(BOUNDARY + b'\r\n')
+                self.wfile.write(b'Content-Type: image/jpeg\r\n')
+                self.wfile.write(f'Content-Length: {len(frame)}\r\n\r\n'.encode('ascii'))
+                self.wfile.write(frame)
+                self.wfile.write(b'\r\n')
+                self.wfile.flush()
+                time.sleep(1.0 / FPS)
+            except (BrokenPipeError, ConnectionResetError):
+                break
+
+    def log_message(self, fmt, *args):
+        return
+
+
+if __name__ == '__main__':
+    threading.Thread(target=camera_reader, daemon=True).start()
+    with ReusableThreadingTCPServer(('0.0.0.0', PORT), Handler) as server:
+        server.daemon_threads = True
+        server.serve_forever()