Welcome to Codebox! (Copy 8419)

✨ Jabont

<!DOCTYPE html>
<html lang="en">
   <head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
      <meta name="author" content="Aurelio De Rosa">
      <title>Device Orientation API Demo by Aurelio De Rosa</title>
      <link rel="stylesheet" href="../shared.css" />
      <style>
         .cube
         {
            width: 150px;
            height: 150px;
            position: relative;
            margin: 30px auto;
            -webkit-transform-style: preserve-3d;
            transform-style: preserve-3d;
         }

.face
         {
            width: 150px;
            height: 150px;
            position: absolute;
            font-size: 80px;
            text-align: center;
            line-height: 150px;
            background-color: #999999;
            box-shadow: inset 0 0 20px #333333;
            opacity: 0.6;
         }

.cube .one
         {
            -webkit-transform: translateZ(75px);
            transform: translateZ(75px);
         }

.cube .two
         {
            -webkit-transform: rotateY(90deg) translateZ(75px);
            transform: rotateY(90deg) translateZ(75px);
         }

.cube .three
         {
            -webkit-transform: rotateY(180deg) translateZ(75px);
            transform: rotateY(180deg) translateZ(75px);
         }

.cube .four
         {
            -webkit-transform: rotateY(-90deg) translateZ(75px);
            transform: rotateY(-90deg) translateZ(75px);
         }

.cube .five
         {
            -webkit-transform: rotateX(90deg) translateZ(75px);
            transform: rotateX(90deg) translateZ(75px);
         }

.cube .six
         {
            -webkit-transform: rotateX(-90deg) translateZ(75px) rotate(0deg);
            transform: rotateX(-90deg) translateZ(75px) rotate(0deg);
         }
      </style>
   </head>
   <body>
      <a href="https://code.tutsplus.com/tutorials/an-introduction-to-the-device-orientation-api--cms-21067">Go back to the article</a>

<h1>Device Orientation API</h1>

<span id="do-unsupported" class="api-support hidden">deviceorientation event not supported</span>
      <span id="dm-unsupported" class="api-support hidden">devicemotion event not supported</span>
      <span id="cnc-unsupported" class="api-support hidden">compassneedscalibration event not supported</span>

<div id="do-results">
         <div id="cube" class="cube">
            <div class="face one">1</div>
            <div class="face two">2</div>
            <div class="face three">3</div>
            <div class="face four">4</div>
            <div class="face five">5</div>
            <div class="face six">6</div>
         </div>
         <div id="do-info" class="hidden">
            <p>
               Coordinates:
               (<span id="beta" class="value">null</span>,
               <span id="gamma" class="value">null</span>,
               <span id="alpha" class="value">null</span>)
               <br />
               Position absolute? <span id="is-absolute" class="value">unavailable</span>
            </p>
         </div>
         <div id="dm-info" class="hidden">
            <p>
               Acceleration:
               (<span id="acceleration-x" class="value">null</span>,
               <span id="acceleration-y" class="value">null</span>,
               <span id="acceleration-z" class="value">null</span>)
               m/s<sup>2</sup>
            </p>
            <p>
               Acceleration including gravity:
               (<span id="acceleration-including-gravity-x" class="value">null</span>,
               <span id="acceleration-including-gravity-y" class="value">null</span>,
               <span id="acceleration-including-gravity-z" class="value">null</span>)
               m/s<sup>2</sup>
            </p>
            <p>
               Rotation rate:
               (<span id="rotation-rate-beta" class="value">null</span>,
               <span id="rotation-rate-gamma" class="value">null</span>,
               <span id="rotation-rate-alpha" class="value">null</span>)
            </p>
            <p>
               Interval: <span id="interval" class="value">0</span> milliseconds
            </p>
         </div>
      </div>

<small class="author">
         Demo created by <a href="https://www.audero.it">Aurelio De Rosa</a>
         (<a href="https://twitter.com/AurelioDeRosa">@AurelioDeRosa</a>).<br />
         This demo is part of the <a href="https://github.com/AurelioDeRosa/HTML5-API-demos">HTML5 API demos repository</a>.
      </small>

window.addEventListener('deviceorientation', function(event) {
               document.getElementById('cube').style.webkitTransform =
               document.getElementById('cube').style.transform =
                       'rotateX(' + event.beta + 'deg) ' +
                       'rotateY(' + event.gamma + 'deg) ' +
                       'rotateZ(' + event.alpha + 'deg)';

document.getElementById('beta').innerHTML = Math.round(event.beta);
               document.getElementById('gamma').innerHTML = Math.round(event.gamma);
               document.getElementById('alpha').innerHTML = Math.round(event.alpha);
               document.getElementById('is-absolute').innerHTML = event.absolute ? "true" : "false";
            });
         }

if (!('ondevicemotion' in window)) {
            document.getElementById('dm-unsupported').classList.remove('hidden');
         } else {
            document.getElementById('dm-info').classList.remove('hidden');

window.addEventListener('devicemotion', function(event) {
               document.getElementById('acceleration-x').innerHTML = Math.round(event.acceleration.x);
               document.getElementById('acceleration-y').innerHTML = Math.round(event.acceleration.y);
               document.getElementById('acceleration-z').innerHTML = Math.round(event.acceleration.z);

document.getElementById('acceleration-including-gravity-x').innerHTML =
                       Math.round(event.accelerationIncludingGravity.x);
               document.getElementById('acceleration-including-gravity-y').innerHTML =
                       Math.round(event.accelerationIncludingGravity.y);
               document.getElementById('acceleration-including-gravity-z').innerHTML =
                       Math.round(event.accelerationIncludingGravity.z);

document.getElementById('rotation-rate-beta').innerHTML = Math.round(event.rotationRate.beta);
               document.getElementById('rotation-rate-gamma').innerHTML = Math.round(event.rotationRate.gamma);
               document.getElementById('rotation-rate-alpha').innerHTML = Math.round(event.rotationRate.alpha);

document.getElementById('interval').innerHTML = event.interval;
            });
         }

if (!('oncompassneedscalibration' in window)) {
            document.getElementById('cnc-unsupported').classList.remove('hidden');
         } else {
            window.addEventListener('compassneedscalibration', function(event) {
               alert('Compass needs calibrating! Wave your device in a figure-eight motion');
            });
         }
      </script>
   </body>
</html>