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="rawAccel"></div>
            <div id="tiltFB"></div>
            <div id="tiltLR"></div>
            <div id="upDown"></div>
 
  <img src="https://mainline.i3s.unice.fr/mooc/HTML5_Badge_256.png" id="imgLogo" class="logo">
<script type="text/javascript">
if (window.DeviceMotionEvent!=undefined) {
  console.log("DeviceMotion is supported");
​
  window.addEventListener('devicemotion', function(eventData) {
     // Grab the acceleration including gravity from the results
     var acceleration = eventData.accelerationIncludingGravity;
     // Display the raw acceleration data
     var rawAcceleration = "[" +  Math.round(acceleration.x) + ", " + 
     Math.round(acceleration.y) + ", " + Math.round(acceleration.z) + "]";
    
     // Z is the acceleration in the Z axis, and if the device is facing up or down
     var facingUp = -1;
     if (acceleration.z > 0) {
       facingUp = +1;
     }
  
     // Convert the value from acceleration to degrees acceleration.x|y is the 
     // acceleration according to gravity, we'll assume we're on Earth and divide 
     // by 9.81 (earth gravity) to get a percentage value, and then multiply that 
     // by 90 to convert to degrees.                                
     var tiltLR = Math.round(((acceleration.x) / 9.81) * -90);
     var tiltFB = Math.round(((acceleration.y + 9.81) / 9.81) * 90 * facingUp);
    
     document.querySelector("#rawAccel").innerHTML = "Raw acceleration" +  
                                                   rawAcceleration;
     document.querySelector("#tiltFB").innerHTML = "Tilt front/back : " + tiltFB;
     document.querySelector("#tiltLR").innerHTML = "Tilt left/right : " + tiltLR;
     document.querySelector("#upDown").innerHTML = "Face Up:Down : " + facingUp;
    
    
     updateLogoOrientation(tiltLR, tiltFB);
  }, false);
} else {
    alert("Not supported on your device or browser.  Sorry.");
}
 
function updateLogoOrientation(tiltLR, tiltFB) {
   // USE CSS3 rotations for rotating the HTML5 logo
   //for webkit browser
   document.getElementById("imgLogo").style.webkitTransform = 
                "rotate(" + tiltLR + "deg) rotate3d(1,0,0, " + (tiltFB * -1) + "deg)";
 
   //for HTML5 standard-compliance
   document.getElementById("imgLogo").style.transform = 
                "rotate(" + tiltLR + "deg) rotate3d(1,0,0, " + (tiltFB * -1) + "deg)";
}
</script>
 
</body>
</html>
Output 300px

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

Dismiss x
public
Bin info
anonymouspro
0viewers