Merge pull request #2897 from nxdefiant/master

openstmap location + direction arrow

apps/openstmap/ChangeLog

@@ -26,3 +26,4 @@
       If 'Recorder' app installed, add a 'Record' menu item
 0.21: Draw a current position marker (Bangle.js 2 only)
       Enable/Disable previous position marker in new setting "Draw cont. position"
+0.22: Replace position marker with direction arrow

apps/openstmap/app.js

@@ -7,6 +7,13 @@ var hasScrolled = false;
 var settings = require("Storage").readJSON("openstmap.json",1)||{};
 var plotTrack;
 let checkMapPos = false; // Do we need to check the if the coordinates we have are valid
+if (Bangle.setLCDOverlay) {
+  // Icon for current location+direction: https://icons8.com/icon/11932/gps 24x24, 1 Bit + transparency + inverted
+  var imgLoc = require("heatshrink").decompress(atob("jEYwINLAQk8AQl+AQn/AQcB/+AAQUD//AAQUH//gAQUP//wAQUf//4j8AvA9IA=="));
+  // overlay buffer for current location, a bit bigger then image so we can rotate
+  const ovSize = Math.ceil(Math.sqrt(imgLoc[0]*imgLoc[0]+imgLoc[1]*imgLoc[1]));
+  var ovLoc = Graphics.createArrayBuffer(ovSize,ovSize,imgLoc[2] & 0x7f,{msb:true});
+}
 
 if (settings.lat !== undefined && settings.lon !== undefined && settings.scale !== undefined) {
   // restore last view
@@ -15,6 +22,9 @@ if (settings.lat !== undefined && settings.lon !== undefined && settings.scale !
   m.scale = settings.scale;
   checkMapPos = true;
 }
+if (settings.dirSrc === undefined) {
+  settings.dirSrc = 1; // Default=GPS
+}
 
 // Redraw the whole page
 function redraw() {
@@ -25,9 +35,9 @@ function redraw() {
     m.lat = m.map.lat;
     m.lon = m.map.lon;
     m.scale = m.map.scale;
-    checkMapPos = false;
     m.draw();
   }
+  checkMapPos = false;
   drawPOI();
   drawMarker();
   drawLocation();
@@ -67,21 +77,28 @@ function drawPOI() {
   })
 }
 
-// Draw the marker for where we are
+function isInside(rect, e, w, h) {
+  return e.x-w/2>=rect.x && e.x+w/2<rect.x+rect.w
+    && e.y-h/2>=rect.y && e.y+h/2<=rect.y+rect.h;
+}
+
+// Draw the location & direction marker for where we are
 function drawMarker() {
   if (!fix.fix || !settings.drawMarker) return;
   var p = m.latLonToXY(fix.lat, fix.lon);
-  g.setColor(1,0,0);
-  g.fillRect(p.x-2, p.y-2, p.x+2, p.y+2);
+  if (isInside(R, p, 4, 4)) { // avoid drawing over widget area
+    g.setColor(1,0,0);
+    g.fillRect(p.x-2, p.y-2, p.x+2, p.y+2);
+  }
 }
 
-// Draw current location with LCD Overlay (Bangle.js 2 only)
+// Draw current location+direction with LCD Overlay (Bangle.js 2 only)
 function drawLocation() {
   if (!Bangle.setLCDOverlay) {
     return; // Overlay not supported
   }
 
-  if (!fix.fix || !mapVisible) {
+  if (!fix.fix || !mapVisible || settings.dirSrc === 0) {
     if (this.hasOverlay) {
       Bangle.setLCDOverlay(); // clear if map is not visible or no fix
       this.hasOverlay = false;
@@ -89,9 +106,21 @@ function drawLocation() {
     return;
   }
 
-  const icon = require("heatshrink").decompress(atob("jEYwYPMyVJkgHEkgICyAHCgIIDyQIChIIEoAIDC4IIEBwOAgEEyVIBAY4DBD4sGHxBQIMRAIIPpAyCHAYILUJEAiVJkAIFgVJXo5fCABQA==")); // 24x24px
   var p = m.latLonToXY(fix.lat, fix.lon);
-  Bangle.setLCDOverlay(icon, p.x-24/2, p.y-24);
+
+  ovLoc.clear();
+  if (isInside(R, p, ovLoc.getWidth(), ovLoc.getHeight())) { // avoid drawing over widget area
+    const angle = settings.dirSrc === 1 ? fix.course : Bangle.getCompass().heading;
+    if (!isNaN(angle)) {
+      ovLoc.drawImage(imgLoc, ovLoc.getWidth()/2, ovLoc.getHeight()/2, {rotate: angle*Math.PI/180});
+    }
+  }
+  Bangle.setLCDOverlay({width:ovLoc.getWidth(), height:ovLoc.getHeight(),
+          bpp:ovLoc.getBPP(), transparent:0,
+          palette:new Uint16Array([0, g.toColor("#00F")]),
+          buffer:ovLoc.buffer
+        }, p.x-ovLoc.getWidth()/2, p.y-ovLoc.getHeight()/2);
+
   this.hasOverlay = true;
 }
 
@@ -158,13 +187,31 @@ function showMenu() {
     value : !!settings.drawMarker,
     onchange : v => { settings.drawMarker=v; writeSettings(); }
   },
-  /*LANG*/"Center Map": () =>{
+  });
+
+  if (Bangle.setLCDOverlay) {
+    menu[/*LANG*/"Direction source"] = {
+      value: settings.dirSrc,
+      min: 0, max: 2,
+      format: v => [/*LANG*/"None", /*LANG*/"GPS", /*LANG*/"Compass"][v],
+      onchange: v => {
+        settings.dirSrc = v;
+        writeSettings();
+      }
+    };
+    menu[/*LANG*/"Reset compass"] = () => {
+      Bangle.resetCompass();
+      showMap();
+    };
+  }
+
+  menu[/*LANG*/"Center Map"] = () =>{
     m.lat = m.map.lat;
     m.lon = m.map.lon;
     m.scale = m.map.scale;
     showMap();
-  }
-  });
+  };
+
   // If we have the recorder widget, add a menu item to start/stop recording
   if (WIDGETS.recorder) {
     menu[/*LANG*/"Record"] = {

apps/openstmap/metadata.json

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