From 657e06d824e38dd7d029ece567cc25d6cf5cf9e9 Mon Sep 17 00:00:00 2001
From: Gordon Williams <gw@pur3.co.uk>
Date: Tue, 2 Jan 2024 15:05:46 +0000
Subject: [PATCH] imgclock 0.11: Allow fullscreen clock faces with hidden
 widgets

---
 apps/imgclock/ChangeLog     |  1 +
 apps/imgclock/app.js        |  3 +++
 apps/imgclock/custom.html   | 31 ++++++++++++++++++++-----------
 apps/imgclock/metadata.json |  2 +-
 4 files changed, 25 insertions(+), 12 deletions(-)

diff --git a/apps/imgclock/ChangeLog b/apps/imgclock/ChangeLog
index 0895bb66d..ddd50c176 100644
--- a/apps/imgclock/ChangeLog
+++ b/apps/imgclock/ChangeLog
@@ -9,3 +9,4 @@
 0.08: Use Bangle.setUI for button/launcher handling
 0.09: Bangle.js 2 compatibility
 0.10: Tell clock widgets to hide.
+0.11: Allow fullscreen clock faces with hidden widgets
\ No newline at end of file
diff --git a/apps/imgclock/app.js b/apps/imgclock/app.js
index 7d74bee82..15d9d2fd7 100644
--- a/apps/imgclock/app.js
+++ b/apps/imgclock/app.js
@@ -8,6 +8,7 @@ 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 = 174, IH = 45, OY = 24;
+if (inf.hideWidgets) OY=0;
 var bgwidth = img.charCodeAt(0);
 var bgoptions;
 if (bgwidth<g.getWidth())
@@ -76,6 +77,8 @@ var secondInterval = setInterval(draw,1000);
 Bangle.setUI("clock");
 // load widgets
 Bangle.loadWidgets();
+if (inf.hideWidgets)
+  require("widget_utils").swipeOn();
 Bangle.drawWidgets();
 // Stop when LCD goes off
 Bangle.on('lcdPower',on=>{
diff --git a/apps/imgclock/custom.html b/apps/imgclock/custom.html
index 68d059b80..23d73bb41 100644
--- a/apps/imgclock/custom.html
+++ b/apps/imgclock/custom.html
@@ -35,7 +35,7 @@
       function onInit(device) {
         if (device && device.id=="BANGLEJS2") {
           faces = FACES_BANGLE2;
-          recommendedUploadStyle = "176x152 3 bits per pixel (8 color)";
+          recommendedUploadStyle = "176x152 or 176x176(hidden widgets) 3bpp (8 color)";
           defaultBPP = 8;
           defaultImageMode = "web";
           defaultPositions = {
@@ -44,7 +44,7 @@
           };
         } else {
           faces = FACES_BANGLE1;
-          recommendedUploadStyle = "240x192 or 240x216 8 bit web palette";
+          recommendedUploadStyle = "240x192 or 240x216 8bpp web palette";
           defaultBPP = 8;
           defaultImageMode = "web";
           defaultPositions = {
@@ -56,7 +56,7 @@
         }
         updateFaces();
       }
-
+hazel
       function updateFaces() {
       document.querySelector(".columns").innerHTML = faces.map((face,facenumber)=>`
 <div class="column col-6 col-xs-12">
@@ -81,7 +81,7 @@
     </div>
     <div class="card-header">
       <div class="card-title h5">Custom</div>
-      <div class="card-subtitle text-gray">(${recommendedUploadStyle})</div>
+      <div class="card-subtitle text-gray">${recommendedUploadStyle}</div>
     </div>
     <div class="card-body">
     <div class="form-group">
@@ -93,11 +93,17 @@
       </div>
     </div>
     <div class="form-group">
-    <label class="form-switch">
-      <input type="checkbox" id="cusom16bit">
-      <i class="form-icon"></i> 16 bit images (look better, slower, not recommended)
-    </label>
-  </div>
+      <label class="form-switch">
+        <input type="checkbox" id="custom16bit">
+        <i class="form-icon"></i> 16 bit images (look better, slower, not recommended)
+      </label>
+    </div>
+    <div class="form-group">
+      <label class="form-switch">
+        <input type="checkbox" id="hideWidgets">
+        <i class="form-icon"></i> Hide Widgets (use a square image)
+      </label>
+    </div>
     <div class="form-group">
       <label class="form-label" for="customcolor">Clock color</label>
       <select class="form-select" id="customcolor">
@@ -126,16 +132,18 @@
           // build app text
           var facenumber = btn.target.getAttribute("face");
           var face;
+          var hideWidgets = true;
           if (facenumber=="custom") {
             var select = document.getElementById("customlocation");
             var pos = select.options[select.selectedIndex].value.split(",").map(x=>parseInt(x));
             select = document.getElementById("customcolor");
             var col = select.options[select.selectedIndex].value;
+            hideWidgets = document.getElementById('hideWidgets').checked;
             face = {
               x : pos[0],
               y : pos[1],
               align: pos[2],
-              bpp : document.getElementById('cusom16bit').checked ? 16 : defaultBPP,
+              bpp : document.getElementById('custom16bit').checked ? 16 : defaultBPP,
               col : col
             };
           } else {
@@ -146,7 +154,8 @@
             x : face.x,
             y : face.y,
             align : face.align,
-            col : face.col
+            col : face.col,
+            hideWidgets : hideWidgets
           };
           var imgMode = faceInfo.bpp==16 ? "rgb565" : defaultImageMode;
           var img = document.querySelector(`img[face='${facenumber}']`);
diff --git a/apps/imgclock/metadata.json b/apps/imgclock/metadata.json
index 94dff5f17..9582bdf16 100644
--- a/apps/imgclock/metadata.json
+++ b/apps/imgclock/metadata.json
@@ -2,7 +2,7 @@
   "id": "imgclock",
   "name": "Image background clock",
   "shortName": "Image Clock",
-  "version": "0.10",
+  "version": "0.11",
   "description": "A clock with an image as a background",
   "icon": "app.png",
   "type": "clock",