ki9
/
compass
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Minor fixes

master
Keith Irwin 2017-03-29 08:02:16 -04:00
parent f95e77f4c3
commit b50b83a6d1
No known key found for this signature in database
GPG Key ID: 378933C743E2BBC0
3 changed files with 59 additions and 31 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
index.html
View File

@ -1,4 +1,5 @@
<html> <html>
<head> <head>
<!-- Metadata --> <!-- Metadata -->
@ -39,6 +40,8 @@
<link rel="stylesheet" href="style.css" /> <link rel="stylesheet" href="style.css" />
</head>
<body> <body>
<header> <header>
@ -46,7 +49,7 @@
<div class='error' id='no-gps'>No GPS data available. </div> <div class='error' id='no-gps'>No GPS data available. </div>
<div class='coord' id='lat'>0.00000 N</div> <div class='coord' id='lat'>0.00000 N</div>
<div class='coord' id='lon'>0.00000 E</div> <div class='coord' id='lon'>0.00000 E</div>
<div class='coord' id='alt'>0.0 m</div> <div class='coord' id='alt'>0.0 m</div>
<div class='error' id='no-alt'>No altitude data available. </div> <div class='error' id='no-alt'>No altitude data available. </div>
@ -70,6 +73,7 @@
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script async defer src="https://maps.googleapis.com/maps/api/js?key=AIzaSyAnM0oMEWtnYTEaHURDQTt6BK5BuGGH2E4&callback=gmapsCB"></script> <script async defer src="https://maps.googleapis.com/maps/api/js?key=AIzaSyAnM0oMEWtnYTEaHURDQTt6BK5BuGGH2E4&callback=gmapsCB"></script>
<script src="script.js"></script> <script src="script.js"></script>
</body> </body>
</html> </html>

80
script.js
View File

@ -1,15 +1,14 @@
window.addEventListener("deviceorientation", setRose, true); 'use strict';
/* global navigator google $ */
// Set units based on browser locale
const metric = !(window.navigator.language=='en-US'||window.navigator.language=='my'); const metric = !(window.navigator.language=='en-US'||window.navigator.language=='my');
var elevator;
function gmapsCB(){
elevator = new google.maps.ElevationService;
}
// Track GPS location
if (!navigator.geolocation){ $('#no-gps').show(); } if (!navigator.geolocation){ $('#no-gps').show(); }
else { else { navigator.geolocation.watchPosition(
navigator.geolocation.watchPosition(
// success // Got location
function(pos) { function(pos) {
setAltitude(pos.coords.latitude, pos.coords.longitude); setAltitude(pos.coords.latitude, pos.coords.longitude);
var lat = pos.coords.latitude.toFixed(4); var lat = pos.coords.latitude.toFixed(4);
@ -18,51 +17,72 @@ else {
lon = (lon.substring(0,1)=='-')? lon.substring(1)+' E' : lon+' W'; lon = (lon.substring(0,1)=='-')? lon.substring(1)+' E' : lon+' W';
$('#lat').text(lat); $('#lat').text(lat);
$('#lon').text(lon); $('#lon').text(lon);
}, },
// error
// Got error
function() { function() {
$('.coord').hide(); $('.coord').hide();
$('#rotated').hide(); $('#rotated').hide();
$('#no-gps').show(); $('#no-gps').show();
}, },
// options
// Options
{ enableHighAccuracy:true } { enableHighAccuracy:true }
); );
} }
// Set altitude
function setAltitude(lat,lon) { function setAltitude(lat,lon) {
if (typeof elevator != 'undefined') {
// Create elevator
if (typeof elevator == 'undefined') {
var elevator = new google.maps.ElevationService;
}
// Query API
else {
elevator.getElevationForLocations({ elevator.getElevationForLocations({
'locations': [ new google.maps.LatLng(lat,lon) ] 'locations': [ new google.maps.LatLng(lat,lon) ]
}, function(res) { }, function(res) {
console.log(res);
if (res[0].elevation){ // Show error
$('#no-alt').hide(); if (!res[0].elevation) {
var alt = res[0].elevation;
// Convert
if (metric) {
alt = alt.toFixed(1)+' m';
} else {
alt = (alt*0.3048).toFixed(1)+' ft';
}
// Set element text
$('#alt').text(alt);
} else {
// Show error
if (res.status && res.status!='OK') { if (res.status && res.status!='OK') {
$('#no-alt').text('No altitude data available: '+res.status+'. '); $('#no-alt').text('No altitude data available: '+res.status+'. ');
} }
$('#no-alt').show(); $('#no-alt').show();
} }
// Successfully got altitude
else {
$('#no-alt').hide();
var alt = res[0].elevation;
// Convert
if (metric) { alt=alt.toFixed(1)+' m'; }
else { alt=(alt*0.3048).toFixed(1)+' ft'; }
// Set element text
$('#alt').text(alt);
}
}); });
} }
} }
// Set compass orientation
function setRose(e) { function setRose(e) {
if(!e.absolute) { // No orientation data
// No orientation data
if(!e.absolute) {
$('#rotated').hide(); $('#rotated').hide();
$('#no-dir').show(); $('#no-dir').show();
} else { }
// Set orientation
else {
var rot = 'rotate('+e.alpha.toString().substring(0,5)+'deg)'; var rot = 'rotate('+e.alpha.toString().substring(0,5)+'deg)';
$('#rose').css({ $('#rose').css({
'-ms-transform': rot, '-ms-transform': rot,
@ -70,4 +90,6 @@ function setRose(e) {
'transform': rot 'transform': rot
}); });
} }
} }
window.addEventListener("deviceorientation", setRose, true);

2
style.css
View File

@ -32,6 +32,8 @@ header, main, footer, .error, noscript {
#rose { #rose {
width: 100%; width: 100%;
-webkit-transition-duration: 2s; -webkit-transition-duration: 2s;
-moz-transition-duration: 2s;
-o-transition-duration: 2s;
transition-duration: .2s; transition-duration: .2s;
} }