onDeviceMotion
The iPhone has an accelerometer which can help you to detect phone movements and tilts.
<br/>
<br/>
window.ondevicemotion = funcRef;
<br/>
Where funcRef is a reference to a function. This function receives a DeviceMotionEvent object describing the motion that occurred.
<br/>
<br/>
HTML5
window.ondevicemotion = function(coords) {
var accX = coords.acceleration.x;
var accY = coords.acceleration.y;
var accZ = coords.acceleration.z;
// your code goes here
};
/*
* Example
*/
/*
HTML CODE:
<h3 id="shaker-title">Shake your Smartphone to switch images</h3>
<p>Wont work on all Browsers</p>
<img id="shaker-img" src="my-image-1" alt="" border="0"> */
var pos = 0;
var lastAction = new Date();
var sensibility = 3;
var minTime = 500;
var images = [
'my-image-1.jpg',
'my-image-2.jpg',
'my-image-3.jpg',
];
function shakeIt()
{
window.ondevicemotion = function(coords) {
var accX = coords.acceleration.x;
var time = new Date();
if (time-lastAction<minTime) return false;
if (accX>=sensibility || accX<=-sensibility) {
pos += accX > 0 ? 1 : -1;
pos = pos > images.length-1 ? 0 : pos < 0 ? images.length-1 : pos;
document.getElementById('shaker-title').innerHTML = pos+' - '+accX;
document.getElementById('shaker-img').src=images[pos];
lastEvent=time;
}
}
}
shakeIt();
Url: http://www.medienservice-ladewig.de/Smartphone-Beschleunigungssensor-Javascript.2099932112.html
Language: JavaScript | User: Jörg | Created: Oct 25, 2013 | Tags: javascript iphone smartphone ondevicemotion event Accelerometer html5