filmaj/index.html

## index.html
<html>
  <head>
    <title>Compass Test</title>
    <meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0, target-densityDpi=device-dpi" />
    <script type="text/javascript" src="phonegap.0.9.6.1.js"></script>
    <script type="text/javascript">
      var d = -45,
          e = null,
          w = null;
      function win(h) {
        e.style['-webkit-transform'] = 'rotate(' + (d + h) + 'deg)';
      }
      function fail(e) {
        alert(e);
      }
      function setWatch() {
        if (w) return false;
        console.log('setting watch');
        w = navigator.compass.watchHeading(win,fail);
      }
      function clearWatch() {
        console.log('clearing watch');
        navigator.compass.clearWatch(w);
        w = null;
      }
      document.addEventListener('deviceready', function() {
        e = document.getElementById('square');
        setWatch();
      }, false);
      document.addEventListener('pause', function() {
        console.log('pausing');
        clearWatch();
      }, false);
      document.addEventListener('resume', function() {
        console.log('resuming');
        setWatch();
      }, false);
    </script>
    <style>
      body {
        background-color: #EEE;
        padding:10px;
        text-align:center;
      }
      #square {
        text-align:center;
        width:200px;
        height:200px;
        background-color: red;
        border:4px solid black;
        -webkit-transform:rotate(-45deg);
      }
      #square span {
        float:right;
      }
    </style>
  </head>
  <body>
    <div id="square"><span>NORTH</span></div>
  </body>
</html>
	<html>
	<head>
	<title>Compass Test</title>
	<meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0, target-densityDpi=device-dpi" />
	<script type="text/javascript" src="phonegap.0.9.6.1.js"></script>
	<script type="text/javascript">
	var d = -45,
	e = null,
	w = null;
	function win(h) {
	e.style['-webkit-transform'] = 'rotate(' + (d + h) + 'deg)';
	}
	function fail(e) {
	alert(e);
	}
	function setWatch() {
	if (w) return false;
	console.log('setting watch');
	w = navigator.compass.watchHeading(win,fail);
	}
	function clearWatch() {
	console.log('clearing watch');
	navigator.compass.clearWatch(w);
	w = null;
	}
	document.addEventListener('deviceready', function() {
	e = document.getElementById('square');
	setWatch();
	}, false);
	document.addEventListener('pause', function() {
	console.log('pausing');
	clearWatch();
	}, false);
	document.addEventListener('resume', function() {
	console.log('resuming');
	setWatch();
	}, false);
	</script>
	<style>
	body {
	background-color: #EEE;
	padding:10px;
	text-align:center;
	}
	#square {
	text-align:center;
	width:200px;
	height:200px;
	background-color: red;
	border:4px solid black;
	-webkit-transform:rotate(-45deg);
	}
	#square span {
	float:right;
	}
	</style>
	</head>
	<body>
	<div id="square"><span>NORTH</span></div>
	</body>
	</html>