davidjb/acceleration-demo.html

## acceleration-demo.html
<!DOCTYPE html>
<html>
    <meta http-equiv="content-type" content="text/html;charset=UTF-8" />
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<body>
    <script type="text/javascript" charset="utf-8">
        var counter = 0;
        var timeout;
        window.addEventListener('devicemotion', function(event) {
            var accel = event.acceleration;
            if (accel.x > 7 || accel.y > 7 || accel.z > 7) {
                //$('.content').append('' + accel.x.toFixed(1) + ',' + accel.y.toFixed(1) + ',' + accel.z.toFixed(1) + '<br>');
                counter++;
                $('.content').append(counter);
                timeout = setTimeout(function() {
                    if (counter < 4) {
                        counter = 0;
                    }
                }, 800);

            }
            if (counter > 4) {
                $('.content').append('Magic 8 ball says: you rock!');
                counter = 0;
                clearInterval(timeout);
            }
        });

    //window.ondevicemotion = function(event) {
    //var motion = event.accelerationIncludingGravity;
    //document.write("" + motion.x + ", " + motion.y + ", " + motion.z + "<br>");
    //}

    </script>
    Here we go
    <div class="content">
    </div>
</body>
</html>

## compass-demo.html
<!DOCTYPE html>
<html>
    <meta http-equiv="content-type" content="text/html;charset=UTF-8" />
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<body>
    <script type="text/javascript" charset="utf-8">
// From http://w3c.github.io/deviceorientation/spec-source-orientation.html#worked-example
function compassHeading(alpha, beta, gamma) {

  // Convert degrees to radians
  var alphaRad = alpha * (Math.PI / 180);
  var betaRad = beta * (Math.PI / 180);
  var gammaRad = gamma * (Math.PI / 180);

  // Calculate equation components
  var cA = Math.cos(alphaRad);
  var sA = Math.sin(alphaRad);
  var cB = Math.cos(betaRad);
  var sB = Math.sin(betaRad);
  var cG = Math.cos(gammaRad);
  var sG = Math.sin(gammaRad);

  // Calculate A, B, C rotation components
  var rA = - cA * sG - sA * sB * cG;
  var rB = - sA * sG + cA * sB * cG;
  var rC = - cB * cG;

  // Calculate compass heading
  var compassHeading = Math.atan(rA / rB);

  // Convert from half unit circle to whole unit circle
  if(rB < 0) {
    compassHeading += Math.PI;
  }else if(rA < 0) {
    compassHeading += 2 * Math.PI;
  }

  // Convert radians to degrees
  compassHeading *= 180 / Math.PI;

  return compassHeading;

}

var counter = 0;
if (window.DeviceOrientationEvent) {
    // Listen for the deviceorientation event and handle the raw data
    window.addEventListener('deviceorientation', function(eventData) {
        var compassdir;

        if (event.webkitCompassHeading) {
            // Apple works only with this, alpha doesn't work
            compassdir = event.webkitCompassHeading;
        } else {

            if (eventData.absolute === true && eventData.alpha !== null) {
                compassdir = compassHeading(eventData.alpha, eventData.beta, eventData.gamma);
            }

        }

        $('.content').append(compassdir);
        $('.content').append("<p>");
        counter++;
        if (counter > 20) {
            $('.content').html('');
            counter = 0;
        }
    });
}
    </script>
    Here we go
    <div class="content">
    </div>
</body>
</html>

