openstmap: 0.04: Move map rendering to a module (fix #396)

gpsrec: 0.14: Now use the openstmap lib for map plotting
2020-12-08 15:40:15 +00:00 · 2020-12-08 15:40:15 +00:00 · b3e12df673
parent 4dc6ea864c
commit b3e12df673
6 changed files with 102 additions and 90 deletions
--- a/apps.json
+++ b/apps.json
@ -363,7 +363,7 @@
  { "id": "gpsrec",
    "name": "GPS Recorder",
    "icon": "app.png",
-    "version":"0.13",
+    "version":"0.14",
    "interface": "interface.html",
    "description": "Application that allows you to record a GPS track. Can run in background",
    "tags": "tool,outdoors,gps,widget",
@ -942,12 +942,12 @@
    ]
  },
  { "id": "assistedgps",
-    "name": "Assisted GPS Update",
+    "name": "Assisted GPS Update (AGPS)",
    "icon": "app.png",
    "version":"0.01",
    "description": "Downloads assisted GPS data to Bangle.js for faster GPS startup and more accurate fixes",
    "custom": "custom.html",
-    "tags": "tool,outdoors",
+    "tags": "tool,outdoors,agps",
    "type": "RAM",
    "storage": [ ]
  },
@ -1326,7 +1326,7 @@
    "name": "OpenStreetMap",
    "shortName":"OpenStMap",
    "icon": "app.png",
-    "version":"0.03",
+    "version":"0.04",
    "description": "[BETA] Loads map tiles from OpenStreetMap onto your Bangle.js and displays a map of where you are",
    "tags": "outdoors,gps",
    "custom": "custom.html",
@ -2474,6 +2474,6 @@
  "storage": [
    {"name":"gmeter.app.js","url":"app.js"},
    {"name":"gmeter.img","url":"app-icon.js","evaluate":true}
-  ]	
+  ]
 }
 ]
--- a/apps/gpsrec/ChangeLog
+++ b/apps/gpsrec/ChangeLog
@ -15,3 +15,4 @@
 0.12: Add option to plot on top of OpenStreetMap tiles (when they are installed on the watch)
 0.13: Increase GPS recording accuracy by one decimal place
      Ensure default time period is 10
+0.14: Now use the openstmap lib for map plotting
--- a/apps/gpsrec/app.js
+++ b/apps/gpsrec/app.js
@ -2,7 +2,10 @@ Bangle.loadWidgets();
 Bangle.drawWidgets();

 var settings = require("Storage").readJSON("gpsrec.json",1)||{};
