Removed GyroNorm for compass use, updated styles
Keith Irwin
parent
9460e41bb7
commit
c14553940e
|
|
@ -1,39 +1,46 @@
|
|||
'use strict'
|
||||
/* global navigator $ */
|
||||
|
||||
// Set units based on browser locale
|
||||
const metric = !(window.navigator.language=='en-US'||window.navigator.language=='my');
|
||||
|
||||
// Track location
|
||||
if (!navigator.geolocation){ $('#no-gps').show(); }
|
||||
else { navigator.geolocation.watchPosition(
|
||||
// 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
|
||||
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 location callback
|
||||
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)+' E' : lon+' W'
|
||||
)
|
||||
|
||||
// Got error
|
||||
function() {
|
||||
$('.coord').hide();
|
||||
$('#rotated').hide();
|
||||
$('#no-gps').show();
|
||||
},
|
||||
|
||||
// Options
|
||||
{ enableHighAccuracy:true }
|
||||
|
||||
);
|
||||
}
|
||||
// Get altitude
|
||||
if (pos.coords.altitude)
|
||||
$('#alt').show().text(
|
||||
(metric)? // Convert to feet if needed
|
||||
pos.coords.altitude.toFixed(1)+' m':
|
||||
(pos.coords.altitude*0.3048).toFixed(1)+' ft'
|
||||
)
|
||||
else $('#alt').hide()
|
||||
},
|
||||
|
||||
// Got error
|
||||
function() {
|
||||
$('.coord').hide()
|
||||
$('#no-gps').show()
|
||||
},
|
||||
|
||||
// Options
|
||||
{ enableHighAccuracy:true }
|
||||
|
||||
)
|
||||
|
|
|
|||
41
direction.js
41
direction.js
|
|
@ -1,32 +1,21 @@
|
|||
'use strict'
|
||||
/* global $ GyroNorm */
|
||||
/* global $ window */
|
||||
|
||||
|
||||
// Set compass orientation
|
||||
var gn = new GyroNorm()
|
||||
|
||||
gn.init().then(function(){
|
||||
gn.start(function(data){
|
||||
window.addEventListener('deviceorientation', function(e){
|
||||
|
||||
console.log(data.do.alpha)
|
||||
// No orientation data
|
||||
// if (!data.do.absolute) {
|
||||
// $('#rotated').hide()
|
||||
// $('#no-dir').show()
|
||||
// }
|
||||
|
||||
// Set orientation
|
||||
// else {
|
||||
const rot = 'rotate('+data.do.alpha.toString().substring(0,5)+'deg)'
|
||||
$('#rose').css({
|
||||
'-ms-transform': rot,
|
||||
'-webkit-transform': rot,
|
||||
'transform': rot
|
||||
})
|
||||
// }
|
||||
// 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
|
||||
})
|
||||
}
|
||||
|
||||
})
|
||||
|
||||
//window.addEventListener("deviceorientation", setRose, true)
|
||||
}, true)
|
||||
|
|
|
|||
File diff suppressed because one or more lines are too long
10
index.html
10
index.html
|
|
@ -47,9 +47,9 @@
|
|||
<header>
|
||||
|
||||
<div class='error' id='no-gps'>No GPS data available. </div>
|
||||
<div class='coord' id='lat'>0.00000 N</div>
|
||||
<div class='coord' id='lon'>0.00000 E</div>
|
||||
<div class='error' id='no-alt'>No altitude data available. </div>
|
||||
<div class='coord' id='lat'>0.0000 N</div>
|
||||
<div class='coord' id='lon'>0.0000 W</div>
|
||||
|
||||
<div class='coord' id='alt'></div>
|
||||
|
||||
</header>
|
||||
|
|
@ -58,7 +58,6 @@
|
|||
|
||||
<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='rotated'>Note: the compass may be 90° off when used in landscape mode.</div>
|
||||
|
||||
<img id='rose' src="rose.svg">
|
||||
|
||||
|
|
@ -66,10 +65,9 @@
|
|||
|
||||
<footer>
|
||||
<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>
|
||||
|
||||
<script src="gyronorm.complete.min.js"></script>
|
||||
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
|
||||
<script src="coordinates.js"></script>
|
||||
<script src="direction.js"></script>
|
||||
|
|
|
|||
Loading…
Reference in New Issue