IOS 4.2 (with new Safari Mobile) has the possibility to read sensor data like accelerometer and gyroscope directly from Javascript.
New Javascript objects and event handler
From javascript point of view, we have:
- new handler window.ondevicemotion
- new event object:
- event.accelerationGravity, with x, y, z attributes
- event.accelerationIncludingGravity, with x, y, z attributes
- event.rotationRate, with alpha, beta, gamma attributes
Code Snip
window.ondevicemotion = function(event) {
var accelerationX = event.accelerationIncludingGravity.x;
var accelerationY = event.accelerationIncludingGravity.y;
var accelerationZ = event.accelerationIncludingGravity.z;
}
Demo
Online Demo (require Safari Mobile)
this post is very usefull thx!
Excellent. I’m using this in my upcoming website: http://www.progettystudio.com
That is very fascinating, You’re a very professional blogger. I’ve joined your feed and look forward to looking for extra of your excellent post. Also, I’ve shared your website in my social networks
Great info! I believe it should be event.acceleration rather than event.accelerationGravity, though.
Hi,
This is great… but have you experienced reverse gravity if you have the iPad rotated a certain way on load?
The address bar is at the top but the gravity is reversed.
Is there a way of detecting this / reversing the calculations?
Cheers
Pete
Hi Pete,
to check che orientation of the iPad (ex: portrait upside-down) you can use the window.orientation property.
You can also use the orientationchange event to trigger some action when orientation change:
window.addEventListener(‘orientationchange’, updateOrientation, false);
function updateOrientation() {
var orientation = window.orientation;
switch (orientation) {
// case …
}
}
Why am i sooo noob… I would like to have a script that will scroll my website in mobile style using the accelerometer.
It seems that i don’t have the knowledge to write it myself. Could somebody help me to do it?
Thank you in advance
Thank you very much, this is very helpful 🙂
hi thz for ur post…i didn’t how to write this one before i haven’t seen ur post. if u have another example related to Accelerometer ,pls share me.
cheers
do we have to add some library into our code for device motion events if yes than kindly can u give me some link from where i can get that library..
Thanks
Works on my Mac OSX 10.9.1 in Chrome!
Great Suggestion!
This also works on Android 4.2 with Chrome, Android Browser too. The G-direction is just negative in comparison to IOS.
THX.
There is definately a lot to know about this issue. I love all the points you have made.
Generally I wouldn’t go through report about blogs, however wish to declare that this kind of write-up extremely required me to carry out and so! Your way of writing continues to be surprised me personally. Thank you, extremely wonderful article.
I really appreciate your piece of work, Great post.
What are the units that the program calculates? ie mph, ft/s or m/s?
The gravitational constant (G-unit)
this works on ? titanium platform ????????
Nice Sharing! Thanks for this helpful information I agree with all points you have given to us. I will follow all of them.- Window replacement Richmond
Test working in following:
iPhone 5 iOS 9.3.4 + Safari = Working
Android 5.0 (Samsung Note 3) + Samsung native Internet (4.0.10-53) = Working (inverted X/Y)
Android 5.0 (Samsung Note 3) + Maxthon (4.3.5.2000 Build 2900) = Working (inverted X/Y)
Android 5.0 (Samsung Note 3) + Naked (1.0 build 115) = Working (inverted X/Y)
Android 5.0 (Samsung Note 3) + Chrome(52.0.2743.98) = Working (inverted X/Y)
Android 5.0 (Samsung Note 3) + Puffin (4.8.0.2790) = Not working
Nice demo, thanks!
BTW, the Apple Developer API links broke. 🙁
Hi Chris, the updated links are the following:
https://developer.apple.com/library/ios/documentation/SafariDOMAdditions/Reference/DeviceMotionEventClassRef/
https://developer.apple.com/library/ios/documentation/SafariDOMAdditions/Reference/DeviceOrientationEventClassRef/
Thanks for your comment
Hi,
Thank you for a cool demo for accelerometer! I noticed you have the values returned as g and degrees. How would one go about getting the values in m/s2?
Thanks!
Pretty! This has been an incredibly wonderful article. Thank you for providing this information.|
Windows 10 EDGE 38.14393.0.0
Works on windows 10 Edge browser when laptop Acer Aspire R5-471T folded flat into tablet mode. Correctly stops moving the blue circle when in laptop mode.
Thanks for this, it is the first time I have witnessed Accelerometer in the browser in Microsoft Edge on Windows 10.
Thank you SO MUCH! I am using this now on Fitbit Versa/Ionic smartwatches.