Merge pull request #3 from truenorth/transformation-matrix

Transformation matrix

README.md

@@ -1,5 +1,8 @@
 # Ember-orientation [![Build Status](https://travis-ci.org/truenorth/ember-orientation.svg?branch=master)](https://travis-ci.org/truenorth/ember-orientation) [![Code Climate](https://codeclimate.com/github/truenorth/ember-orientation/badges/gpa.svg)](https://codeclimate.com/github/truenorth/ember-orientation) [![npm version](https://badge.fury.io/js/ember-orientation.svg)](http://badge.fury.io/js/ember-orientation)
 
+![Device Orientation Angles](http://i60.tinypic.com/k1ri0z.jpg)
+Image Source: Opera developer docs
+
 Effortlessly respond to device orientation events and changes 
 
 ### Use
@@ -34,6 +37,12 @@ let MyComponent = Ember.Component.extend({
 });
 ```
 
+The service also has two methods to make the tilt data more easily consumable
+
+* `transformationMatrix` - a 9-length transformation matrix calculated from alpha, beta and gamma as follows:
+![Rotation Matrix](https://dev.opera.com/articles/w3c-device-orientation-usage/equation13a.png)
+* normalVector - a 3-length unit vector normal to the screen of the device.
+
 ### Mixin: `DeviceOrientationAware`
 
 To make this service even easier to use, a mixin is included

addon/services/device-orientation.js

@@ -1,4 +1,5 @@
 import Ember from 'ember';
+import { transformationMatrix, transformVector } from '../utils/orientation-transformation-matrix';
 
 const { classify } = Ember.String;
 const { map } = Ember.EnumerableUtils;
@@ -24,18 +25,30 @@ export default Ember.Service.extend(Ember.Evented, {
     let svc = this;
     this._onTiltHandler = event => {
       if (svc._shouldFireEvent(event)) {
+        let { alpha, beta, gamma } = event;
         svc.setProperties({
-          '_tilt.alpha': event.alpha,
-          '_tilt.beta': event.beta,
-          '_tilt.gamma': event.gamma
+          '_tilt.alpha': alpha,
+          '_tilt.beta': beta,
+          '_tilt.gamma': gamma
         });
+        // console.log('MTX', orientationTransformationMatrix(alpha, beta, gamma));
         svc._fireTiltEvent(event);
         Ember.run.debounce(svc, svc._fireDebouncedTiltEvent, event, this.get('debounceTimeout'));
       }
     };
     this._installTiltListener();
   },
 
+  normalVector() {
+    const { alpha, beta, gamma } = this.get('_tilt');
+    return transformVector([0, 0, 1], alpha, beta, gamma);
+  },
+
+  transformationMatrix() {
+    const { alpha, beta, gamma } = this.get('_tilt');
+    return transformationMatrix(alpha, beta, gamma);
+  },
+
   destroy() {
     this._super(...arguments);
     this._uninstallTiltListener();

addon/utils/orientation-transformation-matrix.js

@@ -0,0 +1,47 @@
+const degtorad = Math.PI / 180; // Degree-to-Radian conversion
+
+export function transformationMatrix(alpha, beta, gamma) {
+
+  const _x = beta  ? beta  * degtorad : 0; // beta value
+  const _y = gamma ? gamma * degtorad : 0; // gamma value
+  const _z = alpha ? alpha * degtorad : 0; // alpha value
+
+  const cX = Math.cos(_x);
+  const cY = Math.cos(_y);
+  const cZ = Math.cos(_z);
+  const sX = Math.sin(_x);
+  const sY = Math.sin(_y);
+  const sZ = Math.sin(_z);
+
+  //
+  // ZXY rotation matrix construction.
+  //
+
+  const m11 = cZ * cY - sZ * sX * sY;
+  const m12 = -cX * sZ;
+  const m13 = cY * sZ * sX + cZ * sY;
+
+  const m21 = cY * sZ + cZ * sX * sY;
+  const m22 = cZ * cX;
+  const m23 = sZ * sY - cZ * cY * sX;
+
+  const m31 = -cX * sY;
+  const m32 = sX;
+  const m33 = cX * cY;
+
+  return [
+    m11,    m12,    m13,
+    m21,    m22,    m23,
+    m31,    m32,    m33
+  ];
+}
+
+export function transformVector(vector, alpha, beta, gamma) {
+  const tm = transformationMatrix(alpha, beta, gamma);
+  return [
+    vector[0] * tm[0] + vector[1] * tm[3] + vector[2] * tm[6],
+    vector[0] * tm[1] + vector[1] * tm[4] + vector[2] * tm[7],
+    vector[0] * tm[2] + vector[1] * tm[5] + vector[2] * tm[8]
+  ];
+}
+

app/utils/orientation-transformation-matrix.js

@@ -0,0 +1 @@
+export { default } from 'ember-orientation/utils/orientation-transformation-matrix';

tests/dummy/app/templates/application.hbs

@@ -3,7 +3,7 @@
   <nav class="indigo">
     <div class="nav-wrapper">
       <div class="container-fluid">
-        <a href="#" class="brand-logo">Ember-orientation</a>
+        <a href="https://github.com/truenorth/ember-orientation" class="brand-logo">Ember-orientation</a>
       </div>
     </div>
   </nav>

tests/dummy/app/templates/index.hbs

@@ -5,4 +5,4 @@
   <li>Alpha: {{view.tiltAlpha}}</li>
   <li>Beta: {{view.tiltBeta}}</li>
   <li>Gamma: {{view.tiltGamma}}</li>
-</ul>
+</ul>