ExoMy_Cuno/ExoMy_Software-master/gui/index.html

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover" />

  <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;

    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];

    createJoystick = function () {
      var options = {
        zone: document.getElementById('joy_container'),
        threshold: 0.1,
        position: { left: '50%', top: '50%' },
        mode: 'static',
        size: 150,
        color: 'black'
      };
      manager = nipplejs.create(options);

      self.manager.on('start', function (event, nipple) {
      });

      self.manager.on('move', function (event, nipple) {
        var max_distance = 75;
        var x = -Math.cos(nipple.angle.radian) * nipple.distance / max_distance;
        var y = Math.sin(nipple.angle.radian) * nipple.distance / max_distance;
        axes = [x, y, 0, 0, 0, 0]

        // nipplejs is triggering events when joystick moves each pixel
        // we need delay between consecutive messege publications to 
        // prevent system from being flooded by messages
        // events triggered earlier than 50ms after last publication will be dropped 

        if (publishImmidiately) {
          publishImmidiately = false;
          joy_event()
          window.clearInterval(watchdog_handle)
          watchdog_handle = window.setInterval(joy_event, 50)

          setTimeout(function () {
            publishImmidiately = true;
          }, 50);
        }
        //joy_event()
        //window.clearInterval()
        //window.setInterval(joy_event, 500)
      });

      self.manager.on('end', function () {
        window.clearInterval(watchdog_handle)
        axes = [0, 0, 0, 0, 0, 0]
        joy_event()
        console.log('End function called')
      });
    }
    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)
    }

     button_clicked = function (button_index) {
      // The desired button index can be found by listening to the /joy ros message
      // or by checking in the wiki for the gamepad mapping.
      // Set axes to 0 to prevent driving during mode change.
      axes = [0, 0, 0, 0, 0, 0];
      buttons[button_index] = 1;
      joy_event();
      // After the command is sent set the index back to 0
      buttons[button_index] = 0;
    }

  </script>
  <link rel="stylesheet" type="text/css" href="style.css">

</head>

<body>
  <main>
    <div class="wrapper">
      <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="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" alt="Kamerabild vom ExoMy" />
          </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>


</html>