Orientation demo

demos/native/index.ts

@@ -10,6 +10,7 @@ import {BatteryPage} from 'pages/battery';
 import {ContactsPage} from 'pages/contacts';
 import {DevicePage} from 'pages/device';
 import {DeviceMotionPage} from 'pages/device-motion';
+import {DeviceOrientationPage} from 'pages/device-orientation';
 import {GeolocationPage} from 'pages/geolocation';
 import {VibrationPage} from 'pages/vibration';
 
@@ -21,11 +22,12 @@ class MyApp {
     this.app = app;
 
     this.firstPage = CameraPage;
-    console.log('First page', CameraPage);
+    
     this.plugins = [
       {title: 'Camera', page: CameraPage},
       {title: 'Device', page: DevicePage},
       {title: 'Device Motion', page: DeviceMotionPage},
+      {title: 'Device Orientation', page: DeviceOrientationPage},
       {title: 'Geolocation', page: GeolocationPage},
       {title: 'Contacts', page: ContactsPage},
       {title: 'Battery', page: BatteryPage},

demos/native/pages/device-orientation.ts

@@ -0,0 +1,30 @@
+import {IonicView, DeviceOrientation} from 'ionic/ionic';
+
+
+@IonicView({
+  template: `
+  <ion-navbar *navbar>
+    <a menu-toggle>
+      <icon menu></icon>
+    </a>
+    <ion-title>Device Orientation</ion-title>
+  </ion-navbar>
+  <ion-content class="padding">
+    <div style="text-align: center">
+      <img src="http://ionic-io-assets.s3.amazonaws.com/ionitron-avatar.png" [ng-style]="imageStyle">
+    </div>
+  </ion-content>
+  `
+})
+export class DeviceOrientationPage {
+
+  constructor() {
+    this.imageStyle = {
+      'max-width': '100%'
+    }
+
+    DeviceOrientation.watchHeading().source.subscribe((heading) => {
+      this.imageStyle['-webkit-transform'] = 'rotate(' + heading.magneticHeading + 'deg)';
+    });
+  }
+}

ionic/native/device-orientation/device-orientation.ts

@@ -12,14 +12,17 @@ import {NativePlugin} from '../plugin';
 })
 export class DeviceOrientation {
   static _wrap(result) {
-    return result;
+    return util.extend({
+      alpha: result.magneticHeading,
+      magneticHeading: result.webkitCompassHeading || result.alpha
+    }, result);
   }
 
-  static getCurrentAcceleration() {
+  static getCurrentHeading() {
     return new Promise((resolve, reject) => {
       if(window.DeviceOrientationEvent) {
         var fnCb = function fnCb(eventData) {
-          resolve(eventData);
+          resolve(DeviceOrientation._wrap(eventData));
           window.removeEventListener('deviceorientation', fnCb);
         }
         window.addEventListener('deviceorientation', fnCb);
@@ -44,8 +47,7 @@ export class DeviceOrientation {
       let source = Rx.Observable.create((observer) => {
 
         var fnCb = function fnCb(eventData) {
-          console.log(eventData);
-          observer.onNext(eventData);
+          observer.onNext(DeviceOrientation._wrap(eventData));
         };
 
         window.addEventListener('deviceorientation', fnCb);
@@ -65,7 +67,7 @@ export class DeviceOrientation {
       let source = Rx.Observable.create((observer) => {
 
         watchID = navigator.compass.watchHeading(function (result) {
-          observer.onNext(result);
+          observer.onNext(DeviceOrientation._wrap(result));
         }, function (err) {
           observer.onError(err, observer);
         }, options);