From fe2a5e6f28a0ce1e200578b63ca7a7026a3c4dd5 Mon Sep 17 00:00:00 2001
From: Gordon Williams <gw@pur3.co.uk>
Date: Wed, 6 Nov 2019 21:51:47 +0000
Subject: [PATCH] Add route uploader

---
 apps.json             |  12 ++
 apps/beercompass.html |   1 -
 apps/route.html       | 254 ++++++++++++++++++++++++++++++++++++++++++
 apps/route.png        | Bin 0 -> 1452 bytes
 4 files changed, 266 insertions(+), 1 deletion(-)
 create mode 100644 apps/route.html
 create mode 100644 apps/route.png
diff --git a/apps.json b/apps.json
index a4e20521d..802451c46 100644
--- a/apps.json
+++ b/apps.json
@@ -107,5 +107,17 @@
       {"name":"+beer"},
       {"name":"=beer"}
     ]
+  },
+  { "id": "route",
+    "name": "Route Viewer",
+    "icon": "route.png",
+    "description": "Upload a KML file of a route, and have your watch display a map with how far around it you are",
+    "tags": "",
+    "custom": "route.html",
+    "storage": [
+      {"name":"-route"},
+      {"name":"+route"},
+      {"name":"=route"}
+    ]
   }
 ]
diff --git a/apps/beercompass.html b/apps/beercompass.html
index b70f1b9ca..754e80f1c 100644
--- a/apps/beercompass.html
+++ b/apps/beercompass.html
@@ -1,4 +1,3 @@
-<!DOCTYPE html>
 <html>
   <head>  
     <link rel="stylesheet" href="https://unpkg.com/leaflet@1.0.3/dist/leaflet.css" />
