Add ol.DeviceOrientation

KoAi · Jun 7, 2013 · 448e300 · 448e300
1 parent 7cd5266
commit 448e300
Show file tree

Hide file tree

Showing 11 changed files with 292 additions and 5 deletions.
diff --git a/build.py b/build.py
@@ -312,6 +312,7 @@ def action(t):
                 '../externs/oli.js',
                 '../externs/proj4js.js',
                 '../externs/tilejson.js',
+                '../externs/w3c_device_sensor_event.js',
             ],
         })
         with open(t.name, 'w') as f:

diff --git a/buildcfg/base.json b/buildcfg/base.json
@@ -44,7 +44,8 @@
     "../externs/geojson.js",
     "../externs/oli.js",
     "../externs/proj4js.js",
-    "../externs/tilejson.js"
+    "../externs/tilejson.js",
+    "../externs/w3c_device_sensor_event.js"
   ],
 
   "level": "VERBOSE",

diff --git a/buildcfg/ol-all.json b/buildcfg/ol-all.json
@@ -9,7 +9,8 @@
     "../externs/geojson.js",
     "../externs/oli.js",
     "../externs/proj4js.js",
-    "../externs/tilejson.js"
+    "../externs/tilejson.js",
+    "../externs/w3c_device_sensor_event.js"
   ],
 
   "inherits": "base.json",

diff --git a/buildcfg/ol-simple.json b/buildcfg/ol-simple.json
@@ -18,7 +18,8 @@
     "../externs/geojson.js",
     "../externs/oli.js",
     "../externs/proj4js.js",
-    "../externs/tilejson.js"
+    "../externs/tilejson.js",
+    "../externs/w3c_device_sensor_event.js"
   ],
 
   "inherits": "ol.json",

diff --git a/buildcfg/ol-whitespace.json b/buildcfg/ol-whitespace.json
@@ -19,7 +19,8 @@
     "../externs/geojson.js",
     "../externs/oli.js",
     "../externs/proj4js.js",
-    "../externs/tilejson.js"
+    "../externs/tilejson.js",
+    "../externs/w3c_device_sensor_event.js"
   ],
 
   "inherits": "ol.json",

diff --git a/buildcfg/ol.json b/buildcfg/ol.json
@@ -19,7 +19,8 @@
     "../externs/geojson.js",
     "../externs/oli.js",
     "../externs/proj4js.js",
-    "../externs/tilejson.js"
+    "../externs/tilejson.js",
+    "../externs/w3c_device_sensor_event.js"
   ],
 
   "inherits": "base.json",

