working cube Closes wearscript#6

theonlyjames · Mar 24, 2014 · d119f90 · d119f90
1 parent d6e2f18
commit d119f90
Show file tree

Hide file tree

Showing 3 changed files with 21 additions and 9 deletions.
diff --git a/app/scripts/controllers/sensors.js b/app/scripts/controllers/sensors.js
@@ -7,13 +7,16 @@ angular.module('wearscriptPlaygroundApp')
 
       // NOTE(brandyn): All of this cube code should eventually be moved to a library or something
       this.cubeMatrix = function (values) {
-          var mat = this.remap_coordinate_system(this.getRotationMatrixFromVector(values), 1, 3);
-          $scope.cubeMatrix = this.remap_coordinate_system(this.transpose_matrix(mat), 3, 1).join(',')
+
+        var mat = this.remap_coordinate_system(this.getRotationMatrixFromVector(values), 1, 3);
+        mat = this.remap_coordinate_system(this.transpose_matrix(mat), 3, 1);
+
+          $scope.cubeMatrix = 
           $scope.cubeMatrixStyle = 
-            { 'transform': 'matrix3d(' + $scope.cubeMatrix + ')',
+            { 'transform': 'matrix3d(' + mat.join(',') + ')',
+              '-webkit-transform': 'matrix3d(' + mat.join(',') + ')',
               'transition-duration': '0s'
             };
-          //console.log('cUBEMAT',$scope.cubeMatrix)
       }
 
       this.getRotationMatrixFromVector = function (rotationVector) {
@@ -138,7 +141,7 @@ angular.module('wearscriptPlaygroundApp')
                   var values = sensorValues[key];
                   var value = values[values.length - 1];
                   var d = new Date(0);
-                  if (key === 'MPL Orientation') {
+                  if (key === 'MPL Rotation Vector') {
                       $scope.sensors[channel].cubeMatrixStyle = this.cubeMatrix(value[0]);
                   }
                   d.setUTCSeconds(value[1]);

diff --git a/app/styles/cube.less b/app/styles/cube.less
@@ -3,14 +3,15 @@
     height: 200px;
     position: relative;
     margin: 0 auto 40px;
-    border: 1px solid #CCC;
+    //border: 1px solid #CCC;
     -webkit-perspective: 1000px;
     -moz-perspective: 1000px;
     -o-perspective: 1000px;
     perspective: 1000px;
 }
 
 .cube {
+    margin-top:80px;
     width: 100%;
     height: 100%;
     position: absolute;
@@ -86,4 +87,4 @@
     -moz-transform: rotateX(  -90deg ) translateZ( 100px );
     -o-transform: rotateX(  -90deg ) translateZ( 100px );
     transform: rotateX(  -90deg ) translateZ( 100px );
-}
+}
diff --git a/app/views/sensors.html b/app/views/sensors.html
@@ -18,6 +18,14 @@ <h2>{{channel}}</h2>
       </tr>
     </tbody>
   </table>
-    <!-- TODO(brandyn):  use samples.cubeMatrixStyle with nganimate -->
-    <div class="ccontainer"><div class="cube" ng-style="samples.cubeMatrixStyle"><figure class="front">1</figure><figure class="back">2</figure><figure class="right">3</figure><figure class="left">4</figure><figure class="top">5</figure><figure class="bottom">6</figure></div>
+</div>
+<div class="ccontainer">
+  <div class="cube" data-ng-style="cubeMatrixStyle">
+    <figure class="front">1</figure>
+    <figure class="back">2</figure>
+    <figure class="right">3</figure>
+    <figure class="left">4</figure>
+    <figure class="top">5</figure>
+    <figure class="bottom">6</figure>
+  </div>
 </div>