Added compass test thing to home screen

scripts/build

@@ -11,5 +11,8 @@ npm install
 echo ">> Building Application source..."
 npm run build
 
-echo ">> Installing cordova plugins..."
+echo ">> Installing cordova platforms..."
 cordova platform add android
+
+echo ">> Installing cordova plugins..."
+cordova plugin add cordova-plugin-device-orientation

src/index.html

@@ -13,6 +13,10 @@
     <div class="container jumbotron header">
       <h1 class="animated rubberBand">Hi There</h1>
     </div>
+    <div class="container">
+      <img src="img/compass.png" id="compass"/>
+      <h1 id="heading"></h1>
+    </div>
     <footer>
       <a class="btn btn-success btn-lg">Continue</a>
     </footer>

src/js/app.js

@@ -0,0 +1,27 @@
+jQuery.fn.rotate = function(degrees) {
+  $(this).css({
+    '-webkit-transform' : 'rotate('+ degrees +'deg)',
+    '-moz-transform' : 'rotate('+ degrees +'deg)',
+    '-ms-transform' : 'rotate('+ degrees +'deg)',
+    'transform' : 'rotate('+ degrees +'deg)'
+  });
+  return $(this);
+};
+
+
+document.addEventListener("deviceready", function () {
+  function onSuccess(heading) {
+    $('#compass').rotate(-heading.magneticHeading.toFixed(0));
+    $('#heading')[0].innerHTML = -heading.magneticHeading.toFixed(0);
+  };
+
+  function onError(compassError) {
+    alert('Compass error: ' + compassError.code);
+  };
+
+  const options = {
+    frequency: 1
+  };
+
+var watchID = navigator.compass.watchHeading(onSuccess, onError, options);
+}, false);

src/less/style.less

@@ -32,6 +32,10 @@ body {
       font-size: 45px;
     }
   }
+  #compass {
+    margin: 0 auto;
+    width: 59vw;
+  }
 }
 footer {
   position: absolute;