diff --git a/examples/device-orientation.html b/examples/device-orientation.html
@@ -0,0 +1,58 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <meta http-equiv="X-UA-Compatible" content="chrome=1">
+    <meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
+    <link rel="stylesheet" href="../resources/bootstrap/css/bootstrap.min.css" type="text/css">
+    <link rel="stylesheet" href="../resources/layout.css" type="text/css">
+    <link rel="stylesheet" href="../resources/bootstrap/css/bootstrap-responsive.min.css" type="text/css">
+    <title>Device-Orientation example</title>
+  </head>
+  <body>
+
+    <div class="navbar navbar-inverse navbar-fixed-top">
+      <div class="navbar-inner">
+        <div class="container">
+          <a class="brand" href="./">OpenLayers 3 Examples</a>
+          <ul class="nav pull-right">
+            <li><iframe class="github-watch-button" src="http://ghbtns.com/github-btn.html?user=openlayers&repo=ol3&type=watch&count=true"
+  allowtransparency="true" frameborder="0" scrolling="0" height="20" width="90"></iframe></li>
+            <li><a href="https://twitter.com/share" class="twitter-share-button" data-count="none" data-hashtags="openlayers">&nbsp;</a></li>
+            <li><div class="g-plusone-wrapper"><div class="g-plusone" data-size="medium" data-annotation="none"></div></div></li>
+          </ul>
+        </div>
+      </div>
+    </div>
+
+    <div class="container-fluid">
+
+      <div class="row-fluid">
+        <div class="span12">
+          <div id="map" class="map"></div>
+        </div>
+      </div>
+
+      <div class="row-fluid">
+
+        <div class="span4">
+          <h4 id="title">Device orientation example</h4>
+          <p>&alpha; : <code id="alpha"></code> rad</p>
+          <p>&beta; : <code id="beta"></code> rad</p>
+          <p>&gamma; : <code id="gamma"></code> rad</p>
+          <p id="shortdesc">Listen to DeviceOrientation events</p>
+          <div id="docs">
+            <p>See the <a href="device-orientation.js" target="_blank">device-orientation.js source</a> to see how this is done.</p>
+          </div>
+          <div id="tags">orientation, openstreetmap</div>
+        </div>
+
+      </div>
+
+    </div>
+
+    <script src="loader.js?id=device-orientation" type="text/javascript"></script>
+    <script src="../resources/social-links.js" type="text/javascript"></script>
+
+  </body>
+</html>
diff --git a/examples/device-orientation.js b/examples/device-orientation.js
@@ -0,0 +1,29 @@
+goog.require('ol.DeviceOrientation');
+goog.require('ol.Map');
+goog.require('ol.RendererHints');
+goog.require('ol.View2D');
+goog.require('ol.layer.TileLayer');
+goog.require('ol.source.OSM');
+
+var view = new ol.View2D({
+  center: [0, 0],
+  zoom: 2
+});
+var map = new ol.Map({
+  layers: [
+    new ol.layer.TileLayer({
+      source: new ol.source.OSM()
+    })
+  ],
+  renderers: ol.RendererHints.createFromQueryData(),
+  target: 'map',
+  view: view
+});
+
+var deviceOrientation = new ol.DeviceOrientation();
+
+deviceOrientation.on('changed', function() {
+  document.getElementById('alpha').innerHTML = deviceOrientation.getAlpha();
+  document.getElementById('beta').innerHTML = deviceOrientation.getBeta();
+  document.getElementById('gamma').innerHTML = deviceOrientation.getGamma();
+});
diff --git a/externs/w3c_device_sensor_event.js b/externs/w3c_device_sensor_event.js
@@ -0,0 +1,89 @@
+/*
+ * Copyright 2013 The Closure Compiler Authors
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+/**
+ * @fileoverview Definitions for W3C's device orientation and device motion
+ *  events specification.
+ *  This file depends on w3c_event.js.
+ *  The whole file has been partially type annotated.
+ *  Created from http://dev.w3.org/geo/api/spec-source-orientation.
+ *
+ * @externs
+ */
+
+/**
+ * @constructor
+ * @extends {Event}
+ */
+function DeviceOrientationEvent() {}
+
+/** @type {?number} */
+DeviceOrientationEvent.prototype.alpha;
+
+/** @type {?number} */
+DeviceOrientationEvent.prototype.beta;
+
+/** @type {?number} */
+DeviceOrientationEvent.prototype.gamma;
+
+/** @type {boolean} */
+DeviceOrientationEvent.prototype.absolute;
+
+/**
+ * @constructor
+ */
+function DeviceAcceleration() {}
+
+/** @type {?number} */
+DeviceAcceleration.prototype.x;
+
+/** @type {?number} */
+DeviceAcceleration.prototype.y;
+
+/** @type {?number} */
+DeviceAcceleration.prototype.z;
+
+/**
+ * @constructor
+ */
+function DeviceRotationRate() {}
+
+/** @type {?number} */
+DeviceOrientationEvent.prototype.alpha;
+
+/** @type {?number} */
+DeviceOrientationEvent.prototype.beta;
+
+/** @type {?number} */
+DeviceOrientationEvent.prototype.gamma;
+
+/**
+ * @constructor
+ * @extends {Event}
+ */
+function DeviceMotionEvent() {}
+
+/** @type {?DeviceAcceleration} */
+DeviceMotionEvent.prototype.acceleration;
+
+/** @type {?DeviceAcceleration} */
+DeviceMotionEvent.prototype.accelerationIncludingGravity;
+
+/** @type {?DeviceRotationRate} */
+DeviceMotionEvent.prototype.rotationRate;
+
+/** @type {?number} */
+DeviceMotionEvent.prototype.interval;
diff --git a/src/ol/deviceorientation.exports b/src/ol/deviceorientation.exports
@@ -0,0 +1 @@
+@exportSymbol ol.DeviceOrientation
diff --git a/src/ol/deviceorientation.js b/src/ol/deviceorientation.js
@@ -0,0 +1,104 @@
+// FIXME: tracking property (same as ol.Geolocation)
+// FIXME: event.absolute
+goog.provide('ol.DeviceOrientation');
+goog.provide('ol.DeviceOrientationProperty');
+
+goog.require('goog.events');
+goog.require('goog.math');
+goog.require('ol.Object');
+
+
+/**
+ * @enum {string}
+ */
+ol.DeviceOrientationProperty = {
+  ALPHA: 'alpha',
+  BETA: 'beta',
+  GAMMA: 'gamma'
+};
+
+
+
+/**
+ * @constructor
+ * @extends {ol.Object}
+ */
+ol.DeviceOrientation = function() {
+
+  goog.base(this);
+
+  if (ol.DeviceOrientation.SUPPORTED) {
+    goog.events.listen(window, 'deviceorientation',
+        this.orientationChange_, false, this);
+  }
+};
+goog.inherits(ol.DeviceOrientation, ol.Object);
+
+
+/**
+ * Is supported.
+ * @const
+ * @type {boolean}
+ */
+ol.DeviceOrientation.SUPPORTED = 'DeviceOrientationEvent' in window;
+
+
+/**
+ * @private
+ * @param {goog.events.BrowserEvent} browserEvent Event.
+ */
+ol.DeviceOrientation.prototype.orientationChange_ = function(browserEvent) {
+  var event = /** @type {DeviceOrientationEvent} */
+      (browserEvent.getBrowserEvent());
+  if (goog.isDefAndNotNull(event.alpha)) {
+    this.set(ol.DeviceOrientationProperty.ALPHA,
+        goog.math.toRadians(event.alpha));
+  }
+  if (goog.isDefAndNotNull(event.beta)) {
+    this.set(ol.DeviceOrientationProperty.BETA,
+        goog.math.toRadians(event.beta));
+  }
+  if (goog.isDefAndNotNull(event.gamma)) {
+    this.set(ol.DeviceOrientationProperty.GAMMA,
+        goog.math.toRadians(event.gamma));
+  }
+};
+
+
+/**
+ * @return {number|undefined} alpha.
+ */
+ol.DeviceOrientation.prototype.getAlpha = function() {
+  return /** @type {number} */ (
+      this.get(ol.DeviceOrientationProperty.ALPHA));
+};
+goog.exportProperty(
+    ol.DeviceOrientation.prototype,
+    'getAlpha',
+    ol.DeviceOrientation.prototype.getAlpha);
+
+
+/**
+ * @return {number|undefined} beta.
+ */
+ol.DeviceOrientation.prototype.getBeta = function() {
+  return /** @type {number} */ (
+      this.get(ol.DeviceOrientationProperty.BETA));
+};
+goog.exportProperty(
+    ol.DeviceOrientation.prototype,
+    'getBeta',
+    ol.DeviceOrientation.prototype.getBeta);
+
+
+/**
+ * @return {number|undefined} gamma.
+ */
+ol.DeviceOrientation.prototype.getGamma = function() {
+  return /** @type {number} */ (
+      this.get(ol.DeviceOrientationProperty.GAMMA));
+};
+goog.exportProperty(
+    ol.DeviceOrientation.prototype,
+    'getGamma',
+    ol.DeviceOrientation.prototype.getGamma);