clockbg 0.07: Added 'rings'and 'tris' background styles

apps/clockbg/ChangeLog

@@ -6,3 +6,4 @@
       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

apps/clockbg/README.md

@@ -16,6 +16,8 @@ You can either:
   * `Image` - choose from a previously uploaded image
   * `Squares` - a randomly generated pattern of squares in the selected color palette
   * `Plasma` - a randomly generated 'plasma' pattern of squares in the selected color palette (random noise with a gaussian filter applied)
+  * `Rings` - randomly generated rings in the selected color palette
+  * `Tris` - randomly generated overlapping triangles in the selected color palette
 
 
 ## Usage in code

apps/clockbg/lib.js

@@ -5,14 +5,35 @@ exports.reload = function() {
   settings = Object.assign({
     style : "randomcolor",
     colors : ["#F00","#0F0","#00F"]
-  },require("Storage").readJSON("clockbg.json")||{});
+  },require("Storage").readJSON("clockbg.json",1)||{});
   if (settings.style=="image")
     settings.img = require("Storage").read(settings.fn);
   else if (settings.style=="randomcolor") {
     settings.style = "color";
     let n = (0|(Math.random()*settings.colors.length)) % settings.colors.length;
     settings.color = settings.colors[n];
-    delete settings.colors;
+  } else if (settings.style=="rings") { // 45 ms
+    settings.style = "image";
+    let bg = Graphics.createArrayBuffer(g.getWidth(),g.getHeight(),1,{msb:true});
+    var x,y,r,ri=Math.randInt,s=bg.getWidth()-20;
+    for (var i=0;i<10;i++) {
+      x = 10+ri(s);y=10+ri(s);r=10+ri(40);
+      bg.drawCircle(x,y,r).drawCircle(x,y,r-1).drawCircle(x,y,r-2).drawCircle(x,y,r-3);
+    }
+    bg.palette = new Uint16Array([g.toColor(settings.colors[0]),g.toColor(settings.colors[1])]);
+    settings.img = bg;
+    settings.imgOpt = {};
+  } else if (settings.style=="tris") { // 58ms
+    settings.style = "image";
+    let cols = settings.colors, ri = Math.randInt, r = ri(settings.colors.length), bpp = (cols.length>4)?4:2;
+    cols = cols.slice(r).concat(cols.slice(0,r)); // rotate palette
+    let bg = Graphics.createArrayBuffer(88,88,bpp,{msb:true});
+    bg.palette = new Uint16Array(1<<bpp);
+    bg.palette.set(cols.map(c=>g.toColor(c)));
+    let c = cols.length-1, rp = (function(r){"ram";return r()-10}).bind(null,ri.bind(null,bg.getWidth()+20)), a = [0,0,0,0,0,0];
+    for (var i=1;i<9;i++) bg.setColor(1+ri(c)).fillPoly(a.map(rp));
+    settings.img = bg;
+    settings.imgOpt = {scale:g.getWidth()/88};
   } else if (settings.style=="squares") { // 32ms
     settings.style = "image";
     let bpp = (settings.colors.length>4)?4:2;
@@ -24,8 +45,7 @@ exports.reload = function() {
     bg.palette = new Uint16Array(1<<bpp);
     bg.palette.set(settings.colors.map(c=>g.toColor(c)));
     settings.img = bg;
-    settings.imgOpt = {scale:16};
+    settings.imgOpt = {scale:g.getWidth()/11};
-    delete settings.colors;
   } else if (settings.style=="plasma") { // ~47ms
     settings.style = "image";
     let bg = Graphics.createArrayBuffer(16,16,4,{msb:true});
@@ -42,12 +62,11 @@ exports.reload = function() {
     bg.palette = new Uint16Array(16);
     bg.palette.set(settings.colors.map(c=>g.toColor(c)));
     settings.img = bg;
-    settings.imgOpt = {scale:11};
+    settings.imgOpt = {scale:g.getWidth()/16};
-    delete settings.colors;
   }
+  delete settings.colors; // not needed now
   //console.log("bg",Date.now()-t);
 };
-exports.reload();
 
 // 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})
@@ -63,3 +82,8 @@ exports.fillRect = function(rect,y,x2,y2) {
     g.setBgColor(g.theme.bg).clearRect(rect);
   }
 };
+
+// load background
+exports.reload();
+
+//exports.fillRect(Bangle.appRect); // testing

apps/clockbg/metadata.json

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

apps/clockbg/settings.js

@@ -2,14 +2,14 @@
   let settings = Object.assign({
     style : "randomcolor",
     colors : ["#F00","#0F0","#00F"]
-  },require("Storage").readJSON("clockbg.json")||{});
+  },require("Storage").readJSON("clockbg.json",1)||{});
 
   function saveSettings() {
     if (settings.style!="image")
       delete settings.fn;
     if (settings.style!="color")
       delete settings.color;
-    if (!["randomcolor","squares","plasma"].includes(settings.style))
+    if (!["randomcolor","squares","plasma","rings","tris"].includes(settings.style))
       delete settings.colors;
     require("Storage").writeJSON("clockbg.json", settings);
   }
@@ -127,7 +127,48 @@
           };
         });
         E.showMenu(menu);
-      }
+      },
+      /*LANG*/"Rings" : function() {
+        var cols = [ // list of color palettes used as possible square colours - 2 entries
+          ["#ff0","#f00"], // yellow/red
+          ["#0ff","#000"], // cyan/blue
+          ["#888","#000"], // grey/black
+          ["#888","#fff"], // grey/white
+          ["#444","#0f0"], // grey/green
+          ["#444","#f0f"], // grey/purple
+          // Please add some more!
+        ];
+        var menu =  {"":{title:/*LANG*/"Rings", back:showModeMenu}};
+        cols.forEach(col => {
+          menu[getColorsImage(col)] = () => {
+            settings.style = "rings";
+            settings.colors = col;
+            saveSettings();
+            showMainMenu();
+          };
+        });
+        E.showMenu(menu);
+      },
+      /*LANG*/"Tris" : function() {
+        var cols = [ // 2/4/8/16 (8/16 both use 4bpp)
+          ["#00f","#05f","#0bf","#0fd","#0f7","#0f1","#3f0","#9f0","#ff0","#f90","#f30","#f01","#f07","#f0d","#b0f","#50f"],
+          ["#00f","#0bf","#0f7","#3f0","#ff0","#f30","#f07","#b0f"],
+          ["#0ef","#6f0","#f10","#90f"],
+          ["#09f","#1f0","#f60","#e0f"],
+          ["#000","#444","#888","#fff"]
+          // Please add some more!
+        ];
+        var menu =  {"":{title:/*LANG*/"Colors", back:showModeMenu}};
+        cols.forEach(col => {
+          menu[getColorsImage(col)] = () => {
+            settings.style = "tris";
+            settings.colors = col;
+            saveSettings();
+            showMainMenu();
+          };
+        });
+        E.showMenu(menu);
+      },
     });
   }