diff --git a/apps/route.html b/apps/route.html
new file mode 100644
index 000000000..2440287eb
--- /dev/null
+++ b/apps/route.html
@@ -0,0 +1,254 @@
+<html>
+  <head>
+    <link rel="stylesheet" href="../css/spectre.min.css">
+    <style>li {line-height: 1;}</style>
+  </head>
+  <body>
+<ul>
+<li>Go to <a href="http://google.com/mymaps">http://google.com/mymaps</a></li>
+<li>Create a new map</li>
+<li>Add a line or shape (under search box)</li>
+<li>Click around, double click to end</li>
+<li>Click '...' to the right of 'Untitled Map'</li>
+<li>Export to KML - just 'Untitled Layer' and export as KML</li>
+</ul>
+<p><b>Or...</b></p>
+<ul>
+<li>Go to <a href="https://umap.openstreetmap.fr/en/">https://umap.openstreetmap.fr/en/</a></li>
+<li>Create a map</li>
+<li>Draw a polyline (right hand side)</li>
+<li>Embed and share (leb>ft hand side)</li>
+<li>Download data as KML</li>
+</ul>
+
+<p><b>Upload KML file here:
+<input class="form-input" type="file" id="fileLoader"/></p>
+<p><button id="upload" style="display:none" class="btn btn-primary">Upload</button></p>
+<pre id="log"></pre>
+<script>
+var xmlText = "";
+var xmlDoc;
+var js = "";
+function log(t) {
+  document.getElementById('fileLoader').innerText += t+"\n";
+  console.log(t);
+}
+function project(latlong) {
+  var d = Math.PI / 180,
+      max = 85.0511287798,
+      R = 6378137, // earth radius in m
+      lat = Math.max(Math.min(max, latlong.lat), -max),
+      sin = Math.sin(lat * d);
+  return {x:R * latlong.lon * d,
+          y:R * Math.log((1 + sin) / (1 - sin)) / 2};
+}
+
+function fileLoaded() {
+  // kml -> Document -> Placemark -> LineString -> Coordinates
+  var coordinateNode = xmlDoc.getElementsByTagName("coordinates");
+  if (!coordinateNode) {
+    log("No 'coordinates' node found");
+    return;
+  }
+  var coordinateLine = coordinateNode[0].textContent;
+  var coordinateList = coordinateLine.split(/\s+/);
+  var coords = [];
+  var pmin, pmax;
+  coordinateList.forEach(function(c) {
+    c = c.split(",");
+    var p = project({
+      lat : parseFloat(c[1]),
+      lon : parseFloat(c[0])
+    });
+    p.x = Math.round(p.x);
+    p.y = Math.round(p.y);
+    if (!pmin) pmin = {x:p.x, y:p.y};
+    if (!pmax) pmax = {x:p.x, y:p.y};
+    if (p.x<pmin.x) pmin.x=p.x;
+    if (p.x>pmax.x) pmax.x=p.x;
+    if (p.y<pmin.y) pmin.y=p.y;
+    if (p.y>pmax.y) pmax.y=p.y;
+    coords.push(p.x,p.y);
+  });
+  js = `
+var coords = new Int32Array([${coords.join(",")}]);
+var min = ${JSON.stringify(pmin)};
+var max = ${JSON.stringify(pmax)};
+`.trim();
+  console.log(js);
+  document.getElementById("upload").style = "";
+}
+function handleFileSelect(event) {
+  if (event.target.files.length!=1) {
+    log("More than one file selected!");
+    return;
+  }
+  var reader = new FileReader();
+  reader.onload = function(event) {
+    xmlText = event.target.result;
+    var parser = new DOMParser();
+    xmlDoc = parser.parseFromString(xmlText, "application/xml");
+    fileLoaded();
+  };
+  reader.readAsText(event.target.files[0]);
+};
+document.getElementById('fileLoader').addEventListener('change', handleFileSelect, false);
+
+document.getElementById("upload").addEventListener("click", function() {
+  var app = `${js}
+  var gcoords = new Uint8Array(coords.length);
+  var coordDistance = new Uint16Array(coords.length/2);
+
+  var PT_DISTANCE = 30; // distance to a point before we consider it complete
+
+  function toScr(p) {
+    return {
+      x : 10 + (p.x-min.x)*100/(max.x-min.x),
+      y : 230 - (p.y-min.y)*100/(max.y-min.y)
+    };
+  }
+
+  var last;
+  var totalDistance = 0;
+  for (var i=0;i<coords.length;i+=2) {
+    var c = {x:coords[i],y:coords[i+1]};
+    var s = toScr(c);
+    gcoords[i  ] = s.x;
+    gcoords[i+1] = s.y;
+    if (last) {
+      var dx = c.x-last.x;
+      var dy = c.y-last.y;
+      totalDistance += Math.sqrt(dx*dx+dy*dy);
+      coordDistance[i/2] = totalDistance;
+    }
+    last = c;
+  }
+  var fix, lastFix;
+  var nextPtIdx = 0; // 2x the number of points
+  var nextPt = {x:coords[nextPtIdx], y:coords[nextPtIdx+1]};
+  var nextAngle = 0;
+  var nextDist = 0;
+  var currentDist = 0;
+
+
+
+  function drawMap() {
+    g.clearRect(0,0,239,120);
+    g.setFontAlign(0,0);
+    g.setColor(1,0,0);
+    g.setFontVector(40);
+    g.drawString((currentDist===undefined)?"?":(Math.round(currentDist)+"m"), 160, 30);
+    g.setColor(1,1,1);
+    g.setFont("6x8",2);
+    g.drawString(Math.round(totalDistance)+"m", 160, 70);
+    g.drawString((nextPtIdx/2)+"/"+coordDistance.length, 50, 20);
+    if (!fix.fix) {
+      g.setColor(1,0,0);
+      g.drawString("No GPS", 50, 50);
+      g.setFont("6x8",1);
+      g.drawString(fix.satellites+" Sats", 50, 70);
+    }
+
+    if (lastFix && lastFix.fix) {
+      g.setColor(0,0,0);
+      g.drawCircle(lastFix.s.x,lastFix.s.y,10);
+    }
+    for (var i=0;i<gcoords.length;i+=2) {
+      g.setColor((i<=nextPtIdx) ? 63488 : 46486); // red/grey
+      g.fillRect(gcoords[i]-2,gcoords[i+1]-2,gcoords[i]+2,gcoords[i+1]+2);
+    }
+    g.setColor(1,0,0); // first part of path
+    g.drawPoly(new Uint8Array(gcoords.buffer, 0, nextPtIdx+2));
+    g.setColor(1,1,1); // remaining part of path
+    g.drawPoly(new Uint8Array(gcoords.buffer, nextPtIdx));
+
+    if (fix && fix.fix) {
+      g.setColor(1,0,0);
+      g.drawCircle(fix.s.x,fix.s.y,10);
+    }
+    lastFix = fix;
+  }
+
+  function getNextPtInfo() {
+    var dx = nextPt.x - fix.p.x;
+    var dy = nextPt.y - fix.p.y;
+    nextAngle = Math.atan2(dx,dy)*180/Math.PI;
+    nextDist = Math.sqrt(dx*dx+dy*dy);
+  }
+
+  function onGPS(f) {
+    fix = f;
+    fix.p = Bangle.project(fix);
+    fix.s = toScr(fix.p);
+    getNextPtInfo();
+    if ((nextDist < PT_DISTANCE) &&
+        (nextPtIdx < coords.length)) {
+      nextPtIdx+=2;
+      nextPt = {x:coords[nextPtIdx], y:coords[nextPtIdx+1]};
+      getNextPtInfo();
+    }
+    // work out how far we are (based on distance to next point)
+    if (!fix.fix) {
+      currentDist = undefined
+    } else if (nextPtIdx+2 < coordDistance.length) {
+      currentDist = coordDistance[1+(nextPtIdx/2)] - nextDist;
+    } else if (nextPtIdx+2 == coordDistance.length) {
+      currentDist = totalDistance - nextDist;
+    } else {
+      currentDist = totalDistance;
+    }
+
+    if (!Bangle.isLCDOn()) return;
+    drawMap();
+  }
+
+  function arrow(r,c) {
+    r=r*Math.PI/180;
+    var p = Math.PI*3/4;
+    g.setColor(c);
+    g.fillPoly([
+      180+40*Math.sin(r), 180-40*Math.cos(r),
+      180+20*Math.sin(r+p), 180-20*Math.cos(r+p),
+      180-10*Math.sin(r), 180+10*Math.cos(r),
+      180+20*Math.sin(r+-p), 180-20*Math.cos(r-p),
+      ]);
+  }
+
+  function onCompass(m) {
+    if (!Bangle.isLCDOn()) return;
+
+    arrow(oldHeading,0);
+    var heading = m.heading + nextAngle;
+    arrow(heading,0xF800);
+    oldHeading = heading;
+  }
+
+
+  // draw the heading
+  var oldHeading = 0;
+  Bangle.on('GPS', onGPS);
+  Bangle.on('mag', onCompass);
+  Bangle.setGPSPower(1);
+  Bangle.setCompassPower(1);
+  g.clear();
+`;
+var json = JSON.stringify({
+name:"Run Route",
+icon:"*route",
+src:"-route"
+});
+var icon = `require("heatshrink").decompress(atob("mEwgIkhvgFE/wEDgOHAocDgYFEgOAAp4XEEYsB4w1E5hBKnByFKw8/AQNAAQP/4EAAIMB4HggBABHoNwCwUGE4kOgEYBAMAhk+hgIBAoM/hkEAoMIv8MC4QFChARCAoIMCDoQXChkcjA1EAoJBBg5dCJoJHDKYWAsCGD4AJBAAXBDYIlCsYFBGwUzPok+AokcsOOmIUCAogAWA=="))`;
+
+window.postMessage({
+  id : "route",
+
+  storage:[
+    {name:"-route", content:app},
+    {name:"+route", content:json},
+    {name:"*route", content:icon, evaluate:true},
+  ]
+});
+});
+
+</script>
+</body>
diff --git a/apps/route.png b/apps/route.png
new file mode 100644
index 0000000000000000000000000000000000000000..ed27373b309bce7de278ce4fb8e843919dcc556a
GIT binary patch
literal 1452
zcmV;d1ylNoP)<h;3K|Lk000e1NJLTq001xm001xu1^@s6R|5Hm00006VoOIv0RI60
z0RN!9r;`8x1z|}<K~!jg?U>zf6lD~~e>1Z?vtOm#?xr7GJ~UWpDWMc35QRXX!B7wh
z0ZfPqUWgGdB;M(b33vJjU<k?$CKzd=SPh_n0wKT!P`+ANrAVQ;ZFiULw)?$1J6>#3
z+QPOo?IOL{=Wg~r=XsxJ&wFOh3=~mB5k<UA2vbScf^7|Ch3yE!cA_1%h?Y)F%0Z#}
zqpu4gZY00p-qi5C7{dleiAGy6ybx(0!K$PuYbGDR;C}nLT6G!7D|#eG8W^?1#AfvH
z8#bUzv>pSac9T<xmUbl5ew5kQjPU0(V9J}J3Ac0hw26i3g_e?0Q_E3Vjy#7#@QVcz
z_7YJv@UoG=2MUB!r-FFz##p(^$>PN&_<EDH{p`o;7+~9bZ(_5{Q{sQ26-cKvZrzHI
zN@ux#eGq`ZyfLCtl|WyZM-Tb|@b!eacKIHOc*^h|h74#LWHRcwF=|#r&F1bbW?5j-
zq7r0Tq^W5J0QL2DN*pFCtDVewwSrhQMeE@Uoc;Yar;pz-Y(V!BN+!}AIdqP}ffy}Y
zU#GU-^Gr;@pW<k19|!{P?x@7&GSl2#PIGhla7;yo%<d0sz|jOiEc*0c7X{;!jcx<}
zzA&L+1b};Yebm-_2n8eDy!wE-bydtPhwg_75{WDT54z*HT;>URZFZR*yH?`s39+DY
z7I$y=5cChSbVV%|>%{rG4R~gjQ@5~&CxHk{R?G$9#IdXNJ`Qp7>I3%d@laQ1=YCfl
z1gNjG>!qfuri`kZGWvVN9RKkO0Eu{-buEpBGayPLEnAn3`psrj0I*oih@ybqF0p+_
zrEcM4p;$~vl8CBivDp<}Ir(Ryz%LU%<I^dX`+xhWneE0Q+%X`P;T{-^K>r{Ep(u0b
zRWq_BjL$+kV3sB3H_XgkM5e;@6f>MQWZ8t?etzK(G9!q`k{mwpC(&q<^_v#6uxZYO
zIn!#CcoK*ZjU+(R=;;pX%9&Ob@XT_tbj52t2@bJ*)jVA})5?G#!0Po24dqO$BLr~e
z(mj4_yT(vBt}Fh9S0I_p;t!<oR4a($__r2cPl)rUZVz9-wRy>e{Dvx!xztJO&<RN9
z<`>N$Cb|C@+57)KH(t}=$dO)-{?NzClM^>(NvQ={$&C;0ic(#g3{@a=_6F+pdt@K^
zQ9jr}{HyQL`ojorC-TNplF2NmPd@>mxw#xk6c`L=00;(irX!IIXU>GMmA12XLnD$T
za{0WMp6&oE*ER6|$7_iUC8_c_b!jqG0cCd!LPZ(soo-^EeT&u~Myi{IdGi|pbaX`U
zdZT!~Q93#zn9Kq#8{O2`+gZQf4M2PQ5M5m{Ze8o9%j;tx6y@UCJ3Rcy&xJoaag<nf
zi#KdQaF=5FWD7_lq%#Os1$pl_1Z(cCs@kJqGKrW>A|8(gfZAFc8#cJ9tjxvK)L0Nj
zP%LIDJx&}Y7Rp=>0A|19HX<jdDc{2LW+5#QCcf`GwEhr+*@TwPAkCkJ^7&2#wF7{7
zJomz5wMuz6jYL$;&PEhV?!0F*D$z)SQfK}NHs35{r~=7vj-&O5km~1P{c<-#MJcNH
z5$U#z!!cH?G_H66heH|`4`4D$<BA^-hML&4rV+8K40-2TP-LuM>>_paET(1if!;|8
zm@1|;PLG0~Pm3dwXPnN5f*hggh$$KnI?>pNpf;dXt-)OW6QXUfFw(~G=fNaK3852B
zYeiI#3a%}kV;0W=XugB1$)@(ACf1RS%_t!Mv(fn$M)!a*(osD5%#7-R$@7n6;Ma~E
zsn#mEHg^~y&CB`tz&m79pOQ_iz`mfX(ELRdQA82{KmG%he-_EuYVSJ$0000<MNUMn
GLSTYPptf27

literal 0
HcmV?d00001

