Merge branch 'master' of github.com:keith24/Compass

README.md

@@ -5,7 +5,7 @@ Compass is a web app written in plain HTML/CSS/JS.  It uses [DeviceOrientationEv
 
 ## Instructions
 
-Open [compass.keithirwin.us](https://compass.keithirwin.us/) on a smartphone with a compass.  Hold the phone level and it should show your direction.  
+Open [compass.fyi](https://compass.fyi/) on a smartphone with a compass.  Hold the phone level and it should show your direction.  
 
 ### Is this accurate? 
 

coordinates.js

@@ -0,0 +1,41 @@
+'use strict'
+/* global navigator $ */
+
+alert('coordinates loaded')
+
+// 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(
+		
+		// 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 }
+		
+	);
+}

direction.js

@@ -0,0 +1,34 @@
+'use strict'
+/* global $ GyroNorm */
+
+alert('direction loaded')
+
+
+// Set compass orientation
+var gn = new GyroNorm()
+
+gn.init().then(function(){
+  gn.start(function(data){
+	
+	  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
+			})
+		// }
+	
+	})
+	
+})	
+	
+//window.addEventListener("deviceorientation", setRose, true)

index.html

@@ -49,9 +49,8 @@
 			<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='coord' id='alt'>0.0 m</div>
 			<div class='error' id='no-alt'>No altitude data available. </div>
+			<div class='coord' id='alt'></div>
 			
 		</header>
 		
@@ -70,9 +69,10 @@
 			<div id='by'>by <a href="https://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 async defer src="https://maps.googleapis.com/maps/api/js?key=AIzaSyAnM0oMEWtnYTEaHURDQTt6BK5BuGGH2E4"></script>
-		<script src="script.js"></script>
+		<script src="coordinates.js"></script>
+		<script src="direction.js"></script>
 		
 	</body>
 	

script.js

@@ -1,95 +0,0 @@
-'use strict';
-/* global navigator google $ */
-
-// 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) {
-			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);
-			$('#lon').text(lon);
-		},
-		
-		// Got error
-		function() {
-			$('.coord').hide();
-			$('#rotated').hide();
-			$('#no-gps').show();
-		}, 
-		
-		// Options
-		{ enableHighAccuracy:true }
-		
-	);
-}
-
-// Set altitude
-function setAltitude(lat,lon) {
-	
-	// Create elevator
-	if (typeof elevator == 'undefined') {
-		var elevator = new google.maps.ElevationService;
-	}
-		
-	// Query API
-	else {
-		elevator.getElevationForLocations({
-			'locations': [ new google.maps.LatLng(lat,lon) ]
-		}, function(res) {
-			
-			// Show error
-			if (!res[0].elevation) {
-				if (res.status && res.status!='OK') {
-					$('#no-alt').text('No altitude data available: '+res.status+'. ');
-				}
-				$('#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) {
-	
-	// 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);