clockbg 0.03: Add 'Squares' option for random squares background

apps/clockbg/ChangeLog

@@ -1,2 +1,3 @@
 0.01: New App!
-0.02: Moved settings into 'Settings->Apps'
+0.02: Moved settings into 'Settings->Apps'
+0.03: Add 'Squares' option for random squares background

apps/clockbg/README.md

@@ -9,8 +9,12 @@ By default the app provides just a red/green/blue background but it can easily b
 
 You can either:
 
-* Go to [the Clock Backgrounds app](https://banglejs.com/apps/?id=clockbg) in the App Loader and upload backgrounds
-* Go to the `Backgrounds` app on the Bangle itself, and choose between solid color, random colors, or any uploaded images.
+* Go to [the Clock Backgrounds app](https://banglejs.com/apps/?id=clockbg) in the App Loader and use pre-made image backgrounds (or upload your own)
+* Go to the `Backgrounds` app on the Bangle itself, and choose between:
+  * `Solid Color` - one color that never changes
+  * `Random Color` - a new color every time the clock starts
+  * `Image` - choose from a previously uploaded image
+  * `Squares` - a randomly generated pattern of squares in the selected color palette
 
 
 ## Usage in code
@@ -33,8 +37,10 @@ ensure that the clock background library is automatically loaded.
 
 ## Features to be added
 
-This library/app is still pretty basic right now, but a few features could be added that would really improve functionality:
+A few features could be added that would really improve functionality:
 
-* Support for >1 image, and choosing randomly between them
+* When 'fast loading', 'random' backgrounds don't update at the moment
+* Support for >1 image to be uploaded (requires some image management in `interface.html`), and choose randomly between them
 * Support for gradients (random colors)
+* More types of auto-generated pattern (as long as they can be generated quickly or in the background)
 * Storing 'clear' areas of uploaded images so clocks can easily position themselves

apps/clockbg/lib.js

@@ -4,10 +4,21 @@ let settings = Object.assign({
 },require("Storage").readJSON("clockbg.json")||{});
 if (settings.style=="image")
   settings.img = require("Storage").read(settings.fn);
-if (settings.style=="randomcolor") {
+else if (settings.style=="randomcolor") {
   settings.style = "color";
-  var n = (0|(Math.random()*settings.colors.length)) % settings.colors.length;
+  let n = (0|(Math.random()*settings.colors.length)) % settings.colors.length;
   settings.color = settings.colors[n];
+  delete settings.colors;
+} else if (settings.style=="squares") {
+  settings.style = "image";
+  let bpp = (settings.colors.length>4)?4:2;
+  let bg = Graphics.createArrayBuffer(11,11,bpp,{msb:true});
+  E.mapInPlace(bg.buffer, bg.buffer, ()=>Math.random()*256); // random pixels
+  bg.palette = new Uint16Array(1<<bpp);
+  bg.palette.set(settings.colors.map(c=>g.toColor(c)));
+  settings.img = bg.asImage("string");
+  settings.imgOpt = {scale:16};
+  delete settings.colors;
 }
 
 // Fill a rectangle with the current background style, rect = {x,y,w,h}
@@ -16,12 +27,11 @@ if (settings.style=="randomcolor") {
 exports.fillRect = function(rect,y,x2,y2) {
   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).setClipRect(0,0,g.getWidth()-1,g.getHeight()-1);
+    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);
   } else if (settings.style == "color") {
     g.setBgColor(settings.color).clearRect(rect);
   } else {
     console.log("clockbg: No background set!");
     g.setBgColor(g.theme.bg).clearRect(rect);
   }
-};
-
+};

apps/clockbg/metadata.json

@@ -1,10 +1,10 @@
 { "id": "clockbg",
   "name": "Clock Backgrounds",
   "shortName":"Backgrounds",
-  "version": "0.02",
-  "description": "Library that allows clocks to include a custom background, from a library or uploaded.",
+  "version": "0.03",
+  "description": "Library that allows clocks to include a custom background (generated on demand or uploaded).",
   "icon": "app.png",
-  "screenshots": [{"url":"screenshot.png"}],
+  "screenshots": [{"url":"screenshot.png"},{"url":"screenshot2.png"}],
   "type": "module",
   "readme": "README.md",
   "provides_modules" : ["clockbg"],

apps/clockbg/settings.js

@@ -9,7 +9,7 @@ function saveSettings() {
     delete settings.fn;
   if (settings.style!="color")
     delete settings.color;
-  if (settings.style!="randomcolor")
+  if (settings.style!="randomcolor" && settings.style!="squares")
     delete settings.colors;
   require("Storage").writeJSON("clockbg.json", settings);
 }
@@ -18,10 +18,11 @@ function getColorsImage(cols) {
   var bpp = 1;
   if (cols.length>4) bpp=4;
   else if (cols.length>2) bpp=2;
-  var b = Graphics.createArrayBuffer(16*cols.length,16,bpp);
+  var w = (cols.length>8)?8:16;
+  var b = Graphics.createArrayBuffer(w*cols.length,16,bpp);
   b.palette = new Uint16Array(1<<bpp);
   cols.forEach((c,i)=>{
-    b.setColor(i).fillRect(i*16,0,i*16+15,15);
+    b.setColor(i).fillRect(i*w,0,i*w+w-1,15);
     b.palette[i] = g.toColor(c);
   });
   return "\0"+b.asImage("string");
@@ -49,6 +50,7 @@ function showModeMenu() {
       var cols = [
         ["#F00","#0F0","#FF0","#00F","#F0F","#0FF"],
         ["#F00","#0F0","#00F"],
+        // Please add some more!
       ];
       var menu =  {"":{title:/*LANG*/"Colors", back:showModeMenu}};
       cols.forEach(col => {
@@ -78,6 +80,31 @@ function showModeMenu() {
         E.showAlert("Please use App Loader to upload images").then(showModeMenu);
       }
     },
+    /*LANG*/"Squares" : function() {
+      /*
+      a = new Array(16);
+      a.fill(0);
+      print(a.map((n,i)=>E.HSBtoRGB(0 + i/16,1,1,24).toString(16).padStart(6,0).replace(/(.).(.).(.)./,"\"#$1$2$3\"")).join(","))
+      */
+      var cols = [ // list of color palettes used as possible square colours - either 4 or 16 entries
+        ["#00f","#05f","#0bf","#0fd","#0f7","#0f1","#3f0","#9f0","#ff0","#f90","#f30","#f01","#f07","#f0d","#b0f","#50f"],
+        ["#0FF","#0CC","#088","#044"],
+        ["#FFF","#FBB","#F66","#F44"],
+        ["#FFF","#BBB","#666","#000"]
+        // Please add some more!
+      ];
+      var menu =  {"":{title:/*LANG*/"Squares", back:showModeMenu}};
+      cols.forEach(col => {
+        menu[getColorsImage(col)] = () => {
+          settings.style = "squares";
+          settings.colors = col;
+          console.log(settings);
+          saveSettings();
+          showMainMenu();
+        };
+      });
+      E.showMenu(menu);
+    }
   });
 }