Arduino Forum

Using Arduino => Sensors => Topic started by: Hiddenvision on Sep 03, 2019, 02:57 pm

Title: Using sensor info from smart devices
Post by: Hiddenvision on Sep 03, 2019, 02:57 pm
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.


Code: [Select]


<!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>

Title: Re: Using sensor info from smart devices
Post by: wvmarle on Sep 04, 2019, 05:23 am
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?
Title: Re: Using sensor info from smart devices
Post by: Hiddenvision on Sep 04, 2019, 12:12 pm
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.