background images

There are some simple examples like the minion clock

And in fact you can do a full res image - you just write it to Bangle.js's storage, and then blit it direct from flash with g.drawImage(require("Storage").read("myi­mg.img"))

But there's no easy way to do flicker-free rendering since there's not enough RAM for a full-screen buffer. In your tux example there are areas of solid color, so nothing stops you from just drawing the image on its own and then rendering the clock areas separately.

There are some options though:

• Create an offscreen buffer with less bits per pixel. For instance use 2 bits - you can still specify custom colors for each of the 4 colors so could do something pretty interesting:

  b = Graphics.createArrayBuffer(240,240,2,{ms­b:true});
  for (var i=0;i<4;i++) {
  b.setColor(i);
  b.fillRect(10+30*i,10+30*i,100+30*i,100+­30*i);
  }
  var pal = new Uint16Array([
  0x0000,
  0xF800,
  0x001F,
  0xFFFF
  ]);
  g.drawImage({width:240,height:240,bpp:2,­palette:pal,buffer:b.buffer});
  

• Create a low-res offscreen buffer:

  b = Graphics.createArrayBuffer(120,120,8,{ms­b:true});
  for (var i=0;i<128;i++) {
  b.setColor(i);
  b.fillRect(i,i,30+i,30+i);
  }
  g.drawImage({width:120,height:120,bpp:8,­buffer:b.buffer},0,0,{scale:2});
  

• Or render in slices, but that could be slow to update. You could probably do pretty well with a combination of the 3 though - for instance 8 bit with a custom palette, also sliced such that you could update the time by changing just a few slices at once.

I've been considering adding a composeImage function, if you think there's interest? Basically allowing you to render one image on top of another, so you could have a low-bpp Graphics instance with 0 as transparent, rendering on top of a 16 bit 240x240 image rendered direct from flash.