check back for updates
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<link rel="apple-touch-icon" href="apple-touch-icon.png" />
<title>Tristan griffins's Gyro Demo</title>
<meta name="apple-touch-fullscreen" content="yes" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<style>
#no {
display: none;
}
@media screen {
html, body, div, span {
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-size: 100%;
vertical-align: baseline;
}
body {
height: auto;
-webkit-text-size-adjust:none;
font-family:Helvetica, Arial, Verdana, sans-serif;
padding:0px;
overflow-x: hidden;
}
.outer {
background: rgba(123, 256, 245, 0.9);
padding: 0px;
min-height: 48px;
}
.box {
position: relative;
float: left;
width: 45%;
padding: 7px;
border: 1px solid rgba(255, 255, 255, 0.6);
background: rgba(178,215,255,0.75);
min-height: 160px;
}
.box2 {
position: relative;
float: left;
width: 45%;
padding: 7px;
border: 1px solid rgba(255, 255, 255, 0.6);
background: rgba(178,215,255,0.75);
}
.box span {
display: block;
}
span.head {
font-weight: bold;
}
}
#panobox1 {
position:relative;
width: 400%;
height: 200%;
background-color:green;
}
#panobox2 {
position:relative;
width: 400%;
height: 200%;
background-color:green;
}
.panoramic1 { width:100%; height:100%; position:relative;}
.panoramic2 { width:100%; height:100%; position:relative; left:5%;}
#box1 { width: 50%; height:100%; overflow: hidden; position:absolute;top:0%; left:0%;}
#box2 { width: 50%; height:100%; overflow: hidden; position:absolute; top:0%; left:50%;}
</style>
</head>
<body id="container">
<!--
<div id = "box"><img src="1.jpg" width="100%" height="100%"></div>
-->
<script src="fullscreener.js"></script><style> #button {z-index: 3; position:absolute;} </style>
<button onclick="full_screen();" id="button">Fullscreen</button>
<div id="box1"> <div id = "panobox1"><img src="5.jpg" width="100%" height="100%"></div>
</div>
<div id="box2"> <div id = "panobox2"><img src="5.jpg" width="100%" height="100%"></div>
</div>
<div id="yes">
<div class="box" id="accel">
<span class="head">Accelerometer</span>
<span id="xlabel"></span>
<span id="ylabel"></span>
<span id="zlabel"></span>
<span id="ilabel"></span>
<span id="arAlphaLabel"></span>
<span id="arBetaLabel"></span>
<span id="arGammaLabel"></span>
</div>
<div class="box" id="gyro">
<span class="head">Gyroscope</span>
<span id="alphalabel"></span>
<span id="betalabel"></span>
<span id="gammalabel"></span>
</div>
<div class="box2" id="accelcolor">
<span class="head">Color</span>
</div>
<div class="box2" id="gyrocolor">
<span class="head">Color</span>
</div>
</div>
<div id="no">
Your browser does not support Device Orientation and Motion API. Try this sample with iPhone, iPod or iPad with iOS 4.2+.
</div>
<script>
///////////////////////////////////////////////////////////// gyroscope controls START /////////////////////
// Position Variables
var x = 0;
var y = 0;
var z = 0;
// Speed - Velocity
var vx = 0;
var vy = 0;
var vz = 0;
// Acceleration
var ax = 0;
var ay = 0;
var az = 0;
var ai = 0;
var arAlpha = 0;
var arBeta = 0;
var arGamma = 0;
var delay = 50;
var vMultiplier = 0.01;
var alpha = 0;
var alpha = 0;
var beta = 0;
var gamma = 0;
var lastalpha = 0;
var lastgamma = 0;
var firstalpha = 0;
var maxalpha = 45;
var minalpha = -45;
var truecenter = 0;
var HorizontalMax = 0;
var HorizontalMin = 0;
if (window.DeviceMotionEvent==undefined) {
document.getElementById("no").style.display="block";
document.getElementById("yes").style.display="none";
}
else {
window.ondevicemotion = function(event) {
ax = Math.round(Math.abs(event.accelerationIncludingGravity.x * 1));
ay = Math.round(Math.abs(event.accelerationIncludingGravity.y * 1));
az = Math.round(Math.abs(event.accelerationIncludingGravity.z * 1));
ai = Math.round(event.interval * 100) / 100;
rR = event.rotationRate;
if (rR != null) {
arAlpha = Math.round(rR.alpha);
arBeta = Math.round(rR.beta);
arGamma = Math.round(rR.gamma);
}
/*
ax = Math.abs(event.acceleration.x * 1000);
ay = Math.abs(event.acceleration.y * 1000);
az = Math.abs(event.acceleration.z * 1000);
*/
}
window.ondeviceorientation = function(event) {
alpha = Math.round(event.alpha);
if(firstalpha == 0) { firstalpha = alpha;
//maxalpha += alpha;
//minalpha += alpha;alert("start pos " + firstalpha + " max " + maxalpha + " min " + minalpha);
} // call max and min movement here for the degrees of movement
beta = Math.round(event.beta);
gamma = Math.round(event.gamma);
}
function d2h(d) {return d.toString(16);}
function h2d(h) {return parseInt(h,16);}
function makecolor(a, b, c) {
red = Math.abs(a) % 255;
green = Math.abs(b) % 255;
blue = Math.abs(c) % 255;
return "#" + d2h(red) + d2h(green) + d2h(blue);
}
function makeacceleratedcolor(a, b, c) {
red = Math.round(Math.abs(a + az) % 255);
green = Math.round(Math.abs(b + ay) % 255);
blue = Math.round(Math.abs(c + az) % 255);
return "#" + d2h(red) + d2h(green) + d2h(blue);
}
setInterval(function() {
var realalpha = alpha;
alpha -= firstalpha;
// update object position
if( alpha > 180 ) { if ( gamma > 0 ) { alpha -= 360; }}
if( gamma > 0 && alpha < 180 ){ alpha += 180; }
if( gamma < 0 && alpha < 90 ){alpha -= 180; }
var horizontalpos = alpha - 360;// - firstalpha; // * 5 - 900;
// set horizontal limiters on first pass
if(truecenter == 0) { truecenter = horizontalpos; HorizontalMin = horizontalpos - 75; HorizontalMax = horizontalpos +75; }
if( horizontalpos > HorizontalMax ) {horizontalpos = HorizontalMax;}
if(horizontalpos < HorizontalMin ) {horizontalpos = HorizontalMin;}
var horizontal = horizontalpos + "%"; //alert(horizontalpos + " " + alpha + " "+ maxalpha);
if( lastalpha != alpha)
{
document.getElementById("panobox1").style.left = horizontal;
document.getElementById("panobox2").style.left = horizontal;
lastalpha = alpha;
}
var verticalpos = 0;
if( gamma < 0 ) { verticalpos = gamma +90; }else{ verticalpos = gamma - 90;}
verticalpos -= 25;
if(verticalpos > 0) {verticalpos = 0;}
if(verticalpos < -100) { verticalpos = -100;}
var vertical = verticalpos + "%";
if(lastgamma != gamma) {
document.getElementById("panobox1").style.top = vertical;
document.getElementById("panobox2").style.top = vertical;
lastgamma = gamma; }
document.getElementById("xlabel").innerHTML = "X: " + ax;
document.getElementById("ylabel").innerHTML = "Y: " + ay;
document.getElementById("zlabel").innerHTML = "Z: " + az;
document.getElementById("ilabel").innerHTML = "I: " + ai;
document.getElementById("arAlphaLabel").innerHTML = "arA: " + arAlpha;
document.getElementById("arBetaLabel").innerHTML = "arB: " + arBeta;
document.getElementById("arGammaLabel").innerHTML = "arG: " + arGamma;
document.getElementById("alphalabel").innerHTML = "Alpha: " + realalpha + " horizontal: " + horizontal ;
document.getElementById("betalabel").innerHTML = "Beta: " + beta + " truecenter: " + truecenter + " min " + HorizontalMin;
document.getElementById("gammalabel").innerHTML = "Gamma: " + gamma + " Vertical: " + vertical;
document.getElementById("accelcolor").innerHTML = "Color: " + makecolor(ax, ay, az);
document.getElementById("accelcolor").style.background = makecolor(ax, ay, az);
document.getElementById("accelcolor").style.color = "#FFFFFF";
document.getElementById("accelcolor").style.fontWeight = "bold";
document.getElementById("gyrocolor").innerHTML = "Color: " + makecolor(alpha, beta, gamma);
document.getElementById("gyrocolor").style.background = makecolor(alpha, beta, gamma);
document.getElementById("gyrocolor").style.color = "#FFFFFF";
document.getElementById("gyrocolor").style.fontWeight = "bold";
document.bgColor = makecolor(arAlpha, arBeta, arGamma);
}, delay);
}
///////////////////////////////////////////////////////////// gyroscope controls END /////////////////////
</script>
<script>
</script>
</body>
</html>
