From ae75c00ba14cf57ebab71c31d9411406a3a77b24 Mon Sep 17 00:00:00 2001 From: Gordon Williams Date: Tue, 21 May 2024 11:28:56 +0100 Subject: [PATCH] clockbg 0.03: Add 'Squares' option for random squares background --- apps/clockbg/ChangeLog | 3 ++- apps/clockbg/README.md | 14 ++++++++++---- apps/clockbg/lib.js | 20 +++++++++++++++----- apps/clockbg/metadata.json | 6 +++--- apps/clockbg/screenshot2.png | Bin 0 -> 3225 bytes apps/clockbg/settings.js | 33 ++++++++++++++++++++++++++++++--- 6 files changed, 60 insertions(+), 16 deletions(-) create mode 100644 apps/clockbg/screenshot2.png 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 0000000000000000000000000000000000000000..819e8ca87c8cbb4427c691ad8b4c998da526cd44 GIT binary patch literal 3225 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 ZXz{(n%UeDgHj=*vgm%Q;q1uj-^dGeA#|Hoa literal 0 HcmV?d00001 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); + } }); }