From 83bedcdb570da5a76cba37d0e9660942e2d4a473 Mon Sep 17 00:00:00 2001
From: Randy Heydon <randy.heydon@clockworklab.net>
Date: Thu, 1 May 2025 21:13:34 -0400
Subject: [PATCH] bwclk: Adjust clkinfo positions for long text.

Previously, all text in a clock info entry was centered.  This caused
long lines to spill off both sides of the screen, and entries with
more than two lines to cover the time.  With this change, clock info
text is arranged so it only ever spills off the right and bottom.
This allows the start of any text to always be visible, and the time
to never be covered, regardless of the amount of text.  To achieve
this, multiple lines are now left-aligned instead of center-aligned.
---
 apps/bwclk/ChangeLog     |  1 +
 apps/bwclk/app.js        | 23 ++++++++++++++++-------
 apps/bwclk/metadata.json |  2 +-
 3 files changed, 18 insertions(+), 8 deletions(-)

diff --git a/apps/bwclk/ChangeLog b/apps/bwclk/ChangeLog
index 74b80b73b..84ca21d20 100644
--- a/apps/bwclk/ChangeLog
+++ b/apps/bwclk/ChangeLog
@@ -34,3 +34,4 @@ clkinfo.addInteractive that would cause ReferenceError.
 0.32: Make the border of the clock_info box extend all the way to the right of the screen.
 0.33: Fix issue rendering ClockInfos with for fg+bg color set to the same (#2749)
 0.34: Support 12-hour time format
+0.35: Adjust clock info positions to better fit long text
diff --git a/apps/bwclk/app.js b/apps/bwclk/app.js
index 5053dafbb..76a6a2a94 100644
--- a/apps/bwclk/app.js
+++ b/apps/bwclk/app.js
@@ -141,7 +141,7 @@ let clockInfoMenu = clock_info.addInteractive(clockInfoItems, {
     var hideClkInfo = info.text == null;
 
     g.reset().setBgColor(g.theme.fg).clearRect(options.x, options.y, options.x+options.w, options.y+options.h);
-    g.setFontAlign(0,0).setColor(g.theme.bg);
+    g.setFontAlign(-1,-1).setColor(g.theme.bg);
 
     if (options.focus){
       var y = hideClkInfo ? options.y+20 : options.y+2;
@@ -157,26 +157,35 @@ let clockInfoMenu = clock_info.addInteractive(clockInfoItems, {
       return;
     }
 
-    // Set text and font
+    // Set text and font, compute sizes.
     var image = info.img;
+    var imgWidth = image == null ? 0 : 24;
+    let imgWidthClear = parseInt(imgWidth*1.3);
     var text = String(info.text);
+    let strWidth;
     if(text.split('\n').length > 1){
       g.setMiniFont();
+      strWidth = g.stringWidth(text);
     } else {
       g.setSmallFont();
+      strWidth = g.stringWidth(text);
+      if (strWidth+imgWidthClear > options.w) {
+        g.setMiniFont();
+        strWidth = g.stringWidth(text);
+      }
     }
 
-    // Compute sizes
-    var strWidth = g.stringWidth(text);
-    var imgWidth = image == null ? 0 : 24;
+    // Compute positions
     var midx = options.x+options.w/2;
+    let imgPosX = Math.max(midx-Math.floor(imgWidthClear/2)-parseInt(strWidth/2), 0);
+    let strPosX = imgPosX+imgWidthClear;
 
     // Draw
     if (image) {
       var scale = imgWidth / image.width;
-      g.drawImage(image, midx-parseInt(imgWidth*1.3/2)-parseInt(strWidth/2), options.y+6, {scale: scale});
+      g.drawImage(image, imgPosX, options.y+6, {scale: scale});
     }
-    g.drawString(text, midx+parseInt(imgWidth*1.3/2), options.y+20);
+    g.drawString(text, strPosX, options.y+6);
 
     // In case we are in focus and the focus box changes (fullscreen yes/no)
     // we draw the time again. Otherwise it could happen that a while line is
diff --git a/apps/bwclk/metadata.json b/apps/bwclk/metadata.json
index de84ba947..ab2c8c81b 100644
--- a/apps/bwclk/metadata.json
+++ b/apps/bwclk/metadata.json
@@ -1,7 +1,7 @@
 {
   "id": "bwclk",
   "name": "BW Clock",
-  "version": "0.34",
+  "version": "0.35",
   "description": "A very minimalistic clock.",
   "readme": "README.md",
   "icon": "app.png",