New clockbg: add more default colors and .unload/load to allow the design to change each time you flick to launcher and back

Author: gfwilliams

apps/analogquadclk/ChangeLog

@@ -1,3 +1,4 @@
 0.01: New Clock!
 0.02: Fix fastloading memory leak and clockinfo overwritten by hands
-0.03: Use new clockinfo lib with function to render images wirh borders
+0.03: Use new clockinfo lib with function to render images wirh borders
+0.04: Use new clockbg to allow backgrounds to change when fast loading

apps/analogquadclk/app.js

@@ -2,6 +2,7 @@
   const W = g.getWidth();
   const H = g.getHeight();
   const background = require("clockbg"); // image backgrounds
+  background.load(); // reload if we fast loaded into here
   let drawTimeout; // timeout used to update every minute
   let date = new Date(); // date at last draw
   let lastModified = {x1:0,y1:0,x2:W-1,y2:H-1,first:true}; // rect that was covered by hands
@@ -106,6 +107,7 @@
     remove: function() {
       if (drawTimeout) clearTimeout(drawTimeout);
       drawTimeout = undefined;
+      background.unload(); // free memory from background
       if (clockInfoMenuA) clockInfoMenuA.remove();
       if (clockInfoMenuB) clockInfoMenuB.remove();
       if (clockInfoMenuC) clockInfoMenuC.remove();

apps/analogquadclk/metadata.json

@@ -1,7 +1,7 @@
 { "id": "analogquadclk",
   "name": "Analog Quad Clock",
   "shortName":"Quad Clock",
-  "version":"0.03",
+  "version":"0.04",
   "description": "An analog clock with clockinfos in each of the 4 corners, allowing 4 different data types to be rendered at once",
   "icon": "icon.png",
   "screenshots" : [ { "url":"screenshot.png" }, { "url":"screenshot2.png" } ],

apps/boxclk/ChangeLog

@@ -5,12 +5,13 @@
 0.05: Fixes step count not resetting after a new day starts
 0.06: Added clockbackground app functionality
 0.07: Allow custom backgrounds per boxclk config and from the clockbg module
-0.08: Improves performance, responsiveness, and bug fixes 
+0.08: Improves performance, responsiveness, and bug fixes
 - [+] Added box size caching to reduce calculations
 - [+] Improved step count with real-time updates
 - [+] Improved battery level update logic to reduce unnecessary refreshes
 - [+] Fixed optional seconds not displaying in time
 - [+] Fixed drag handler by adding E.stopEventPropagation()
 - [+] General code optimization and cleanup
 0.09: Revised event handler code
-0.10: Revised suffix formatting in getDate function
+0.10: Revised suffix formatting in getDate function
+0.11: Use new clockbg to allow backgrounds to change when fast loading

apps/boxclk/app.js

@@ -1,6 +1,7 @@
 {
   // 1. Module dependencies and initial configurations
   let background = require("clockbg");
+  background.load(); // reload if we fast loaded into here
   let storage = require("Storage");
   let locale = require("locale");
   let widgets = require("widget_utils");
@@ -27,22 +28,22 @@
   let touchHandler = function(zone, e) {
     let boxTouched = false;
     let touchedBox = null;
-  
+
     for (let boxKey in boxes) {
       if (touchInText(e, boxes[boxKey])) {
         touchedBox = boxKey;
         boxTouched = true;
         break;
       }
     }
-  
+
     if (boxTouched) {
       // Toggle the selected state of the touched box
       boxes[touchedBox].selected = !boxes[touchedBox].selected;
-      
+
       // Update isDragging based on whether any box is selected
       isDragging = Object.values(boxes).some(box => box.selected);
-      
+
       if (isDragging) {
         widgets.hide();
       } else {
@@ -52,10 +53,10 @@
       // If tapped outside any box, deselect all boxes
       deselectAllBoxes();
     }
-  
+
     // Always redraw after a touch event
     draw();
-  
+
     // Handle double tap for saving
     if (!boxTouched && !isDragging) {
       if (doubleTapTimer) {
@@ -69,26 +70,26 @@
         displaySaveIcon();
         return;
       }
-  
+
       doubleTapTimer = setTimeout(() => {
         doubleTapTimer = null;
       }, 500);
     }
   };
-  
+
   let dragHandler = function(e) {
     if (!isDragging) return;
-  
+
     // Stop propagation of the drag event to prevent other handlers
     E.stopEventPropagation();
-  
+
     for (let key in boxes) {
       if (boxes[key].selected) {
         let boxItem = boxes[key];
         calcBoxSize(boxItem);
         let newX = boxItem.pos.x + e.dx;
         let newY = boxItem.pos.y + e.dy;
-  
+
         if (newX - boxItem.cachedSize.width / 2 >= 0 &&
             newX + boxItem.cachedSize.width / 2 <= w &&
             newY - boxItem.cachedSize.height / 2 >= 0 &&
@@ -98,18 +99,18 @@
         }
       }
     }
-  
+
     draw();
   };
-  
+
   let stepHandler = function(up) {
     if (boxes.step && !isDragging) {
       boxes.step.string = formatStr(boxes.step, Bangle.getHealthStatus("day").steps);
       boxes.step.cachedSize = null;
       draw();
     }
   };
-  
+
   let lockHandler = function(isLocked) {
     if (isLocked) {
       deselectAllBoxes();
@@ -211,7 +212,7 @@
     const day = date.getDate();
     const month = shortMonth ? locale.month(date, 1) : locale.month(date, 0);
     const year = date.getFullYear();
-  
+
     const getSuffix = (day) => {
       if (day >= 11 && day <= 13) return 'th';
       const lastDigit = day % 10;
@@ -222,7 +223,7 @@
         default: return 'th';
       }
     };
-  
+
     const dayStr = disableSuffix ? day : `${day}${getSuffix(day)}`;
     return `${month} ${dayStr}${short ? '' : `, ${year}`}`; // not including year for short version
   };
@@ -323,42 +324,42 @@
 
   let draw = function() {
     g.clear();
-  
+
     // Always draw backgrounds full screen
     if (bgImage) { // Check for bg in boxclk config
       g.drawImage(bgImage, 0, 0);
     } else { // Otherwise use clockbg module
       background.fillRect(0, 0, g.getWidth(), g.getHeight());
     }
-  
+
     if (!isDragging) {
       updateBoxData();
     }
-  
+
     for (let boxKey in boxes) {
       let boxItem = boxes[boxKey];
-  
+
       // Set font and alignment for each box individually
       g.setFont(boxItem.font, boxItem.fontSize);
       g.setFontAlign(0, 0);
-  
+
       calcBoxSize(boxItem);
-  
+
       const pos = calcBoxPos(boxItem);
-  
+
       if (boxItem.selected) {
         g.setColor(boxItem.border);
         g.drawRect(pos.x1, pos.y1, pos.x2, pos.y2);
       }
-  
+
       g.drawString(
         boxItem,
         boxItem.string,
         boxItem.pos.x + boxItem.xOffset,
         boxItem.pos.y + boxItem.yOffset
       );
     }
-  
+
     if (!isDragging) {
       if (drawTimeout) clearTimeout(drawTimeout);
       let updateInterval = boxes.time && !isBool(boxes.time.short, true) ? 1000 : 60000 - (Date.now() % 60000);
@@ -382,20 +383,20 @@
     if (boxItem.cachedSize) {
       return boxItem.cachedSize;
     }
-  
+
     g.setFont(boxItem.font, boxItem.fontSize);
     g.setFontAlign(0, 0);
-  
+
     let strWidth = g.stringWidth(boxItem.string) + 2 * boxItem.outline;
     let fontHeight = g.getFontHeight() + 2 * boxItem.outline;
     let totalWidth = strWidth + 2 * boxItem.xPadding;
     let totalHeight = fontHeight + 2 * boxItem.yPadding;
-  
+
     boxItem.cachedSize = {
       width: totalWidth,
       height: totalHeight
     };
-  
+
     return boxItem.cachedSize;
   };
 
@@ -424,18 +425,18 @@
     Bangle.on('lock', lockHandler);
     Bangle.on('touch', touchHandler);
     Bangle.on('drag', dragHandler);
-  
+
     if (boxes.step) {
       boxes.step.string = formatStr(boxes.step, Bangle.getHealthStatus("day").steps);
       Bangle.on('step', stepHandler);
     }
-  
+
     if (boxes.batt) {
       boxes.batt.lastLevel = E.getBattery();
       boxes.batt.string = formatStr(boxes.batt, boxes.batt.lastLevel);
       boxes.batt.lastUpdate = Date.now();
     }
-  
+
     Bangle.setUI({
       mode: "clock",
       remove: function() {
@@ -448,14 +449,15 @@
         }
         if (drawTimeout) clearTimeout(drawTimeout);
         drawTimeout = undefined;
+        background.unload(); // free memory from background
         delete Graphics.prototype.setFontBrunoAce;
         // Restore original drawString function (no outlines)
         g.drawString = g_drawString;
         restoreSetColor();
         widgets.show();
       }
     });
-  
+
     loadCustomFont();
     draw();
   };

apps/boxclk/metadata.json

@@ -1,7 +1,7 @@
 {
   "id": "boxclk",
   "name": "Box Clock",
-  "version": "0.10",
+  "version": "0.11",
   "description": "A customizable clock with configurable text boxes that can be positioned to show your favorite background",
   "icon": "app.png",
   "dependencies" : { "clockbg":"module" },

apps/clockbg/ChangeLog

@@ -6,4 +6,7 @@
       Add a 'view' option in settings menu to view the current background
 0.05: Random square+plasma speed improvements (~2x faster)
 0.06: 25% speed improvement if Math.randInt exists (2v25 fw)
-0.07: Added 'rings'and 'tris' background styles
+0.07: Added 'rings'and 'tris' background styles
+0.08: Allow backgrounds with a random choice of colour schemes
+      Default (solid colour) now uses a variety of shades
+      Added .load/.unload to allow changes when fast loading clocks

apps/clockbg/README.md

@@ -36,6 +36,13 @@ background.fillRect(x1, y1, x2, y2);
 
 // if you ever need to reload to a new background (this could take ~100ms)
 background.reload();
+
+// Call this to unload (free memory - eg in .remove when fast loading)
+background.unload();
+
+// If .unload has been called and you might have fast-loaded back, call .load to ensure everything is loaded again!
+// It won't reload if it's already been loaded
+background.load();
 ```
 
 You should also add `"dependencies" : { "clockbg":"module" },` to your app's metadata to

apps/clockbg/interface.html

@@ -41,6 +41,7 @@
         <option value="error">Diffusion Dither</option>
         <option value="random1">Random Dither</option>
         <option value="comic">'Comic' Dither</option>
+        <option value="floyd">Floyd-Steinberg</option>
       </select>
     </div>
 
@@ -105,7 +106,7 @@
         var img = IMAGES.find(img => img.path == imgPath) || {"dither":true}; // No IMAGES entry for custom images
         var zoom = document.getElementById("box_zoom").value;
         var dither = document.getElementById("box_dither").value;
-        if (dither=="" && img.dither) dither="bayer2";
+        if (dither=="" && img.dither) dither="floyd";
         if (dither=="no" || dither=="") dither=undefined;
         var mirror = document.getElementById("box_mirror").checked;
         var brightness = 0|document.getElementById("box_bright").value;

apps/clockbg/lib.js

@@ -4,8 +4,11 @@ exports.reload = function() {
   //let t = Date.now();
   settings = Object.assign({
     style : "randomcolor",
-    colors : ["#F00","#0F0","#00F"]
+    colors : ["#00f","#0bf","#0f7","#3f0","#ff0","#f30","#f07","#b0f"]
   },require("Storage").readJSON("clockbg.json",1)||{});
+  // if an array of arrays then we select one at random
+  if (settings.colors && settings.colors[0] instanceof Array)
+    settings.colors = settings.colors[Math.randInt(settings.colors.length)];
   if (settings.style=="image")
     settings.img = require("Storage").read(settings.fn);
   else if (settings.style=="randomcolor") {
@@ -68,10 +71,22 @@ exports.reload = function() {
   //console.log("bg",Date.now()-t);
 };
 
+/// Will load settings if they haven't already been loaded
+exports.load = function() {
+  if (settings===undefined)
+    exports.reload();
+}
+
+/// Remove settings and free memory - .load() must be called before drawing again
+exports.unload = function() {
+  settings = undefined;
+}
+
 // Fill a rectangle with the current background style, rect = {x,y,w,h}
 // eg require("clockbg").fillRect({x:10,y:10,w:50,h:50})
 //    require("clockbg").fillRect(Bangle.appRect)
 exports.fillRect = function(rect,y,x2,y2) {
+  if (!settings) return;
   if ("object"!=typeof rect) rect = {x:rect,y:y,w:1+x2-rect,h:1+y2-y};
   if (settings.img) {
     g.setClipRect(rect.x, rect.y, rect.x+rect.w-1, rect.y+rect.h-1).drawImage(settings.img,0,0,settings.imgOpt).setClipRect(0,0,g.getWidth()-1,g.getHeight()-1);