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