Permalink
Switch branches/tags
Nothing to show
Find file Copy path
Fetching contributors…
Cannot retrieve contributors at this time
97 lines (78 sloc) 2.54 KB
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
function simulateGyroscope()
{
var event = document.createEvent('Event');
event.initEvent('deviceorientation', true, true);
var mouseAngle = getMouseAngle(mouseX, mouseY);
event.webkitCompassHeading = (360 - mouseAngle);
window.dispatchEvent(event);
}
function getMouseAngle(x, y)
{
var A = [faceRadius, faceRadius];
var B = [x - ((w /2) - faceRadius), y - ((h/2) - faceRadius)];
var C = [faceRadius, 0];
var a = Math.sqrt( Math.pow((B[0] - C[0]), 2) + Math.pow((B[1] - C[1]), 2) );
var b = Math.sqrt( Math.pow((A[0] - C[0]), 2) + Math.pow((A[1] - C[1]), 2) );
var c = Math.sqrt( Math.pow((B[0] - A[0]), 2) + Math.pow((B[1] - A[1]), 2) );
var cosA = (Math.pow(b, 2) + Math.pow(c, 2) - Math.pow(a, 2)) / (2*b*c);
var angle = radToDeg(Math.acos(cosA));
if (B[0] < A[0])
{
angle = 180 + (180 - angle);
}
return angle;
}
function setupDesktop()
{
window.orientation = 0;
window.addEventListener('resize', onResize);
document.onmousemove = function(e) {mouseX = e.clientX; mouseY = e.clientY};
simulationInterval = setInterval(simulateGyroscope, SIMULATION_INTERVAL);
}
function stop()
{
if (renderingInterval) clearInterval(renderingInterval);
window.removeEventListener('deviceorientation', onDeviceOrientationChange);
window.removeEventListener('resize', onResize);
window.removeEventListener('orientationchange', onResize);
document.onmousemove = null;
}
function start()
{
window.addEventListener('deviceorientation', onDeviceOrientationChange);
if (hasCompass)
{
if (navigator.userAgent.toLowerCase().indexOf('android') != -1) // Android
{
// On Android, we have to listen for resize events. That's how you get
// the correct innerWidth and innerHeight.
window.addEventListener('resize', onResize);
// Use a rendering loop to smooth out the erratic gyroscope values.
renderingInterval = setInterval(animateNeedle, NEEDLE_ANIMATION_UPDATE_INTERVAL);
}
else // iOS
{
// On iOS, we can't use resize events because they fire every time innerHTML
// is set. Instead, we'll use 'orientationchange' events.
window.addEventListener('orientationchange', onResize);
}
}
else
{
setupDesktop();
}
}
function setupDesktop()
{
window.orientation = 0;
window.addEventListener('resize', onResize);
}
</script>
</head>
<body>
</body>
</html>