GUI verbessert und Admin console eingebaut

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({
-      url: 'ws://' + host_url + ':9090'
+    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">
-        <div class="joy_container" id="joy_container"></div>
-      </div>
+      <section class="panel panel-video" id="middle">
+        <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="image_container">
-          <img id="video_output" style="object-fit:cover; width:100%;"></img>
+        <div class="panel_header">
+          <div>
+            <p class="eyebrow">Livebild</p>
+            <h1>Kamera</h1>
+          </div>
         </div>
-      </div>
-      <div class="right" id="right">
-        <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)">MOTORS</button>
+
+        <div class="image_frame">
+          <div class="image_container">
+            <img id="video_output" alt="Kamerabild vom ExoMy" />
+          </div>
         </div>
-      </div>
+      </section>
+
+      <section class="panel panel-control" id="right">
+        <div class="panel_header">
+          <div class="pilot_brand">
+            <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>