[clockbg] Colour picker shows incorrect colours

[WhelanB]

Affected hardware version

Bangle 2

Your firmware version

2v21.93

The bug

Describe the bug

The colour picker for the clockbg app appears to be incorrect. The colours that render on the menu do not align with the colour which is then set after selecting a colour. This seems to be an issue with the image generation on the getColorsImage function, potentially with the way the colours are set in the palette. Replacing the function with the following:

function getColorsImage(cols) {
  var b = Graphics.createArrayBuffer(16,16,4);
  b.setBgColor(cols).clearRect(1, 1, 14, 14);
  return "\0"+b.asImage("string");
}

returns the correct colours (and renders a slightly smaller rect, so that the colours have a black outline and do not clash with the menu colour if they are the same). I wasn't sure what the expected behaviour of the paletted version is (more efficient?) so didn't directly open a PR for the above

Incorrect colours:

Correct colours:

Expected behaviour

The colour I select in the solid colour option in the backgrounds menu in settings should then cause the Pebble clock to render in that colour.

Steps to reproduce

1. Navigate to the Settings app
2. Navigate to the Apps page
3. Open the Backgrounds app setting
4. Select the singular menu item
5. Select Solid Color
6. Select a colour from the list of colours which appear
7. Exit the settings app and return to a supported clockface (Pebble++)
8. Note that the background colour of the app does not match the selected colour

Installed apps

No response

[bobrippling]

We could take that fix you have and add it, although perhaps there's a deeper issue. @gfwilliams I think you're the most familiar with the settings colour code?

[WhelanB]

I avoided directly opening a PR as it looked like this commit that introduced the paletted version considered it more efficient - so didn't want to replace it with mine if there was a reason to go this way - though I haven't wrapped my head around why it uses an array:

1156ba6

but happy to use this fix if there's no problem with it!

[gfwilliams]

Thanks for the report!

getColorsImage uses an array because in the "Random Color" menu item it displays more than one colour in the list - so just replacing the function with what you suggest would break that - although extending your code to handle >2 color wouldn't be a big deal.

One issue would be that Graphics only does dithering when drawing to the screen itself, so using the 4 bit image and returning it means if at some point someone wanted to add a color option that needed dithering, it wouldn't render properly.

It looks like the reason the code didn't work right was actually a bug in g.asImage which put the palette in wrong - I've just put a fix in for this so it should now work on cutting edge builds.

I wonder whether that's good enough? I'll do a 2v22 release soon, so as soon as folks update to that the issue will be fixed.

[WhelanB]

Ah, I hadn't looked at the random colour feature in detail so didn't realise it would render multiple colours, that explains it!

I just tried the cutting edge firmware from the app loader and the colours seem to be rendering correctly, thank you for the quick fix!

[gfwilliams]

Great! So I think this is probably fixed now then.

Having the black border is maybe nice, but that could be added to the existing code