openstmap 0.13: Use a single image file with 'frames' of data (drastically reduces file count, possibility of >1 map on device)

apps/openstmap/ChangeLog

@@ -11,3 +11,4 @@
 0.11: Add slight offset to OSM data to align it properly (fix #984)
       Fix alignment of satellite info text
 0.12: switch to using normal OpenStreetMap tiles (opentopomap was too slow)
+0.13: Use a single image file with 'frames' of data (drastically reduces file count, possibility of >1 map on device)

apps/openstmap/custom.html

@@ -148,7 +148,7 @@ TODO:
         console.log("Compression options", options);
         var w = Math.round(width / TILESIZE);
         var h = Math.round(height / TILESIZE);
-        var tiles = [];
+        var tiledImage;
         for (var y=0;y<h;y++) {
           for (var x=0;x<w;x++) {
             var imageData = ctx.getImageData(x*TILESIZE, y*TILESIZE, TILESIZE, TILESIZE);
@@ -161,13 +161,14 @@ TODO:
             /*var compress = 'require("heatshrink").decompress('
             if (!imgstr.startsWith(compress)) throw "Data in wrong format";
             imgstr = imgstr.slice(compress.length,-1);*/
-            tiles.push({
-              name:"openstmap-"+x+"-"+y+".img",
-              content:imgstr
-            });
+            if (tiledImage) tiledImage += imgstr.substr(3); // skip header
+            else tiledImage = imgstr; // for first image, keep the header
           }
         }
-        return tiles;
+        return [{
+          name:"openstmap.0.img",
+          content:tiledImage
+        }];
       }
 
       document.getElementById("getmap").addEventListener("click", function() {
@@ -242,13 +243,16 @@ TODO:
         Promise.all(tileGetters).then(() => {
           document.getElementById("uploadbuttons").style.display="";
           mapFiles = tilesLoaded(ctx, canvas.width, canvas.height);
-          mapFiles.unshift({name:"openstmap.json",content:JSON.stringify({
+          mapFiles.unshift({name:"openstmap.0.json",content:JSON.stringify({
             imgx : canvas.width,
             imgy : canvas.height,
             tilesize : TILESIZE,
             scale : scale, // how much of Bangle.project(latlon) does one pixel equate to?
             lat : centerlatlon.lat,
-            lon : centerlatlon.lng
+            lon : centerlatlon.lng,
+            w : Math.round(canvas.width / TILESIZE), // width in tiles
+            h : Math.round(canvas.height / TILESIZE), // height in tiles
+            fn : "openstmap.0.img"
           })});
           console.log(mapFiles);
         });

apps/openstmap/metadata.json

@@ -2,7 +2,7 @@
   "id": "openstmap",
   "name": "OpenStreetMap",
   "shortName": "OpenStMap",
-  "version": "0.12",
+  "version": "0.13",
   "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",
   "icon": "app.png",
   "tags": "outdoors,gps,osm",

apps/openstmap/openstmap.js

@@ -22,7 +22,7 @@ function center() {
 
 */
 
-var map = require("Storage").readJSON("openstmap.json");
+var map = require("Storage").readJSON("openstmap.0.json");
 map.center = Bangle.project({lat:map.lat,lon:map.lon});
 exports.map = map;
 exports.lat = map.lat; // actual position of middle of screen
@@ -30,7 +30,7 @@ exports.lon = map.lon;  // actual position of middle of screen
 var m = exports;
 
 exports.draw = function() {
-  var s = require("Storage");
+  var img = require("Storage").read(map.fn);
   var cx = g.getWidth()/2;
   var cy = g.getHeight()/2;
   var p = Bangle.project({lat:m.lat,lon:m.lon});
@@ -41,13 +41,11 @@ exports.draw = function() {
   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 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);
+      if (ttx>=0 && ttx<map.w && tty>=0 && tty<map.h) g.drawImage(img,x,y,{frame:ttx+(tty*map.w)});
       else g.clearRect(x,y,x+map.tilesize-1,y+map.tilesize-1).drawLine(x,y,x+map.tilesize-1,y+map.tilesize-1).drawLine(x,y+map.tilesize-1,x+map.tilesize-1,y);
     }
-  }
 };
 
 /// Convert lat/lon to pixels on the screen