orientation, rotation, acceleration (mobile only)

index.html

<p><b>Orientation</b>
  <br>α(z) [0, 360]: <span class="data"><a id='alpha'> </a>°</span>
  <br>β(x) [-180,180]: <span class="data"><a id='beta'> </a>°</span>
  <br>γ(y) [-90,90]: <span class="data"><a id='gamma'> </a>°</span>
</p>

<hr>
<p>
  <b>Rotation</b>
  <br>α: <span class="data"><a id='rx'></a>°</span>
  <br>β: <span class="data"><a id='ry'></a>°</span>
  <br>γ: <span class="data"><a id='rz'></a>°</span>
</p>
<hr>
<canvas id="canvas0"> </canvas>
<p><b>Acceleration(m/s²)</b>
  <br><span style='color:#f02'>z:</span>
  <a class="data" id='z'></a>
  <br><span style='color:#3a3'>x:</span>
  <a class="data" id='x'></a>
  <br><span style='color:#47a'>y:</span>
  <a class="data" id='y'></a>
</p>
<p><b>Without Gravity</b>
  <br><span style='color:#f02'>z:</span>
  <a class="data" id='znog'></a>
  <br><span style='color:#3a3'>x:</span>
  <a class="data" id='xnog'></a>
  <br><span style='color:#47a'>y:</span>
  <a class="data" id='ynog'></a>
</p>
<hr>

<p>
  Sampling interval: <span class="data"><a id='i'></a> ms</span>
</p>

<a href="https://developer.mozilla.org/en-US/docs/Web/Guide/Events/Orientation_and_motion_data_explained">
  <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/464612/axes.png" alt="Cell phone" style="width:207px;height:194px;">
</a>

orientation-rotation-acceleration-mobile-only.markdown

orientation, rotation, acceleration (mobile only)

A Pen by lilgreenland on CodePen.

License.

script.js

//https://developer.mozilla.org/en-US/docs/Web/API/Detecting_device_orientation
orientationCanvas(canvas0)

