~/piMakers/presentations/javaScript/motion.html.html

<html>
<!-- Deid Reimer 2022-03-01.  With thanks to and modified from:
https://sensor-js.xyz/demo.html
https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Tutorial/Advanced_animations
<head></head> -->
<body>
<h2>Acceleration including gravity</h2>
<img src="../motion/axis.png">
<h2>
<a id="start" href="#" role="button" >Start</a> Graph Colours <font color="#cc0000">X </font> <font color="#006600">Y </font><font color="#3333ff">Z</font> </h2>
<canvas id="canvas" style="border: 1px solid" width="900" height="300">Whoops - can't do it</canvas>

<script>
var canvas = document.getElementById('canvas');
var ct  = canvas.getContext('2d');
var raf;
// Data Point arrays x,y,z
var dpsx = []; 
var dpsy = []; 
var dpsz = []; 

// Canvas size
var width = 900;
var height = 300;

var interval = 5;   // X axis scale
var scale = 5;      // Y axis scale   
var num = width/interval;  // Calculated number of points.

// Define and draw the Graph
var graph = {
    xcolor: 'red',
    ycolor: 'green',
    zcolor: 'blue',
    width: 1,

    // Draw the graph   
    draw: function() {      
        // x plot
        ct.beginPath();
        ct.moveTo(0,0);
        ct.strokeStyle = this.xcolor;
        ct.lineWidth = this.width;      
        // Set the graph points
        for (let i=0; i < dpsx.length; i++){
            let x = height/2 - scale*dpsx[i];           
            ct.lineTo(i * interval, x);
        }
        ct.stroke();  

        // y plot
        ct.beginPath();
        ct.moveTo(0,0);
        ct.strokeStyle = this.ycolor;
        ct.lineWidth = this.width;      
        // Set the graph points
        for (let i=0; i < dpsy.length; i++){
            let y = height/2 - scale*dpsy[i];
            ct.lineTo(i * interval, y);
        }
        ct.stroke();      

        // z plot
        ct.beginPath();
        ct.moveTo(0,0);    
        ct.strokeStyle = this.zcolor;
        ct.lineWidth = this.width;      
        // Set the graph points
        for (let i=0; i < dpsz.length; i++){
            let z = height/2 - scale*dpsz[i];
            ct.lineTo(i * interval, z);
        }
        ct.stroke();          
    }
};

function draw() {
    ct.clearRect(0, 0, width, height);  
    

    // Repeatedly execute the graph draw function
    graph.draw();

    // Redraw ...
    raf = window.requestAnimationFrame(draw);
}

raf = window.requestAnimationFrame(draw);

// Draw the graphs
graph.draw();


// Acceleration 
// Get the acceleration data points

// If there is data when called update the appropriate x,y,z data arrays
function updateIfNotNull(valName, value){
    if (value != null) {
        if(valName == 'X'){
            dpsx.push(value); 
            if (dpsx.length >= num) {
                dpsx.shift();
            }               
        } else if (valName == 'Y') {
            dpsy.push(value); 
            if (dpsy.length >= num) {
                dpsy.shift();
            }    
        } else if (valName == 'Z') {
            dpsz.push(value); 
            if (dpsz.length >= num) {
                dpsz.shift();
            }    
        }
    }    
}

// Runs if something moved.
function handleMotion(event) {
  updateIfNotNull('X', event.accelerationIncludingGravity.x);
  updateIfNotNull('Y', event.accelerationIncludingGravity.y);
  updateIfNotNull('Z', event.accelerationIncludingGravity.z);
}

// Start and stop the data gathering and graphing
let is_running = false;
let button = document.getElementById("start");

button.onclick = function(e) {
    e.preventDefault();
  
    // Request permission for iOS 13+ devices
    if ( DeviceMotionEvent && typeof DeviceMotionEvent.requestPermission === "function") {
        DeviceMotionEvent.requestPermission();
    }
    // Do the Stop and Start
    if (is_running){
        window.removeEventListener("devicemotion", handleMotion);
        button.innerHTML = "Start";
        is_running = false;
    }else{
        window.addEventListener("devicemotion", handleMotion);
        document.getElementById("start").innerHTML = "Stop";
        is_running = true;
    }
};
</script>

</body>
</html>