Created
March 4, 2011 07:47
-
-
Save xk/854319 to your computer and use it in GitHub Desktop.
phonegap:rotate.js
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!DOCTYPE html> | |
<html> | |
<head> | |
<!-- Change this if you want to allow scaling --> | |
<meta name="viewport" content="width=default-width; user-scalable=no"> | |
<meta http-equiv="Content-type" content="text/html; charset=utf-8"> | |
<title>gira</title> | |
<!-- iPad/iPhone specific css below, add after your main css > | |
<link rel="stylesheet" media="only screen and (max-device-width: 1024px)" href="ipad.css" type="text/css" /> | |
<link rel="stylesheet" media="only screen and (max-device-width: 480px)" href="iphone.css" type="text/css" /> | |
--> | |
<style type="text/css"> | |
body { | |
font-family:Helvetica Neue; | |
font-weight:bold; | |
-webkit-tap-highlight-color: rgba(0,0,255,0.7); | |
} | |
button { width:60%; height:4em; } | |
#body { margin:0; padding:0; border:0 none; -webkit-transform-origin:center center; text-align:center; } | |
div { overflow:hidden; } | |
</style> | |
<!-- If you application is targeting iOS BEFORE 4.0 you MUST put json2.js from http://www.JSON.org/json2.js into your www directory and include it here --> | |
<script type="text/javascript" charset="utf-8" src="phonegap.0.9.4.min.js"></script> | |
<script type="text/javascript" charset="utf-8"> | |
// If you want to prevent dragging, uncomment this section | |
/* | |
function preventBehavior(e) | |
{ | |
e.preventDefault(); | |
}; | |
document.addEventListener("touchmove", preventBehavior, false); | |
*/ | |
function onBodyLoad() | |
{ | |
document.addEventListener("deviceready",onDeviceReady,false); | |
} | |
/* When this function is called, PhoneGap has been initialized and is ready to roll */ | |
function onDeviceReady() | |
{ | |
// do your thing! | |
//************************************************************* | |
// DISPLAY ROTATION + GRAVEDAD | |
(function _rotation () { | |
if (!navigator.accelerometer) return; | |
function dCE (p) { | |
return document.createElement(p); | |
} | |
var body= document.body.appendChild(dCE('div')); | |
body.id= "body"; | |
var rotation= body.appendChild(dCE('div')); | |
var display= rotation.appendChild(dCE('div')); | |
var btn= rotation.appendChild(dCE('button')); | |
btn.innerHTML= "ACTIVAR GRAVEDAD"; | |
var gravedad; | |
btn.onclick= function () { | |
if (gravedad) { | |
navigator.accelerometer.clearWatch(gravedad); | |
gravedad= null; | |
//reset a la vertical; | |
btn.style.WebkitTransition= "-webkit-transform 444ms ease-out 0"; | |
btn.style.WebkitTransform= "rotate(0deg)"; | |
btn.innerHTML= "ACTIVAR GRAVEDAD"; | |
display.innerHTML= ""; | |
} | |
else { | |
gravedad = navigator.accelerometer.watchAcceleration( okCB, errCB, { frequency:111 }); | |
btn.innerHTML= "DESACTIVAR GRAVEDAD"; | |
} | |
} | |
function okCB (r) { | |
display.innerHTML= ["x: ", r.x.toFixed(2), ", y:", r.y.toFixed(2), ", z:", r.z.toFixed(2)].join(''); | |
if (gravedad) { | |
btn.style.WebkitTransition= "-webkit-transform 150ms ease-out 0"; | |
btn.style.WebkitTransform= "rotate("+ (-r.x* 90).toFixed(2)+ "deg)"; | |
} | |
} | |
function errCB (err) { | |
alert("ACCELERATOR ERR "+ err); | |
} | |
})(); | |
} | |
</script> | |
</head> | |
<body onload="onBodyLoad()"> | |
</body> | |
</html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment