Make compatible with top and bottom widgets

apps/dutchclock/ChangeLog

@@ -4,4 +4,5 @@
 0.15: Fix midnight better
 0.16: Fix midnight decisively
 0.17: Get loadWidgets back in the right place
-0.18: Move setUI and loadWidgets to initialize function
+0.18: Move setUI and loadWidgets to initialize function
+0.19: Make compatible with top and bottom widgets

apps/dutchclock/README.md

@@ -1,7 +1,7 @@
 # Dutch Clock
-This clock shows the time, in words, the way a Dutch person would tell you what time it is. Useful when learning Dutch or pretending to know Dutch.
+This clock shows the time, in words, the way a Dutch person might respond when asked what time it is. Useful when learning Dutch and/or pretending to know Dutch.
 
-Dedicated my wife, who will sometimes insist I tell her exactly what time it says on the watch and not just an approximation.
+Dedicated to my wife, who will sometimes insist I tell her exactly what time it says on the watch and not just an approximation.
 
 ## Options
 - Three modes: 
@@ -12,6 +12,10 @@ Dedicated my wife, who will sometimes insist I tell her exactly what time it say
 - Option to show digital time at the bottom (off by default)
 - Option to show the date at the bottom (on by default)
 
+The app respects top and bottom widgets, but it gets a bit crowded when you add the time/date and you also have bottom widgets turned on. 
+
+When you turn widgets off, you can still see the top widgets by swiping down from the top.
+
 ## Screenshots
 ![](screenshotbangle1-2.png)
 ![](screenshotbangle2.png)

apps/dutchclock/app.js

@@ -1,18 +1,14 @@
+// Load libraries
 const storage = require("Storage");
 const locale = require('locale');
 const widget_utils = require('widget_utils');
 
-const SCREEN_WIDTH = g.getWidth();
+// Define constants
-const SCREEN_HEIGHT = g.getHeight();
-
-const TOP_SPACING = 5;
 const WIDGETS_HEIGHT = 20;
 const DATETIME_SPACING_HEIGHT = 5;
-const TIME_HEIGHT = 10;
+const TIME_HEIGHT = 8;
-const DATE_HEIGHT = 10;
+const DATE_HEIGHT = 8;
-const BOTTOM_SPACING = 5;
+const BOTTOM_SPACING = 2;
-
-const TEXT_WIDTH = SCREEN_WIDTH - 2;
 
 const MINS_IN_HOUR = 60;
 const MINS_IN_DAY = 24 * MINS_IN_HOUR;
@@ -30,29 +26,39 @@ const settings = Object.assign(
     storage.readJSON(SETTINGS_FILE, true) || {}
 );
 
-const maxFontSize = SCREEN_HEIGHT 
+// Define global variables
-  - TOP_SPACING
+const textBox = {};
-  - (settings.showWidgets ? WIDGETS_HEIGHT : 0)
-  - (settings.showDate || settings.showTime ? DATETIME_SPACING_HEIGHT : 0)
-  - (settings.showDate ? DATE_HEIGHT : 0)
-  - (settings.showTime ? TIME_HEIGHT : 0);
-
-const X = SCREEN_WIDTH / 2;
-const Y = SCREEN_HEIGHT / 2
-  + TOP_SPACING / 2
-  + (settings.showWidgets ? WIDGETS_HEIGHT / 2 : 0)
-  - (settings.showDate || settings.showTime ? DATETIME_SPACING_HEIGHT / 2 : 0)
-  - (settings.showDate ? DATE_HEIGHT / 2 : 0)
-  - (settings.showTime ? TIME_HEIGHT / 2 : 0);
-  
 let date, mins;
 
+// Define functions
 function initialize() {
+  // Reset the state of the graphics library
+  g.clear(true);
+
   // Tell Bangle this is a clock
   Bangle.setUI("clock");
+
   // Load widgets
   Bangle.loadWidgets();
 
+  // Show widgets, or not
+  if (settings.showWidgets) {
+    Bangle.drawWidgets();
+  } else {
+    widget_utils.swipeOn();
+  }
+
+  const dateTimeHeight = (settings.showDate || settings.showTime ? DATETIME_SPACING_HEIGHT : 0)
+    + (settings.showDate ? DATE_HEIGHT : 0)
+    + (settings.showTime ? TIME_HEIGHT : 0);
+
+  Object.assign(textBox, {
+    x: Bangle.appRect.x + Bangle.appRect.w / 2,
+    y: Bangle.appRect.y + (Bangle.appRect.h - dateTimeHeight) / 2,
+    w: Bangle.appRect.w - 2,
+    h: Bangle.appRect.h - dateTimeHeight
+  });
+
   // draw immediately at first
   tick();
 
@@ -78,10 +84,6 @@ function tick() {
     mins = m;
     draw();
   }
-
-  if (!settings.showWidgets) {
-    widget_utils.hide();
-  }
 }
 
 function draw() {
@@ -89,40 +91,32 @@ function draw() {
   const timeLines = getTimeLines(mins);
   const bottomLines = getBottomLines();
 
-  // Reset the state of the graphics library
+  g.reset().clearRect(Bangle.appRect);
-  g.clear(true);
 
   // draw the current time (4x size 7 segment)
   setFont(timeLines);
 
   g.setFontAlign(0,0); // align center top
-  g.drawString(timeLines.join("\n"), X, Y, false);
+  g.drawString(timeLines.join("\n"), textBox.x, textBox.y, false);
 
   if (bottomLines.length) {  
     // draw the time and/or date, in a normal font
     g.setFont("6x8");
     g.setFontAlign(0,1); // align center bottom
     // pad the date - this clears the background if the date were to change length
-    g.drawString(bottomLines.join('\n'), SCREEN_WIDTH/2, SCREEN_HEIGHT - BOTTOM_SPACING, false);
+    g.drawString(bottomLines.join('\n'), Bangle.appRect.w / 2, Bangle.appRect.y2 - BOTTOM_SPACING, false);
-  }
-
-
-  if (settings.showWidgets) {
-    Bangle.drawWidgets();
-  } else {
-    widget_utils.hide();
   }
 }
 
 function setFont(timeLines) {
-  const size = maxFontSize / timeLines.length;
+  const size = textBox.h / timeLines.length;
 
   g.setFont("Vector", size);
 
   let width = g.stringWidth(timeLines.join('\n'));
 
-  if (width > TEXT_WIDTH) {
+  if (width > textBox.w) {
-    g.setFont("Vector", Math.floor(size * (TEXT_WIDTH / width)));
+    g.setFont("Vector", Math.floor(size * (textBox.w / width)));
   }
 }
 
@@ -263,4 +257,5 @@ function roundTo(x) {
   return n => Math.round(n / x) * x;
 }
 
+// Let's go
 initialize();

apps/dutchclock/metadata.json

@@ -3,7 +3,7 @@
   "name": "Dutch Clock",
   "shortName":"Dutch Clock",
   "icon": "app.png",
-  "version":"0.18",
+  "version":"0.19",
   "description": "A clock that displays the time the way a Dutch person would respond when asked what time it is.",
   "type": "clock",
   "tags": "clock,dutch,text",