Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<!doctype html>
<html>
<head>
</head>
<body>
<h2>Device Orientation with HTML5</h2>
You need to be on a mobile device or use a laptop with accelerometer/orientation device.<p>
​
<div id="ax"></div>
<div id="ay"></div>
<div id="az"></div>
<div id="agx"></div>
<div id="agy"></div>
<div id="agz"></div>
​
<script type="text/javascript">
    if (window.DeviceMotionEvent) {
        console.log("Device Motion API is supported");
​
        window.addEventListener('devicemotion', function (eventData) {
          // Accelerations is m/s^2
            var ax = event.acceleration.x;
            var ay = event.acceleration.y;
            var az = event.acceleration.z;
​
          // Same but taking into account the gravity
            var agx = event.accelerationIncludingGravity.x;
            var agyy = event.accelerationIncludingGravity.y;
            var agzz = event.accelerationIncludingGravity.z;
            deviceOrientationHandler(ax, ay, az, agx, agy, agz);
        }, false);
    } else {
        alert("Device motion API not supported on your device or browser.  Sorry.");
    }
​
    function deviceOrientationHandler(ax, ay, az, agx, agy, agz) {
        document.querySelector("#ax").innerHTML = "Acceleration along X : " + Math.round(ax);
        document.querySelector("#ay").innerHTML = "Acceleration along Y : " + Math.round(ay);
        document.querySelector("#az").innerHTML = "Acceleration along Z : " + Math.round(az);
      
        document.querySelector("#agx").innerHTML = "Acceleration along X : " + Math.round(agx);
        document.querySelector("#agy").innerHTML = "Acceleration along Y : " + Math.round(agy);
        document.querySelector("#agz").innerHTML = "Acceleration along Z : " + Math.round(agz);
    }
</script>
 
</body>
</html>
Output

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
anonymouspro
0viewers