Restored lost edits
parent
178119bfbd
commit
960f6c2443
19
index.html
19
index.html
|
@ -3,8 +3,8 @@
|
||||||
|
|
||||||
<!-- Metadata -->
|
<!-- Metadata -->
|
||||||
<title>Compass</title>
|
<title>Compass</title>
|
||||||
<link rel="manifest" href="manifest.webmanifest">
|
<link rel="manifest" href="manifest.webmanifest">
|
||||||
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
|
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
|
||||||
<meta charset="UTF-8">
|
<meta charset="UTF-8">
|
||||||
<meta name="author" content="Keith Irwin">
|
<meta name="author" content="Keith Irwin">
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=0">
|
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=0">
|
||||||
|
@ -42,10 +42,13 @@
|
||||||
<body>
|
<body>
|
||||||
|
|
||||||
<header>
|
<header>
|
||||||
<div class='error' id='no-gps'>No GPS data available. </div>
|
|
||||||
|
|
||||||
<div class='coord' id='lat'></div>
|
<div class='error' id='no-gps'>No GPS data available. </div>
|
||||||
<div class='coord' id='lon'></div>
|
<div class='coord' id='lat'>0.00000 N</div>
|
||||||
|
<div class='coord' id='lon'>0.00000 E</div>
|
||||||
|
|
||||||
|
<div class='coord' id='alt'>0.0 m</div>
|
||||||
|
<div class='error' id='no-alt'>No altitude data available. </div>
|
||||||
|
|
||||||
</header>
|
</header>
|
||||||
|
|
||||||
|
@ -53,17 +56,19 @@
|
||||||
|
|
||||||
<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">
|
||||||
|
|
||||||
</main>
|
</main>
|
||||||
|
|
||||||
<footer>
|
<footer>
|
||||||
<div style="float:left"><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 style="float:right">by <a href="https://keithirwin.us/">Keith Irwin</a></div>
|
<div id='by'>by <a href="https://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 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>
|
||||||
|
|
49
script.js
49
script.js
|
@ -1,12 +1,19 @@
|
||||||
window.addEventListener("deviceorientation", setRose, true);
|
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(); }
|
if (!navigator.geolocation){ $('#no-gps').show(); }
|
||||||
else {
|
else {
|
||||||
navigator.geolocation.watchPosition(
|
navigator.geolocation.watchPosition(
|
||||||
// success
|
// success
|
||||||
function(pos) {
|
function(pos) {
|
||||||
var lat = pos.coords.latitude.toFixed(5);
|
setAltitude(pos.coords.latitude, pos.coords.longitude);
|
||||||
var lon = pos.coords.longitude.toFixed(5);
|
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';
|
lat = (lat.substring(0,1)=='-')? lat.substring(1)+' S' : lat+' N';
|
||||||
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);
|
||||||
|
@ -15,6 +22,7 @@ else {
|
||||||
// error
|
// error
|
||||||
function() {
|
function() {
|
||||||
$('.coord').hide();
|
$('.coord').hide();
|
||||||
|
$('#rotated').hide();
|
||||||
$('#no-gps').show();
|
$('#no-gps').show();
|
||||||
},
|
},
|
||||||
// options
|
// 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) {
|
function setRose(e) {
|
||||||
|
if(!e.absolute) { // No orientation data
|
||||||
// No orientation data
|
$('#rotated').hide();
|
||||||
if(!e.absolute) {
|
|
||||||
$('#no-dir').show();
|
$('#no-dir').show();
|
||||||
} else {
|
} else {
|
||||||
|
|
||||||
// Rotate rose
|
|
||||||
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,
|
||||||
'-webkit-transform': rot,
|
'-webkit-transform': rot,
|
||||||
'transform': rot
|
'transform': rot
|
||||||
});
|
});
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
53
style.css
53
style.css
|
@ -6,7 +6,12 @@ body {
|
||||||
color: #EEE;
|
color: #EEE;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
header, main, footer, .error, noscript {
|
||||||
|
position: absolute;
|
||||||
|
}
|
||||||
|
|
||||||
.error, noscript {
|
.error, noscript {
|
||||||
|
z-index: 10;
|
||||||
color: #F22;
|
color: #F22;
|
||||||
font-size: 22px;
|
font-size: 22px;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
|
@ -18,7 +23,7 @@ body {
|
||||||
}
|
}
|
||||||
|
|
||||||
.coord {
|
.coord {
|
||||||
height: 50%;
|
height: 33%;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
font-size: 44px;
|
font-size: 44px;
|
||||||
font-family: monospace;
|
font-family: monospace;
|
||||||
|
@ -31,23 +36,26 @@ body {
|
||||||
}
|
}
|
||||||
|
|
||||||
@media (orientation:portrait) {
|
@media (orientation:portrait) {
|
||||||
header, main, footer, .error, noscript {
|
.error#rotated { display: none; }
|
||||||
position: absolute;
|
header, main, footer {
|
||||||
} header, main, footer {
|
|
||||||
width: 90vw;
|
width: 90vw;
|
||||||
padding: 5vw;
|
padding: 5vw;
|
||||||
} .error, noscript {
|
} .error, noscript {
|
||||||
width: 82vw;
|
width: 82vw;
|
||||||
}
|
}
|
||||||
header {
|
header {
|
||||||
height: calc(60vh - 60vw);
|
height: calc(65vh - 60vw);
|
||||||
top: 0;
|
top: 0;
|
||||||
} main {
|
} main {
|
||||||
height: 90vw;
|
height: 90vw;
|
||||||
top: calc(60vh - 50vw);
|
top: calc(65vh - 50vw);
|
||||||
} footer {
|
} footer {
|
||||||
height: calc(40vh - 60vw);
|
height: calc(35vh - 60vw);
|
||||||
bottom: 0;
|
bottom: 0;
|
||||||
|
} #about {
|
||||||
|
float: left;
|
||||||
|
} #by {
|
||||||
|
float: right;
|
||||||
}
|
}
|
||||||
main .error {
|
main .error {
|
||||||
top: 50%;
|
top: 50%;
|
||||||
|
@ -56,10 +64,37 @@ body {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@media (orientation:landscape) {
|
@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 {
|
a {
|
||||||
color: inherit;
|
color: inherit;
|
||||||
|
|
Loading…
Reference in New Issue