From af53d274bff7cf173e76410aa069f8d2cc12cc2d Mon Sep 17 00:00:00 2001
From: Max Lynch <max@drifty.com>
Date: Mon, 14 Sep 2015 12:20:20 -0500
Subject: [PATCH] Orientation demo

---
 demos/native/index.ts                         |  4 ++-
 demos/native/pages/device-orientation.ts      | 30 +++++++++++++++++++
 .../device-orientation/device-orientation.ts  | 14 +++++----
 3 files changed, 41 insertions(+), 7 deletions(-)
 create mode 100644 demos/native/pages/device-orientation.ts

diff --git a/demos/native/index.ts b/demos/native/index.ts
index bc81932f4e..4540eec0b6 100644
--- a/demos/native/index.ts
+++ b/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},
diff --git a/demos/native/pages/device-orientation.ts b/demos/native/pages/device-orientation.ts
new file mode 100644
index 0000000000..cb611ccbac
--- /dev/null
+++ b/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)';
+    });
+  }
+}
diff --git a/ionic/native/device-orientation/device-orientation.ts b/ionic/native/device-orientation/device-orientation.ts
index e5bc0c11a6..279a5b9f8b 100644
--- a/ionic/native/device-orientation/device-orientation.ts
+++ b/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);