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("myimg.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,{msb: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,{msb: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.
Espruino is a JavaScript interpreter for low-power Microcontrollers. This site is both a support community for Espruino and a place to share what you are working on.
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("myimg.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:
Create a low-res offscreen buffer:
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 with0
as transparent, rendering on top of a 16 bit 240x240 image rendered direct from flash.