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