Request for comments: Customizable image based watchface

I have managed to add some features and squeeze some additional performance out of the watchface. Using it daily is quite possible now. To do that, I had to render part of the watchface to a buffer, to be able to overlay it with analog hands without having to redraw the whole thing on every refresh.
I did however not manage to create a working solution with a buffer bit depth other than 16 bit. I expected 4 bit to be enough for Bangle 2, but that garbled all colors.
I have also tried using 8 bit color, but had the same problem as with 4 bit, just other wrong colors.
In essence I am trying to do something like this:

var img16 = { width : 16, height : 16, bpp : 16, transparent : 1, buffer : require("heatshrink").decompress(atob("A­A//AA34gABFgEfAIwf/D70H/4BG8ABF/EfAIv/8A­BFD/4ffgEQAIsEgABFwABGwgBGD/4ffwkfAIuH8A­BF/kQAIv/+ABFD/4ffA"))};
var img3 = { width : 16, height : 16, bpp : 3, buffer : require("heatshrink").decompress(atob("g­EP/+SoVJAtNt2mS23d2wFpA"))};
var b = Graphics.createArrayBuffer(176,176,8);

b.drawImage(img16,0,0,{scale:5});//top left in buffer
b.drawImage(img3,0,96,{scale:5});//botto­m left in buffer
g.drawImage(b.asImage());
g.drawImage(img16,96,0,{scale:5});//top right direct
g.drawImage(img3,96,96,{scale:5});//bott­om right direct

Changing the bit depth of the b buffer to 16 makes this example work just fine. I could not get it to work correctly for 8 bit.
4 bit color with a transparent color defined would use the minimum possible amount of RAM, but that probably needs a palette and matching conversion of the images used in the watchface?
If a 4 bit palette for drawing the contents of b to g gives me correct colors, does dithering of images with bigger bit depths still work when drawing to the 4 bit buffer?

3 Attachments