Merge branch 'espruino:master' into master

apps/openstmap/ChangeLog

@@ -36,3 +36,4 @@
 0.29: Keep exit at bottom of menu
       Speed up latLonToXY for track rendering
 0.30: Minor code improvements
+0.31: Reset draw colours before rendering (to allow black and white maps)

apps/openstmap/interface.html

@@ -45,10 +45,12 @@
       <div id="map">
       </div>
       <div id="controls">
-        <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 class="form-group" style="display:inline-block;">
+          <select class="form-select" id="mapStyle">
+            <option value="3bit" selected>3 bit</option>
+            <option value="8bit">8 bit</option>
+            <option value="1bit">1 bit</option>
+          </select>
         </div>
         <div class="form-group" style="display:inline-block;">
           <select class="form-select" id="mapSize">
@@ -94,20 +96,47 @@ TODO:
       var TILELAYER = 'https://tile.openstreetmap.org/{z}/{x}/{y}.png';
       var PREVIEWTILELAYER = 'https://tile.openstreetmap.org/{z}/{x}/{y}.png';
 
+      MAPSTYLES = {
+        "3bit" : {
+          layer : 'https://tile.openstreetmap.org/{z}/{x}/{y}.png',
+          attribution: 'Map data &copy; <a href="https://openstreetmap.org/copyright">OpenStreetMap</a> contributors</a>',
+          img : { compression:false, output:"raw", mode:"3bit",diffusion:"bayer2"}
+        }, "8bit" : {
+          layer : 'https://tile.openstreetmap.org/{z}/{x}/{y}.png',
+          attribution: 'Map data &copy; <a href="https://openstreetmap.org/copyright">OpenStreetMap</a> contributors</a>',
+          img : { compression:false, output:"raw", mode:"web" }
+        }, "1bit" : {
+          layer : 'https://tiles.stadiamaps.com/tiles/stamen_toner/{z}/{x}/{y}{r}.png',
+          attribution: '&copy; <a href="https://www.stadiamaps.com/" target="_blank">Stadia Maps</a> &copy; <a href="https://www.stamen.com/" target="_blank">Stamen Design</a> &copy; <a href="https://openmaptiles.org/" target="_blank">OpenMapTiles</a> &copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors',
+          img : { compression:false, output:"raw", mode:"1bit",inverted:true }
+        }
+      };
+
       var loadedMaps = [];
 
       // Tiles used for Bangle.js itself
-      var bangleTileLayer = L.tileLayer(TILELAYER, {
-        maxZoom: 18,
-        attribution: 'Map data &copy; <a href="https://openstreetmap.org/copyright">OpenStreetMap</a> contributors</a>'
-      });
+      var bangleTileLayer;
       // Tiles used for the may the user sees (faster)
-      var previewTileLayer = L.tileLayer(PREVIEWTILELAYER, {
-        maxZoom: 18,
-        attribution: 'Map data &copy; <a href="https://openstreetmap.org/copyright">OpenStreetMap</a> contributors</a>'
-      });
+      var previewTileLayer;
+      // Currently selected version of MAPSTYLES
+      var currentStyle;
+
       // Could optionally overlay trails: https://wiki.openstreetmap.org/wiki/Tiles
 
+
+      function createMapLayers(style) {
+        currentStyle = style;
+        bangleTileLayer = L.tileLayer(style.layer, {
+          maxZoom: 18,
+          attribution: style.attribution
+        });
+        previewTileLayer = L.tileLayer(style.layer, {
+          maxZoom: 18,
+          attribution: style.attribution
+        });
+      }
+      createMapLayers(MAPSTYLES["3bit"]);
+
       // Create map and try and set the location to where the browser thinks we are
       var map = L.map('map').locate({setView: true, maxZoom: 16, enableHighAccuracy:true});
       previewTileLayer.addTo(map);
