[gpsnav] Update drawing + add metrics change

- Remove Ypos constant
- Adjust drawing positions
- Add metrics change feature
- Add B2 specifics to README.md

apps/gpsnav/README.md

@@ -4,9 +4,12 @@ The app is aimed at small boat navigation although it can also be used to mark t
 
 The app displays direction of travel (course), speed, direction to waypoint (bearing) and distance to waypoint. The screen shot below is before the app has got a GPS fix.
 
+[Bangle.js 2] Button mappings in brackests. One additional feature:  
+On swiping on the main screen you can change the displayed metrics: Right changes to nautical metrics, left to the default locale metrics.
+
 ![](first_screen.jpg)
 
-The large digits are the course and speed. The top of the display is a linear compass which displays the direction of travel when a fix is received and you are moving. The blue text is the name of the current waypoint. NONE means that there is no waypoint set and so bearing and distance will remain at 0. To select a waypoint, press BTN2 (middle) and wait for the blue text to turn white. Then use BTN1 and BTN3 to select a waypoint. The waypoint choice is fixed by pressing BTN2 again. In the screen shot below a waypoint giving the location of Stone Henge has been selected.
+The large digits are the course and speed. The top of the display is a linear compass which displays the direction of travel when a fix is received and you are moving. The blue text is the name of the current waypoint. NONE means that there is no waypoint set and so bearing and distance will remain at 0. To select a waypoint, press BTN2 (middle) [touch / BTN] and wait for the blue text to turn white. Then use BTN1 and BTN3 [swipe left/right] to select a waypoint. The waypoint choice is fixed by pressing BTN2 [touch / BTN] again. In the screen shot below a waypoint giving the location of Stone Henge has been selected.
 
 ![](waypoint_screen.jpg)
 
@@ -18,7 +21,7 @@ The app lets you mark your current location as follows. There are vacant slots i
 
 ![](select_screen.jpg)
 
-Bearing and distance are both zero as WP1 has currently no GPS location associated with it. To mark the location, press BTN2.
+Bearing and distance are both zero as WP1 has currently no GPS location associated with it. To mark the location, press BTN2 [touch / BTN].
 
 ![](marked_screen.jpg)
 

apps/gpsnav/app_b2.js

@@ -1,9 +1,23 @@
-const Ypos = 24 - 6; // 6 offset because of the smaller labels font
 var candraw = true;
 var brg = 0;
 var wpindex = 0;
+var locindex = 0;
 const labels = ["N", "NE", "E", "SE", "S", "SW", "W", "NW"];
