Dithering for clocks, etc

With your help I now have only one image per number and can colorize the border and inside with every possible color that can be represented with 2x2 dithering.

Take a look at the number 9 I attached. It consists only of the 8 bangle js 2 colors. The background is red and will be set to transparent, the shadow has a color of it's own. The border and the inside each consist of 3 different colors. The image is then converted with the espruino online converter to 3 bit image object with nearest color.

Then only the base64 encoded buffer is transformed to binary and copied to the watch. That seemed to be the only way to reference it from flash memory but still be able to set the palette:

var img9 = 
{
  width : 98, height : 100, bpp : 3,
  transparent: 4,
  buffer : require("Storage").read("9.bin")
};

var palBottom = new Uint16Array(E.toArrayBuffer(E.toFlatString(new Uint16Array([
  g.toColor("#000"),
  g.toColor("#000"),
  g.toColor("#F00"),
  g.toColor("#FF0"),
  g.toColor("#00F"),
  g.toColor("#000"),
  g.toColor("#FF0"),
  g.toColor("#000"),
  ]).buffer)));

Also take a look at the array conversion for the palette. This was the only way to create a flat string, because using it without the conversion on a 8 color pallete like this:

var palBottom = new Uint16Array([
  g.toColor("#000"),
  g.toColor("#000"),
  g.toColor("#F00"),
  g.toColor("#FF0"),
  g.toColor("#00F"),
  g.toColor("#000"),
  g.toColor("#FF0"),
  g.toColor("#000"),
  ]);

will give the error XXX when drawing the image:

Uncaught Error: Palette specified, but must be a flat Uint16Array of 2,4,8,16,256 elements
 at line 12 col 28
  g.drawImage(imgUR, 75, 77);

2 Attachments