ashatora/openlayers
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Add ol.DeviceOrientation

Browse Source
This commit is contained in:
Frederic Junod
2013-02-04 09:59:38 +01:00
parent 7cd5266d39
commit 448e300a03
11 changed files with 292 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
build.py
View File

@@ -312,6 +312,7 @@ def examples_star_json(name, match):
'../externs/oli.js', '../externs/oli.js',
'../externs/proj4js.js', '../externs/proj4js.js',
'../externs/tilejson.js', '../externs/tilejson.js',
'../externs/w3c_device_sensor_event.js',
], ],
}) })
with open(t.name, 'w') as f: with open(t.name, 'w') as f:

3
buildcfg/base.json
View File

@@ -44,7 +44,8 @@
"../externs/geojson.js", "../externs/geojson.js",
"../externs/oli.js", "../externs/oli.js",
"../externs/proj4js.js", "../externs/proj4js.js",
"../externs/tilejson.js" "../externs/tilejson.js",
"../externs/w3c_device_sensor_event.js"
], ],
"level": "VERBOSE", "level": "VERBOSE",

3
buildcfg/ol-all.json
View File

@@ -9,7 +9,8 @@
"../externs/geojson.js", "../externs/geojson.js",
"../externs/oli.js", "../externs/oli.js",
"../externs/proj4js.js", "../externs/proj4js.js",
"../externs/tilejson.js" "../externs/tilejson.js",
"../externs/w3c_device_sensor_event.js"
], ],
"inherits": "base.json", "inherits": "base.json",

3
buildcfg/ol-simple.json
View File

@@ -18,7 +18,8 @@
"../externs/geojson.js", "../externs/geojson.js",
"../externs/oli.js", "../externs/oli.js",
"../externs/proj4js.js", "../externs/proj4js.js",
"../externs/tilejson.js" "../externs/tilejson.js",
"../externs/w3c_device_sensor_event.js"
], ],
"inherits": "ol.json", "inherits": "ol.json",

3
buildcfg/ol-whitespace.json
View File

@@ -19,7 +19,8 @@
"../externs/geojson.js", "../externs/geojson.js",
"../externs/oli.js", "../externs/oli.js",
"../externs/proj4js.js", "../externs/proj4js.js",
"../externs/tilejson.js" "../externs/tilejson.js",
"../externs/w3c_device_sensor_event.js"
], ],
"inherits": "ol.json", "inherits": "ol.json",

3
buildcfg/ol.json
View File

@@ -19,7 +19,8 @@
"../externs/geojson.js", "../externs/geojson.js",
"../externs/oli.js", "../externs/oli.js",
"../externs/proj4js.js", "../externs/proj4js.js",
"../externs/tilejson.js" "../externs/tilejson.js",
"../externs/w3c_device_sensor_event.js"
], ],
"inherits": "base.json", "inherits": "base.json",

58
examples/device-orientation.html Normal file
View File

@@ -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>

29
examples/device-orientation.js Normal file
View File

@@ -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();
});

89
externs/w3c_device_sensor_event.js Normal file
View File

@@ -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;

1
src/ol/deviceorientation.exports Normal file
View File

@@ -0,0 +1 @@
@exportSymbol ol.DeviceOrientation

104
src/ol/deviceorientation.js Normal file
View File

@@ -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);