-var loc = require("locale");
+var loc = {
+  speed: [
+    require("locale").speed,
+    (kph) => {
+      return (kph / 1.852).toFixed(1) + "kn ";
+    }
+  ],
+  distance: [
+    require("locale").distance,
+    (m) => {
+      return (m / 1.852).toFixed(3) + "nm ";
+    }
+  ]
+};
+
 
 function drawCompass(course) {
   if (!candraw) return;
@@ -11,7 +25,7 @@ function drawCompass(course) {
   g.setFont("Vector", 18);
   var start = course - 90;
   if (start < 0) start += 360;
-  g.fillRect(14, Ypos + 45, 162, Ypos + 49);
+  g.fillRect(14, 67, 162, 71);
   var xpos = 16;
   var frag = 15 - start % 15;
   if (frag < 15) xpos += Math.floor((frag * 4) / 5);
@@ -19,13 +33,13 @@ function drawCompass(course) {
   for (var i = frag; i <= 180 - frag; i += 15) {
     var res = start + i;
     if (res % 90 == 0) {
-      g.drawString(labels[Math.floor(res / 45) % 8], xpos - 6, Ypos + 6);
+      g.drawString(labels[Math.floor(res / 45) % 8], xpos - 6, 28);
-      g.fillRect(xpos - 2, Ypos + 25, xpos + 2, Ypos + 45);
+      g.fillRect(xpos - 2, 47, xpos + 2, 67);
     } else if (res % 45 == 0) {
-      g.drawString(labels[Math.floor(res / 45) % 8], xpos - 9, Ypos + 6);
+      g.drawString(labels[Math.floor(res / 45) % 8], xpos - 9, 28);
-      g.fillRect(xpos - 2, Ypos + 30, xpos + 2, Ypos + 45);
+      g.fillRect(xpos - 2, 52, xpos + 2, 67);
     } else if (res % 15 == 0) {
-      g.fillRect(xpos, Ypos + 36, xpos + 1, Ypos + 45);
+      g.fillRect(xpos, 58, xpos + 1, 67);
     }
     xpos += 12;
   }
@@ -37,7 +51,7 @@ function drawCompass(course) {
     if (bpos < 16) bpos = 7;
     if (bpos > 160) bpos = 169;
     g.setColor(g.theme.bgH);
-    g.fillCircle(bpos, Ypos + 43, 6);
+    g.fillCircle(bpos, 63, 8);
   }
 }
 
@@ -92,29 +106,30 @@ function distance(a, b) {
 var selected = false;
 
 function drawN() {
-  var txt = loc.speed(speed);
+  g.clearRect(0, 89, 175, 175);
+  var txt = loc.speed[locindex](speed);
   g.setColor(g.theme.fg);
   g.setFont("6x8", 2);
-  g.drawString("o", 68, Ypos + 68);
+  g.drawString("o", 68, 87);
   g.setFont("6x8", 1);
-  g.drawString(txt.substring(txt.length - 3), 156, Ypos + 70 + 30);
+  g.drawString(txt.substring(txt.length - 3), 156, 119);
   g.setFont("Vector", 36);
   var cs = course.toString().padStart(3, "0");
-  g.drawString(cs, 2, Ypos + 70);
+  g.drawString(cs, 2, 89);
-  g.drawString(txt.substring(0, txt.length - 3), 92, Ypos + 70);
+  g.drawString(txt.substring(0, txt.length - 3), 92, 89);
   g.setColor(g.theme.fg);
   g.setFont("Vector", 18);
   var bs = brg.toString().padStart(3, "0");
-  g.setColor(g.theme.fg2);
-  g.drawString("Brg:", 1, Ypos + 110);
-  g.drawString("Dist:", 1, Ypos + 130);
-  g.setColor(selected ? g.theme.bgH : g.theme.bg);
-  g.fillRect(90, Ypos + 109, 175, Ypos + 125);
-  g.setColor(selected ? g.theme.fgH : g.theme.fg);
-  g.drawString(wp.name, 92, Ypos + 110);
   g.setColor(g.theme.fg);
-  g.drawString(bs, 42, Ypos + 110);
+  g.drawString("Brg:", 1, 128);
-  g.drawString(loc.distance(dist), 42, Ypos + 130);
+  g.drawString("Dist:", 1, 148);
+  g.setColor(selected ? g.theme.bgH : g.theme.bg);
+  g.fillRect(90, 127, 175, 143);
+  g.setColor(selected ? g.theme.fgH : g.theme.fg);
+  g.drawString(wp.name, 92, 128);
+  g.setColor(g.theme.fg);
+  g.drawString(bs, 42, 128);
+  g.drawString(loc.distance[locindex](dist), 42, 148);
   g.setFont("6x8", 1);
   g.setColor(satellites ? g.theme.bg : g.theme.bgH);
   g.fillRect(0, 167, 75, 175);
@@ -161,8 +176,8 @@ function startTimers() {
 }
 
 function drawAll() {
-  g.setColor(1, 0, 0); //red
+  g.setColor(1, 0, 0);
-  g.fillPoly([88, Ypos + 48, 78, Ypos + 70, 98, Ypos + 70]);
+  g.fillPoly([88, 71, 78, 88, 98, 88]);
   drawN();
   drawCompass(heading);
 }
@@ -176,10 +191,10 @@ function startdraw() {
 
 function setButtons() {
   Bangle.setUI("leftright", btn => {
-    if (btn == 0) {
+    if (!btn) {
       doselect();
     } else {
-      nextwp.bind(null, btn);
+      nextwp(btn);
     }
   });
 }
@@ -211,12 +226,16 @@ var waypoints = require("waypoints").load();
 wp = waypoints[0];
 
 function nextwp(inc) {
-  if (!selected) return;
+  if (selected) {
-  wpindex += inc;
+    wpindex += inc;
-  if (wpindex >= waypoints.length) wpindex = 0;
+    if (wpindex >= waypoints.length) wpindex = 0;
-  if (wpindex < 0) wpindex = waypoints.length - 1;
+    if (wpindex < 0) wpindex = waypoints.length - 1;
-  wp = waypoints[wpindex];
+    wp = waypoints[wpindex];
-  drawN();
+    drawN();
+  } else {
+    locindex = inc > 0 ? 1 : 0;
+    drawN();
+  }
 }
 
 function doselect() {
@@ -230,6 +249,7 @@ function doselect() {
     require("waypoints").save(waypoints);
   }
   selected = !selected;
+  print("selected = " + selected);
   drawN();
 }