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 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;
  17
  18         const imeis = new Set();
  19         const locations = new Array();
  20         const maxmarkers = 5;
  21         const lineStyle = {
  22                 strokeColor: '#0000ff',
  23                 strokeOpacity: 0.5,
  24                 strokeWidth: 5
  25         };
  26
  27         var sts;
  28         var ws;
  29         var imei;
  30         var send;
  31         var subslist;
  32         var tstamp;
  33         var map;
  34         var line;
  35         var markers;
  36         var icon;
  37
  38         function init() {
  39                 init_map();
  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                 devstatus = document.getElementById("devstatus");
  47                 tstamp = document.getElementById("tstamp");
  48                 if (qimei) {
  49                         imei.value = qimei;
  50                 }
  51                 open_ws();
  52         }
  53
  54         function init_map() {
  55                 map = new OpenLayers.Map ("map", {
  56                         controls:[
  57                                 new OpenLayers.Control.Navigation(),
  58                                 new OpenLayers.Control.PanZoomBar(),
  59                                 new OpenLayers.Control.LayerSwitcher(),
  60                                 new OpenLayers.Control.Attribution()],
  61                         maxExtent: new OpenLayers.Bounds(
  62                                 -20037508.34,-20037508.34,
  63                                 20037508.34,20037508.34),
  64                         maxResolution: 156543.0399,
  65                         numZoomLevels: 19,
  66                         units: 'm',
  67                         projection: new OpenLayers.Projection(
  68                                                 "EPSG:900913"),
  69                         displayProjection: new OpenLayers.Projection(
  70                                                 "EPSG:4326")
  71                 });
  72                 layerMapnik =
  73                   new OpenLayers.Layer.OSM.Mapnik("Mapnik");
  74                 map.addLayer(layerMapnik)
  75                 layerTransportMap =
  76                   new OpenLayers.Layer.OSM.TransportMap("TransportMap");
  77                 map.addLayer(layerTransportMap)
  78                 layerCycleMap =
  79                   new OpenLayers.Layer.OSM.CycleMap("CycleMap");
  80                 map.addLayer(layerCycleMap);
  81                 line =
  82                   new OpenLayers.Layer.Vector("Line Layer");
  83                 map.addLayer(line);
  84                 map.addControl(new
  85                   OpenLayers.Control.DrawFeature(line,
  86                                   OpenLayers.Handler.Path));
  87                 markers =
  88                   new OpenLayers.Layer.Markers("Markers");
  89                 map.addLayer(markers);
  90
  91                 var size = new OpenLayers.Size(21, 25);
  92                 var offset = new OpenLayers.Pixel(-(size.w/2), -size.h);
  93                 icon = new OpenLayers.Icon(
  94 'https://www.openstreetmap.org/openlayers/img/marker.png',size,offset);
  95
  96                 var lonLat =
  97                   new OpenLayers.LonLat(0, 0).transform(
  98                     new OpenLayers.Projection("EPSG:4326"),
  99                       map.getProjectionObject());
 100                 map.setCenter(lonLat, 1);
 101         }
 102
 103         function set_marker(msg) {
 104                 if (locations.push(msg) > maxmarkers) {
 105                         locations.shift();
 106                 }
 107                 console.log("new marker list " + JSON.stringify(locations));
 108                 tstamp.innerHTML = msg.timestamp;
 109                 // Draw a line between backlog locations
 110                 for (var i = 1; i < locations.length; i++) {
 111                         const p0 =
 112                           new OpenLayers.Geometry.Point(
 113                                 locations[i-1].longitude,
 114                                 locations[i-1].latitude)
 115                              .transform(new OpenLayers.Projection("EPSG:4326"),
 116                                              map.getProjectionObject());
 117                         const p1 =
 118                           new OpenLayers.Geometry.Point(
 119                                 locations[i].longitude,
 120                                 locations[i].latitude)
 121                              .transform(new OpenLayers.Projection("EPSG:4326"),
 122                                              map.getProjectionObject());
 123                         const leg =
 124                           new OpenLayers.Geometry.LineString([p0, p1]);
 125                         const lineFeature =
 126                           new OpenLayers.Feature.Vector(leg, null, lineStyle);
 127                         line.addFeatures([lineFeature]);
 128
 129                 }
 130                 // Set marker at the reported (last) location
 131                 const lonLat = new OpenLayers.LonLat(+msg.longitude,
 132                                   +msg.latitude).transform(
 133                     new OpenLayers.Projection("EPSG:4326"),
 134                       map.getProjectionObject());
 135                 markers.addMarker(new OpenLayers.Marker(lonLat, icon));
 136                 map.setCenter(lonLat, 14);
 137         }
 138         function display_status(msg) {
 139                 console.log("status " + JSON.stringify(msg));
 140                 devstatus.innerHTML = "BAT: " + msg.battery;
 141         }
 142
 143         function open_ws() {
 144                 wsurl = new URL("ws://localhost/");
 145                 wsurl.protocol = wsproto
 146                 wsurl.hostname = wshost
 147                 wsurl.port = wsport
 148                 console.log("wsurl is " + wsurl)
 149                 ws = new WebSocket(wsurl);
 150                 ws.onopen = ws_onopen;
 151                 ws.onmessage = ws_onmessage;
 152                 ws.onerror = ws_onerror;
 153                 ws.onclose = ws_onclose;
 154         }
 155         function ws_onopen(event) {
 156                 console.log("ws opened " + event);
 157                 sts.innerHTML = "online";
 158                 imei.disabled = false;
 159                 send.disabled = false;
 160                 clear.disabled = false;
 161                 sendIMEI();
 162         }
 163         function ws_onmessage(event) {
 164                 console.log("message " + event.data);
 165                 msg = JSON.parse(event.data);
 166                 if (msg.type === "location") {
 167                         set_marker(msg);
 168                 } else if (msg.type === "status") {
 169                         display_status(msg);
 170                 }
 171
 172         }
 173         function ws_onerror(event) {
 174                 console.log("error " + event);
 175                 sts.innerHTML = "error: " + event;
 176         }
 177         function ws_onclose(event) {
 178                 console.log("close " + event);
 179                 sts.innerHTML = "offline";
 180                 imei.disabled = true;
 181                 send.disabled = true;
 182                 clear.disabled = true;
 183                 setTimeout(open_ws, 5000);
 184         }
 185
 186         function sendIMEI(do_clear) {
 187                 if (do_clear) {
 188                         imeis.clear();
 189                 } else {
 190                         if (imei.value) {
 191                                 imeis.add(imei.value);
 192                         }
 193                 }
 194                 const imstr = Array.from(imeis).join(",");
 195                 document.title = imstr;
 196                 subslist.innerHTML = imstr;
 197                 var msg = {
 198                         imei: Array.from(imeis),
 199                         type: "subscribe",
 200                         timestamp: Date.now(),
 201                         backlog: maxmarkers
 202                 };
 203                 console.log("sending" + JSON.stringify(msg));
 204                 ws.send(JSON.stringify(msg));
 205                 imei.value = "";
 206         }
 207
 208         function handleKey(evt) {
 209                 if (evt.keyCode === 13 || evt.keyCode === 14) {
 210                         if (!imei.disabled) {
 211                                 sendIMEI(false);
 212                         }
 213                 }
 214         }
 215 </script>
 216
 217 </head>
 218 <body onload="init();">
 219         <div style="width:100%; height:2%" id="hdr">
 220                 <input id="imei" type="text" name="imei"
 221                  size="16" maxlength="16" placeholder="Enter IMEI"
 222                  autocomplete="off" onkeyup="handleKey(event)">
 223                 <input type="button" id="send" name="send" value="Send"
 224                  onclick="sendIMEI(false)" disabled>
 225                 <input type="button" id="clear" name="clear" value="Clear"
 226                  onclick="sendIMEI(true)" disabled>
 227                 <span id="subslist"></span>
 228                 <span style="float:right">
 229                         | <span id="devstatus"></span>
 230                         | <span id="tstamp"></span>
 231                 </span>
 232         </div>
 233         <div style="width:100%; height:97%" id="map"></div>
 234         <div style="width:100%; height:1%">
 235                 <span id="sts"></span>
 236                 <span id="about" style="float:right">
 237                         <a href="http://www.average.org/gps303/">
 238                                 http://www.average.org/gps303/</a>
 239                 </span>
 240         </div>
 241 </body>
 242 </html>