X-Git-Url: http://average.org/gitweb/?a=blobdiff_plain;f=webdemo%2Findex.html;h=a29c4df6ad5ca9b3761ce5cff9e11850c11a1bb2;hb=77c191290dad765c5b2e09c60d2b7e38aff87565;hp=e6e1795cd76048f2440db33b2471f996222a025d;hpb=97c5fc86f9fbab5df74879b9b2a705dbb8dcba63;p=loctrkd.git

diff --git a/webdemo/index.html b/webdemo/index.html
index e6e1795..a29c4df 100644
--- a/webdemo/index.html
+++ b/webdemo/index.html
@@ -1,6 +1,7 @@
 <html xmlns="http://www.w3.org/1999/xhtml" lang="en-US" xml:lang="en-US">
 <head>
 <title>Location</title>
+<!-- This uses reeeally old 2.13.1 from 2013, also part of Debian distro -->
 <script src="http://www.openlayers.org/api/OpenLayers.js">
 </script>
 <script src="https://www.openstreetmap.org/openlayers/OpenStreetMap.js">
@@ -9,14 +10,20 @@
 	const urlParams = new URLSearchParams(window.location.search);
 	const qimei = urlParams.get("imei");
 
-	const ourl = new URL(window.location);
-	const wsproto = ourl.protocol === "https" ? "wss" : "ws";
-	const wshost = ourl.hostname ? ourl.hostname : "localhost";
-	const wsport = ourl.port ? ourl.port : 5049;
+	const wsproto = window.location.protocol === "https" ? "wss" : "ws";
+	const wshost = window.location.hostname ? window.location.hostname
+						: "localhost";
+	const wsport = window.location.port ? window.location.port : 5049;
+	const limei = window.location.pathname.substring(1)
 
 	const imeis = new Set();
 	const locations = new Array();
 	const maxmarkers = 5;
+	const lineStyle = {
+		strokeColor: '#0000ff',
+		strokeOpacity: 0.5,
+		strokeWidth: 5
+	};
 
 	var sts;
 	var ws;
@@ -25,6 +32,7 @@
 	var subslist;
 	var tstamp;
 	var map;
+	var line;
 	var markers;
 	var icon;
 
@@ -36,9 +44,12 @@
 		send = document.getElementById("send");
 		clear = document.getElementById("clear");
 		subslist = document.getElementById("subslist");
+		devstatus = document.getElementById("devstatus");
 		tstamp = document.getElementById("tstamp");
 		if (qimei) {
 			imei.value = qimei;
+		} else if (limei) {
+			imei.value = limei;
 		}
 		open_ws();
 	}
@@ -70,6 +81,12 @@
 		layerCycleMap =
 		  new OpenLayers.Layer.OSM.CycleMap("CycleMap");
 		map.addLayer(layerCycleMap);
+		line =
+		  new OpenLayers.Layer.Vector("Line Layer");
+		map.addLayer(line);
+		map.addControl(new
+		  OpenLayers.Control.DrawFeature(line,
+				  OpenLayers.Handler.Path));
 		markers =
 		  new OpenLayers.Layer.Markers("Markers");
 		map.addLayer(markers);
@@ -91,17 +108,39 @@
 			locations.shift();
 		}
 		console.log("new marker list " + JSON.stringify(locations));
-		tstamp.innerHTML = msg.devtime;
-		var lonLat;
-		// TODO: figure how to have multiple markers and/or track
-		for (const loc of locations) {
-			lonLat = new OpenLayers.LonLat(+loc.longitude,
-					  +loc.latitude).transform(
-			    new OpenLayers.Projection("EPSG:4326"),
-			      map.getProjectionObject());
-			markers.addMarker(new OpenLayers.Marker(lonLat,icon));
+		tstamp.innerHTML = msg.timestamp;
+		// Draw a line between backlog locations
+		for (var i = 1; i < locations.length; i++) {
+			const p0 =
+			  new OpenLayers.Geometry.Point(
+				locations[i-1].longitude,
+				locations[i-1].latitude)
+                             .transform(new OpenLayers.Projection("EPSG:4326"),
+					     map.getProjectionObject());
+			const p1 =
+			  new OpenLayers.Geometry.Point(
+				locations[i].longitude,
+				locations[i].latitude)
+                             .transform(new OpenLayers.Projection("EPSG:4326"),
+					     map.getProjectionObject());
+			const leg =
+			  new OpenLayers.Geometry.LineString([p0, p1]);
+			const lineFeature =
+			  new OpenLayers.Feature.Vector(leg, null, lineStyle);
+			line.addFeatures([lineFeature]);
+
 		}
-		map.setCenter(lonLat, 16);
+		// Set marker at the reported (last) location
+		const lonLat = new OpenLayers.LonLat(+msg.longitude,
+				  +msg.latitude).transform(
+		    new OpenLayers.Projection("EPSG:4326"),
+		      map.getProjectionObject());
+		markers.addMarker(new OpenLayers.Marker(lonLat, icon));
+		map.setCenter(lonLat, 14);
+	}
+	function display_status(msg) {
+		console.log("status " + JSON.stringify(msg));
+		devstatus.innerHTML = "BAT: " + msg.battery;
 	}
 
 	function open_ws() {
@@ -126,7 +165,13 @@
 	}
 	function ws_onmessage(event) {
 		console.log("message " + event.data);
-		set_marker(JSON.parse(event.data));
+		msg = JSON.parse(event.data);
+		if (msg.type === "location") {
+			set_marker(msg);
+		} else if (msg.type === "status") {
+			display_status(msg);
+		}
+
 	}
 	function ws_onerror(event) {
 		console.log("error " + event);
@@ -155,8 +200,8 @@
 		var msg = {
 			imei: Array.from(imeis),
 			type: "subscribe",
-			date: Date.now(),
-			backlog: 1
+			timestamp: Date.now(),
+			backlog: maxmarkers
 		};
 		console.log("sending" + JSON.stringify(msg));
 		ws.send(JSON.stringify(msg));
@@ -183,9 +228,18 @@
 		<input type="button" id="clear" name="clear" value="Clear"
 		 onclick="sendIMEI(true)" disabled>
 		<span id="subslist"></span>
-		<span id="tstamp" style="float:right"></span>
+		<span style="float:right">
+			| <span id="devstatus"></span>
+			| <span id="tstamp"></span>
+		</span>
 	</div>
 	<div style="width:100%; height:97%" id="map"></div>
-	<div style="width:100%; height:1%" id="sts"></div>
+	<div style="width:100%; height:1%">
+		<span id="sts"></span>
+		<span id="about" style="float:right">
+			<a href="http://www.average.org/loctrkd/">
+				http://www.average.org/loctrkd/</a>
+		</span>
+	</div>
 </body>
 </html>
