Using arraybuffer changes colors of image

I was trying to use a image background for a clock. In order to prevent flickering, I wanted to use a buffer. However, when I draw the image background on the buffer, the image's colors are shifted.
With a buffer (brown colors):

let buf = Graphics.createArrayBuffer(120, 120, 4);
buf.drawImage(
 require("heatshrink").decompress(atob("nk84f/gkhkkh4cYosp8kY0cQ8kg4kYi+A5ds2E4Ap+1qkN23LgVFAp+1gXbtmxgAFP3dBtuy4eQhYFP+k240DoOsAp9O3dioHEhX+Ap9LyFwtlA0AFPomEyEG7ncsgFPoExzdt5cAAp/EgNh23ZqO0Ap9Ii1bluKjYFPwmDsu8jOh4gFPgE2gnhxEiAp+OgnAhEEh1OAp9Dg0biFI4AFPoNAOgMYwOBAp8XwHLtmwnAFP2tUhu25cCooFP2sC7ds2MAAp+7oNt2XDyELAp/0m3GgdB1gFPp27sVA4kK/wFPpeQuFsoGgAp9EwmQg3c7lkAp9AmObtvLgAFP4kBZwPZqO0Ap9Ii1bluKjYFPwmDsu8jOh4gFPgE2gnhxEiAp+OgnAhEEh1OAp9Dg0biFI4AFPoNAOgMYwOBAp8XwHLtmwnAFP2tUhu25cCooFP2sC7ds2MAAp+7oNt2XDyELAp/0m3GgdB1gFPp27sVA4kK/wFPpeQuFsoGgAp9EwmQg3c7lkAp9AmObtvLgCzP2kBZwPZqK5QpEWrctxUbWZ+0wdl3kZ0PLWZ8Am0E8OIkSzQgnAhEEhy5QocGjcQpHAWZ9BoCGBjGBwizPU4q5FApPFU4lEXIi/FAoinFXIoFJxanEgi5E4gFJU4q5FApOOU4q5FApKnFXIoFJoinEsK5EwIFJU4q5FApKnF2q5EooFJU4q5FApO0U4nLXIkLApIA==")),
  0,
  0,
  { scale: 2 }
);
g.drawImage(
  buf,
  0,
  0,
  {scale: 2}
);

Drawing directly to the screen (intended colors):

g.drawImage(
 require("heatshrink").decompress(atob("nk84f/gkhkkh4cYosp8kY0cQ8kg4kYi+A5ds2E4Ap+1qkN23LgVFAp+1gXbtmxgAFP3dBtuy4eQhYFP+k240DoOsAp9O3dioHEhX+Ap9LyFwtlA0AFPomEyEG7ncsgFPoExzdt5cAAp/EgNh23ZqO0Ap9Ii1bluKjYFPwmDsu8jOh4gFPgE2gnhxEiAp+OgnAhEEh1OAp9Dg0biFI4AFPoNAOgMYwOBAp8XwHLtmwnAFP2tUhu25cCooFP2sC7ds2MAAp+7oNt2XDyELAp/0m3GgdB1gFPp27sVA4kK/wFPpeQuFsoGgAp9EwmQg3c7lkAp9AmObtvLgAFP4kBZwPZqO0Ap9Ii1bluKjYFPwmDsu8jOh4gFPgE2gnhxEiAp+OgnAhEEh1OAp9Dg0biFI4AFPoNAOgMYwOBAp8XwHLtmwnAFP2tUhu25cCooFP2sC7ds2MAAp+7oNt2XDyELAp/0m3GgdB1gFPp27sVA4kK/wFPpeQuFsoGgAp9EwmQg3c7lkAp9AmObtvLgCzP2kBZwPZqK5QpEWrctxUbWZ+0wdl3kZ0PLWZ8Am0E8OIkSzQgnAhEEhy5QocGjcQpHAWZ9BoCGBjGBwizPU4q5FApPFU4lEXIi/FAoinFXIoFJxanEgi5E4gFJU4q5FApOOU4q5FApKnFXIoFJoinEsK5EwIFJU4q5FApKnF2q5EooFJU4q5FApO0U4nLXIkLApIA==")),
  0,
  0,
  { scale: 4 }
);

Is there any way to make the colors be the intended ones?

2 Attachments

I think this is caused due to the limited palette provided. Is there any way to customize the palette used in the arraybuffer?

Okay, at this point I've moved to using Bangle.setLCDMode("80x80");. However, I'm still stuck with the 8bit web palette, which looks bad. Is there any way to use another one?

I looked into this some more, and it looks hardcoded. Is there any way to access the graphicsInternal object from JS?

In the end, I think I'll use my own arraybuffer with a higher BPP and a lower resolution.
Edit: I ended up being forced to use the 8 bit web palette, so I just changed all of my images to use those colors.

The issue is that when you create a 4 bit graphics, I believe it maps the colors values right through - but when you draw the image, 4 bits is treated as the Mac color palette.

The easiest thing to do is to supply a palette when drawing your 4 bit buffer:

let buf = Graphics.createArrayBuffer(120, 120, 4, {msb:true});
let bufimg = {
  with:120, height:120, bpp:4, palette = new Uint16Array([...]), buffer:buf.buffer
}

g.drawImage(
  bufimg,
  0,
  0,
  {scale: 2}
);

and that might sort you out...