diff --git a/apps/clockbg/ChangeLog b/apps/clockbg/ChangeLog index a370befc0..7350c6bac 100644 --- a/apps/clockbg/ChangeLog +++ b/apps/clockbg/ChangeLog @@ -5,4 +5,5 @@ 'Plasma' generative background 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) \ No newline at end of file +0.06: 25% speed improvement if Math.randInt exists (2v25 fw) +0.07: Added 'rings'and 'tris' background styles \ No newline at end of file diff --git a/apps/clockbg/README.md b/apps/clockbg/README.md index 6573ae165..4a3cd70da 100644 --- a/apps/clockbg/README.md +++ b/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 diff --git a/apps/clockbg/lib.js b/apps/clockbg/lib.js index 256f2f372..0b8fd5996 100644 --- a/apps/clockbg/lib.js +++ b/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<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<g.toColor(c))); settings.img = bg; - settings.imgOpt = {scale:16}; - delete settings.colors; + settings.imgOpt = {scale:g.getWidth()/11}; } 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}; - delete settings.colors; + settings.imgOpt = {scale:g.getWidth()/16}; } + 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}) @@ -62,4 +81,9 @@ exports.fillRect = function(rect,y,x2,y2) { console.log("clockbg: No background set!"); g.setBgColor(g.theme.bg).clearRect(rect); } -}; \ No newline at end of file +}; + +// load background +exports.reload(); + +//exports.fillRect(Bangle.appRect); // testing \ No newline at end of file diff --git a/apps/clockbg/metadata.json b/apps/clockbg/metadata.json index ba6fb6712..1824f23b2 100644 --- a/apps/clockbg/metadata.json +++ b/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"], diff --git a/apps/clockbg/screenshot4.png b/apps/clockbg/screenshot4.png new file mode 100644 index 000000000..d5d64a602 Binary files /dev/null and b/apps/clockbg/screenshot4.png differ diff --git a/apps/clockbg/screenshot5.png b/apps/clockbg/screenshot5.png new file mode 100644 index 000000000..221caa33d Binary files /dev/null and b/apps/clockbg/screenshot5.png differ diff --git a/apps/clockbg/settings.js b/apps/clockbg/settings.js index 22256478e..38a4d6ef5 100644 --- a/apps/clockbg/settings.js +++ b/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); + }, }); }