imgclock 0.11: Allow fullscreen clock faces with hidden widgets

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

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=>{

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">
+      <label class="form-switch">
-      <input type="checkbox" id="cusom16bit">
+        <input type="checkbox" id="custom16bit">
-      <i class="form-icon"></i> 16 bit images (look better, slower, not recommended)
+        <i class="form-icon"></i> 16 bit images (look better, slower, not recommended)
-    </label>
+      </label>
-  </div>
+    </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}']`);

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