Merge pull request #552 from fredj/deviceorientation

Add ol.DeviceOrientation
2013-06-11 02:09:38 -07:00
parent 9647567704 4d4a654a8e
commit 55b3cbaf17
12 changed files with 395 additions and 5 deletions
--- a/build.py
+++ b/build.py
@@ -312,6 +312,7 @@ def examples_star_json(name, match):
                '../externs/oli.js',
                '../externs/proj4js.js',
                '../externs/tilejson.js',
+                '../externs/w3c_device_sensor_event.js',
            ],
        })
        with open(t.name, 'w') as f:
--- 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",
--- 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",
--- 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",
--- 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",
--- 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",
--- a/examples/device-orientation.html
+++ b/examples/device-orientation.html
@@ -0,0 +1,62 @@
+<!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>
+          <label class="checkbox" for="track">
+            <input id="track" type="checkbox"/>track changes
+          </label>
+          <p>&alpha; : <code id="alpha"></code></p>
+          <p>&beta; : <code id="beta"></code></p>
+          <p>&gamma; : <code id="gamma"></code></p>
+          <p>heading : <code id="heading"></code></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>
--- a/examples/device-orientation.js
+++ b/examples/device-orientation.js
@@ -0,0 +1,46 @@
+goog.require('ol.DeviceOrientation');
+goog.require('ol.Map');
+goog.require('ol.RendererHints');
+goog.require('ol.View2D');
+goog.require('ol.dom.Input');
+goog.require('ol.layer.TileLayer');
+goog.require('ol.source.OSM');
+
+var map = new ol.Map({
+  layers: [
+    new ol.layer.TileLayer({
+      source: new ol.source.OSM()
+    })
+  ],
+  renderers: ol.RendererHints.createFromQueryData(),
+  target: 'map',
+  view: new ol.View2D({
+    center: [0, 0],
+    zoom: 2
+  })
+});
+var view = map.getView();
+
+var deviceOrientation = new ol.DeviceOrientation();
+var track = new ol.dom.Input(document.getElementById('track'));
+track.bindTo('checked', deviceOrientation, 'tracking');
+
+deviceOrientation.on('change', function(event) {
+  document.getElementById('alpha').innerHTML = event.target.getAlpha();
+  document.getElementById('beta').innerHTML = event.target.getBeta();
+  document.getElementById('gamma').innerHTML = event.target.getGamma();
+  document.getElementById('heading').innerHTML = event.target.getHeading();
+});
+
+// tilt the map
+deviceOrientation.on(['change:beta', 'change:gamma'], function(event) {
+  var center = view.getCenter();
+  var resolution = view.getResolution();
+  var beta = event.target.getBeta() || 0;
+  var gamma = event.target.getGamma() || 0;
+
+  center[0] -= resolution * gamma * 25;
+  center[1] += resolution * beta * 25;
+
+  view.setCenter(center);
+});
--- 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;
--- a/src/objectliterals.jsdoc
+++ b/src/objectliterals.jsdoc
@@ -1,3 +1,8 @@
+/**
+ * @typedef {Object} ol.DeviceOrientationOptions
+ * @property {boolean|undefined} tracking Tracking.
+ */
+
 /**
 * @typedef {Object} ol.GeolocationOptions
 * @property {boolean|undefined} tracking Tracking.
--- a/src/ol/deviceorientation.exports
+++ b/src/ol/deviceorientation.exports
@@ -0,0 +1,2 @@
+@exportClass ol.DeviceOrientation ol.DeviceOrientationOptions
+@exportSymbol ol.DeviceOrientation.SUPPORTED
--- a/src/ol/deviceorientation.js
+++ b/src/ol/deviceorientation.js
@@ -0,0 +1,180 @@
+goog.provide('ol.DeviceOrientation');
+goog.provide('ol.DeviceOrientation.SUPPORTED');
+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',
+  HEADING: 'heading',
+  TRACKING: 'tracking'
+};
+
+
+
+/**
+ * @constructor
+ * @extends {ol.Object}
+ * @param {ol.DeviceOrientationOptions=} opt_options Options.
+ */
+ol.DeviceOrientation = function(opt_options) {
+
+  /**
+   * @private
+   * @type {?number}
+   */
+  this.listenerKey_ = null;
+
+  goog.events.listen(this,
+      ol.Object.getChangeEventType(ol.DeviceOrientationProperty.TRACKING),
+      this.handleTrackingChanged_, false, this);
+
+  goog.base(this, goog.isDef(opt_options) ? opt_options : {});
+
+};
+goog.inherits(ol.DeviceOrientation, ol.Object);
+
+
+/**
+ * @inheritDoc
+ */
+ol.DeviceOrientation.prototype.disposeInternal = function() {
+  this.setTracking(false);
+  goog.base(this, 'disposeInternal');
+};
+
+
+/**
+ * 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)) {
+    var alpha = goog.math.toRadians(event.alpha);
+    this.set(ol.DeviceOrientationProperty.ALPHA, alpha);
+    // event.absolute is undefined in iOS.
+    if (goog.isBoolean(event.absolute) && event.absolute) {
+      this.set(ol.DeviceOrientationProperty.HEADING, 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);
+
+
+/**
+ * @return {number|undefined} heading.
+ */
+ol.DeviceOrientation.prototype.getHeading = function() {
+  return /** @type {number} */ (
+      this.get(ol.DeviceOrientationProperty.HEADING));
+};
+goog.exportProperty(
+    ol.DeviceOrientation.prototype,
+    'getHeading',
+    ol.DeviceOrientation.prototype.getHeading);
+
+
+/**
+ * @return {boolean|undefined} tracking.
+ */
+ol.DeviceOrientation.prototype.getTracking = function() {
+  return /** @type {boolean} */ (
+      this.get(ol.DeviceOrientationProperty.TRACKING));
+};
+goog.exportProperty(
+    ol.DeviceOrientation.prototype,
+    'getTracking',
+    ol.DeviceOrientation.prototype.getTracking);
+
+
+/**
+ * @private
+ */
+ol.DeviceOrientation.prototype.handleTrackingChanged_ = function() {
+  if (ol.DeviceOrientation.SUPPORTED) {
+    var tracking = this.getTracking();
+    if (tracking && goog.isNull(this.listenerKey_)) {
+      this.listenerKey_ = goog.events.listen(window, 'deviceorientation',
+          this.orientationChange_, false, this);
+    } else if (!tracking && !goog.isNull(this.listenerKey_)) {
+      goog.events.unlistenByKey(this.listenerKey_);
+      this.listenerKey_ = null;
+    }
+  }
+};
+
+
+/**
+ * @param {boolean} tracking Enable or disable tracking.
+ */
+ol.DeviceOrientation.prototype.setTracking = function(tracking) {
+  this.set(ol.DeviceOrientationProperty.TRACKING, tracking);
+};
+goog.exportProperty(
+    ol.DeviceOrientation.prototype,
+    'setTracking',
+    ol.DeviceOrientation.prototype.setTracking);