pomoplus: increase size of fonts and buttons

for legibility and ease of use.

Also center the images correctly with regards to their anchoring.

apps/pomoplus/ChangeLog

@@ -2,3 +2,4 @@
 0.02-0.04: Bug fixes
 0.05: Submitted to the app loader
 0.06: Added setting to show clock after start/resume
+0.07: Make fonts and buttons larger for legibility and ease of use.

apps/pomoplus/app.js

@@ -14,37 +14,45 @@ if (
   common.state = common.STATE_DEFAULT;
 }
 
+const W = g.getWidth();
+const H = g.getHeight();
+const SCALING = W/176; // The UI was tweaked to look good on a Bangle.js 2 (176x176 px). SCALING is used to adapt with the resolution of whatever device the app is running on.
+const BUTTON_HEIGHT = 56 * SCALING;
+
 function drawButtons() {
-  let w = g.getWidth();
-  let h = g.getHeight();
   //Draw the backdrop
-  const BAR_TOP = h - 24;
-  g.setColor(0, 0, 1).setFontAlign(0, -1)
-    .clearRect(0, BAR_TOP, w, h)
-    .fillRect(0, BAR_TOP, w, h)
+  const BUTTON_TOP = H - BUTTON_HEIGHT;
+  const IMG_SIZE = 24;
+  const IMG_ANCHOR_Y = BUTTON_TOP + BUTTON_HEIGHT / 2 - IMG_SIZE / 2;
+  g.setColor(0, 0, 1)
+    .fillRect({x:0, y:BUTTON_TOP, x2:W-1, y2:H-1,r:15})
     .setColor(1, 1, 1);
 
   if (!common.state.wasRunning) {  //If the timer was never started, only show a play button
-    g.drawImage(common.BUTTON_ICONS.play, w / 2, BAR_TOP);
+    g.drawImage(common.BUTTON_ICONS.play, W / 2 - IMG_SIZE / 2, IMG_ANCHOR_Y);
   } else {
-    g.drawLine(w / 2, BAR_TOP, w / 2, h);
+    g.setColor(g.theme.bg)
+      .fillRect(W / 2 - 2, BUTTON_TOP, W / 2 + 2, H)
+      .setColor(1,1,1);
     if (common.state.running) {
-      g.drawImage(common.BUTTON_ICONS.pause, w / 4, BAR_TOP)
-        .drawImage(common.BUTTON_ICONS.skip, w * 3 / 4, BAR_TOP);
+      g.drawImage(common.BUTTON_ICONS.pause, W / 4 - IMG_SIZE / 2, IMG_ANCHOR_Y)
+        .drawImage(common.BUTTON_ICONS.skip, W * 3 / 4 - IMG_SIZE / 2, IMG_ANCHOR_Y);
     } else {
-      g.drawImage(common.BUTTON_ICONS.reset, w / 4, BAR_TOP)
-        .drawImage(common.BUTTON_ICONS.play, w * 3 / 4, BAR_TOP);
+      g.drawImage(common.BUTTON_ICONS.reset, W / 4 - IMG_SIZE / 2, IMG_ANCHOR_Y)
+        .drawImage(common.BUTTON_ICONS.play, W * 3 / 4 - IMG_SIZE / 2, IMG_ANCHOR_Y);
     }
   }
 }
 
 function drawTimerAndMessage() {
-  let w = g.getWidth();
-  let h = g.getHeight();
+  const ANCHOR_X = W / 2;
+  const ANCHOR_Y = H * 3 / 8;
+  const TIME_SIZE = 48 * SCALING;
+  const LABEL_SIZE = 18 * SCALING;
   g.reset()
     .setFontAlign(0, 0)
-    .setFont("Vector", 36)
-    .clearRect(w / 2 - 60, h / 2 - 34, w / 2 + 60, h / 2 + 34)
+    .setFont("Vector", TIME_SIZE)
+    .clearRect(0, ANCHOR_Y - TIME_SIZE / 2, W-1, ANCHOR_Y + TIME_SIZE / 2 + 1.2 * LABEL_SIZE)
 
     //Draw the timer
     .drawString((() => {
@@ -59,17 +67,17 @@ function drawTimerAndMessage() {
 
       if (hours >= 1) return `${parseInt(hours)}:${pad(minutes)}:${pad(seconds)}`;
       else return `${parseInt(minutes)}:${pad(seconds)}`;
-    })(), w / 2, h / 2)
+    })(), ANCHOR_X, ANCHOR_Y)
 
     //Draw the phase label
-    .setFont("Vector", 12)
+    .setFont("Vector", LABEL_SIZE)
     .drawString(((currentPhase, numShortBreaks) => {
       if (!common.state.wasRunning) return "Not started";
       else if (currentPhase == common.PHASE_WORKING) return `Work ${numShortBreaks + 1}/${common.settings.numShortBreaks + 1}`
       else if (currentPhase == common.PHASE_SHORT_BREAK) return `Short break ${numShortBreaks + 1}/${common.settings.numShortBreaks}`;
       else return "Long break!";
     })(common.state.phase, common.state.numShortBreaks),
-      w / 2, h / 2 + 18);
+      ANCHOR_X, ANCHOR_Y + 2*LABEL_SIZE);
 
   //Update phase with vibation if needed
   if (common.getTimeLeft() <= 0) {
@@ -81,7 +89,7 @@ drawButtons();
 Bangle.on("touch", (button, xy) => {
   //If we support full touch and we're not touching the keys, ignore.
   //If we don't support full touch, we can't tell so just assume we are.
-  if (xy !== undefined && xy.y <= g.getHeight() - 24) return;
+  if (xy !== undefined && xy.y <= g.getHeight() - BUTTON_HEIGHT) return;
 
   if (!common.state.wasRunning) {
     //If we were never running, there is only one button: the start button

apps/pomoplus/metadata.json

@@ -1,7 +1,7 @@
 {
   "id": "pomoplus",
   "name": "Pomodoro Plus",
-  "version": "0.06",
+  "version": "0.07",
   "description": "A configurable pomodoro timer that runs in the background.",
   "icon": "icon.png",
   "type": "app",