1 <html xmlns="http://www.w3.org/1999/xhtml" lang="en-US" xml:lang="en-US">
3 <title>Location</title>
4 <!-- This uses reeeally old 2.13.1 from 2013, also part of Debian distro -->
5 <script src="http://www.openlayers.org/api/OpenLayers.js">
7 <script src="https://www.openstreetmap.org/openlayers/OpenStreetMap.js">
9 <script type="text/javascript">
10 const urlParams = new URLSearchParams(window.location.search);
11 const qimei = urlParams.get("imei");
13 const wsproto = window.location.protocol === "https" ? "wss" : "ws";
14 const wshost = window.location.hostname ? window.location.hostname
16 const wsport = window.location.port ? window.location.port : 5049;
17 const limei = window.location.pathname.substring(1)
19 const imeis = new Set();
20 const locations = new Array();
23 strokeColor: '#0000ff',
41 sts = document.getElementById("sts");
42 sts.innerHTML = "uninitialized";
43 imei = document.getElementById("imei");
44 send = document.getElementById("send");
45 clear = document.getElementById("clear");
46 subslist = document.getElementById("subslist");
47 devstatus = document.getElementById("devstatus");
48 tstamp = document.getElementById("tstamp");
58 map = new OpenLayers.Map ("map", {
60 new OpenLayers.Control.Navigation(),
61 new OpenLayers.Control.PanZoomBar(),
62 new OpenLayers.Control.LayerSwitcher(),
63 new OpenLayers.Control.Attribution()],
64 maxExtent: new OpenLayers.Bounds(
65 -20037508.34,-20037508.34,
66 20037508.34,20037508.34),
67 maxResolution: 156543.0399,
70 projection: new OpenLayers.Projection(
72 displayProjection: new OpenLayers.Projection(
76 new OpenLayers.Layer.OSM.Mapnik("Mapnik");
77 map.addLayer(layerMapnik)
79 new OpenLayers.Layer.OSM.TransportMap("TransportMap");
80 map.addLayer(layerTransportMap)
82 new OpenLayers.Layer.OSM.CycleMap("CycleMap");
83 map.addLayer(layerCycleMap);
85 new OpenLayers.Layer.Vector("Line Layer");
88 OpenLayers.Control.DrawFeature(line,
89 OpenLayers.Handler.Path));
91 new OpenLayers.Layer.Markers("Markers");
92 map.addLayer(markers);
94 var size = new OpenLayers.Size(21, 25);
95 var offset = new OpenLayers.Pixel(-(size.w/2), -size.h);
96 icon = new OpenLayers.Icon(
97 'https://www.openstreetmap.org/openlayers/img/marker.png',size,offset);
100 new OpenLayers.LonLat(0, 0).transform(
101 new OpenLayers.Projection("EPSG:4326"),
102 map.getProjectionObject());
103 map.setCenter(lonLat, 1);
106 function set_marker(msg) {
107 if (locations.push(msg) > maxmarkers) {
110 console.log("new marker list " + JSON.stringify(locations));
111 tstamp.innerHTML = msg.timestamp;
112 // Draw a line between backlog locations
113 for (var i = 1; i < locations.length; i++) {
115 new OpenLayers.Geometry.Point(
116 locations[i-1].longitude,
117 locations[i-1].latitude)
118 .transform(new OpenLayers.Projection("EPSG:4326"),
119 map.getProjectionObject());
121 new OpenLayers.Geometry.Point(
122 locations[i].longitude,
123 locations[i].latitude)
124 .transform(new OpenLayers.Projection("EPSG:4326"),
125 map.getProjectionObject());
127 new OpenLayers.Geometry.LineString([p0, p1]);
129 new OpenLayers.Feature.Vector(leg, null, lineStyle);
130 line.addFeatures([lineFeature]);
133 // Set marker at the reported (last) location
134 const lonLat = new OpenLayers.LonLat(+msg.longitude,
135 +msg.latitude).transform(
136 new OpenLayers.Projection("EPSG:4326"),
137 map.getProjectionObject());
138 markers.addMarker(new OpenLayers.Marker(lonLat, icon));
139 map.setCenter(lonLat, 14);
141 function display_status(msg) {
142 console.log("status " + JSON.stringify(msg));
143 devstatus.innerHTML = "BAT: " + msg.battery;
147 wsurl = new URL("ws://localhost/");
148 wsurl.protocol = wsproto
149 wsurl.hostname = wshost
151 console.log("wsurl is " + wsurl)
152 ws = new WebSocket(wsurl);
153 ws.onopen = ws_onopen;
154 ws.onmessage = ws_onmessage;
155 ws.onerror = ws_onerror;
156 ws.onclose = ws_onclose;
158 function ws_onopen(event) {
159 console.log("ws opened " + event);
160 sts.innerHTML = "online";
161 imei.disabled = false;
162 send.disabled = false;
163 clear.disabled = false;
167 function ws_onmessage(event) {
168 console.log("message " + event.data);
169 msg = JSON.parse(event.data);
170 if (msg.type === "location") {
172 } else if (msg.type === "status") {
177 function ws_onerror(event) {
178 console.log("error " + event);
179 sts.innerHTML = "error: " + event;
181 function ws_onclose(event) {
182 console.log("close " + event);
183 sts.innerHTML = "offline";
184 imei.disabled = true;
185 send.disabled = true;
186 clear.disabled = true;
187 setTimeout(open_ws, 5000);
190 function sendIMEI(do_clear) {
195 imeis.add(imei.value);
198 const imstr = Array.from(imeis).join(",");
199 document.title = imstr;
200 subslist.innerHTML = imstr;
202 imei: Array.from(imeis),
204 timestamp: Date.now(),
207 console.log("sending" + JSON.stringify(msg));
208 ws.send(JSON.stringify(msg));
212 function handleKey(evt) {
213 if (evt.keyCode === 13 || evt.keyCode === 14) {
214 if (!imei.disabled) {
222 <body onload="init();">
223 <div style="width:100%; height:2%" id="hdr">
224 <input id="imei" type="text" name="imei"
225 size="16" maxlength="16" placeholder="Enter IMEI"
226 autocomplete="off" onkeyup="handleKey(event)">
227 <input type="button" id="send" name="send" value="Send"
228 onclick="sendIMEI(false)" disabled>
229 <input type="button" id="clear" name="clear" value="Clear"
230 onclick="sendIMEI(true)" disabled>
231 <span id="subslist"></span>
232 <span style="float:right">
233 | <span id="devstatus"></span>
234 | <span id="tstamp"></span>
237 <div style="width:100%; height:97%" id="map"></div>
238 <div style="width:100%; height:1%">
239 <span id="sts"></span>
240 <span id="about" style="float:right">
241 <a href="http://www.average.org/loctrkd/">
242 http://www.average.org/loctrkd/</a>