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 <script src="http://www.openlayers.org/api/OpenLayers.js">
   5 </script>
   6 <script src="https://www.openstreetmap.org/openlayers/OpenStreetMap.js">
   7 </script>
   8 <script type="text/javascript">
   9         const urlParams = new URLSearchParams(window.location.search);
  10         const qimei = urlParams.get("imei");
  11
  12         const ourl = new URL(window.location);
  13         const wsproto = ourl.protocol === "https" ? "wss" : "ws";
  14         const wshost = ourl.hostname ? ourl.hostname : "localhost";
  15         const wsport = ourl.port ? ourl.port : 5049;
  16
  17         const imeis = new Set();
  18         const locations = new Array();
  19         const maxmarkers = 5;
  20
  21         var sts;
  22         var ws;
  23         var imei;
  24         var send;
  25         var subslist;
  26         var tstamp;
  27         var map;
  28         var markers;
  29         var icon;
  30
  31         function init() {
  32                 init_map();
  33                 sts = document.getElementById("sts");
  34                 sts.innerHTML = "uninitialized";
  35                 imei = document.getElementById("imei");
  36                 send = document.getElementById("send");
  37                 clear = document.getElementById("clear");
  38                 subslist = document.getElementById("subslist");
  39                 tstamp = document.getElementById("tstamp");
  40                 if (qimei) {
  41                         imei.value = qimei;
  42                 }
  43                 open_ws();
  44         }
  45
  46         function init_map() {
  47                 map = new OpenLayers.Map ("map", {
  48                         controls:[
  49                                 new OpenLayers.Control.Navigation(),
  50                                 new OpenLayers.Control.PanZoomBar(),
  51                                 new OpenLayers.Control.LayerSwitcher(),
  52                                 new OpenLayers.Control.Attribution()],
  53                         maxExtent: new OpenLayers.Bounds(
  54                                 -20037508.34,-20037508.34,
  55                                 20037508.34,20037508.34),
  56                         maxResolution: 156543.0399,
  57                         numZoomLevels: 19,
  58                         units: 'm',
  59                         projection: new OpenLayers.Projection(
  60                                                 "EPSG:900913"),
  61                         displayProjection: new OpenLayers.Projection(
  62                                                 "EPSG:4326")
  63                 });
  64                 layerMapnik =
  65                   new OpenLayers.Layer.OSM.Mapnik("Mapnik");
  66                 map.addLayer(layerMapnik)
  67                 layerTransportMap =
  68                   new OpenLayers.Layer.OSM.TransportMap("TransportMap");
  69                 map.addLayer(layerTransportMap)
  70                 layerCycleMap =
  71                   new OpenLayers.Layer.OSM.CycleMap("CycleMap");
  72                 map.addLayer(layerCycleMap);
  73                 markers =
  74                   new OpenLayers.Layer.Markers("Markers");
  75                 map.addLayer(markers);
  76
  77                 var size = new OpenLayers.Size(21, 25);
  78                 var offset = new OpenLayers.Pixel(-(size.w/2), -size.h);
  79                 icon = new OpenLayers.Icon(
  80 'https://www.openstreetmap.org/openlayers/img/marker.png',size,offset);
  81
  82                 var lonLat =
  83                   new OpenLayers.LonLat(0, 0).transform(
  84                     new OpenLayers.Projection("EPSG:4326"),
  85                       map.getProjectionObject());
  86                 map.setCenter(lonLat, 1);
  87         }
  88
  89         function set_marker(msg) {
  90                 if (locations.push(msg) > maxmarkers) {
  91                         locations.shift();
  92                 }
  93                 console.log("new marker list " + JSON.stringify(locations));
  94                 tstamp.innerHTML = msg.timestamp;
  95                 var lonLat;
  96                 // TODO: figure how to have multiple markers and/or track
  97                 for (const loc of locations) {
  98                         lonLat = new OpenLayers.LonLat(+loc.longitude,
  99                                           +loc.latitude).transform(
 100                             new OpenLayers.Projection("EPSG:4326"),
 101                               map.getProjectionObject());
 102                         markers.addMarker(new OpenLayers.Marker(lonLat,icon));
 103                 }
 104                 map.setCenter(lonLat, 16);
 105         }
 106
 107         function open_ws() {
 108                 wsurl = new URL("ws://localhost/");
 109                 wsurl.protocol = wsproto
 110                 wsurl.hostname = wshost
 111                 wsurl.port = wsport
 112                 console.log("wsurl is " + wsurl)
 113                 ws = new WebSocket(wsurl);
 114                 ws.onopen = ws_onopen;
 115                 ws.onmessage = ws_onmessage;
 116                 ws.onerror = ws_onerror;
 117                 ws.onclose = ws_onclose;
 118         }
 119         function ws_onopen(event) {
 120                 console.log("ws opened " + event);
 121                 sts.innerHTML = "online";
 122                 imei.disabled = false;
 123                 send.disabled = false;
 124                 clear.disabled = false;
 125                 sendIMEI();
 126         }
 127         function ws_onmessage(event) {
 128                 console.log("message " + event.data);
 129                 set_marker(JSON.parse(event.data));
 130         }
 131         function ws_onerror(event) {
 132                 console.log("error " + event);
 133                 sts.innerHTML = "error: " + event;
 134         }
 135         function ws_onclose(event) {
 136                 console.log("close " + event);
 137                 sts.innerHTML = "offline";
 138                 imei.disabled = true;
 139                 send.disabled = true;
 140                 clear.disabled = true;
 141                 setTimeout(open_ws, 5000);
 142         }
 143
 144         function sendIMEI(do_clear) {
 145                 if (do_clear) {
 146                         imeis.clear();
 147                 } else {
 148                         if (imei.value) {
 149                                 imeis.add(imei.value);
 150                         }
 151                 }
 152                 const imstr = Array.from(imeis).join(",");
 153                 document.title = imstr;
 154                 subslist.innerHTML = imstr;
 155                 var msg = {
 156                         imei: Array.from(imeis),
 157                         type: "subscribe",
 158                         timestamp: Date.now(),
 159                         backlog: maxmarkers
 160                 };
 161                 console.log("sending" + JSON.stringify(msg));
 162                 ws.send(JSON.stringify(msg));
 163                 imei.value = "";
 164         }
 165
 166         function handleKey(evt) {
 167                 if (evt.keyCode === 13 || evt.keyCode === 14) {
 168                         if (!imei.disabled) {
 169                                 sendIMEI(false);
 170                         }
 171                 }
 172         }
 173 </script>
 174
 175 </head>
 176 <body onload="init();">
 177         <div style="width:100%; height:2%" id="hdr">
 178                 <input id="imei" type="text" name="imei"
 179                  size="16" maxlength="16" placeholder="Enter IMEI"
 180                  autocomplete="off" onkeyup="handleKey(event)">
 181                 <input type="button" id="send" name="send" value="Send"
 182                  onclick="sendIMEI(false)" disabled>
 183                 <input type="button" id="clear" name="clear" value="Clear"
 184                  onclick="sendIMEI(true)" disabled>
 185                 <span id="subslist"></span>
 186                 <span id="tstamp" style="float:right"></span>
 187         </div>
 188         <div style="width:100%; height:97%" id="map"></div>
 189         <div style="width:100%; height:1%" id="sts"></div>
 190 </body>
 191 </html>