iOS Accelerometer and Javascript

This script needs to run with SSL – issue for vehicles

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Accelerometer</title>

        <style>
        .indicatorDot{
            width: 30px;
            height: 30px;
            background-color: #ffab56;
            border-radius: 50%;
            position:fixed;
        }
        .coordinateDisplay{
            width: 300px;
            height: 100px;
            background-color:blanchedalmond;
        }
        </style>
        <script>
            var px = 50; // Position x and y
            var py = 50;
            var vx = 0.0; // Velocity x and y
            var vy = 0.0;
            var updateRate = 1/60; // Sensor refresh rate

            function getAccel(){
                DeviceMotionEvent.requestPermission().then(response => {
                    if (response == 'granted') {
                    // Add a listener to get smartphone orientation 
                     // in the alpha-beta-gamma axes (units in degrees)
                     window.addEventListener('deviceorientation',(event) => {
                     // Expose each orientation angle in a more readable way
                        rotation_degrees = event.alpha;
                        frontToBack_degrees = event.beta;
                        leftToRight_degrees = event.gamma;
                
                    // Update velocity according to how tilted the phone is
                    // Since phones are narrower than they are long, double the increase to the x velocity
                        vx = vx + leftToRight_degrees * updateRate*2; 
                        vy = vy + frontToBack_degrees * updateRate;
                
                    // Update position and clip it to bounds
                        px = px + vx*.5;
                        if (px > 98 || px < 0){ 
                            px = Math.max(0, Math.min(98, px)) // Clip px between 0-98
                            vx = 0;
                        }

                        py = py + vy*.5;
                        if (py > 98 || py < 0){
                            py = Math.max(0, Math.min(98, py)) // Clip py between 0-98
                            vy = 0;
                        }
                
                    dot = document.getElementsByClassName("indicatorDot")[0]
                    dot.setAttribute('style', "left:" + (px) + "%;" + "top:" + (py) + "%;");
                                              
                    document.getElementById("yAxis").innerHTML = "Y Axis: " +py+"<br>X Axis: "+px;
                    document.getElementById("xAxis").innerHTML = "Y Axis: " +py+"<br>X Axis: "+px;

                        if(py > 67){
                            dot = document.getElementsByClassName("coordinateDisplay")[0]
                            dot.setAttribute('style', "background-color:red;");
                        } else if (py < 67 && py > 33){
                            dot = document.getElementsByClassName("coordinateDisplay")[0]
                            dot.setAttribute('style', "background-color:yellow;");
                        } else {
                            dot = document.getElementsByClassName("coordinateDisplay")[0]
                            dot.setAttribute('style', "background-color:green;");
                        }
            });
        }
    });
}
        </script>

    </head>
    <body style="background-color:lightblue;">
        <button id="accelPermsButton"  style="height:50px;" onclick="getAccel()"><h1>Get Accelerometer Permissions</h1></button>
        <div class="indicatorDot" style="left:30%; top:30%;"><p id="yAxis">b Axis</p></div>

        <div class="coordinateDisplay">
        <p id="xAxis">b Axis</p>
        </div>

    </body>
    
</html>
Code language: HTML, XML (xml)

Version 2

This is a second version to demo the code. It shows the X, Y and Z Axis coordinates and then changes the DIV color based on the Y Axis.

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Accelerometer</title>

        <style>
        .indicatorDot{
            width: 60px;
            height: 60px;
            background-color: #ffab56;
            border-radius: 50%;
            position:fixed;
        }
        .coordinateDisplay{
            width: 600px;
            height: 125px;
            background-color:blanchedalmond;
        }
        </style>
        <script>
            var px = 50; // Position x and y
            var py = 50;
            var vx = 0.0; // Velocity x and y
            var vy = 0.0;
            var updateRate = 1/60; // Sensor refresh rate

            function getAccel(){
                DeviceMotionEvent.requestPermission().then(response => {
                    if (response == 'granted') {
                    // Add a listener to get smartphone orientation 
                     // in the alpha-beta-gamma axes (units in degrees)
                     window.addEventListener('deviceorientation',(event) => {
                     // Expose each orientation angle in a more readable way
                        rotation_degrees = event.alpha;
                        frontToBack_degrees = event.beta;
                        leftToRight_degrees = event.gamma;
                
                    // Update velocity according to how tilted the phone is
                    // Since phones are narrower than they are long, double the increase to the x velocity
                        vx = vx + leftToRight_degrees * updateRate*2; 
                        vy = vy + frontToBack_degrees * updateRate;
                
                    // Update position and clip it to bounds
                        px = px + vx*.5;
                        if (px > 98 || px < 0){ 
                            px = Math.max(0, Math.min(98, px)) // Clip px between 0-98
                            vx = 0;
                        }

                        py = py + vy*.5;
                        if (py > 98 || py < 0){
                            py = Math.max(0, Math.min(98, py)) // Clip py between 0-98
                            vy = 0;
                        }
                
                    dot = document.getElementsByClassName("indicatorDot")[0]
                    dot.setAttribute('style', "left:" + (px) + "%;" + "top:" + (py) + "%;");
                                              
                    document.getElementById("xAxis").innerHTML = "Y Axis: " +frontToBack_degrees+"<br>X Axis: "+leftToRight_degrees+"<br>Z Axis: "+rotation_degrees;

                        if(frontToBack_degrees > 67){
                            dot = document.getElementsByClassName("coordinateDisplay")[0]
                            dot.setAttribute('style', "background-color:red;");
                        } else if (frontToBack_degrees < 67 && frontToBack_degrees > 33){
                            dot = document.getElementsByClassName("coordinateDisplay")[0]
                            dot.setAttribute('style', "background-color:yellow;");
                        } else {
                            dot = document.getElementsByClassName("coordinateDisplay")[0]
                            dot.setAttribute('style', "background-color:green;");
                        }
            });
        }
    });
}
        </script>

    </head>
    <body>
        <button id="accelPermsButton"  style="height:50px;" onclick="getAccel()"><h1>Get Accelerometer Permissions</h1></button>
        <div class="indicatorDot" style="left:30%; top:30%;"></div>

        <div class="coordinateDisplay">
        <p id="xAxis" style="font-size: 30px;">Axis Coordinates</p>
        </div>

    </body>
    
</html>
Code language: HTML, XML (xml)