## directions-demo.html
<!DOCTYPE html>
<html>
    <meta http-equiv="content-type" content="text/html;charset=UTF-8" />
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<body>
    <a href="https://developer.apple.com/library/ios/featuredarticles/iPhoneURLScheme_Reference/MapLinks/MapLinks.html">https://developer.apple.com/library/ios/featuredarticles/iPhoneURLScheme_Reference/MapLinks/MapLinks.html</a>.
    From Apple's docs; this falls back to Google maps on non-Mac/iOS devices
    so it's essentially cross browser compatible.
    <div class="content">
        <ul>
            <li><a href="http://maps.apple.com/?daddr=James%20Cook%20University,%20Townsville%20,%20Australia&saddr=Paddington Terrace, Douglas, Australia">Driving Direction (Home to JCU)</a></li>
            <li><a href="http://maps.apple.com/?daddr=James%20Cook%20University,%20Townsville%20,%20Australia">Driving Direction (to JCU)</a></li>
            <li><a href="http://maps.apple.com/?q=James Cook University,Townsville, Australia">Query for JCU</a></li>
            <li><a href="http://maps.apple.com/?daddr=James%20Cook%20University,%20Townsville%20,%20Australia" id="dynamic">Driving directions (from current location to JCU)</a></li>
    </div>
    <script type="text/javascript" charset="utf-8">
        var pos;
        function success(position) {
            pos = position;
        }
        function error() {
            console.log('you fail');
        }
        // Geolocation available
        if ("geolocation" in navigator) {

            // Start getting location on window load
            navigator.geolocation.getCurrentPosition(success, error);

            $('#dynamic').click(function() {
                this.href += '&saddr=' + pos.coords.latitude + ',' + pos.coords.longitude;
            });

        } else {
            error();
        }
    </script>
</body>
</html>

## geolocation-demo.html
<!DOCTYPE html>
<html>
    <meta http-equiv="content-type" content="text/html;charset=UTF-8" />
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<body>
    From
    <a href="https://developer.mozilla.org/en-US/docs/Web/API/Geolocation/Using_geolocation#Prompting_for_permission">https://developer.mozilla.org/en-US/docs/Web/API/Geolocation/Using_geolocation#Prompting_for_permission</a>.
    Spinner from
    <a href="http://spiffygif.com/">http://spiffygif.com/</a>.
    <br>
    Go! Your current location is:
    <div class="content">
        <img src="spinner.gif"> Getting location...
    </div>
    <script type="text/javascript" charset="utf-8">
        var pos;
        function success(position) {
            if ($('.content img')) {
                $('.content').html('');
            }
            $('.content').append('' + position.coords.latitude + ', ' + position.coords.longitude + "[" + position.coords.accuracy + "m]" + "<br>");
        }
        function error() {
            alert('geolocation fail');
        }
        // Geolocation available
        if ("geolocation" in navigator) {

            // Start getting location on window load
            navigator.geolocation.getCurrentPosition(success, error);

            // Keep watching the position over time
            var watch = navigator.geolocation.watchPosition(success, error);

        } else {
            error();

            // Enter a location and geocode
        }
    </script>
</body>
</html>

## spinner.gif

      
    Raw
  

              spinner.gif
	<!DOCTYPE html>
	<html>
	<meta http-equiv="content-type" content="text/html;charset=UTF-8" />
	<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
	<body>
	<script type="text/javascript" charset="utf-8">
	var counter = 0;
	var timeout;
	window.addEventListener('devicemotion', function(event) {
	var accel = event.acceleration;
	if (accel.x > 7 \|\| accel.y > 7 \|\| accel.z > 7) {
	//$('.content').append('' + accel.x.toFixed(1) + ',' + accel.y.toFixed(1) + ',' + accel.z.toFixed(1) + '<br>');
	counter++;
	$('.content').append(counter);
	timeout = setTimeout(function() {
	if (counter < 4) {
	counter = 0;
	}
	}, 800);

	}
	if (counter > 4) {
	$('.content').append('Magic 8 ball says: you rock!');
	counter = 0;
	clearInterval(timeout);
	}
	});

	//window.ondevicemotion = function(event) {
	//var motion = event.accelerationIncludingGravity;
	//document.write("" + motion.x + ", " + motion.y + ", " + motion.z + "<br>");
	//}

	</script>
	Here we go
	<div class="content">
	</div>
	</body>
	</html>