-var qOpenStMap = (require("Storage").list("openstmap.json")>0);
+var osm;
+try { // if it's installed, use the OpenStreetMap module
+  osm = require("openstmap");
+} catch (e) {}

 function getFN(n) {
  return ".gpsrc"+n.toString(36);
@ -134,7 +137,7 @@ function viewTrack(n, info) {
    info.qOSTM = false;
    plotTrack(info);
  };
-  if (qOpenStMap)
+  if (osm)
    menu['Plot OpenStMap'] = function() {
      info.qOSTM = true;
      plotTrack(info);
@ -161,49 +164,22 @@ function viewTrack(n, info) {
  return E.showMenu(menu);
 }

-function drawopenstmap(lat, lon, map) {
-  var s = require("Storage");
-  var cx = g.getWidth()/2;
-  var cy = g.getHeight()/2;
-  var p = Bangle.project({lat:lat,lon:lon});
-  var ix = (p.x-map.center.x)*4096/map.scale + (map.imgx/2) - cx;
-  var iy = (map.center.y-p.y)*4096/map.scale + (map.imgy/2) - cy;
-  var tx = 0|(ix/map.tilesize);
-  var ty = 0|(iy/map.tilesize);
-  var ox = (tx*map.tilesize)-ix;
-  var oy = (ty*map.tilesize)-iy;
-  for (var x=ox,ttx=tx;x<g.getWidth();x+=map.tilesize,ttx++) {
-    for (var y=oy,tty=ty;y<g.getHeight();y+=map.tilesize,tty++) {
-      var img = s.read("openstmap-"+ttx+"-"+tty+".img");
-      if (img) g.drawImage(img,x,y);
-      else g.clearRect(x,y,x+map.tilesize-1,y+map.tilesize-1);
-    }
-  }
-}
-
 function plotTrack(info) {
  "ram"

-  function radians(a) {
-    return a*Math.PI/180;
+  function distance(lat1,long1,lat2,long2) { "ram"
+    var x = (long1-long2) * Math.cos((lat1+lat2)*Math.PI/360);
+    var y = lat2 - lat1;
+    return Math.sqrt(x*x + y*y) * 6371000 * Math.PI / 180;
  }

-  function distance(lat1,long1,lat2,long2){
-    var x = radians(long1-long2) * Math.cos(radians((lat1+lat2)/2));
-    var y = radians(lat2-lat1);
-    return Math.sqrt(x*x + y*y) * 6371000;
-  }
-
-  function getMapXY(mylat, mylon) {
-    if (info.qOSTM) {
-      var q = Bangle.project({lat:mylat,lon:mylon});
-      var p = Bangle.project({lat:clat,lon:clon});
-      var ix = (q.x-p.x)*4096/map.scale + cx;
-      var iy = cy - (q.y-p.y)*4096/map.scale;
-      return {x:ix, y:iy};
-    }
-    else {
-      var ix = 30 + Math.round((long-info.minLong)*info.lfactor*info.scale);
+  // Function to convert lat/lon to XY
+  var getMapXY;
+  if (info.qOSTM) {
+    getMapXY = osm.latLonToXY.bind(osm);
+  } else {
+    getMapXY = function(lat, lon) { "ram"
+      var ix = 30 + Math.round((long - info.minLong)*info.lfactor*info.scale);
      var iy = 210 - Math.round((lat - info.minLat)*info.scale);
      return {x:ix, y:iy};
    }
@ -225,13 +201,10 @@ function plotTrack(info) {
    g.setColor(1,1,1);
    g.drawString("N",2,40);
    g.setColor(1,1,1);
-  }
-  else {
-    var map = s.readJSON("openstmap.json");
-    map.center = Bangle.project({lat:map.lat,lon:map.lon});
-    var clat = (info.minLat+info.maxLat)/2;
-    var clon = (info.minLong+info.maxLong)/2;
-    drawopenstmap(clat, clon, map);
+  } else {
+    osm.lat = (info.minLat+info.maxLat)/2;
+    osm.lon = (info.minLong+info.maxLong)/2;
+    osm.draw();
    g.setColor(0, 0, 0);
  }
  g.drawString(asTime(info.duration),10,220);
@ -258,7 +231,7 @@ function plotTrack(info) {
    long = +c[2];
    mp = getMapXY(lat, long);
    g.lineTo(mp.x,mp.y);
-    if (info.qOSTM) g.fillCircle(mp.x, mp.y, 1);
+    if (info.qOSTM) g.fillCircle(mp.x,mp.y,2); // make the track more visible
    var d = distance(olat,olong,lat,long);
    if (!isNaN(d)) dist+=d;
    olat = lat;
--- a/apps/openstmap/ChangeLog
+++ b/apps/openstmap/ChangeLog
@ -1,3 +1,4 @@
 0.01: New App!
 0.02: Fix marker position, color, and map scaling
 0.03: Show widgets (mainly so we can use the GPS recorder widget)
+0.04: Move map rendering to a module (fix #396)
--- a/apps/openstmap/app.js
+++ b/apps/openstmap/app.js
@ -1,62 +1,33 @@
-var s = require("Storage");
-var map = s.readJSON("openstmap.json");
+var m = require("openstmap");
 var HASWIDGETS = true;
 var y1,y2;
-
-map.center = Bangle.project({lat:map.lat,lon:map.lon});
-var lat = map.lat, lon = map.lon;
 var fix = {};

 function redraw() {
-  var cx = g.getWidth()/2;
-  var cy = g.getHeight()/2;
-  var p = Bangle.project({lat:lat,lon:lon});
-  var ix = (p.x-map.center.x)*4096/map.scale + (map.imgx/2) - cx;
-  var iy = (map.center.y-p.y)*4096/map.scale + (map.imgy/2) - cy;
-  //console.log(ix,iy);
-  var tx = 0|(ix/map.tilesize);
-  var ty = 0|(iy/map.tilesize);
-  var ox = (tx*map.tilesize)-ix;
-  var oy = (ty*map.tilesize)-iy;
  g.setClipRect(0,y1,g.getWidth()-1,y2);
-  for (var x=ox,ttx=tx;x<g.getWidth();x+=map.tilesize,ttx++) {
-    for (var y=oy,tty=ty;y<g.getHeight();y+=map.tilesize,tty++) {
-      var img = s.read("openstmap-"+ttx+"-"+tty+".img");
-      if (img) g.drawImage(img,x,y);
-      else {
-        g.clearRect(x,y,x+map.tilesize-1,y+map.tilesize-1);
-        g.drawLine(x,y,x+map.tilesize-1,y+map.tilesize-1);
-        g.drawLine(x,y+map.tilesize-1,x+map.tilesize-1,y);
-      }
-    }
-  }
+  m.draw();
  drawMarker();
  g.setClipRect(0,0,g.getWidth()-1,g.getHeight()-1);
 }

 function drawMarker() {
  if (!fix.fix) return;
-  var p = Bangle.project({lat:lat,lon:lon});
-  var q = Bangle.project(fix);
-  var cx = g.getWidth()/2;
-  var cy = g.getHeight()/2;
-  var ix = (q.x-p.x)*4096/map.scale + cx;
-  var iy = cy - (q.y-p.y)*4096/map.scale;
+  var p = m.latLonToXY(fix.lat, fix.lon);
  g.setColor(1,0,0);
-  g.fillRect(ix-2,iy-2,ix+2,iy+2);
+  g.fillRect(p.x-2, p.y-2, p.x+2, p.y+2);
 }

 var fix;
 Bangle.on('GPS',function(f) {
  fix=f;
-  g.clearRect(0,0,240,8);
+  g.clearRect(0,y1,240,y1+8);
  g.setColor(1,1,1);
  g.setFont("6x8");
  g.setFontAlign(0,0);
  var txt = fix.satellites+" satellites";
  if (!fix.fix)
    txt += " - NO FIX";
-  g.drawString(txt,120,4);
+  g.drawString(txt,120,y1 + 4);
  drawMarker();
 });
 Bangle.setGPSPower(1);
@ -76,7 +47,7 @@ redraw();

 setWatch(function() {
  if (!fix.fix) return;
-  lat = fix.lat;
-  lon = fix.lon;
+  m.lat = fix.lat;
+  m.lon = fix.lon;
  redraw();
 }, BTN2, {repeat:true});
--- a/apps/openstmap/openstmap.js
+++ b/apps/openstmap/openstmap.js
@ -0,0 +1,66 @@
+/* OpenStreetMap plotting module.
+
+Usage:
+
+var m = require("openstmap");
+// m.lat/lon are now the center of the loaded map
+m.draw(); // draw centered on the middle of the loaded map
+
+// plot gps position on map
+Bangle.on('GPS',function(f) {
+  if (!f.fix) return;
+  var p = m.latLonToXY(fix.lat, fix.lon);
+  g.fillRect(p.x-2, p.y-2, p.x+2, p.y+2);
+});
+
+// recenter and redraw map!
+function center() {
+  m.lat = fix.lat;
+  m.lon = fix.lon;
+  m.draw();
+}
+
+*/
+
+var map = require("Storage").readJSON("openstmap.json");
+map.center = Bangle.project({lat:map.lat,lon:map.lon});
+exports.map = map;
+exports.lat = map.lat; // actual position of middle of screen
+exports.lon = map.lon;  // actual position of middle of screen
+var m = exports;
+
+exports.draw = function() {
+  var s = require("Storage");
+  var cx = g.getWidth()/2;
+  var cy = g.getHeight()/2;
+  var p = Bangle.project({lat:m.lat,lon:m.lon});
+  var ix = (p.x-map.center.x)*4096/map.scale + (map.imgx/2) - cx;
+  var iy = (map.center.y-p.y)*4096/map.scale + (map.imgy/2) - cy;
+  //console.log(ix,iy);
+  var tx = 0|(ix/map.tilesize);
+  var ty = 0|(iy/map.tilesize);
+  var ox = (tx*map.tilesize)-ix;
+  var oy = (ty*map.tilesize)-iy;
+  for (var x=ox,ttx=tx;x<g.getWidth();x+=map.tilesize,ttx++) {
+    for (var y=oy,tty=ty;y<g.getHeight();y+=map.tilesize,tty++) {
+      var img = s.read("openstmap-"+ttx+"-"+tty+".img");
+      if (img) g.drawImage(img,x,y);
+      else {
+        g.clearRect(x,y,x+map.tilesize-1,y+map.tilesize-1);
+        g.drawLine(x,y,x+map.tilesize-1,y+map.tilesize-1);
+        g.drawLine(x,y+map.tilesize-1,x+map.tilesize-1,y);
+      }
+    }
+  }
+};
+
+exports.latLonToXY = function(lat, lon) {
+  var p = Bangle.project({lat:m.lat,lon:m.lon});
+  var q = Bangle.project({lat:lat, lon:lon});
+  var cx = g.getWidth()/2;
+  var cy = g.getHeight()/2;
+  return {
+    x : (q.x-p.x)*4096/map.scale + cx,
+    y : cy - (q.y-p.y)*4096/map.scale
+  };
+};