function orientationCanvas(el) {
  //set up canvas
  el.onclick = null; //stops the function from running on button click
  var canvas = el
  var ctx = canvas.getContext("2d");
  var scale = 4;
  var box = {
    x: 30,
    y: 0,
    c1: '#3a3', // green
    c2: '#47a', // blue
    c3: '#f02',//cherry red
  }
  ctx.fillStyle="#ffffff";
  canvas.width = window.innerWidth-30;
  canvas.height = 200;
  ctx.textAlign="right";
  ctx.textBaseline="middle";
  ctx.font="15px Arial";
  ctx.lineJoin='round';
  ctx.setTransform(1,0,0,1,0.5,0.5); //hack to stop antialiasing
  
    ctx.fillStyle="#222";
    ctx.fillText("20",box.x-5,canvas.height/2-20*scale);
    ctx.fillText("10",box.x-5,canvas.height/2-10*scale);
    ctx.fillText("0",box.x-5,canvas.height/2);
    ctx.fillText("-10",box.x-5,canvas.height/2+10*scale);
    ctx.fillText("-20",box.x-5,canvas.height/2+20*scale);
  
  var data = [];
  for (var i = 0; i < canvas.width - box.x-10; i++) {
    data.push({
      x: 0,
      y: 0,
      z: 0
    });
  }

  function handleOrientation(event) {
    var gamma = event.gamma; // In degree in the range [-90,90]
    var beta = event.beta; // In degree in the range [-180,180]
    var alpha = event.alpha; //Cardinal directions
    var absolute = event.absolute;
    document.getElementById("gamma").innerHTML = gamma.toFixed(1);
    document.getElementById("beta").innerHTML = beta.toFixed(1);
    document.getElementById("alpha").innerHTML = alpha.toFixed(1);
    document.getElementById("absolute").innerHTML = absolute;
    

     

    
  }
  window.addEventListener('deviceorientation', handleOrientation);

  function handleMotionEvent(event) {
    var x = event.accelerationIncludingGravity.x;
    var y = event.accelerationIncludingGravity.y;
    var z = event.accelerationIncludingGravity.z;
    document.getElementById("x").innerHTML = x.toFixed(1);
    document.getElementById("y").innerHTML = y.toFixed(1);
    document.getElementById("z").innerHTML = z.toFixed(1);

    var xnoG = event.acceleration.x;
    var ynoG = event.acceleration.y;
    var znoG = event.acceleration.z;
    document.getElementById("xnog").innerHTML = xnoG.toFixed(1);
    document.getElementById("ynog").innerHTML = ynoG.toFixed(1);
    document.getElementById("znog").innerHTML = znoG.toFixed(1);

    var a = event.rotationRate.alpha;
    var b = event.rotationRate.beta;
    var g = event.rotationRate.gamma;
    document.getElementById("rx").innerHTML = a.toFixed(2);
    document.getElementById("ry").innerHTML = b.toFixed(2);
    document.getElementById("rz").innerHTML = g.toFixed(2);
    
    var i = event.interval;
    document.getElementById("i").innerHTML = i;
    
    //canvas
    data.shift();
    data.push({
      x:x,
      y:y,
      z:z
    });
    var len = data.length -1
    ctx.clearRect(box.x-1, 0, canvas.width, canvas.height);
    ctx.lineWidth=1;
    
    ctx.fillStyle=box.c1;
    ctx.beginPath();
    ctx.arc(len+box.x,canvas.height/2-data[len].x*scale,3,0,2*Math.PI);
    ctx.fill();
    ctx.strokeStyle=box.c1;
    ctx.beginPath();
    for (var i = 0; i < len; i++) {
      ctx.lineTo(i+box.x,canvas.height/2-data[i].x*scale);
    }
    ctx.stroke();
    
    ctx.fillStyle=box.c2;
    ctx.beginPath();
    ctx.arc(len+box.x,canvas.height/2-data[len].y*scale,3,0,2*Math.PI);
    ctx.fill();
    ctx.strokeStyle=box.c2;
    ctx.beginPath();
    for (var i = 0; i < len; i++) {
      ctx.lineTo(i+box.x,canvas.height/2-data[i].y*scale);
    }
    ctx.stroke();
    
    ctx.fillStyle=box.c3;
    ctx.beginPath();
    ctx.arc(len+box.x,canvas.height/2-data[len].z*scale,3,0,2*Math.PI);
    ctx.fill();
    ctx.strokeStyle=box.c3;
    ctx.beginPath();
    for (var i = 0; i < len; i++) {
      ctx.lineTo(i+box.x,canvas.height/2-data[i].z*scale);
    }
    ctx.stroke();
    
    //line markers
    ctx.lineWidth=0.5;
    ctx.strokeStyle="#999";
    ctx.beginPath();
    ctx.moveTo(box.x,canvas.height/2);
    ctx.lineTo(canvas.width,canvas.height/2);
    ctx.moveTo(canvas.width,canvas.height/2+10*scale);
    ctx.lineTo(box.x,canvas.height/2+10*scale);
    ctx.moveTo(canvas.width,canvas.height/2+20*scale);
    ctx.lineTo(box.x,canvas.height/2+20*scale);
    ctx.moveTo(canvas.width,canvas.height/2-10*scale);
    ctx.lineTo(box.x,canvas.height/2-10*scale);
    ctx.moveTo(canvas.width,canvas.height/2-20*scale);
    ctx.lineTo(box.x,canvas.height/2-20*scale);
    ctx.stroke();
  }
  window.addEventListener("devicemotion", handleMotionEvent, true);
}

style.css

body {
  font-family: "Helvetica", "Arial", sans-serif;
  font-size: 150%;
  background-color: #fff;
  color: #666;
}

.data{
  color: #888;
/*   color: #f6a; */
/*   font-size: 130%; */
}

canvas {
/*   border: 1px solid black; */
}