From 960f6c2443b7814f000112ca2356b1afa22d6110 Mon Sep 17 00:00:00 2001 From: Keith Irwin Date: Wed, 29 Mar 2017 03:45:56 -0400 Subject: [PATCH] Restored lost edits --- index.html | 19 ++++++++++++------- script.js | 49 ++++++++++++++++++++++++++++++++++++++++--------- style.css | 53 ++++++++++++++++++++++++++++++++++++++++++++--------- 3 files changed, 96 insertions(+), 25 deletions(-) diff --git a/index.html b/index.html index e210183..cd4a626 100644 --- a/index.html +++ b/index.html @@ -3,8 +3,8 @@ Compass - - + + @@ -42,10 +42,13 @@
-
No GPS data available.
-
-
+
No GPS data available.
+
0.00000 N
+
0.00000 E
+ +
0.0 m
+
No altitude data available.
@@ -53,17 +56,19 @@
No direction available. Try this on a smartphone with an internal compass.
+
Note: the compass may be 90° off when used in landscape mode.
+ diff --git a/script.js b/script.js index 015a38a..a842fbc 100644 --- a/script.js +++ b/script.js @@ -1,12 +1,19 @@ window.addEventListener("deviceorientation", setRose, true); +const metric = !(window.navigator.language=='en-US'||window.navigator.language=='my'); +var elevator; +function gmapsCB(){ + elevator = new google.maps.ElevationService; +} + if (!navigator.geolocation){ $('#no-gps').show(); } else { navigator.geolocation.watchPosition( // success function(pos) { - var lat = pos.coords.latitude.toFixed(5); - var lon = pos.coords.longitude.toFixed(5); + setAltitude(pos.coords.latitude, pos.coords.longitude); + var lat = pos.coords.latitude.toFixed(4); + var lon = pos.coords.longitude.toFixed(4); lat = (lat.substring(0,1)=='-')? lat.substring(1)+' S' : lat+' N'; lon = (lon.substring(0,1)=='-')? lon.substring(1)+' E' : lon+' W'; $('#lat').text(lat); @@ -15,6 +22,7 @@ else { // error function() { $('.coord').hide(); + $('#rotated').hide(); $('#no-gps').show(); }, // options @@ -22,21 +30,44 @@ else { ); } +function setAltitude(lat,lon) { + if (typeof elevator != 'undefined') { + elevator.getElevationForLocations({ + 'locations': [ new google.maps.LatLng(lat,lon) ] + }, function(res) { + console.log(res); + if (res[0].elevation){ + $('#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); + } else { + // Show error + if (res.status && res.status!='OK') { + $('#no-alt').text('No altitude data available: '+res.status+'. '); + } + $('#no-alt').show(); + } + }); + } +} + function setRose(e) { - - // No orientation data - if(!e.absolute) { + if(!e.absolute) { // No orientation data + $('#rotated').hide(); $('#no-dir').show(); } else { - - // Rotate rose var rot = 'rotate('+e.alpha.toString().substring(0,5)+'deg)'; $('#rose').css({ '-ms-transform': rot, '-webkit-transform': rot, 'transform': rot }); - } - } diff --git a/style.css b/style.css index 91d6983..3f69099 100644 --- a/style.css +++ b/style.css @@ -6,7 +6,12 @@ body { color: #EEE; } +header, main, footer, .error, noscript { + position: absolute; +} + .error, noscript { + z-index: 10; color: #F22; font-size: 22px; text-align: center; @@ -18,7 +23,7 @@ body { } .coord { - height: 50%; + height: 33%; text-align: center; font-size: 44px; font-family: monospace; @@ -31,23 +36,26 @@ body { } @media (orientation:portrait) { - header, main, footer, .error, noscript { - position: absolute; - } header, main, footer { + .error#rotated { display: none; } + header, main, footer { width: 90vw; padding: 5vw; } .error, noscript { width: 82vw; } header { - height: calc(60vh - 60vw); + height: calc(65vh - 60vw); top: 0; } main { height: 90vw; - top: calc(60vh - 50vw); + top: calc(65vh - 50vw); } footer { - height: calc(40vh - 60vw); + height: calc(35vh - 60vw); bottom: 0; + } #about { + float: left; + } #by { + float: right; } main .error { top: 50%; @@ -56,10 +64,37 @@ body { } } @media (orientation:landscape) { - + .error#rotated { display: block; } + header, main, footer { + height: 90vh; + padding: 5vh; + } .error, noscript { + width: 82vh;/**/ + } + header { + width: calc(65vw - 60vh); + left: 0; + } main { + width: 90vh; + left: calc(65vw - 50vh); + } footer { + text-align: right; + width: calc(35vw - 60vh); + right: 0; + } #by { + position: absolute; + bottom: 5vh; + right: 5vh; + } + main .error { + top: 50%; + transform: translateY(-50%); + padding: 35vh 4vh; + } } -#error { display: none; } + +error { display: none; } a { color: inherit;