webdemo/index.html

   1 <html xmlns="http://www.w3.org/1999/xhtml" lang="en-US" xml:lang="en-US">
   2 <head>
   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">
   6 </script>
   7 <script src="https://www.openstreetmap.org/openlayers/OpenStreetMap.js">
   8 </script>
   9 <script type="text/javascript">
  10         const urlParams = new URLSearchParams(window.location.search);
  11         const qimei = urlParams.get("imei");
  12
  13         const wsproto = window.location.protocol === "https" ? "wss" : "ws";
  14         const wshost = window.location.hostname ? window.location.hostname
  15                                                 : "localhost";
  16         const wsport = window.location.port ? window.location.port : 5049;
  17         const limei = window.location.pathname.substring(1)
  18
  19         const imeis = new Set();
  20         const locations = new Array();
  21         const maxmarkers = 5;
  22         const lineStyle = {
  23                 strokeColor: '#0000ff',
  24                 strokeOpacity: 0.5,
  25                 strokeWidth: 5
  26         };
  27
  28         var sts;
  29         var ws;
  30         var imei;
  31         var send;
  32         var subslist;
  33         var tstamp;
  34         var map;
  35         var line;
  36         var markers;
  37         var icon;
  38
  39         function init() {
  40                 init_map();
  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");
  49                 if (qimei) {
  50                         imei.value = qimei;
  51                 } else if (limei) {
  52                         imei.value = limei;
  53                 }
  54                 open_ws();
  55         }
  56
  57         function init_map() {
  58                 map = new OpenLayers.Map ("map", {
  59                         controls:[
  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,
  68                         numZoomLevels: 19,
  69                         units: 'm',
  70                         projection: new OpenLayers.Projection(
  71                                                 "EPSG:900913"),
  72                         displayProjection: new OpenLayers.Projection(
  73                                                 "EPSG:4326")
  74                 });
  75                 layerMapnik =
  76                   new OpenLayers.Layer.OSM.Mapnik("Mapnik");
  77                 map.addLayer(layerMapnik)
  78                 layerTransportMap =
  79                   new OpenLayers.Layer.OSM.TransportMap("TransportMap");
  80                 map.addLayer(layerTransportMap)
  81                 layerCycleMap =
  82                   new OpenLayers.Layer.OSM.CycleMap("CycleMap");
  83                 map.addLayer(layerCycleMap);
  84                 line =
  85                   new OpenLayers.Layer.Vector("Line Layer");
  86                 map.addLayer(line);
  87                 map.addControl(new
  88                   OpenLayers.Control.DrawFeature(line,
  89                                   OpenLayers.Handler.Path));
  90                 markers =
  91                   new OpenLayers.Layer.Markers("Markers");
  92                 map.addLayer(markers);
  93
  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);
  98
  99                 var lonLat =
 100                   new OpenLayers.LonLat(0, 0).transform(
 101                     new OpenLayers.Projection("EPSG:4326"),
 102                       map.getProjectionObject());
 103                 map.setCenter(lonLat, 1);
 104         }
 105
 106         function set_marker(msg) {
 107                 if (locations.push(msg) > maxmarkers) {
 108                         locations.shift();
 109                 }
 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++) {
 114                         const p0 =
 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());
 120                         const p1 =
 121                           new OpenLayers.Geometry.Point(
 122                                 locations[i].longitude,
 123                                 locations[i].latitude)
 124                              .transform(new OpenLayers.Projection("EPSG:4326"),
 125                                              map.getProjectionObject());
 126                         const leg =
 127                           new OpenLayers.Geometry.LineString([p0, p1]);
 128                         const lineFeature =
 129                           new OpenLayers.Feature.Vector(leg, null, lineStyle);
 130                         line.addFeatures([lineFeature]);
 131
 132                 }
 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);
 140         }
 141         function display_status(msg) {
 142                 console.log("status " + JSON.stringify(msg));
 143                 devstatus.innerHTML = "BAT: " + msg.battery;
 144         }
 145
 146         function open_ws() {
 147                 wsurl = new URL("ws://localhost/");
 148                 wsurl.protocol = wsproto
 149                 wsurl.hostname = wshost
 150                 wsurl.port = wsport
 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;
 157         }
 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;
 164                 locations.splice(0);
 165                 sendIMEI();
 166         }
 167         function ws_onmessage(event) {
 168                 console.log("message " + event.data);
 169                 msg = JSON.parse(event.data);
 170                 if (msg.type === "location") {
 171                         set_marker(msg);
 172                 } else if (msg.type === "status") {
 173                         display_status(msg);
 174                 }
 175
 176         }
 177         function ws_onerror(event) {
 178                 console.log("error " + event);
 179                 sts.innerHTML = "error: " + event;
 180         }
 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);
 188         }
 189
 190         function sendIMEI(do_clear) {
 191                 if (do_clear) {
 192                         imeis.clear();
 193                 } else {
 194                         if (imei.value) {
 195                                 imeis.add(imei.value);
 196                         }
 197                 }
 198                 const imstr = Array.from(imeis).join(",");
 199                 document.title = imstr;
 200                 subslist.innerHTML = imstr;
 201                 var msg = {
 202                         imei: Array.from(imeis),
 203                         type: "subscribe",
 204                         timestamp: Date.now(),
 205                         backlog: maxmarkers
 206                 };
 207                 console.log("sending" + JSON.stringify(msg));
 208                 ws.send(JSON.stringify(msg));
 209                 imei.value = "";
 210         }
 211
 212         function handleKey(evt) {
 213                 if (evt.keyCode === 13 || evt.keyCode === 14) {
 214                         if (!imei.disabled) {
 215                                 sendIMEI(false);
 216                         }
 217                 }
 218         }
 219 </script>
 220
 221 </head>
 222 <body onload="init();" style="height: 100%; margin: 0; display: flex;
 223                                 flex-direction: column; font-size: 2.0vh;">
 224         <div style="margin: 0;" id="hdr">
 225                 <input id="imei" type="text" name="imei"
 226                  size="16" maxlength="16" placeholder="Enter IMEI"
 227                  autocomplete="off" onkeyup="handleKey(event)">
 228                 <input type="button" id="send" name="send" value="Send"
 229                  onclick="sendIMEI(false)" disabled>
 230                 <input type="button" id="clear" name="clear" value="Clear"
 231                  onclick="sendIMEI(true)" disabled>
 232                 <span id="subslist"></span>
 233         </div>
 234         <div style="flex-grow: 1;" id="map"></div>
 235         <div style="display: flex; flex-direction: row; width: 100%;">
 236                 <div id="sts" style="flex: none;"></div>
 237                 | <div id="devstatus" style="flex: auto;"></div>
 238                 | <div id="tstamp" style="flex: auto;"></div>
 239                 | <div id="about" style="flex: none; font-size: 2.0vmin;">
 240                         <a href="http://www.average.org/loctrkd/">
 241                                 http://www.average.org/loctrkd/</a></div>
 242         </div>
 243 </body>
 244 </html>