xk/rotate.js

## rotate.js
<!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>
	<!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>