Posted at 2023-01-18 by @halemmerich

I have had this exact problem on imageclock while working with 4 bit. Copying over my solution from there yields the correct result, but it seems a bit complicated. It essentially uses a palette to force the colors to be correct. I suspect there is an easier way.

    let colormap={
      "#000":0,
      "#00f":1,
      "#0f0":2,
      "#0ff":3,
      "#f00":4,
      "#f0f":5,
      "#ff0":6,
      "#fff":7
    };

    let palette = new Uint16Array([
      0x0000, //black #000
      0x001f, //blue #00f
      0x07e0, //green #0f0
      0x07ff, //cyan #0ff
      0xf800, //red #f00
      0xf81f, //magenta #f0f
      0xffe0, //yellow #ff0
      0xffff, //white #fff
      0xffff, //white
      0xffff, //white
      0xffff, //white
      0xffff, //white
      0xffff, //white
      0xffff, //white
      0xffff, //white
      0xffff, //white
    ]);

    let g2 = Graphics.createArrayBuffer(g.getWidth() * 2, g.getHeight(), 4, {msb:true});
    let g2img = { width:g2.getWidth(), height:g2.getHeight(), bpp:4, buffer:g2.buffer, palette: palette };
    let R = Bangle.appRect;
    let x = R.w / 2;
    let y = R.y + R.h / 2;
    let animInterval;
    let animate = function(step) {
      if (animInterval) clearInterval(animInterval);
      slideX = -g2.getWidth()/2;
      animInterval = setInterval(function() {
        slideX += step;
        let stop = false;
        if (slideX>=0) {
          slideX=0;
          stop = true;
        }
        g.drawImage(g2img, slideX, 0);
        if (stop) {
          clearInterval(animInterval);
          animInterval=undefined;
        }
      }, 50);
    };
    g.reset().setBgColor("#0f0").clearRect(R); // clear whole background
    g.setFontAlign(0, 0).setFont("Vector:30").drawString("WIBBLE", g.getWidth()/2, g.getHeight()/2);
    let screengrab = g.asImage();
    // Draw to offscreen buffer
    g2.setColor(colormap["#f00"]).fillRect(0,0,g2.getWidth(),g2.getHeight());
    g2.setColor(colormap["#fff"]).setFontAlign(0, 0).setFont("Vector:30").drawString("FLIBBLE", g2.getWidth()/4, g2.getHeight()/2);
    g2.drawImage(screengrab, g2.getWidth()/2, 0);
    animate(3);

Edit: The forum search links in the comments are somehow autogenerated from the #colorvalues

Posted at 2023-01-19 by Sir_Indy

Thanks for your help @halemmerich, that does work, but I agree it feels like there could be a simpler solution.
Searching for 'BPP' in the forum (should have done that before I posted, sorry), shows quite a few people have had a similar problem.
It all seems to stem from g.asImage() giving a 3 bpp buffer, but if I try to createArrayBuffer with 3 bpp it says: Uncaught Error: Invalid BPP.

Posted at 2023-01-19 by @gfwilliams

Ok, just to try and strip this down to the actual problem, it's this?

let g2 = Graphics.createArrayBuffer(g.getWidth() * 2, g.getHeight(), 8, {msb:true});
let g2img = { width:g2.getWidth(), height:g2.getHeight(), bpp:8, buffer:g2.buffer };

g.reset().setBgColor("#0f0").clear();
// Screen is GREEN
let screengrab = g.asImage();
// Draw to offscreen buffer and back to screen
g2.drawImage(screengrab, 0, 0);
g.drawImage(g2img, 0, 0);
// Screen is BLUE

The issue is that when drawing a 3bpp image onto a 8bpp image, Espruino doesn't really know what to do about mapping colours - so it just copies the numeric color value straight across.

As @halemmerich noted, the best method is really to try and use a 4bpp graphics (which saves a bunch of memory over 8bpp), and to then explicitly tell Espruino what color palette to use for it (because normally for 4bpp it uses the Mac color palette).

His code works great, but you can also use toColor to avoid the cryptic constants:

let g2 = Graphics.createArrayBuffer(g.getWidth() * 2, g.getHeight(), 4, {msb:true});
let g2img = { 
  width:g2.getWidth(), 
  height:g2.getHeight(), 
  bpp:4, 
  buffer:g2.buffer,
  palette : new Uint16Array([
      g.toColor("#000"),
      g.toColor("#00f"),
      g.toColor("#0f0"),
      g.toColor("#0ff"),
      g.toColor("#f00"),
      g.toColor("#f0f"),
      g.toColor("#ff0"),
      g.toColor("#fff"),
      0,0,0,0,0,0,0,0,
    ])};

g.reset().setBgColor("#0f0").clear();
// Screen is GREEN
let screengrab = g.asImage();
// Draw to offscreen buffer and back to screen
g2.drawImage(screengrab, 0, 0);
g.drawImage(g2img, 0, 0);
// Screen is GREEN still

I've just added some color mappings from 3->4 and 3->8 bit into the Espruino firmware, and this should fix your original code on 8 bit, and will work on 4 bit too

