Merge pull request #3169 from nxdefiant/master

openstmap: Fix rounding errors

apps/openstmap/ChangeLog

@@ -32,3 +32,4 @@
 0.25: Enable scaled image filtering on 2v19+ firmware
 0.26: Ensure that when redrawing, we always cancel any in-progress track draw
 0.27: Display message if no map is installed
+0.28: Fix rounding errors

apps/openstmap/app.js

@@ -65,14 +65,16 @@ function redraw() {
 
 // Draw the POIs
 function drawPOI() {
+  let waypoints;
   try {
-    var waypoints = require("waypoints").load();
+    waypoints = require("waypoints").load();
   } catch (ex) {
     // Waypoints module not available.
     return;
   }
   g.setFont("Vector", 18);
   waypoints.forEach((wp, idx) => {
+    if (wp.lat === undefined || wp.lon === undefined) return;
     var p = m.latLonToXY(wp.lat, wp.lon);
     var sz = 2;
     g.setColor(0,0,0);
@@ -80,7 +82,7 @@ function drawPOI() {
     g.setColor(0,0,0);
     g.drawString(wp.name, p.x, p.y);
     //print(wp.name);
-  })
+  });
 }
 
 function isInside(rect, e, w, h) {
@@ -170,6 +172,7 @@ function showMenu() {
   var menu = {
     "":{title:/*LANG*/"Map"},
     "< Back": ()=> showMap(),
+    /*LANG*/"Exit": () => load(),
   };
   // If we have a GPS fix, add a menu item to center it
   if (fix.fix) menu[/*LANG*/"Center GPS"]=() =>{
@@ -177,6 +180,7 @@ function showMenu() {
     m.lon = fix.lon;
     showMap();
   };
+
   menu = Object.assign(menu, {
   /*LANG*/"Zoom In": () =>{
     m.scale /= 2;
@@ -230,7 +234,6 @@ function showMenu() {
       }
     };
   }
-  menu[/*LANG*/"Exit"] = () => load();
   E.showMenu(menu);
 }
 

apps/openstmap/interface.html

@@ -45,7 +45,11 @@
       <div id="map">
       </div>
       <div id="controls">
-        <div style="display:inline-block;text-align:center;vertical-align: top;" id="3bitdiv"> <input type="checkbox" id="3bit"></input><br/><span>3 bit</span></div>
+        <div style="display:inline-block;text-align:left;vertical-align: top;" id="3bitdiv">
+          <input type="checkbox" id="3bit"></input><span>3 bit</span>
+          <br>
+          <input type="checkbox" id="preview"><span>Preview</span>
+        </div>
         <div class="form-group" style="display:inline-block;">
         <select class="form-select" id="mapSize">
           <option value="4">Small (4x4)</option>
@@ -143,11 +147,13 @@ TODO:
         let mapsLoadedContainer = document.getElementById("mapsLoadedContainer");
         mapsLoadedContainer.innerHTML = "";
         loadedMaps = [];
+        const mapsLoaded = [];
 
-        Puck.write(`\x10Bluetooth.println(require("Storage").list(/openstmap\\.\\d+\\.json/))\n`,function(files) {
+        Puck.eval(`require("Storage").list(/openstmap\\.\\d+\\.json/)\n`,function(files) {
           console.log("MAPS:",files);
+          files.sort();
           let promise = Promise.resolve();
-          files.trim().split(",").forEach(filename => {
+          files.forEach(filename => {
             if (filename=="") return;
             promise = promise.then(() => new Promise(resolve => {
               Util.readStorageJSON(filename, mapInfo => {
@@ -155,7 +161,7 @@ TODO:
                 let mapNumber = filename.match(/\d+/)[0]; // figure out what map number we are
                 loadedMaps[mapNumber] = mapInfo;
                 if (mapInfo!==undefined) {
-                  let latlon = L.latLng(mapInfo.lat, mapInfo.lon);
+                  mapsLoaded.push({mapNumber: mapNumber, mapInfo: mapInfo});
                   mapsLoadedContainer.innerHTML += `
 <div class="tile">
   <div class="tile-icon">
@@ -171,19 +177,27 @@ TODO:
   </div>
 </div>
                   `;
-                  setTimeout(function() {
-                    let map = L.map(`tile-map-${mapNumber}`);
-                    L.tileLayer(PREVIEWTILELAYER, {
-                      maxZoom: 18
-                    }).addTo(map);
-                    let marker = new L.marker(latlon).addTo(map);
-                    map.fitBounds(latlon.toBounds(2000/*meters*/), {animation: false});
-                  }, 500);
                 }
                 resolve();
               });
             }));
           });
+          promise = promise.then(() => new Promise(resolve => {
+            setTimeout(() => {
+              mapsLoaded.forEach(mapLoaded => {
+                let latlon = L.latLng(mapLoaded.mapInfo.lat, mapLoaded.mapInfo.lon);
+                let map = L.map(`tile-map-${mapLoaded.mapNumber}`);
+                L.tileLayer(PREVIEWTILELAYER, {
+                  maxZoom: 18
+                }).addTo(map);
+                let marker = new L.marker(latlon).addTo(map);
+                const dist = mapLoaded.mapInfo.scale * mapLoaded.mapInfo.tilesize * mapLoaded.mapInfo.w;
+                map.fitBounds(latlon.toBounds(dist/2/*meters*/), {animation: false});
+              });
+            }, 0);
+
+            resolve();
+          }));
           promise = promise.then(() => new Promise(resolve => {
             if (!loadedMaps.length) {
               mapsLoadedContainer.innerHTML += `
@@ -275,7 +289,9 @@ TODO:
             options.width = TILESIZE;
             options.height = TILESIZE;
             var imgstr = imageconverter.RGBAtoString(rgba, options);
-            //ctx.putImageData(imageData,x*TILESIZE, y*TILESIZE); // write preview
+            if (document.getElementById("preview").checked) {
+              ctx.putImageData(imageData,x*TILESIZE, y*TILESIZE); // write preview
+            }
             /*var compress = 'require("heatshrink").decompress('
             if (!imgstr.startsWith(compress)) throw "Data in wrong format";
             imgstr = imgstr.slice(compress.length,-1);*/

apps/openstmap/metadata.json

@@ -2,7 +2,7 @@
   "id": "openstmap",
   "name": "OpenStreetMap",
   "shortName": "OpenStMap",
-  "version": "0.27",
+  "version": "0.28",
   "description": "Loads map tiles from OpenStreetMap onto your Bangle.js and displays a map of where you are. Once installed this also adds map functionality to `GPS Recorder` and `Recorder` apps",
   "readme": "README.md",
   "icon": "app.png",

apps/openstmap/openstmap.js

@@ -76,7 +76,7 @@ exports.draw = function() {
     for (var x=ox,ttx=tx; x<mx && ttx<map.w; x+=s,ttx++) {
       for (var y=oy,tty=ty;y<my && tty<map.h;y+=s,tty++) {
         o.frame = ttx+(tty*map.w);
-        g.drawImage(img,x,y,o);
+        g.drawImage(img,Math.round(x),Math.round(y),o);
         count++;
       }
     }
@@ -91,8 +91,8 @@ exports.latLonToXY = function(lat, lon) {
   var cx = g.getWidth()/2;
   var cy = g.getHeight()/2;
   return {
-    x : (q.x-p.x)/m.scale + cx,
-    y : cy - (q.y-p.y)/m.scale
+    x : Math.round((q.x-p.x)/m.scale + cx),
+    y : Math.round(cy - (q.y-p.y)/m.scale)
   };
 };