@@ -130,10 +159,11 @@ TODO:
         if (device && device.info && device.info.g) {
           // On 3 bit devices, 3 bit is the best way
           // still allow 8 bit as it makes zoom out much nicer
-          if (device.info.g.bpp==3) {
+          // ... but lets just default to 3 bit anyway now
+          /*if (device.info.g.bpp==3) {
             document.getElementById("3bit").checked = true;
             //document.getElementById("3bitdiv").style = "display:none";
-          }
+          }*/
         }
 
         showLoadedMaps();
@@ -257,17 +287,7 @@ TODO:
 
       // convert canvas into an actual tiled image file
       function tilesLoaded(ctx, width, height, mapImageFile) {
-        var options = {
-          compression:false, output:"raw",
-          mode:"web"
-        };
-        if (document.getElementById("3bit").checked) {
-          options = {
-            compression:false, output:"raw",
-            mode:"3bit",
-            diffusion:"bayer2"
-          };
-        }
+        var options = currentStyle.img; // compression options
         /* Go through all the data beforehand and
         turn the saturation up to maximum, so if thresholded to 3 bits it
         works a lot better */
@@ -289,9 +309,9 @@ TODO:
             options.width = TILESIZE;
             options.height = TILESIZE;
             var imgstr = imageconverter.RGBAtoString(rgba, options);
-            if (document.getElementById("preview").checked) {
+            /*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);*/
@@ -408,6 +428,14 @@ TODO:
         });
       });
 
+      document.getElementById("mapStyle").addEventListener("click", function() {
+        var style = document.getElementById("mapStyle").value;
+        if (!style in MAPSTYLES) return;
+        map.removeLayer(previewTileLayer);
+        createMapLayers(MAPSTYLES[style]);
+        previewTileLayer.addTo(map);
+      });
+
       document.getElementById("upload").addEventListener("click", function() {
         Util.showModal("Uploading...");
         let promise = Promise.resolve();

apps/openstmap/metadata.json

@@ -2,7 +2,7 @@
   "id": "openstmap",
   "name": "OpenStreetMap",
   "shortName": "OpenStMap",
-  "version": "0.30",
+  "version": "0.31",
   "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

@@ -73,6 +73,7 @@ exports.draw = function() {
     }
     var mx = g.getWidth();
     var my = g.getHeight();
+    g.setColor(g.theme.fg).setBgColor(g.theme.bg); // reset draw colours
     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);

apps/promenu/ChangeLog

@@ -11,3 +11,4 @@
 0.07: Fix bug with alarms app (scroller) and correctly show images
 0.08: Fix bug with modifying menu - allows hadash to save scroll positions
 0.09: Don't show "..." if a string isn't truncated (i.e. scrolled)
+0.10: Trigger `remove` callbacks when ending the menu

apps/promenu/bootb2.js

@@ -193,9 +193,11 @@ E.showMenu = function (items) {
         mode: "updown",
         back: back,
         remove: function () {
+            var _a;
             if (nameScroller)
                 clearInterval(nameScroller);
             Bangle.removeListener("swipe", onSwipe);
+            (_a = options.remove) === null || _a === void 0 ? void 0 : _a.call(options);
         },
     }, function (dir) {
         if (dir)

apps/promenu/bootb2.ts

@@ -240,6 +240,7 @@ E.showMenu = (items?: Menu): MenuInstance => {
     remove: () => {
       if (nameScroller) clearInterval(nameScroller);
       Bangle.removeListener("swipe", onSwipe);
+      options.remove?.();
     },
   } as SetUIArg<"updown">,
   dir => {

apps/promenu/metadata.json

@@ -1,7 +1,7 @@
 {
   "id": "promenu",
   "name": "Pro Menu",
-  "version": "0.09",
+  "version": "0.10",
   "description": "Replace the built in menu function. Supports Bangle.js 1 and Bangle.js 2.",
   "icon": "icon.png",
   "type": "bootloader",