<html xmlns="http://www.w3.org/1999/xhtml" lang="en-US" xml:lang="en-US">
<head>
<title>Location</title>
+<!-- This uses reeeally old 2.13.1 from 2013, also part of Debian distro -->
<script src="http://www.openlayers.org/api/OpenLayers.js">
</script>
<script src="https://www.openstreetmap.org/openlayers/OpenStreetMap.js">
const urlParams = new URLSearchParams(window.location.search);
const qimei = urlParams.get("imei");
- const ourl = new URL(window.location);
- const wsproto = ourl.protocol === "https" ? "wss" : "ws";
- const wshost = ourl.hostname ? ourl.hostname : "localhost";
- const wsport = ourl.port ? ourl.port : 5049;
+ const wsproto = window.location.protocol === "https" ? "wss" : "ws";
+ const wshost = window.location.hostname ? window.location.hostname
+ : "localhost";
+ const wsport = window.location.port ? window.location.port : 5049;
+ const limei = window.location.pathname.substring(1)
const imeis = new Set();
const locations = new Array();
const maxmarkers = 5;
+ const lineStyle = {
+ strokeColor: '#0000ff',
+ strokeOpacity: 0.5,
+ strokeWidth: 5
+ };
var sts;
var ws;
var imei;
- var send;
- var subslist;
+ var imeilst;
+ var clear;
+ var subunsub;
var tstamp;
var map;
+ var line;
var markers;
var icon;
sts = document.getElementById("sts");
sts.innerHTML = "uninitialized";
imei = document.getElementById("imei");
- send = document.getElementById("send");
+ imeilst = document.getElementById("imeilst");
clear = document.getElementById("clear");
- subslist = document.getElementById("subslist");
+ subunsub = document.getElementById("subunsub");
+ refresh = document.getElementById("refresh");
+ msgtxt = document.getElementById("msgtxt");
+ message = document.getElementById("message");
+ poweroff = document.getElementById("poweroff");
+ devstatus = document.getElementById("devstatus");
tstamp = document.getElementById("tstamp");
if (qimei) {
- imei.value = qimei;
+ imeis.add(qimei);
+ } else if (limei) {
+ imeis.add(limei);
}
+ update_imeilst(imeis);
+ change(imei)
open_ws();
}
layerCycleMap =
new OpenLayers.Layer.OSM.CycleMap("CycleMap");
map.addLayer(layerCycleMap);
+ line =
+ new OpenLayers.Layer.Vector("Line Layer");
+ map.addLayer(line);
+ map.addControl(new
+ OpenLayers.Control.DrawFeature(line,
+ OpenLayers.Handler.Path));
markers =
new OpenLayers.Layer.Markers("Markers");
map.addLayer(markers);
locations.shift();
}
console.log("new marker list " + JSON.stringify(locations));
- tstamp.innerHTML = msg.devtime;
- var lonLat;
- // TODO: figure how to have multiple markers and/or track
- for (const loc of locations) {
- lonLat = new OpenLayers.LonLat(+loc.longitude,
- +loc.latitude).transform(
- new OpenLayers.Projection("EPSG:4326"),
- map.getProjectionObject());
- markers.addMarker(new OpenLayers.Marker(lonLat,icon));
+ tstamp.innerHTML = msg.timestamp;
+ // Draw a line between backlog locations
+ for (var i = 1; i < locations.length; i++) {
+ const p0 =
+ new OpenLayers.Geometry.Point(
+ locations[i-1].longitude,
+ locations[i-1].latitude)
+ .transform(new OpenLayers.Projection("EPSG:4326"),
+ map.getProjectionObject());
+ const p1 =
+ new OpenLayers.Geometry.Point(
+ locations[i].longitude,
+ locations[i].latitude)
+ .transform(new OpenLayers.Projection("EPSG:4326"),
+ map.getProjectionObject());
+ const leg =
+ new OpenLayers.Geometry.LineString([p0, p1]);
+ const lineFeature =
+ new OpenLayers.Feature.Vector(leg, null, lineStyle);
+ line.addFeatures([lineFeature]);
+
}
- map.setCenter(lonLat, 16);
+ // Set marker at the reported (last) location
+ const lonLat = new OpenLayers.LonLat(+msg.longitude,
+ +msg.latitude).transform(
+ new OpenLayers.Projection("EPSG:4326"),
+ map.getProjectionObject());
+ markers.addMarker(new OpenLayers.Marker(lonLat, icon));
+ map.setCenter(lonLat, 14);
+ }
+ function display_status(battery) {
+ console.log("status " + battery);
+ devstatus.innerHTML = "BAT: " + battery;
+ }
+ function display_cmdresult(result) {
+ console.log("cmdresult " + result);
+ devstatus.innerHTML = result;
}
function open_ws() {
console.log("ws opened " + event);
sts.innerHTML = "online";
imei.disabled = false;
- send.disabled = false;
clear.disabled = false;
+ change(imei);
+ locations.splice(0);
sendIMEI();
}
function ws_onmessage(event) {
console.log("message " + event.data);
- set_marker(JSON.parse(event.data));
+ msg = JSON.parse(event.data);
+ if (msg.type === "location") {
+ set_marker(msg);
+ if (msg.battery_percentage) {
+ display_status(msg.battery_percentage);
+ }
+ } else if (msg.type === "status") {
+ display_status(msg.battery);
+ } else if (msg.type === "cmdresult") {
+ display_cmdresult(msg.result);
+ }
+
}
function ws_onerror(event) {
console.log("error " + event);
console.log("close " + event);
sts.innerHTML = "offline";
imei.disabled = true;
- send.disabled = true;
+ disablebtns(true);
clear.disabled = true;
setTimeout(open_ws, 5000);
}
- function sendIMEI(do_clear) {
- if (do_clear) {
- imeis.clear();
- } else {
- if (imei.value) {
- imeis.add(imei.value);
- }
- }
+ function sendIMEI() {
const imstr = Array.from(imeis).join(",");
document.title = imstr;
- subslist.innerHTML = imstr;
var msg = {
imei: Array.from(imeis),
type: "subscribe",
- date: Date.now(),
- backlog: 1
+ timestamp: Date.now(),
+ backlog: maxmarkers
+ };
+ console.log("sending" + JSON.stringify(msg));
+ ws.send(JSON.stringify(msg));
+ }
+
+ function sendCMD(cmd, imei, txt) {
+ var msg = {
+ imei: imei,
+ type: cmd,
+ timestamp: Date.now(),
+ txt: txt
};
console.log("sending" + JSON.stringify(msg));
ws.send(JSON.stringify(msg));
- imei.value = "";
}
function handleKey(evt) {
}
}
}
+
+ function change(obj) {
+ if (obj.value) {
+ disablebtns(false);
+ if (imeis.has(obj.value)) {
+ subunsub.value = "-";
+ subunsub.title =
+ "Unsubscribe from notifications from "
+ + obj.value;
+ } else {
+ subunsub.value = "+";
+ subunsub.title =
+ "Subscribe to notifications from "
+ + obj.value;
+ }
+ } else {
+ disablebtns(true);
+ subunsub.value = "o";
+ subunsub.title = "";
+ }
+ }
+
+ function erase(obj) {
+ imei.value = "";
+ change(imei);
+ }
+
+ function disablebtns(yesorno) {
+ [subunsub, refresh, msgtxt, message,
+ poweroff].forEach(function(obj) {
+ obj.disabled = yesorno;
+ })
+ }
+ function update_imeilst(imeis) {
+ while (imeilst.firstChild) {
+ imeilst.removeChild(imeilst.lastChild)
+ }
+ imeis.forEach(function(item) {
+ var entry = document.createElement('option');
+ entry.value = item;
+ imeilst.appendChild(entry);
+ })
+ if (imeis.size == 1) {
+ imei.value = imeis.values().next().value;
+ } else {
+ imei.value = "";
+ }
+ }
+
+ function buttonpress(obj) {
+ console.log("button value " + obj.value);
+ console.log("button id " + obj.id);
+ console.log("input value " + imei.value);
+ if (obj.id === "subunsub") {
+ if (obj.value === "+") {
+ imeis.add(imei.value);
+ } else if (obj.value === "-") {
+ imeis.delete(imei.value);
+ imei.value = "";
+ }
+ update_imeilst(imeis);
+ change(imei);
+ sendIMEI();
+ } else {
+ sendCMD(obj.id, imei.value, msgtxt.value);
+ msgtxt.value = "";
+ }
+ }
</script>
</head>
-<body onload="init();">
- <div style="width:100%; height:2%" id="hdr">
+<body onload="init();" style="height: 100%; margin: 0; display: flex;
+ flex-direction: column; font-size: 1.5vh;">
+ <div style="margin: 0;" id="hdr">
<input id="imei" type="text" name="imei"
- size="16" maxlength="16" placeholder="Enter IMEI"
- autocomplete="off" onkeyup="handleKey(event)">
- <input type="button" id="send" name="send" value="Send"
- onclick="sendIMEI(false)" disabled>
- <input type="button" id="clear" name="clear" value="Clear"
- onclick="sendIMEI(true)" disabled>
- <span id="subslist"></span>
- <span id="tstamp" style="float:right"></span>
+ size="16" maxlength="16" placeholder="Enter or click to choose"
+ list="imeilst"
+ oninput ="change(this)" onkeyup="handleKey(event)" />
+ <datalist id="imeilst"></datalist>
+ <input type="button" id="clear" name="clear" value="x"
+ title="Clear input (Click on empty input shows avaliable choices)"
+ onclick="erase(this)" />
+ <input type="button" id="subunsub" name="subunsub" value="+"
+ title="Unsubscribe from events from IMEI"
+ onclick="buttonpress(this)" />
+ <input type="button" id="refresh" name="refresh" value="Refresh"
+ title="Send request to refresh location"
+ onclick="buttonpress(this)" />
+ <input id="msgtxt" type="text" name="msgtxt"
+ size="80" maxlength="80" placeholder="Input message text"
+ onkeyup="handleKey(event)" />
+ <input type="button" id="message" name="message" value="Send"
+ title="Send message"
+ onclick="buttonpress(this)" />
+ <input type="button" id="poweroff" name="poweroff" value="Off"
+ title="Send request to power off"
+ style="background: red;"
+ onclick="buttonpress(this)" />
+ <br />
+ </div>
+ <div style="flex-grow: 1;" id="map"></div>
+ <div style="display: flex; flex-direction: row; width: 100%;">
+ <div id="sts" style="flex: none;"></div>
+ | <div id="devstatus" style="flex: auto;"></div>
+ | <div id="tstamp" style="flex: auto;"></div>
+ | <div id="about" style="flex: none; font-size: 1.5vmin;">
+ <a href="http://www.average.org/loctrkd/">
+ http://www.average.org/loctrkd/</a></div>
</div>
- <div style="width:100%; height:97%" id="map"></div>
- <div style="width:100%; height:1%" id="sts"></div>
</body>
</html>
projects / loctrkd.git / blobdiff