enable joysticks

raspberry/roberto/views/frontend/templates/gamepad.js

@@ -94,9 +94,17 @@ if (haveEvents) {
   setInterval(scangamepads, 500);
 }
 
+var joystick_axes = {
+  x1: 0,
+  y1: 0,
+  x2: 0,
+  y2: 0,
+  moved: false
+}
+
 // Virtual Joystick
      var joystick = nipplejs.create({
-        zone: document.getElementById('controls'),
+        zone: document.getElementById('controls_l'),
         mode: 'static',
         //catchDistance: 150,
         position: {left: '50%', top: '50%'},
@@ -104,21 +112,33 @@ if (haveEvents) {
     });
 
     joystick.on('move', function(evt, data) {
-      console.log(data.vector);
+      joystick_axes.x1 = data.vector.x;
+      joystick_axes.y1 = data.vector.y;
+      joystick_axes.moved = true;
     });
-/*
+
+     var joystick2 = nipplejs.create({
+        zone: document.getElementById('controls_r'),
+        mode: 'static',
+        //catchDistance: 150,
+        position: {left: '50%', top: '50%'},
+        color: 'red'
+    });
+
+    joystick2.on('move', function(evt, data) {
+      joystick_axes.x2 = data.vector.x;
+      joystick_axes.y2 = data.vector.y;
+      joystick_axes.moved = true;
+    });
+
+
 setInterval(function(){
-    if (joystick) {
-      if (joystick._pressed === true || joystick2._pressed === true) {
-        var dx = joystick.deltaX() / joystick._stickRadius;
-        var dy = joystick.deltaY() / joystick._stickRadius;
-        var dx2 = joystick2.deltaX() / joystick2._stickRadius;
-        var dy2 = joystick2.deltaY() / joystick2._stickRadius;
-        gp_socket.emit('axes', {0: dx, 1: dy, 3: dx2, 4: dy2});
-      }
+    if (joystick_axes.moved) {
+        gp_socket.emit('axes', {0: joystick_axes.x1, 1: joystick_axes.y1, 3: joystick_axes.x2, 4: joystick_axes.y2});
+        joystick_axes.moved = false;
     }
 }, 50);
-*/
+
 window.addEventListener("orientationchange", function(event) {
   //joystick._updatePositionOfContainer();
   //joystick2._updatePositionOfContainer();

raspberry/roberto/views/frontend/templates/index.html

@@ -19,12 +19,19 @@
         width: 100%;
         height: 100%;
       }
-      #controls {
+      #controls_l {
         position: absolute;
         bottom: 40px;
         left: 0;
+        width: 50%;
+        height: 33%;
+        pointer-events: all;
+      }
+      #controls_r {
+        position: absolute;
+        bottom: 40px;
         right: 0;
-        width: 100%;
+        width: 50%;
         height: 33%;
         pointer-events: all;
       }
@@ -58,7 +65,8 @@
     <div id="video">
       <video id="stream" autoplay playsinline muted controls>Your browser does not support video</video>
       <canvas id="textoverlay"></canvas>
-      <div id="controls"></div>
+      <div id="controls_l"></div>
+      <div id="controls_r"></div>
     </div>
     <form id="message" method="POST" action='#'>
       <input type="text" name="message_data" id="message_data" placeholder="Message">