Javascript Accelerometer Demo and Source

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)

API

DeviceMotionEvent Class
DeviceOrientationEvent Class

29 Replies to “Javascript Accelerometer Demo and Source”

  1. 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

  2. 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 …
    }
    }

  3. 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

  4. 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

  5. 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

  6. 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.

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

  8. 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

  9. 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!

  10. 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.

Leave a Reply

Your email address will not be published. Required fields are marked *