use nipplejs instead of virtualjoystick.js

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

@@ -95,56 +95,13 @@ if (haveEvents) {
 }
 
 // Virtual Joystick
-     var joystick = new VirtualJoystick({
-                           container: document.getElementById('controls'),
-                           mouseSupport: true,
-                           stationaryBase: true,
-                           baseX: 250,
-                           baseY: window.innerHeight-300,
-                           limitStickTravel: true,
-                           stickRadius: 120,
-                           strokeStyle: 'cyan'
-                         });
-
-      var joystick2 = new VirtualJoystick({
-                           container: document.getElementById('controls'),
-                           mouseSupport: true,
-                           stationaryBase: true,
-                           baseX: window.innerWidth-250,
-                           baseY: window.innerHeight-300,
-                           limitStickTravel: true,
-                           stickRadius: 120,
-                           strokeStyle: 'orange'
-                         });
-
-      joystick.addEventListener('touchStartValidation', function(event){
-        var touch	= event.changedTouches[0];
-        if( touch.pageX >= window.innerWidth/2 )	return false;
-        return true
-      });
-      joystick.addEventListener('mouseStartValidation', function(event){
-        if( event.clientX >= window.innerWidth/2 )	return false;
-        return true
-      });
-
-
-      joystick2.addEventListener('touchStartValidation', function(event){
-        var touch	= event.changedTouches[0];
-        if( touch.pageX < window.innerWidth/2 )	return false;
-        return true
-      });
-      joystick2.addEventListener('mouseStartValidation', function(event){
-        if( event.clientX < window.innerWidth/2 )	return false;
-        return true
-      });
+     var joystick = nipplejs.create({
+        zone: document.getElementById('controls'),
+        color: 'blue'
+    });
 /*
-      joystick2.addEventListener('touchStart', function(){
-        console.log('fire')
-      })
-*/
-
 setInterval(function(){
-    if (joystick && joystick2) {
+    if (joystick) {
       if (joystick._pressed === true || joystick2._pressed === true) {
         var dx = joystick.deltaX() / joystick._stickRadius;
         var dy = joystick.deltaY() / joystick._stickRadius;
@@ -154,8 +111,8 @@ setInterval(function(){
       }
     }
 }, 50);
-
+*/
 window.addEventListener("orientationchange", function(event) {
-  joystick._updatePositionOfContainer();
-  joystick2._updatePositionOfContainer();
+  //joystick._updatePositionOfContainer();
+  //joystick2._updatePositionOfContainer();
 });

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

@@ -76,6 +76,7 @@
 
     <script src="{{ url_for('static', filename='js/socket.io.js') }}"></script>
     <!--<script type="text/javascript" src="https://webrtc.github.io/adapter/adapter-latest.js"></script>-->
+    <script src="{{ url_for('static', filename='js/nipplejs.js') }}"></script>
 
     <script type="text/javascript">
       'use strict';
@@ -218,7 +219,6 @@ function getConnectionStats() {
 
     </script>
 
-    <script src="{{ url_for('frontend.virtualjoystick_js') }}"></script>
     <script src="{{ url_for('frontend.gamepad_js') }}"></script>
 
   </body>