Skip to content

Instantly share code, notes, and snippets.

@mekya

mekya/device_orientation.html

Created January 27, 2014 13:00
Show Gist options
  • Save mekya/8648150 to your computer and use it in GitHub Desktop.
Save mekya/8648150 to your computer and use it in GitHub Desktop.
Download ZIP
How to get device orientation angles(alpha, beta, gamma) in HTML5. It draws circle and rectangles according to angle(alpha, beta, gamma) values
Raw
device_orientation.html
<!DOCTYPE html>
<html>
<body>
<canvas id="myCanvas" width="360" height="450" style="border:1px solid #d3d3d3;">
</canvas>
<script>
function deviceOrientationListener(event) {
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.clearRect(0,0, c.width, c.height);
ctx.fillStyle="#FF7777";
ctx.font="14px Verdana";
ctx.fillText("Alpha:" + Math.round(event.alpha) ,10,20);
ctx.beginPath();
ctx.moveTo(180, 75);
ctx.lineTo(210, 75);
ctx.arc(180,75,60,0, event.alpha*Math.PI/180);
ctx.fill();
ctx.fillStyle="#FF6600";
ctx.fillText("Beta:" + Math.round(event.beta),10,140);
ctx.beginPath();
ctx.fillRect(180, 150, event.beta, 90);
ctx.fillStyle="#FF0000";
ctx.fillText("Gamma:" + Math.round(event.gamma),10,270);
ctx.beginPath();
ctx.fillRect(90, 340, 180, event.gamma);
}
if (window.DeviceOrientationEvent) {
window.addEventListener("deviceorientation", deviceOrientationListener);
}
else {
alert("Sorry, your browser doesn't support Device Orientation");
}
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment