Merge branch 'master' of github.com:keith24/Compass
|
@ -0,0 +1,47 @@
|
||||||
|
'use strict'
|
||||||
|
/* global navigator $ */
|
||||||
|
|
||||||
|
|
||||||
|
// Set units based on browser locale
|
||||||
|
const metric = !(window.navigator.language=='en-US'||window.navigator.language=='my')
|
||||||
|
|
||||||
|
// Check for GPS capability
|
||||||
|
if (!navigator.geolocation) $('#no-gps').show()
|
||||||
|
|
||||||
|
// Start tracking
|
||||||
|
else navigator.geolocation.watchPosition(
|
||||||
|
|
||||||
|
// Got location callbackw
|
||||||
|
function(pos) {
|
||||||
|
let lat = pos.coords.latitude.toFixed(4)
|
||||||
|
let lon = pos.coords.longitude.toFixed(4)
|
||||||
|
$('#lat').text(
|
||||||
|
(lat.substring(0,1)=='-')? // Negative values are South
|
||||||
|
lat.substring(1)+' S' : lat+' N'
|
||||||
|
)
|
||||||
|
$('#lon').text(
|
||||||
|
(lon.substring(0,1)=='-')? // Negative values are East
|
||||||
|
lon.substring(1)+' W' : lon+' E'
|
||||||
|
)
|
||||||
|
|
||||||
|
// Get altitude
|
||||||
|
if (pos.coords.altitude) {
|
||||||
|
$('#alt').show().text(
|
||||||
|
(metric)? // Convert to feet if needed
|
||||||
|
pos.coords.altitude.toFixed(1)+' m':
|
||||||
|
(pos.coords.altitude*3.28084).toFixed(1)+' ft'
|
||||||
|
)
|
||||||
|
}
|
||||||
|
else $('#alt').hide()
|
||||||
|
},
|
||||||
|
|
||||||
|
// Got error
|
||||||
|
function() {
|
||||||
|
$('.coord').hide()
|
||||||
|
$('#no-gps').show()
|
||||||
|
},
|
||||||
|
|
||||||
|
// Options
|
||||||
|
{ enableHighAccuracy:true }
|
||||||
|
|
||||||
|
)
|
|
@ -0,0 +1,21 @@
|
||||||
|
'use strict'
|
||||||
|
/* global $ window */
|
||||||
|
|
||||||
|
|
||||||
|
window.addEventListener('deviceorientation', function(e){
|
||||||
|
|
||||||
|
// No orientation data
|
||||||
|
if(!e) $('#no-dir').show()
|
||||||
|
|
||||||
|
// Set orientation
|
||||||
|
else {
|
||||||
|
$('#no-dir').hide()
|
||||||
|
const rot = 'rotate('+e.alpha.toString().substring(0,5)+'deg)'
|
||||||
|
$('#rose').css({
|
||||||
|
'-ms-transform': rot,
|
||||||
|
'-webkit-transform': rot,
|
||||||
|
'transform': rot
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
}, true)
|
Before Width: | Height: | Size: 9.1 KiB After Width: | Height: | Size: 9.1 KiB |
Before Width: | Height: | Size: 7.6 KiB After Width: | Height: | Size: 7.6 KiB |
Before Width: | Height: | Size: 11 KiB After Width: | Height: | Size: 11 KiB |
Before Width: | Height: | Size: 14 KiB After Width: | Height: | Size: 14 KiB |
Before Width: | Height: | Size: 3.9 KiB After Width: | Height: | Size: 3.9 KiB |
Before Width: | Height: | Size: 3.6 KiB After Width: | Height: | Size: 3.6 KiB |
Before Width: | Height: | Size: 4.9 KiB After Width: | Height: | Size: 4.9 KiB |
Before Width: | Height: | Size: 5.4 KiB After Width: | Height: | Size: 5.4 KiB |
Before Width: | Height: | Size: 8.4 KiB After Width: | Height: | Size: 8.4 KiB |
Before Width: | Height: | Size: 693 B After Width: | Height: | Size: 693 B |
Before Width: | Height: | Size: 19 KiB After Width: | Height: | Size: 19 KiB |
Before Width: | Height: | Size: 1.6 KiB After Width: | Height: | Size: 1.6 KiB |
Before Width: | Height: | Size: 6.2 KiB After Width: | Height: | Size: 6.2 KiB |
Before Width: | Height: | Size: 34 KiB After Width: | Height: | Size: 34 KiB |
Before Width: | Height: | Size: 11 KiB After Width: | Height: | Size: 11 KiB |
Before Width: | Height: | Size: 25 KiB After Width: | Height: | Size: 25 KiB |
Before Width: | Height: | Size: 64 KiB After Width: | Height: | Size: 64 KiB |
Before Width: | Height: | Size: 125 KiB After Width: | Height: | Size: 125 KiB |
Before Width: | Height: | Size: 8.4 KiB After Width: | Height: | Size: 8.4 KiB |
|
@ -47,8 +47,8 @@
|
||||||
<header>
|
<header>
|
||||||
|
|
||||||
<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.0000 N</div>
|
||||||
<div class='coord' id='lon'>0.00000 E</div>
|
<div class='coord' id='lon'>0.0000 W</div>
|
||||||
|
|
||||||
<div class='coord' id='alt'></div>
|
<div class='coord' id='alt'></div>
|
||||||
|
|
||||||
|
@ -58,7 +58,6 @@
|
||||||
|
|
||||||
<noscript>You need javascript to use this. </noscript>
|
<noscript>You need javascript to use this. </noscript>
|
||||||
<div class='error' id='no-dir'>No direction available. Try this on a smartphone with an internal compass.</div>
|
<div class='error' id='no-dir'>No direction available. Try this on a smartphone with an internal compass.</div>
|
||||||
<div class='error' id='rotated'>Note: the compass may be 90° off when used in landscape mode.</div>
|
|
||||||
|
|
||||||
<img id='rose' src="rose.svg">
|
<img id='rose' src="rose.svg">
|
||||||
|
|
||||||
|
@ -66,11 +65,12 @@
|
||||||
|
|
||||||
<footer>
|
<footer>
|
||||||
<div id='about'><a href="https://github.com/keith24/Compass/blob/master/README.md">About</a></div>
|
<div id='about'><a href="https://github.com/keith24/Compass/blob/master/README.md">About</a></div>
|
||||||
<div id='by'>by <a href="https://keithirwin.us/">Keith Irwin</a></div>
|
<div id='by'>by <a href="https://www.keithirwin.us/">Keith Irwin</a></div>
|
||||||
</footer>
|
</footer>
|
||||||
|
|
||||||
<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 src="script.js"></script>
|
<script src="coordinates.js"></script>
|
||||||
|
<script src="direction.js"></script>
|
||||||
|
|
||||||
</body>
|
</body>
|
||||||
|
|
||||||
|
|
Before Width: | Height: | Size: 50 KiB After Width: | Height: | Size: 50 KiB |
61
script.js
|
@ -1,61 +0,0 @@
|
||||||
'use strict';
|
|
||||||
/* global navigator $ */
|
|
||||||
|
|
||||||
// Set units based on browser locale
|
|
||||||
const metric = !(window.navigator.language=='en-US'||window.navigator.language=='my');
|
|
||||||
|
|
||||||
// Track GPS location
|
|
||||||
if (!navigator.geolocation){ $('#no-gps').show(); }
|
|
||||||
else { navigator.geolocation.watchPosition(
|
|
||||||
|
|
||||||
// Got location
|
|
||||||
function(pos) {
|
|
||||||
let lat = pos.coords.latitude.toFixed(4);
|
|
||||||
let lon = pos.coords.longitude.toFixed(4);
|
|
||||||
$('#lat').text((lat.substring(0,1)=='-')? lat.substring(1)+' S' : lat+' N');
|
|
||||||
$('#lon').text((lon.substring(0,1)=='-')? lon.substring(1)+' E' : lon+' W');
|
|
||||||
|
|
||||||
// Get altitude
|
|
||||||
if (pos.coords.altitude){
|
|
||||||
var alt = (metric)? pos.coords.altitude.toFixed(1)+' m':(pos.coords.altitude*0.3048).toFixed(1)+' ft';
|
|
||||||
$('#alt').show().text(alt);
|
|
||||||
}
|
|
||||||
else {
|
|
||||||
$('#alt').hide();
|
|
||||||
}
|
|
||||||
},
|
|
||||||
|
|
||||||
// Got error
|
|
||||||
function() {
|
|
||||||
$('.coord').hide();
|
|
||||||
$('#rotated').hide();
|
|
||||||
$('#no-gps').show();
|
|
||||||
},
|
|
||||||
|
|
||||||
// Options
|
|
||||||
{ enableHighAccuracy:true }
|
|
||||||
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
// Set compass orientation
|
|
||||||
function setRose(e) {
|
|
||||||
|
|
||||||
// No orientation data
|
|
||||||
if(!e.absolute) {
|
|
||||||
$('#rotated').hide();
|
|
||||||
$('#no-dir').show();
|
|
||||||
}
|
|
||||||
|
|
||||||
// Set orientation
|
|
||||||
else {
|
|
||||||
var rot = 'rotate('+e.alpha.toString().substring(0,5)+'deg)';
|
|
||||||
$('#rose').css({
|
|
||||||
'-ms-transform': rot,
|
|
||||||
'-webkit-transform': rot,
|
|
||||||
'transform': rot
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
}
|
|
||||||
window.addEventListener("deviceorientation", setRose, true);
|
|
|
@ -38,7 +38,7 @@ header, main, footer, .error, noscript {
|
||||||
}
|
}
|
||||||
|
|
||||||
@media (orientation:portrait) {
|
@media (orientation:portrait) {
|
||||||
.error#rotated { display: none; }
|
/*.error#rotated { display: none; }*/
|
||||||
header, main, footer {
|
header, main, footer {
|
||||||
width: 90vw;
|
width: 90vw;
|
||||||
padding: 5vw;
|
padding: 5vw;
|
||||||
|
@ -66,7 +66,7 @@ header, main, footer, .error, noscript {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@media (orientation:landscape) {
|
@media (orientation:landscape) {
|
||||||
.error#rotated { display: block; }
|
/*.error#rotated { display: block; }*/
|
||||||
header, main, footer {
|
header, main, footer {
|
||||||
height: 90vh;
|
height: 90vh;
|
||||||
padding: 5vh;
|
padding: 5vh;
|
||||||
|
|