~/piMakers/presentations/javaScript/code/orientation.html.html

<!doctype html>
<!-- 
From:  https://sensor-js.xyz/demo.html
Modified by: Deid Reimer
Date: 2022-02-18
-->
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <title>JavaScript Sensor Access Demo</title>
</head>
<style>
body {
    background-image: url('airplane.png');
    background-repeat: no-repeat;
}
</style>
<body>
<h1 align="left">Orientation</h1>
<p>Sensor data is displayed by javascript running on the local browser. </p>
<p>Run on a mobile phone or a tablet - a device that has the appropriate sensors.</p>

<p><b>deviceorientation provides:</b><ul><li>alpha - yaw </li><li>beta - pitch</li><li>gamma - roll</li></ul></p>
<a id="start_demo" href="#" role="button" >Start the demo</a>

<p>Num. of datapoints: <span id="num-observed-events">0</span></p>

<h4>Device Orientation:</h4>
<ul>
    <li style="font-size: 2em">Yaw (&alpha;): <span id="Orientation_a">0</span><span>&deg;</span></li>
    <li style="font-size: 2em">Pitch (&beta;): <span id="Orientation_b">0</span><span>&deg;</span></li>
    <li style="font-size: 2em">Roll (&gamma;): <span id="Orientation_g">0</span><span>&deg;</span></li>
 </ul>

<script>
// Javascript functions to start and display orientation data.

// Update given field if there is data. Set the number of decimal points.
function updateFieldIfNotNull(fieldName, value, precision=1){
  if (value != null)
      document.getElementById(fieldName).innerHTML = value.toFixed(precision);
} 

// Increment the number of events counter
function incrementEventCount(){
    let counterElement = document.getElementById("num-observed-events")
    let eventCount = parseInt(counterElement.innerHTML)
    counterElement.innerHTML = eventCount + 1;
}

// Event listener for orientation.  Triggered when the orientation changes.
function handleOrientation(event) {
    updateFieldIfNotNull('Orientation_a', event.alpha);
    updateFieldIfNotNull('Orientation_b', event.beta);
    updateFieldIfNotNull('Orientation_g', event.gamma);
    incrementEventCount();
}

// Stop and Start data collection
let is_running = false;
let demo_button = document.getElementById("start_demo");

// Function to handle clicking the start/stop link
demo_button.onclick = function(e) {
    e.preventDefault();
  
    // Request permission for iOS 13+ devices
    if ( DeviceMotionEvent && typeof DeviceMotionEvent.requestPermission === "function" ) {
        DeviceMotionEvent.requestPermission();
    }
  
    // If running stop it  
    if (is_running){
        // Stop event listener
        window.removeEventListener("deviceorientation", handleOrientation);
        // Set Link to "Start demo"
        demo_button.innerHTML = "Start demo";
        is_running = false;
  
    }else{
        // If stopped start it.
        window.addEventListener("deviceorientation", handleOrientation);
        document.getElementById("start_demo").innerHTML = "Stop demo";
        is_running = true;
        document.getElementById("num-observed-events").innerHTML = 0;
    }
};

</script>
</body>
</html>