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)