diff --git a/build.py b/build.py index 6320677344..731a05e37d 100755 --- 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: diff --git a/buildcfg/base.json b/buildcfg/base.json index 557581927e..f5588857ed 100644 --- 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 index 340936188c..a57165cf21 100644 --- 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 index c21ae1528e..f0c6054618 100644 --- 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 index fb99f44cc3..63bc208d88 100644 --- 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 index cb689bbddc..670eb4c8ac 100644 --- 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 new file mode 100644 index 0000000000..0423c68dc2 --- /dev/null +++ b/examples/device-orientation.html @@ -0,0 +1,58 @@ + + + + + + + + + + Device-Orientation example + + + +
+
+
+ OpenLayers 3 Examples +
    +
    • +
    • +
    • +
+
+
+
+ +
+ +
+
+
+
+
+ +
+ +
+

Device orientation example

+

α : rad

+

β : rad

+

γ : rad

+

Listen to DeviceOrientation events

+
+

See the device-orientation.js source to see how this is done.

+
+
orientation, openstreetmap
+
+ +
+ +
+ + + + + + diff --git a/examples/device-orientation.js b/examples/device-orientation.js new file mode 100644 index 0000000000..42f4836260 --- /dev/null +++ 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 new file mode 100644 index 0000000000..ee3fba15b4 --- /dev/null +++ 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 new file mode 100644 index 0000000000..4496aa24b9 --- /dev/null +++ b/src/ol/deviceorientation.exports @@ -0,0 +1 @@ +@exportSymbol ol.DeviceOrientation diff --git a/src/ol/deviceorientation.js b/src/ol/deviceorientation.js new file mode 100644 index 0000000000..24308fedff --- /dev/null +++ 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);