Using sensor info from smart devices

Hi there,

I was bored so I thought I would try to wrap up a little HTML/JS to catch the sensor info from the browsing device.

Wold be nice to use it for controlling something at the other end.!

The more I look the more I find incompatibilities between browsers.!

Anyway, just thought I would share.
Open for comments or improvement.

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <style type="text/css">
      @media screen and (min-width: 360px) and (max-width: 800px) and (orientation: portrait) {
        html {
          transform: rotate(-90deg);
          transform-origin: left top;
          width: 100vh;
          overflow-x: hidden;
          position: absolute;
          top: 100%;
          left: 0;
        }
      }  
      body{padding:0;margin:0}
      svg:not(:root){display:block}
      .playable-code{
        background-color:#f4f7f8;
        border:none;
        border-left:6px solid #558abb;
        border-width:medium medium medium 6px;
        color:#4d4e53;
        height:100px;
        width:90%;
        padding:10px 10px 0
      }
      .playable-canvas{border:1px solid #4d4e53;border-radius:2px}
      .playable-buttons{text-align:right;width:90%;padding:5px 10px 5px 26px}
    
      .garden {
        position: relative;
        width : 360px;
        height: 360px;
        border: 5px solid #CCC;
        border-radius: 10px;
      }
      .ball {
        position: absolute;
        top   : 170px;
        left  : 170px;
        width : 20px;
        height: 20px;
        background: green;
        border-radius: 100%;
      }
      .ball2 {
         position: absolute;
         top   : 170px;
         left  : 170px;
         width : 20px;
         height: 20px;
         background: red;
         border-radius: 100%;
      }
    </style>
        
    <title>Detecting device orientation</title>
  </head>
  <body>
    <canvas id="myCanvas" width="360" height="360" style="border:1px solid #d3d3d3;">
      Your browser does not support the HTML5 canvas tag.
    </canvas>
    <div><a href="https://whatwebcando.today/device-motion.html">Info</a></div>
    <div class="garden">
      <div class="ball"></div>
      <div class="ball2"></div>
    </div>
    <pre class="output"></pre>
    <div><input type="checkbox" id="smoothed" value="smooth" checked="">Smoothed</div>

    <script>
//    screen.lockOrientationUniversal = screen.lockOrientation || screen.mozLockOrientation || screen.msLockOrientation;
      var ball = document.querySelector('.ball');
      var ball2 = document.querySelector('.ball2');
      var garden = document.querySelector('.garden');
      var output = document.querySelector('.output');
      var checkBox = document.getElementById("smoothed");
        
      var maxX = garden.clientWidth  - (ball.clientWidth)+2;
      var maxY = garden.clientHeight - (ball.clientHeight)+4;
      var x_aray = [90,90,90,90,90,90,90,90,90,90,90,90];
      var y_aray = [90,90,90,90,90,90,90,90,90,90,90,90];
      var z_aray = [90,90,90,90,90,90,90,90,90,90,90,90];
      var arryindex = 0;
      var smoothX = 90;
      var smoothY = 90;
      var smoothZ = 90;
    
      function lineAtAngle(x1, y1, length, angle) {
        var c = document.getElementById("myCanvas");
        var ctx = c.getContext("2d");
        var useang = 0;
        useang = (angle * Math.PI / 180);
        //ctx.clearRect(0, 0, c.width, c.height);
        c.width = c.width;
        ctx.beginPath();
        ctx.moveTo(x1, y1);
        ctx.lineTo(x1 + length * Math.cos(useang), y1 + length * Math.sin(useang));
        //ctx.moveTo(0, 0);
        //ctx.lineTo(300, 150);
        ctx.stroke();
        useang = 360- (angle * Math.PI / 180);
        ball2.style.top  = (x1 + length * Math.cos(useang)) + "px";
        ball2.style.left = (y1 + length * Math.sin(useang)) + "px";
        //ctx.rotate(angle * Math.PI / 180);
        //ctx.fillRect(50, 20, 100, 50); 
      }
    
      function handleOrientation(event) {
        var z = event.alpha;  // In degree in the range [0,360]
        var x = event.beta;  // In degree in the range [-180,180]
        var y = event.gamma; // In degree in the range [-90,90]
        
        output.innerHTML  = "alpha : " + z + "\n";
        output.innerHTML += "beta: " + x + "\n";
        output.innerHTML += "gamma: " + y + "\n";
        output.innerHTML += "S_A: " + smoothZ.toFixed(3) + "\n";
        output.innerHTML += "S_B: " + smoothX.toFixed(3) + "\n";
        output.innerHTML += "S_G: " + smoothY.toFixed(3) + "\n";

  // Because we don't want to have the device upside down
  // We constrain the x value to the range [-90,90]
        if (x >  90) { x =  90};
        if (x < -90) { x = -90};
    
        if (y >  90) { y = 90-(y -90)};
        if (y < -90) { y = 360 - y};

  // To make computation easier we shift the range of 
  // x and y to [0,180]
        x += 90;
        y += 90;

  // 10 is half the size of the ball
  // It center the positioning point to the center of the ball
        x_aray[arryindex] = x;
        y_aray[arryindex] = y;
        z_aray[arryindex] = z;
        arryindex += 1;
        if (arryindex >= x_aray.length){arryindex = 0;}
    
        if (checkBox.checked == true){
          var sum_x = x;
          var sum_y = y;
          var sum_z = z;
          sum_x = 0;
          sum_y = 0;
          sum_z = 0;
          for( var i = 0; i < x_aray.length; i++ ){
            sum_x += parseInt( x_aray[i], 10 ); //don't forget to add the base
            sum_y += parseInt( y_aray[i], 10 ); //don't forget to add the base
            sum_z += parseInt( z_aray[i], 10 ); //don't forget to add the base
          }
          var avg_x = sum_x/x_aray.length;
          var avg_y = sum_y/y_aray.length;
          var avg_z = sum_z/z_aray.length;

//      smoothX =((smoothX + avg_x)/2); 
//      smoothY =((smoothY + avg_y)/2) ;
          smoothX =(avg_x); 
          smoothY =(avg_y);
          smoothZ =(avg_z);
          smoothZ =(z);
        } else {
          smoothX =(x); 
          smoothY =(y);
          smoothZ =(z);
        }
        lineAtAngle(maxY/2, maxX/2, 100, smoothZ-90);
        ball.style.top  = (maxX*smoothX/180 - 0) + "px";
        ball.style.left = (maxY*smoothY/180 - 0) + "px";
      }    
      window.addEventListener('deviceorientation', handleOrientation);
    </script>     
  </body>
</html>

Hiddenvision:
The more I look the more I find incompatibilities between browsers.!

Welcome to the wonderful world of web standards! No idea how many such standards are in use...

What does this have to do with Arduinos?

Yep, gone are the days of basic html code.!

Relevant to Arduinos.!?

Some may find it handy.
I was thinking of making a little Wifi RC car and wondered how much control using the accelerometer on the phone would give.