From 5f8e424f5fd0d640f5688d960f33edaf1194e193 Mon Sep 17 00:00:00 2001
From: Ben Whittaker <ben@benw.ca>
Date: Mon, 11 May 2020 20:58:31 -0400
Subject: [PATCH] imgclock: Make imgclock text area wider

This prevents imgclock from cutting off the date in locales with long date
formats such as "Wednesday, September 10, 2020". Also adjusts the position
and alignment of the date when necessary to prevent it from flowing off the edge of the
screen.
---
 apps.json                 |  2 +-
 apps/imgclock/ChangeLog   |  3 ++-
 apps/imgclock/app.js      | 14 ++++++++++----
 apps/imgclock/custom.html | 16 +++++++++-------
 4 files changed, 22 insertions(+), 13 deletions(-)

diff --git a/apps.json b/apps.json
index a34dcf3a4..07cedf21a 100644
--- a/apps.json
+++ b/apps.json
@@ -168,7 +168,7 @@
     "name": "Image background clock",
     "shortName":"Image Clock",
     "icon": "app.png",
-    "version":"0.06",
+    "version":"0.07",
     "description": "A clock with an image as a background",
     "tags": "clock",
     "type" : "clock",
diff --git a/apps/imgclock/ChangeLog b/apps/imgclock/ChangeLog
index ae978f9f9..20906fb87 100644
--- a/apps/imgclock/ChangeLog
+++ b/apps/imgclock/ChangeLog
@@ -4,4 +4,5 @@
 0.04: Fix hour alignment for single digits
       Scaling for background images <240px wide
 0.05: Fix memory/interval leak when LCD turns on
-0.06: Support 12 hour time
\ No newline at end of file
+0.06: Support 12 hour time
+0.07: Don't cut off wide date formats
\ No newline at end of file
diff --git a/apps/imgclock/app.js b/apps/imgclock/app.js
index dc961f58b..becf0a1fb 100644
--- a/apps/imgclock/app.js
+++ b/apps/imgclock/app.js
@@ -7,7 +7,7 @@ var is12Hour = (require("Storage").readJSON("setting.json",1)||{})["12hour"];
 var inf = require("Storage").readJSON("imgclock.face.json");
 var img = require("Storage").read("imgclock.face.img");
 var IX = inf.x, IY = inf.y, IBPP = inf.bpp;
-var IW = 110, IH = 45, OY = 24;
+var IW = 174, IH = 45, OY = 24;
 var bgwidth = img.charCodeAt(0);
 var bgoptions;
 if (bgwidth<240)
@@ -40,7 +40,7 @@ function draw() {
   new Uint8Array(cg.buffer).set(bgimg);
   // draw time
   cg.setColor(inf.col);
-  var x = 40;
+  var x = 74 + 32 * inf.align;
   cg.setFont("7x11Numeric7Seg",3);
   cg.setFontAlign(1,-1);
   cg.drawString(hours, x, 0);
@@ -54,8 +54,14 @@ function draw() {
   cg.drawString(("0"+t.getSeconds()).substr(-2), x, 20);
   cg.setFont("6x8",1);
   cg.drawString(meridian, x+2, 0);
-  cg.setFontAlign(0,-1);
-  cg.drawString(locale.date(t),IW/2,IH-8);
+  let date = locale.date(t);
+  if (cg.stringWidth(date) < IW-64) {
+    cg.setFontAlign(0, -1);
+    cg.drawString(date,IW/2+32*inf.align,IH-8);
+  } else {
+    cg.setFontAlign(inf.align, -1);
+    cg.drawString(date,IW*(inf.align+1)/2,IH-8);
+  }
   // draw to screen
   g.drawImage(cgimg,IX,IY+OY);
 }
diff --git a/apps/imgclock/custom.html b/apps/imgclock/custom.html
index 8c920571a..8428725af 100644
--- a/apps/imgclock/custom.html
+++ b/apps/imgclock/custom.html
@@ -13,9 +13,9 @@
 
     <script>
       var faces = [
-        { img:"122240.png", bpp : 8, x:120, y:20, col:"#FFFFFF", name:"Cityscape", attrib:"getwallpapers.com", attribLink:"http://getwallpapers.com/collection/8-bit-wallpaper", description:"" },
-        { img:"122271.png", bpp : 8, x:10, y:125, col:"#FFFFFF", name:"Sunset", attrib:"getwallpapers.com", attribLink:"http://getwallpapers.com/collection/8-bit-wallpaper", description:"" },
-        { img:"thisisfine.png", bpp : 8, x:85, y:5, col:"#000000", name:"This is fine.", attrib:"Gunshow #648", attribLink:"https://knowyourmeme.com/memes/this-is-fine", description:"" },
+        { img:"122240.png", bpp : 8, x:56, y:20, align: 1, col:"#FFFFFF", name:"Cityscape", attrib:"getwallpapers.com", attribLink:"http://getwallpapers.com/collection/8-bit-wallpaper", description:"" },
+        { img:"122271.png", bpp : 8, x:10, y:125, align: -1, col:"#FFFFFF", name:"Sunset", attrib:"getwallpapers.com", attribLink:"http://getwallpapers.com/collection/8-bit-wallpaper", description:"" },
+        { img:"thisisfine.png", bpp : 8, x:53, y:5, align: 0, col:"#000000", name:"This is fine.", attrib:"Gunshow #648", attribLink:"https://knowyourmeme.com/memes/this-is-fine", description:"" },
       ];
 
       document.querySelector(".columns").innerHTML = faces.map((face,facenumber)=>`
@@ -68,10 +68,10 @@
     <div class="form-group">
       <label class="form-label" for="customlocation">Clock location</label>
       <select class="form-select" id="customlocation">
-        <option value="16,16">Top Left</option>
-        <option value="114,16">Top Right</option>
-        <option value="16,131">Bottom Left</option>
-        <option value="114,131">Bottom Right</option>
+        <option value="16,16,-1">Top Left</option>
+        <option value="50,16,1">Top Right</option>
+        <option value="16,131,-1">Bottom Left</option>
+        <option value="50,131,1">Bottom Right</option>
       </select>
     </div>
     </div>
@@ -97,6 +97,7 @@
             face = {
               x : pos[0],
               y : pos[1],
+              align: pos[2],
               bpp : document.getElementById('cusom16bit').checked ? 16 : 8,
               col : col
             };
@@ -107,6 +108,7 @@
             bpp : face.bpp,
             x : face.x,
             y : face.y,
+            align : face.align,
             col : face.col
           };
           var imgMode = faceInfo.bpp==16 ? "rgb565" : "web";