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                 tstamp = document.getElementById("tstamp");
  47                 if (qimei) {
  48                         imei.value = qimei;
  49                 }
  50                 open_ws();
  51         }
  52
  53         function init_map() {
  54                 map = new OpenLayers.Map ("map", {
  55                         controls:[
  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,
  64                         numZoomLevels: 19,
  65                         units: 'm',
  66                         projection: new OpenLayers.Projection(
  67                                                 "EPSG:900913"),
  68                         displayProjection: new OpenLayers.Projection(
  69                                                 "EPSG:4326")
  70                 });
  71                 layerMapnik =
  72                   new OpenLayers.Layer.OSM.Mapnik("Mapnik");
  73                 map.addLayer(layerMapnik)
  74                 layerTransportMap =
  75                   new OpenLayers.Layer.OSM.TransportMap("TransportMap");
  76                 map.addLayer(layerTransportMap)
  77                 layerCycleMap =
  78                   new OpenLayers.Layer.OSM.CycleMap("CycleMap");
  79                 map.addLayer(layerCycleMap);
  80                 line =
  81                   new OpenLayers.Layer.Vector("Line Layer");
  82                 map.addLayer(line);
  83                 map.addControl(new
  84                   OpenLayers.Control.DrawFeature(line,
  85                                   OpenLayers.Handler.Path));
  86                 markers =
  87                   new OpenLayers.Layer.Markers("Markers");
  88                 map.addLayer(markers);
  89
  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);
  94
  95                 var lonLat =
  96                   new OpenLayers.LonLat(0, 0).transform(
  97                     new OpenLayers.Projection("EPSG:4326"),
  98                       map.getProjectionObject());
  99                 map.setCenter(lonLat, 1);
 100         }
 101
 102         function set_marker(msg) {
 103                 if (locations.push(msg) > maxmarkers) {
 104                         locations.shift();
 105                 }
 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++) {
 110                         const p0 =
 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());
 116                         const p1 =
 117                           new OpenLayers.Geometry.Point(
 118                                 locations[i].longitude,
 119                                 locations[i].latitude)
 120                              .transform(new OpenLayers.Projection("EPSG:4326"),
 121                                              map.getProjectionObject());
 122                         const leg =
 123                           new OpenLayers.Geometry.LineString([p0, p1]);
 124                         const lineFeature =
 125                           new OpenLayers.Feature.Vector(leg, null, lineStyle);
 126                         line.addFeatures([lineFeature]);
 127
 128                 }
 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);
 136         }
 137
 138         function open_ws() {
 139                 wsurl = new URL("ws://localhost/");
 140                 wsurl.protocol = wsproto
 141                 wsurl.hostname = wshost
 142                 wsurl.port = wsport
 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;
 149         }
 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;
 156                 sendIMEI();
 157         }
 158         function ws_onmessage(event) {
 159                 console.log("message " + event.data);
 160                 set_marker(JSON.parse(event.data));
 161         }
 162         function ws_onerror(event) {
 163                 console.log("error " + event);
 164                 sts.innerHTML = "error: " + event;
 165         }
 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);
 173         }
 174
 175         function sendIMEI(do_clear) {
 176                 if (do_clear) {
 177                         imeis.clear();
 178                 } else {
 179                         if (imei.value) {
 180                                 imeis.add(imei.value);
 181                         }
 182                 }
 183                 const imstr = Array.from(imeis).join(",");
 184                 document.title = imstr;
 185                 subslist.innerHTML = imstr;
 186                 var msg = {
 187                         imei: Array.from(imeis),
 188                         type: "subscribe",
 189                         timestamp: Date.now(),
 190                         backlog: maxmarkers
 191                 };
 192                 console.log("sending" + JSON.stringify(msg));
 193                 ws.send(JSON.stringify(msg));
 194                 imei.value = "";
 195         }
 196
 197         function handleKey(evt) {
 198                 if (evt.keyCode === 13 || evt.keyCode === 14) {
 199                         if (!imei.disabled) {
 200                                 sendIMEI(false);
 201                         }
 202                 }
 203         }
 204 </script>
 205
 206 </head>
 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>
 218         </div>
 219         <div style="width:100%; height:97%" id="map"></div>
 220         <div style="width:100%; height:1%">
 221                 <span id="sts"></span>
 222                 <span id="about" style="float:right">
 223                         <a href="http://www.average.org/gps303/">
 224                                 http://www.average.org/gps303/</a>
 225                 </span>
 226         </div>
 227 </body>
 228 </html>