Graphics.createCallback in Bangle.js 1 vs 2 | Vector Font | Font converter

Hi,

1: Bangle.js 1 display can't be read back from - getPixel always returns 0 in Bangle 1, which is why you're seeing different values. You'd have to use an offscreen buffer.

Also, I'm afraid using createCallback that way, while really neat, is going to be pretty slow on the actual device :(

You could potentially do something different: Have 2x 1bpp ArrayBuffer graphics, render to each, and then XOR them together.

This won't work in the emulator but something like this would be really fast:

var W = g.getWidth();
var H = g.getHeight()-24;
var center = {x:W/2, y:H/2};
var scale = 1;
var layer1 = Graphics.createArrayBuffer(W,H,1,{msb:tr­ue});
var layer2 = Graphics.createArrayBuffer(W,H,1,{msb:tr­ue});
  

var c = E.compiledC(`
// void combine(int, int, int)
void combine(int len, int *dst, int *src){
  len = len>>2;
  while (len--) {
    *dst ^= *src;
    dst++;
    src++;
  }
}
`);
  
function draw() {
  var hour = 12;
  var minutes = 34;
  
  layer1.fillEllipse(center.x - 5 * scale, center.y - 70 * scale, center.x + 160 * scale, center.y + 90 * scale);
  layer2.setFontAlign(1, 0).setFont("Vector", 90 * scale);
  layer2.drawString(hour, center.x + 32 * scale, center.y - 31 * scale);
  layer2.drawString(minutes, center.x + 32 * scale, center.y + 46 * scale);
  
  var l1ptr = E.getAddressOf(layer1.buffer, true);
  var l2ptr = E.getAddressOf(layer2.buffer, true);
  if (l1ptr && l2ptr) c.combine(layer1.buffer.length, l1ptr, l2ptr);
  
  g.drawImage(layer1.asImage(),0,24);
}

draw();

2: There is some overdraw which is why you get the areas of black (where the same pixel has been drawn twice) but this is because the font is intentionally designed to take up very little space in memory.

3: I don't know what's happening there. What web browser are you using?

I just tried <link href="https://fonts.googleapis.com/css2?­family=Ubuntu+Mono:wght@700&display=swap­" rel="stylesheet"> in http://www.espruino.com/Font+Converter and it works great:

Graphics.prototype.setFontUbuntuMono = function(scale) {
  // Actual height 15 (15 - 1)