General clock update - fix svclock after last commit, ensure other clocks update on the minute (not 1-15 seconds later), add Bangle.js 2 and theme compatibility

apps.json

@@ -1026,7 +1026,7 @@
   {
     "id": "sclock",
     "name": "Simple Clock",
-    "version": "0.06",
+    "version": "0.07",
     "description": "A Simple Digital Clock",
     "icon": "clock-simple.png",
     "type": "clock",
@@ -1071,12 +1071,12 @@
   {
     "id": "svclock",
     "name": "Simple V-Clock",
-    "version": "0.03",
+    "version": "0.04",
     "description": "Modification of Simple Clock 0.04 to use Vectorfont",
     "icon": "vclock-simple.png",
     "type": "clock",
     "tags": "clock",
-    "supports": ["BANGLEJS"],
+    "supports": ["BANGLEJS","BANGLEJS2"],
     "allow_emulator": true,
     "storage": [
       {"name":"svclock.app.js","url":"vclock-simple.js"},
@@ -1376,12 +1376,12 @@
   {
     "id": "berlinc",
     "name": "Berlin Clock",
-    "version": "0.04",
+    "version": "0.05",
     "description": "Berlin Clock (see https://en.wikipedia.org/wiki/Mengenlehreuhr)",
     "icon": "berlin-clock.png",
     "type": "clock",
     "tags": "clock",
-    "supports": ["BANGLEJS"],
+    "supports": ["BANGLEJS","BANGLEJS2"],
     "allow_emulator": true,
     "storage": [
       {"name":"berlinc.app.js","url":"berlin-clock.js"},
@@ -2804,12 +2804,12 @@
     "id": "worldclock",
     "name": "World Clock - 4 time zones",
     "shortName": "World Clock",
-    "version": "0.04",
+    "version": "0.05",
     "description": "Current time zone plus up to four others",
     "icon": "app.png",
     "type": "clock",
     "tags": "clock",
-    "supports": ["BANGLEJS"],
+    "supports": ["BANGLEJS","BANGLEJS2"],
     "readme": "README.md",
     "custom": "custom.html",
     "storage": [

apps/berlinc/ChangeLog

@@ -1,3 +1,6 @@
 0.02: Modified for use with new bootloader and firmware
 0.03: Shrinked size to avoid cut-off edges on the physical device. BTN3: show date. BTN1: show time in decimal.
 0.04: Update to use Bangle.setUI instead of setWatch
+0.05: Update *on* the minute rather than every 15 secs
+      Now show widgets
+      Make compatible with themes, and Bangle.js 2

apps/berlinc/berlin-clock.js

@@ -1,7 +1,7 @@
 // Berlin Clock see https://en.wikipedia.org/wiki/Mengenlehreuhr
 // https://github.com/eska-muc/BangleApps
 const fields = [4, 4, 11, 4];
-const offset = 20;
+const offset = 24;
 const width = g.getWidth() - 2 * offset;
 const height = g.getHeight() - 2 * offset;
 const rowHeight = height / 4;
@@ -10,11 +10,23 @@ var show_date = false;
 var show_time = false;
 var yy = 0;
 
-rowlights = [];
+var rowlights = [];
-time_digit = [];
+var time_digit = [];
 
-function drawBerlinClock() {
+// timeout used to update every minute
-  g.clear();
+var drawTimeout;
+
+// schedule a draw for the next minute
+function queueDraw() {
+  if (drawTimeout) clearTimeout(drawTimeout);
+  drawTimeout = setTimeout(function() {
+    drawTimeout = undefined;
+    draw();
+  }, 60000 - (Date.now() % 60000));
+}
+
+function draw() {
+  g.reset().clearRect(0,24,g.getWidth(),g.getHeight());
   var now = new Date();
 
   // show date below the clock
@@ -24,8 +36,7 @@ function drawBerlinClock() {
     var day = now.getDate();
     var dateString = `${yr}-${month < 10 ? '0' : ''}${month}-${day < 10 ? '0' : ''}${day}`;
     var strWidth = g.stringWidth(dateString);
-    g.setColor(1, 1, 1);
+    g.setColor(g.theme.fg).setFontAlign(-1,-1);
-    g.setFontAlign(-1,-1);
     g.drawString(dateString, ( g.getWidth() - strWidth ) / 2, height + offset + 4);
   }
 
@@ -50,8 +61,7 @@ function drawBerlinClock() {
       x2 = (col + 1) * boxWidth + offset;
       y2 = (row + 1) * rowHeight + offset;
 
-      g.setColor(1, 1, 1);
+      g.setColor(g.theme.fg).drawRect(x1, y1, x2, y2);
-      g.drawRect(x1, y1, x2, y2);
       if (col < rowlights[row]) {
         if (row === 2) {
           if (((col + 1) % 3) === 0) {
@@ -65,46 +75,42 @@ function drawBerlinClock() {
         g.fillRect(x1 + 2, y1 + 2, x2 - 2, y2 - 2);
       }
       if (row == 3 && show_time) {
-        g.setColor(1,1,1);
+        g.setColor(g.theme.fg).setFontAlign(0,0);
-        g.setFontAlign(0,0);
         g.drawString(time_digit[col],(x1+x2)/2,(y1+y2)/2);
       }
     }
   }
+
+  queueDraw();
 }
 
 function toggleDate() {
   show_date = ! show_date;
-  drawBerlinClock();
+  draw();
 }
 
 function toggleTime() {
   show_time = ! show_time;
-  drawBerlinClock();
+  draw();
 }
 
-// special function to handle display switch on
+// Stop updates when LCD is off, restart when on
-Bangle.on('lcdPower', (on) => {
+Bangle.on('lcdPower',on=>{
-  g.clear();
   if (on) {
-    Bangle.drawWidgets();
+    draw(); // draw immediately, queue redraw
-    // call your app function here
+  } else { // stop draw timer
-    drawBerlinClock();
+    if (drawTimeout) clearTimeout(drawTimeout);
+    drawTimeout = undefined;
   }
 });
 
-// refesh every 15 sec
+// Show launcher when button pressed, handle up/down
-setInterval(drawBerlinClock, 15E3);
+Bangle.setUI("clockupdown", dir=> {
+  if (dir<0) toggleTime();
+  if (dir>0) toggleDate();
+});
 
 g.clear();
 Bangle.loadWidgets();
 Bangle.drawWidgets();
-drawBerlinClock();
+draw();
-if (BTN3) {
-  // Toggle date display, when BTN3 is pressed
-  setWatch(toggleTime,BTN1, { repeat : true, edge: "falling"});
-  // Toggle date display, when BTN3 is pressed
-  setWatch(toggleDate,BTN3, { repeat : true, edge: "falling"});
-}
-// Show launcher when button pressed
-Bangle.setUI("clock");

apps/sclock/ChangeLog

@@ -3,3 +3,4 @@
 0.04: Make this clock do 12h and 24h
 0.05: setUI, screen size changes
 0.06: Use Bangle.setUI for button/launcher handling
+0.07: Update *on* the minute rather than every 15 secs

apps/sclock/clock-simple.js

@@ -1,4 +1,3 @@
-/* jshint esversion: 6 */
 const big = g.getWidth()>200;
 const timeFontSize = big?6:5;
 const dateFontSize = big?3:2;
@@ -14,7 +13,19 @@ const yposGMT = xyCenter*1.9;
 // Check settings for what type our clock should be
 var is12Hour = (require("Storage").readJSON("setting.json",1)||{})["12hour"];
 
-function drawSimpleClock() {
+// timeout used to update every minute
+var drawTimeout;
+
+// schedule a draw for the next minute
+function queueDraw() {
+  if (drawTimeout) clearTimeout(drawTimeout);
+  drawTimeout = setTimeout(function() {
+    drawTimeout = undefined;
+    draw();
+  }, 60000 - (Date.now() % 60000));
+}
+
+function draw() {
   // get date
   var d = new Date();
   var da = d.toString().split(" ");
@@ -60,11 +71,18 @@ function drawSimpleClock() {
   var gmt = da[5];
   g.setFont(font, gmtFontSize);
   g.drawString(gmt, xyCenter, yposGMT, true);
+
+  queueDraw();
 }
 
-// handle switch display on by pressing BTN1
+// Stop updates when LCD is off, restart when on
-Bangle.on('lcdPower', function(on) {
+Bangle.on('lcdPower',on=>{
-  if (on) drawSimpleClock();
+  if (on) {
+    draw(); // draw immediately, queue redraw
+  } else { // stop draw timer
+    if (drawTimeout) clearTimeout(drawTimeout);
+    drawTimeout = undefined;
+  }
 });
 
 // clean app screen
@@ -74,8 +92,5 @@ Bangle.setUI("clock");
 Bangle.loadWidgets();
 Bangle.drawWidgets();
 
-// refesh every 15 sec
-setInterval(drawSimpleClock, 15E3);
-
 // draw now
-drawSimpleClock();
+draw();

apps/svclock/ChangeLog

@@ -1,3 +1,4 @@
 0.01: Modification of SimpleClock 0.04 to use Vectorfont
 0.02: Use Bangle.setUI for button/launcher handling
-0.03: Scale to BangleJS 2 and add locale
+0.03: Scale to BangleJS 2 and add locale
+0.04: Fix rendering issue on real hardware, now update *on* the minute rather than every 15 secs

apps/svclock/vclock-simple.js

@@ -1,4 +1,3 @@
-/* jshint esversion: 6 */
 const locale = require("locale");
 
 var timeFontSize;
@@ -12,8 +11,7 @@ var yposDate;
 var yposYear;
 var yposGMT;
 
-switch (process.env.BOARD) {
+if (g.getWidth() > 200) {
-  case "EMSCRIPTEN":
     timeFontSize = 65;
     dateFontSize = 20;
     gmtFontSize = 10;
@@ -22,8 +20,7 @@ switch (process.env.BOARD) {
     yposDate = 130;
     yposYear = 175;
     yposGMT = 220;
-    break;
+} else {
-  case "EMSCRIPTEN2":
     timeFontSize = 48;
     dateFontSize = 15;
     gmtFontSize = 10;
@@ -32,12 +29,23 @@ switch (process.env.BOARD) {
     yposDate = 95;
     yposYear = 128;
     yposGMT = 161;
-    break;
 }
 // Check settings for what type our clock should be
 var is12Hour = (require("Storage").readJSON("setting.json",1)||{})["12hour"];
 
-function drawSimpleClock() {
+// timeout used to update every minute
+var drawTimeout;
+
+// schedule a draw for the next minute
+function queueDraw() {
+  if (drawTimeout) clearTimeout(drawTimeout);
+  drawTimeout = setTimeout(function() {
+    drawTimeout = undefined;
+    draw();
+  }, 60000 - (Date.now() % 60000));
+}
+
+function draw() {
   g.clear();
   Bangle.drawWidgets();
 
@@ -76,23 +84,26 @@ function drawSimpleClock() {
   // draw gmt
   g.setFont(font, gmtFontSize);
   g.drawString(d.toString().match(/GMT[+-]\d+/), xyCenter, yposGMT, true);
+
+  queueDraw();
 }
 
-// handle switch display on by pressing BTN1
+// Stop updates when LCD is off, restart when on
-Bangle.on('lcdPower', function(on) {
+Bangle.on('lcdPower',on=>{
-  if (on) drawSimpleClock();
+  if (on) {
+    draw(); // draw immediately, queue redraw
+  } else { // stop draw timer
+    if (drawTimeout) clearTimeout(drawTimeout);
+    drawTimeout = undefined;
+  }
 });
 
+// Show launcher when button pressed
+Bangle.setUI("clock");
 // clean app screen
 g.clear();
 Bangle.loadWidgets();
 Bangle.drawWidgets();
 
-// refesh every 15 sec
-setInterval(drawSimpleClock, 15E3);
-
 // draw now
-drawSimpleClock();
+draw();
-
-// Show launcher when button pressed
-Bangle.setUI("clock");

apps/worldclock/ChangeLog

@@ -2,3 +2,5 @@
 0.02: Update custom.html for refactor; add README
 0.03: Update for larger secondary timezone display (#610)
 0.04: setUI, different screen sizes
+0.05: Now update *on* the minute rather than every 15 secs
+      Fix rendering of single extra timezone on Bangle.js 2

apps/worldclock/app.js

@@ -1,5 +1,3 @@
-/* jshint esversion: 6 */
-
 const big = g.getWidth()>200;
 // Font for primary time and date
 const primaryTimeFontSize = big?6:5;
@@ -16,8 +14,13 @@ const xcol2 = g.getWidth() - xcol1;
 
 const font = "6x8";
 
+/* TODO: we could totally use 'Layout' here and
+avoid a whole bunch of hard-coded offsets */
+
+
 const xyCenter = g.getWidth() / 2;
 const yposTime = big ? 75 : 60;
+const yposTime2 = yposTime + (big ? 100 : 60);
 const yposDate = big ? 130 : 90;
 const yposWorld = big ? 170 : 120;
 
@@ -29,41 +32,52 @@ var offsets = require("Storage").readJSON("worldclock.settings.json") || [];
 // TESTING CODE
 // Used to test offset array values during development.
 // Uncomment to override secondary offsets value
-
+/*
-// const mockOffsets = {
+const mockOffsets = {
-//   zeroOffsets: [],
+ zeroOffsets: [],
-//   oneOffset: [["UTC", 0]],
+ oneOffset: [["UTC", 0]],
-//   twoOffsets: [
+ twoOffsets: [
-//     ["Tokyo", 9],
+   ["Tokyo", 9],
-//     ["UTC", 0],
+   ["UTC", 0],
-//   ],
+ ],
-//   fourOffsets: [
+ fourOffsets: [
-//     ["Tokyo", 9],
+   ["Tokyo", 9],
-//     ["UTC", 0],
+   ["UTC", 0],
-//     ["Denver", -7],
+   ["Denver", -7],
-//     ["Miami", -5],
+   ["Miami", -5],
-//   ],
+ ],
-//   fiveOffsets: [
+ fiveOffsets: [
-//     ["Tokyo", 9],
+   ["Tokyo", 9],
-//     ["UTC", 0],
+   ["UTC", 0],
-//     ["Denver", -7],
+   ["Denver", -7],
-//     ["Chicago", -6],
+   ["Chicago", -6],
-//     ["Miami", -5],
+   ["Miami", -5],
-//   ],
+   ],
-// };
+};*/
 
 // Uncomment one at a time to test various offsets array scenarios
-// offsets = mockOffsets.zeroOffsets; // should render nothing below primary time
+//offsets = mockOffsets.zeroOffsets; // should render nothing below primary time
-// offsets = mockOffsets.oneOffset; // should render larger in two rows
+//offsets = mockOffsets.oneOffset; // should render larger in two rows
-// offsets = mockOffsets.twoOffsets; // should render two in columns
+//offsets = mockOffsets.twoOffsets; // should render two in columns
-// offsets = mockOffsets.fourOffsets; // should render in columns
+//offsets = mockOffsets.fourOffsets; // should render in columns
-// offsets = mockOffsets.fiveOffsets; // should render first four in columns
+//offsets = mockOffsets.fiveOffsets; // should render first four in columns
 
 // END TESTING CODE
 
 // Check settings for what type our clock should be
 //var is12Hour = (require("Storage").readJSON("setting.json",1)||{})["12hour"];
-var secondInterval;
+
+// timeout used to update every minute
+var drawTimeout;
+
+// schedule a draw for the next minute
+function queueDraw() {
+  if (drawTimeout) clearTimeout(drawTimeout);
+  drawTimeout = setTimeout(function() {
+    drawTimeout = undefined;
+    draw();
+  }, 60000 - (Date.now() % 60000));
+}
 
 function doublenum(x) {
   return x < 10 ? "0" + x : "" + x;
@@ -73,7 +87,7 @@ function getCurrentTimeFromOffset(dt, offset) {
   return new Date(dt.getTime() + offset * 60 * 60 * 1000);
 }
 
-function drawSimpleClock() {
+function draw() {
   // get date
   var d = new Date();
   var da = d.toString().split(" ");
@@ -111,9 +125,9 @@ function drawSimpleClock() {
       // For a single secondary timezone, draw it bigger and drop time zone to second line
       const xOffset = 30;
       g.setFont(font, secondaryTimeFontSize);
-      g.drawString(`${hours}:${minutes}`, xyCenter, yposTime + 100, true);
+      g.drawString(`${hours}:${minutes}`, xyCenter, yposTime2, true);
       g.setFont(font, secondaryTimeZoneFontSize);
-      g.drawString(offset[OFFSET_TIME_ZONE], xyCenter, yposTime + 130, true);
+      g.drawString(offset[OFFSET_TIME_ZONE], xyCenter, yposTime2 + 30, true);
 
       // draw Day, name of month, Date
       g.setFont(font, secondaryTimeZoneFontSize);
@@ -132,6 +146,8 @@ function drawSimpleClock() {
       g.drawString(`${hours}:${minutes}`, xcol2, yposWorld + index * 15, true);
     }
   });
+
+  queueDraw();
 }
 
 // clean app screen
@@ -141,18 +157,15 @@ Bangle.setUI("clock");
 Bangle.loadWidgets();
 Bangle.drawWidgets();
 
-// refesh every 15 sec when screen is on
+// Stop updates when LCD is off, restart when on
-Bangle.on("lcdPower", (on) => {
+Bangle.on('lcdPower',on=>{
-  if (secondInterval) clearInterval(secondInterval);
-  secondInterval = undefined;
   if (on) {
-    secondInterval = setInterval(drawSimpleClock, 15e3);
+    draw(); // draw immediately, queue redraw
-    drawSimpleClock(); // draw immediately
+  } else { // stop draw timer
+    if (drawTimeout) clearTimeout(drawTimeout);
+    drawTimeout = undefined;
   }
 });
 
-// draw now and every 15 sec until display goes off
+// draw now
-drawSimpleClock();
+draw();
-if (Bangle.isLCDOn()) {
-  secondInterval = setInterval(drawSimpleClock, 15e3);
-}