diff --git a/apps/clockbg/ChangeLog b/apps/clockbg/ChangeLog index f7c47d4da..026dc1aa0 100644 --- a/apps/clockbg/ChangeLog +++ b/apps/clockbg/ChangeLog @@ -1,2 +1,3 @@ 0.01: New App! -0.02: Moved settings into 'Settings->Apps' \ No newline at end of file +0.02: Moved settings into 'Settings->Apps' +0.03: Add 'Squares' option for random squares background \ No newline at end of file diff --git a/apps/clockbg/README.md b/apps/clockbg/README.md index 8f2fe3e9d..14bbeb7a7 100644 --- a/apps/clockbg/README.md +++ b/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 \ No newline at end of file diff --git a/apps/clockbg/lib.js b/apps/clockbg/lib.js index 0da62453c..c9b1fb1d2 100644 --- a/apps/clockbg/lib.js +++ b/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<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); } -}; - +}; \ No newline at end of file diff --git a/apps/clockbg/metadata.json b/apps/clockbg/metadata.json index 456590907..2221e99bd 100644 --- a/apps/clockbg/metadata.json +++ b/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"], diff --git a/apps/clockbg/screenshot2.png b/apps/clockbg/screenshot2.png new file mode 100644 index 000000000..819e8ca87 Binary files /dev/null and b/apps/clockbg/screenshot2.png differ diff --git a/apps/clockbg/settings.js b/apps/clockbg/settings.js index 05135a1b4..c39017262 100644 --- a/apps/clockbg/settings.js +++ b/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<{ - 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); + } }); }