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 ourl = new URL(window.location);
14 const wsproto = ourl.protocol === "https" ? "wss" : "ws";
15 const wshost = ourl.hostname ? ourl.hostname : "localhost";
16 const wsport = ourl.port ? ourl.port : 5049;
18 const imeis = new Set();
19 const locations = new Array();
22 strokeColor: '#0000ff',
40 sts = document.getElementById("sts");
41 sts.innerHTML = "uninitialized";
42 imei = document.getElementById("imei");
43 send = document.getElementById("send");
44 clear = document.getElementById("clear");
45 subslist = document.getElementById("subslist");
46 tstamp = document.getElementById("tstamp");
54 map = new OpenLayers.Map ("map", {
56 new OpenLayers.Control.Navigation(),
57 new OpenLayers.Control.PanZoomBar(),
58 new OpenLayers.Control.LayerSwitcher(),
59 new OpenLayers.Control.Attribution()],
60 maxExtent: new OpenLayers.Bounds(
61 -20037508.34,-20037508.34,
62 20037508.34,20037508.34),
63 maxResolution: 156543.0399,
66 projection: new OpenLayers.Projection(
68 displayProjection: new OpenLayers.Projection(
72 new OpenLayers.Layer.OSM.Mapnik("Mapnik");
73 map.addLayer(layerMapnik)
75 new OpenLayers.Layer.OSM.TransportMap("TransportMap");
76 map.addLayer(layerTransportMap)
78 new OpenLayers.Layer.OSM.CycleMap("CycleMap");
79 map.addLayer(layerCycleMap);
81 new OpenLayers.Layer.Vector("Line Layer");
84 OpenLayers.Control.DrawFeature(line,
85 OpenLayers.Handler.Path));
87 new OpenLayers.Layer.Markers("Markers");
88 map.addLayer(markers);
90 var size = new OpenLayers.Size(21, 25);
91 var offset = new OpenLayers.Pixel(-(size.w/2), -size.h);
92 icon = new OpenLayers.Icon(
93 'https://www.openstreetmap.org/openlayers/img/marker.png',size,offset);
96 new OpenLayers.LonLat(0, 0).transform(
97 new OpenLayers.Projection("EPSG:4326"),
98 map.getProjectionObject());
99 map.setCenter(lonLat, 1);
102 function set_marker(msg) {
103 if (locations.push(msg) > maxmarkers) {
106 console.log("new marker list " + JSON.stringify(locations));
107 tstamp.innerHTML = msg.timestamp;
108 // Draw a line between backlog locations
109 for (var i = 1; i < locations.length; i++) {
111 new OpenLayers.Geometry.Point(
112 locations[i-1].longitude,
113 locations[i-1].latitude)
114 .transform(new OpenLayers.Projection("EPSG:4326"),
115 map.getProjectionObject());
117 new OpenLayers.Geometry.Point(
118 locations[i].longitude,
119 locations[i].latitude)
120 .transform(new OpenLayers.Projection("EPSG:4326"),
121 map.getProjectionObject());
123 new OpenLayers.Geometry.LineString([p0, p1]);
125 new OpenLayers.Feature.Vector(leg, null, lineStyle);
126 line.addFeatures([lineFeature]);
129 // Set marker at the reported (last) location
130 const lonLat = new OpenLayers.LonLat(+msg.longitude,
131 +msg.latitude).transform(
132 new OpenLayers.Projection("EPSG:4326"),
133 map.getProjectionObject());
134 markers.addMarker(new OpenLayers.Marker(lonLat, icon));
135 map.setCenter(lonLat, 14);
139 wsurl = new URL("ws://localhost/");
140 wsurl.protocol = wsproto
141 wsurl.hostname = wshost
143 console.log("wsurl is " + wsurl)
144 ws = new WebSocket(wsurl);
145 ws.onopen = ws_onopen;
146 ws.onmessage = ws_onmessage;
147 ws.onerror = ws_onerror;
148 ws.onclose = ws_onclose;
150 function ws_onopen(event) {
151 console.log("ws opened " + event);
152 sts.innerHTML = "online";
153 imei.disabled = false;
154 send.disabled = false;
155 clear.disabled = false;
158 function ws_onmessage(event) {
159 console.log("message " + event.data);
160 set_marker(JSON.parse(event.data));
162 function ws_onerror(event) {
163 console.log("error " + event);
164 sts.innerHTML = "error: " + event;
166 function ws_onclose(event) {
167 console.log("close " + event);
168 sts.innerHTML = "offline";
169 imei.disabled = true;
170 send.disabled = true;
171 clear.disabled = true;
172 setTimeout(open_ws, 5000);
175 function sendIMEI(do_clear) {
180 imeis.add(imei.value);
183 const imstr = Array.from(imeis).join(",");
184 document.title = imstr;
185 subslist.innerHTML = imstr;
187 imei: Array.from(imeis),
189 timestamp: Date.now(),
192 console.log("sending" + JSON.stringify(msg));
193 ws.send(JSON.stringify(msg));
197 function handleKey(evt) {
198 if (evt.keyCode === 13 || evt.keyCode === 14) {
199 if (!imei.disabled) {
207 <body onload="init();">
208 <div style="width:100%; height:2%" id="hdr">
209 <input id="imei" type="text" name="imei"
210 size="16" maxlength="16" placeholder="Enter IMEI"
211 autocomplete="off" onkeyup="handleKey(event)">
212 <input type="button" id="send" name="send" value="Send"
213 onclick="sendIMEI(false)" disabled>
214 <input type="button" id="clear" name="clear" value="Clear"
215 onclick="sendIMEI(true)" disabled>
216 <span id="subslist"></span>
217 <span id="tstamp" style="float:right"></span>
219 <div style="width:100%; height:97%" id="map"></div>
220 <div style="width:100%; height:1%" id="sts"></div>