Skip to content

Instantly share code, notes, and snippets.

@davidjb

davidjb/acceleration-demo.html

Last active June 7, 2019 22:16
Show Gist options
  • Save davidjb/2f5dcb4ad4e426a2cb94 to your computer and use it in GitHub Desktop.
Save davidjb/2f5dcb4ad4e426a2cb94 to your computer and use it in GitHub Desktop.
Download ZIP
Web API demos for acceleration, compass (non-standard), directions, geolocation and more.
Raw
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>
Raw
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>
Raw
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>
Raw
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>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment