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

@@ -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

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
+    // Compute positions
-    var strWidth = g.stringWidth(text);
-    var imgWidth = image == null ? 0 : 24;
     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

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",