[Clock BG] Add gradient background

[RKBoss6]

This PR adds a vertical gradient background that runs in 50-60 ms (average of 10 timed tries), and adds settings menu for the gradient.
Settings also uses the colorpicker module for plasma, gradient, and random colors, to get any custom color combination you want directly from the watch.

[Copilot]

Pull request overview

Note

Copilot was unable to run its full agentic suite in this review.

Adds a new Gradient background option to Clock Backgrounds and expands Bangle.js 2 customization by using the colorpicker module for selecting colors/palettes.

Changes:

• Add gradient as a supported background style with corresponding generation logic.
• Update settings UI to use colorpicker for Solid Color / Random Color (Bangle.js 2) and add custom palette selection for Plasma/Gradient.
• Bump app version to 0.11 and update docs/changelog/screenshots.

Reviewed changes

Copilot reviewed 5 out of 6 changed files in this pull request and generated 6 comments.

Show a summary per file

File	Description
apps/clockbg/settings.js	Adds gradient option + custom colorpicker-based menus; updates style persistence rules
apps/clockbg/lib.js	Implements gradient background rendering in reload()
apps/clockbg/metadata.json	Version bump + adds screenshot7
apps/clockbg/README.md	Documents new Gradient and Blobs options; updates roadmap item
apps/clockbg/ChangeLog	Adds 0.11 entry for gradient + Bangle.js 2 colorpicker support

---

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

[RKBoss6]

This is good to go now!

[thyttan]

I'll ask you @gfwilliams to review this one.

[gfwilliams]

Gradients sound like a great idea - but there's some slightly crazy stuff in the code here (messing around with the colour string and parsing it base16) that I'm not super happy with.

• I believe you should be able to handle pretty much everything with g.toColor to parse the colours, and then g.blendColor if you need to get a color that sits somewhere between other colors.
• It also looks like some stuff is now disabled or for BANGLEJS2 only (what's the reasoning for this? colorpicker not working on Bangle.js 1?). I like the ability to choose colours but I think we should still have presets - for a lot of things where you have a range of colours, having a rainbow or gradient easily accessible seems really handy.
• I also really want to avoid if BANGLEJS2 stuff everywhere, if only because we're going to have to go through and change it all when Bangle.js 3 comes along. If colorpicker doesn't work on Bangle.js 1 maybe we need to fix that (just by making it work but it a very basic way).
• While I guess 50ms is acceptable, I think you should be able to do gradients a lot faster and tidier:

Just do kind of what you're doing, but pre-create a 4bpp greyscale image

(use https://www.espruino.com/Image+Converter and output as "Image Object") then add the palette.

And can work out the palette with blendColor super quickly: bg.palette=(new Uint16Array(16)).map((n,i)=>g.blendColor("#f00","#0f0",i/16));

bg = {
  width : 16, height : 16, bpp : 4,
 palette : (new Uint16Array(16)).map((n,i)=>g.blendColor("#f00","#0f0",i/16)),
  buffer : atob("AAAAAAAAAAARERERERERESIiIiIiIiIiMzMzMzMzMzNERERERERERFVVVVVVVVVVZmZmZmZmZmZ3d3d3d3d3d4iIiIiIiIiImZmZmZmZmZmqqqqqqqqqqru7u7u7u7u7zMzMzMzMzMzd3d3d3d3d3e7u7u7u7u7u//////////8=")
}

Above uses a simple 16x16x4bpp gradient with no noise - but I see you added some randomness so you could do that in the image too. Worth noting that on Bangle.js 3 you'll have 6bpp with dithering which'll be able to render this stuff much better.

... and maybe since it's then much faster, you could use more than 16x16px for the image which might make the dither look better?

[RKBoss6]

Thanks for all the pointers! Right now, the color picker module doesn't support bangle.js 1, so perhaps i'll get that in so we don't limit it by device. But for both devices, it still keeps the presets there and just adds a 'custom' option above them. Out of curiosity, how are you planning to make the pixel mapping? Is it going to be where 0,0 is an imaginary point off of the screen where the rectangle of the height and width meet, or will it be in the center when not in compatibility mode or something else entirely?

[gfwilliams]

Right now, the color picker module doesn't support bangle.js 1

It feels like you could have a variable for the currently selected item, and then use the btn handler to increment/decrement it (if the first argument==1 or ==3) and then accept if ==2. You wouldn't even have to check what Bangle you were on since on Bangle.js 2 the first argument won't be 1,2 or 3.

But for both devices, it still keeps the presets there

oh ok, I just saw this bit here and it looked like that wasn't the case: https://github.com/espruino/BangleApps/pull/4227/changes#diff-76ca0acb9bf7ae1fc186131a1205c12d36890916228b56f4b223f5d24beb0cf4R106-R120

Out of curiosity, how are you planning to make the pixel mapping? Is it going to be where 0,0 is an imaginary point off of the screen where the rectangle of the height and width meet

On Bangle.js 3? Yes, that's the plan. If you get a touch event and you draw something at the touch coordinates, it should be where your finger is - I think that's the only sensible option.

In the compatibility mode there's a 176x176 square of graphics you use and the touch coordinates are nudged to fit.

If you go into the developer console when on the web IDE and paste in Espruino.Config.set("EMU_BETA", 1); then when you connect to the Emulator you'll get an option for Bangle.js 3 if you want to try things out. It's still very easrly days as I don't have any kind of real hardware yet though.