... but then it'll fail on older firmwares. If you use my or @halemmerich's code then at least it'll be backwards compatible.

It's also worth adding that g2.setColor(colormap["#f00"]) isn't needed. g2.setColor("#f00") should work just fine - it'll search the color palette to find the closest matching color

Posted at 2023-01-19 by @gfwilliams

... and yes, having a 3bpp arraybuffer graphics would probably be preferable for memory usage and for ensuring a nice clean color mapping.

But doing unaligned 3 bit memory accesses is not super easy (or fast), so right now ArrayBuffer graphics only supports BPPs that are byte-aligned (1,2,4,8,16,24,32).

Posted at 2023-01-20 by Sir_Indy

Thanks for explaining that Gordon, I think I understand better now. The new color mapping will be helpful to make sure no one else trips up on this in the future, but you're right, I'll do it with a palette so it works more broadly.

Posted at 2023-01-23 by Sir_Indy

So now I've got colours working correctly (thanks again Hal and Gordon), I need to work on speed. See code below, but in the emulator, doing a full screen wipe takes ~6ms/frame. Exactly the same on the actual B2 takes ~228ms/frame, i.e. very very slow.

Is there anything I can do to speed this up, or is that just how long it takes to draw the whole screen? Doing only part of the screen definitely speeds things up, but not enough to look smooth.

let colormap={
  0: 0,
  31: 1,
  2016: 2,
  2047: 3,
  63488: 4,
  63519: 5,
  65504: 6,
  65535: 7
};

let palette = new Uint16Array([
  g.toColor("#000"),
  g.toColor("#00f"),
  g.toColor("#0f0"),
  g.toColor("#0ff"),
  g.toColor("#f00"),
  g.toColor("#f0f"),
  g.toColor("#ff0"),
  g.toColor("#fff"),
  0,0,0,0,0,0,0,0
]);

let animInterval;
let time_array = []

let animate = function(step) {
  if (animInterval) clearInterval(animInterval);
  slideX = -R.w;
  animInterval = setInterval(function() {
    let time_start = getTime()
    slideX += step;
    let stop = false;
    if (slideX>=0) {
      slideX=0;
      stop = true;
    }
    g.drawImage(g2img, slideX, R.y);
    if (stop) {
      clearInterval(animInterval);
      animInterval=undefined;
      print(time_array)
      print(time_array.reduce((a, b) => a + b, 0) / time_array.length)
    }
    time_array.push(Math.round((getTime() - time_start)*1000))
  }, 20);
};

Bangle.loadWidgets();
Bangle.drawWidgets();
let R = Bangle.appRect;
// R.h = 50
let g2 = Graphics.createArrayBuffer(R.w * 2, R.h, 4, {msb:true});
let g2img = { width:g2.getWidth(), height:g2.getHeight(), bpp:4, buffer:g2.buffer, palette: palette };
g2.setBgColor(colormap[g.theme.bg]);
g2.setColor(colormap[g.theme.fg]);

g.setBgColor("#F00").clearRect(R);
g.setColor("#0F0").setFont('Vector:15').setFontAlign(0, 0).drawString("OLD SCREEN", R.w/2, R.h/2);
let screengrab = g.asImage();
g2.drawImage(screengrab, R.w - R.x, -R.y);
g2.clearRect(R);
g2.setFont('Vector:15').setFontAlign(0, 0).drawString("NEW SCREEN", R.w/2, R.h/2);

animate(4);

Posted at 2023-01-24 by @gfwilliams

Which bit is slow for you? The drawImage in the animate function?

It's not helping that you have an image double the size of the screen - and it'll be iterating through every pixel (even the ones that are offscreen) I think.

You could have just a single fullscreen graphics (for the new screen) and could then use g.scroll to scroll the existing screen contents off, and then draw the new graphics on? That could help by a factor of 2 or so I guess.

It seems slightly counter-intuitive, but you could also use http://www.espruino.com/Reference#l_Graphics_drawImages to draw just the single image, but just in the small area that's new.

... so for instance if you scroll by 8 pixels, you do g.scroll(-8,0) and then g.drawImages([{x:R.x-8, y:0, ...}], {x:R.w-8,y:0,width:8,height:R.h})

It's slightly slower than drawImage but it allows you to render just an area of the image, which could help in this case

Posted at 2023-01-31 by Sir_Indy

Thanks for your suggestions Gordon, I tried them all, but in the end redrawing the entire screen was too slow to look good. Your g.scroll and g.drawImages solution was the best, but moved the widgets as well which wasn't ideal.
I've abandoned the idea of a general function to wipe to a different screen, and opened espruino/BangleApps#2547 with the much simpler solution of just clearing the screen and redrawing the text for this clock. I'll have to come up with some more imaginative animations for my other clocks!

Posted at 2023-02-01 by @gfwilliams

Your g.scroll and g.drawImages solution was the best, but moved the widgets as well which wasn't ideal.

Ahh - you can use g.setClipRect to fix that :)

Oh well, glad you got something workable anyway