css fixes and gestures

sensors/plot-sensors.js

@@ -82,159 +82,162 @@ var SensorFusion = function() {
 };
 
 var fusion = new SensorFusion();
-var gui = new dat.GUI();
-gui.add(fusion, 'kFilter').min(0).max(1).step(0.01).onChange(onKFilterChanged);
-gui.add(fusion, 'predictionTime').min(0).max(0.2).step(0.01).onChange(onPredictionTimeChanged);
-gui.add(fusion, 'axis', AXES).onChange(onAxisChanged);
-gui.add(fusion, 'isAccelerometer')
-gui.add(fusion, 'isGyroscope')
-gui.add(fusion, 'isFusion')
-gui.add(fusion, 'isPrediction')
 
-loop();
+var doGraph = function() {
+  var gui = new dat.GUI();
+  gui.add(fusion, 'kFilter').min(0).max(1).step(0.01).onChange(onKFilterChanged);
+  gui.add(fusion, 'predictionTime').min(0).max(0.2).step(0.01).onChange(onPredictionTimeChanged);
+  gui.add(fusion, 'axis', AXES).onChange(onAxisChanged);
+  gui.add(fusion, 'isAccelerometer')
+  gui.add(fusion, 'isGyroscope')
+  gui.add(fusion, 'isFusion')
+  gui.add(fusion, 'isPrediction')
 
-mathbox = mathBox({
-  plugins: ['core', 'cursor'],
-  camera: {
-    fov: 30,
-  },
-});
-three = mathbox.three;
+  loop();
 
-three.camera.position.set(0, 0, 10);
-three.renderer.setClearColor(new THREE.Color(0xFFFFFF), 1.0);
+  mathbox = mathBox({
+    plugins: ['core', 'cursor'],
+    camera: {
+      fov: 30,
+    },
+  });
+  three = mathbox.three;
 
-view = mathbox.set('focus', 6).cartesian({
-  range: [
-    [0, 1],
-    [-1, 1],
-    [-1, 1]
-  ],
-  scale: [1.5, 0.5, 1],
-});
+  three.camera.position.set(0, 0, 10);
+  three.renderer.setClearColor(new THREE.Color(0xFFFFFF), 1.0);
 
-// Setup the scene.
-view.scale({
-    axis: 2,
-    divide: 5,
-  })
-  .format({
-    expr: function(x) {
-      return x.toPrecision(1);
-    }
-  })
-  .label({
-    depth: .5,
-    zIndex: 1
+  view = mathbox.set('focus', 6).cartesian({
+    range: [
+      [0, 1],
+      [-1, 1],
+      [-1, 1]
+    ],
+    scale: [1.5, 0.5, 1],
   });
 
-view.grid({
-  divideX: 8,
-  divideY: 5,
-  width: 1,
-  opacity: 0.5,
-  zBias: -5,
-});
+  // Setup the scene.
+  view.scale({
+      axis: 2,
+      divide: 5,
+    })
+    .format({
+      expr: function(x) {
+        return x.toPrecision(1);
+      }
+    })
+    .label({
+      depth: .5,
+      zIndex: 1
+    });
 
-view.axis({
-  color: new THREE.Color(0x111111),
-  width: 5
-});
+  view.grid({
+    divideX: 8,
+    divideY: 5,
+    width: 1,
+    opacity: 0.5,
+    zBias: -5,
+  });
 
-view.array({
-  data: [
-    [1.02, 0, 0]
-  ],
-  channels: 1, // necessary
-  live: false,
-}).text({
-  data: ['t']
-}).label({
-  color: 0x000000,
-});
+  view.axis({
+    color: new THREE.Color(0x111111),
+    width: 5
+  });
+
+  view.array({
+    data: [
+      [1.02, 0, 0]
+    ],
+    channels: 1, // necessary
+    live: false,
+  }).text({
+    data: ['t']
+  }).label({
+    color: 0x000000,
+  });
 
 
-// Plot accelerometer.
-view.interval({
-  length: HISTORY_SIZE,
-  expr: function(emit, x, i, t) {
-    var accel = accelHistory.get(i);
-    if (accel) {
-      emit(x, accel[fusion.axis]);
-    }
-  },
-  items: 1,
-  channels: 2,
-});
+  // Plot accelerometer.
+  view.interval({
+    length: HISTORY_SIZE,
+    expr: function(emit, x, i, t) {
+      var accel = accelHistory.get(i);
+      if (accel) {
+        emit(x, accel[fusion.axis]);
+      }
+    },
+    items: 1,
+    channels: 2,
+  });
 
-view.line({
-  color: 0x30DD30,
-  width: 4,
-  size: 1,
-  start: false,
-  end: false,
-});
+  view.line({
+    color: 0x30DD30,
+    width: 4,
+    size: 1,
+    start: false,
+    end: false,
+  });
 
 
-// Plot gyroscope.
-view.interval({
-  length: HISTORY_SIZE,
-  expr: function(emit, x, i, t) {
-    var gyro = gyroHistory.get(i);
-    if (gyro) {
-      emit(x, gyro[fusion.axis]);
-    }
-  },
-  items: 1,
-  channels: 2,
-});
+  // Plot gyroscope.
+  view.interval({
+    length: HISTORY_SIZE,
+    expr: function(emit, x, i, t) {
+      var gyro = gyroHistory.get(i);
+      if (gyro) {
+        emit(x, gyro[fusion.axis]);
+      }
+    },
+    items: 1,
+    channels: 2,
+  });
 
-view.line({
-  color: 0x3090FF,
-  width: 4,
-  size: 1,
-  start: false,
-  end: false,
-});
+  view.line({
+    color: 0x3090FF,
+    width: 4,
+    size: 1,
+    start: false,
+    end: false,
+  });
 
-// Plot complementary filter output.
-view.interval({
-  length: HISTORY_SIZE,
-  expr: function(emit, x, i, t) {
-    var filter = filterHistory.get(i);
-    if (filter) {
-      emit(x, filter[fusion.axis]);
-    }
-  },
-  items: 1,
-  channels: 2,
-});
+  // Plot complementary filter output.
+  view.interval({
+    length: HISTORY_SIZE,
+    expr: function(emit, x, i, t) {
+      var filter = filterHistory.get(i);
+      if (filter) {
+        emit(x, filter[fusion.axis]);
+      }
+    },
+    items: 1,
+    channels: 2,
+  });
 
-view.line({
-  color: 0xFF9030,
-  width: 7,
-  size: 1,
-  start: false,
-  end: false,
-});
+  view.line({
+    color: 0xFF9030,
+    width: 7,
+    size: 1,
+    start: false,
+    end: false,
+  });
 
-// Plot predict out.
-view.interval({
-  length: HISTORY_SIZE,
-  expr: function(emit, x, i, t) {
-    var predict = predictHistory.get(i);
-    if (predict) {
-      emit(x, predict[fusion.axis]);
-    }
-  },
-  items: 1,
-  channels: 2,
-});
+  // Plot predict out.
+  view.interval({
+    length: HISTORY_SIZE,
+    expr: function(emit, x, i, t) {
+      var predict = predictHistory.get(i);
+      if (predict) {
+        emit(x, predict[fusion.axis]);
+      }
+    },
+    items: 1,
+    channels: 2,
+  });
 
-view.line({
-  color: 'red',
-  width: 4,
-  size: 1,
-  start: false,
-  end: false,
-});
+  view.line({
+    color: 'red',
+    width: 4,
+    size: 1,
+    start: false,
+    end: false,
+  });
+}

src/controller.js

@@ -1,48 +1,108 @@
 angular.module('controller', [])
-  .directive('myTouchstart', [function() {
-    return function(scope, element, attr) {
 
-      element.on('touchstart', function(event) {
-        scope.$apply(function() {
-          scope.$eval(attr.myTouchstart);
-        });
+.directive('myTouchstart', [function() {
+  return function(scope, element, attr) {
+
+    element.on('touchstart', function(event) {
+      scope.$apply(function() {
+        scope.$eval(attr.myTouchstart);
       });
-
-      element.on('mousedown', function(event) {
-        scope.$apply(function() {
-          scope.$eval(attr.myTouchstart);
-        });
-      });
-    };
-  }])
-  .directive('myTouchend', [function() {
-    return function(scope, element, attr) {
-
-      element.on('touchend', function(event) {
-        scope.$apply(function() {
-          scope.$eval(attr.myTouchend);
-        });
-      });
-
-      element.on('mouseup', function(event) {
-        scope.$apply(function() {
-          scope.$eval(attr.myTouchend);
-        });
-      });
-    };
-  }])
-  .controller('RootController', function($scope, $location) {
-    var socket = io.connect($location.$$host + ':' + $location.$$port);
-
-    socket.on('connect', function() {
-      socket.emit('command', 'Controller Connected');
     });
 
-    $scope.press = function(b, k) {
-      socket.emit("controller", { event: 'keydown', button: b, code: k });
-    };
+    element.on('mousedown', function(event) {
+      scope.$apply(function() {
+        scope.$eval(attr.myTouchstart);
+      });
+    });
+  };
+}])
 
-    $scope.release = function(b, k) {
-      socket.emit("controller", { event: 'keyup', button: b, code: k });
-    };
-  })
+.directive('myTouchend', [function() {
+  return function(scope, element, attr) {
+
+    element.on('touchend', function(event) {
+      scope.$apply(function() {
+        scope.$eval(attr.myTouchend);
+      });
+    });
+
+    element.on('mouseup', function(event) {
+      scope.$apply(function() {
+        scope.$eval(attr.myTouchend);
+      });
+    });
+  };
+}])
+
+/*
+Impromptu gesture testing
+
+From Prediction:
+  y > .5 = left
+  y < -.5 = right
+  z > .5 = forward
+*/
+.controller('RootController', function($scope, $location) {
+  var socket = io.connect($location.$$host + ':' + $location.$$port);
+  // var socket = io.connect('http://home.paradrop.org:32769/');
+
+  // Are we currently "turning"?
+  var isGestureTurningLeft = false;
+  var isGestureTurningRight = false;
+  var isGestureForward = false;
+
+  socket.on('connect', function() {
+    socket.emit('command', 'Controller Connected');
+  });
+
+  $scope.press = function(b, k) {
+    socket.emit("controller", { event: 'keydown', button: b, code: k });
+  };
+
+  $scope.release = function(b, k) {
+    socket.emit("controller", { event: 'keyup', button: b, code: k });
+  };
+
+  $scope.accel = 0;
+
+  // Main gesture recognition loop
+  setInterval(function() {
+    loop();
+    var prediction = predictHistory.get(predictHistory.length - 1);
+
+    if (!prediction)
+      return;
+
+    // Constant checks for recognizing gestures
+    var newGestureLeft = prediction.y > 0.3;
+    var newGestureRight = prediction.y < -0.3;
+    var newGestureForward = prediction.z > 0.5;
+
+    if (newGestureLeft && !isGestureTurningLeft)
+      $scope.press('ArrowLeft', 37);
+
+    if (!newGestureLeft && isGestureTurningLeft)
+      $scope.release('ArrowLeft', 37);
+
+    if (newGestureRight && !isGestureTurningRight)
+      $scope.press('ArrowRight', 39);
+
+    if (!newGestureRight && isGestureTurningRight)
+      $scope.release('ArrowRight', 39);
+
+    if (newGestureForward && !isGestureForward)
+      $scope.press('g', 71);
+
+    if (!newGestureForward && isGestureForward)
+      $scope.release('g', 71);
+
+    isGestureTurningLeft = newGestureLeft;
+    isGestureTurningRight = newGestureRight;
+    isGestureForward = newGestureForward;
+  }, 10);
+})
+
+// $scope.accel = predictHistory.get(predictHistory.length - 1);
+// console.log(predictHistory);
+// console.log($scope.accel);
+// $scope.$apply();

views/controller.html

@@ -5,7 +5,7 @@
   <title>Drop64 - Controller</title>
   <meta charset='utf-8' />
   <meta http-equiv="X-UA-Compatible" content="chrome=1" />
-  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <meta content='width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0' name='viewport' />
 
   <link rel="stylesheet" type="text/css" media="screen" href="/assets/controller.css">
   <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
@@ -20,13 +20,19 @@
   <script src="assets/dat.gui/dat.gui.js"></script>
   <script src='assets/ngTouchStart.min.js'></script>
 
+  <script src="assets/util.js"></script>
+  <script src="assets/complementary-filter.js"></script>
+  <script src="assets/plot-sensors.js"></script>
+
   <script type='text/javascript' src='assets/controller.js'></script>
 </head>
 
 <body ng-app="controller" ng-controller='RootController' id='main-content-wrap'>
+  <!-- {{ accel }} -->
+
   <figure id="nespad">
     <div class="cord"></div>
-    <!-- <div class="pane-wrapper"> -->
+
     <section class="pane-wrapper">
       <section class="dpad-pane">
         <div class="dpad-hole"></div>
@@ -39,8 +45,7 @@
         </div>
       </section>
     </section>
-    <!-- </div> -->
-    <!-- <div class="pane-wrapper"> -->
+
     <section class="menu-pane pane-wrapper">
       <div class="labels">
         <label class="select" for="select"> Z</label>
@@ -51,8 +56,7 @@
         <button class="button start" id="start" my-touchstart='press("Enter", 13)' my-touchend='release("Enter", 13)'>Start</button>
       </div>
     </section>
-    <!-- </div> -->
-    <!-- <div class="pane-wrapper"> -->
+
     <section class="action-pane pane-wrapper">
       <div class="logo nlogo">
         Nintendo
@@ -66,12 +70,8 @@
         </label>
       </div>
     </section>
-    <!-- </div> -->
   </figure>
 
-  <!-- <script src="assets/util.js"></script> -->
-  <!-- <script src="assets/complementary-filter.js"></script> -->
-  <!-- <script src="assets/plot-sensors.js"></script> -->
   <script type='text/javascript' src='assets/nes.js'></script>
 </body>