Should antialiased graphics methods work in Banglejs2?

[espruino-discuss]

Posted at 2021-11-24 by myownself

I decided to have a go at writing something for the Bangle2 (at least, for the emulator until they go on sale properly). I started with the tutorial and ended up creating a very basic analogue clockface.

The docs for the graphics API say for the AA versions of methods:

Note: This is only available in devices with Antialiasing support included (Bangle.js or Linux)

but it isn't clear whether this should include Bangle.js 2, or just the original. The methods don't work in the Bangle 2 emulator. My guess is that they aren't intended to (it is a different screen, lower res, fewer colours, etc), but in that case maybe the docs should be more explicit about Bangles now there are two of them?

Working non-antialiased clock just in case anyone is interested:

function draw() {
  // work out how to display the current time
 var d = new Date();
//  var h = d.getHours(), m = d.getMinutes();
//  var time = (" "+h).substr(-2) + ":" + ("0"+m).substr(-2);
//  // Reset the state of the graphics library
  g.reset();

  var base = 85;
  var rad = 50;
  g.clearRect(base - rad, base - rad, base + rad, base + rad);
  g.drawCircle(base, base, rad);
  g.drawString("12", base - 2, base - 40, false);
  g.drawString("6", base - 2, base + 40, false);
  g.drawString("3", base + 40, base -2, false);
  g.drawString("9", base - 40, base -2, false);
  var handLength, hour, minutes, seconds, ang;

  handLength = 20;
  hour = d.getHours();
  ang = ((hour % 12 * 30) - 90) * 0.01745329;
  g.drawLine(base, base, base + (handLength * Math.cos(ang)), base + (handLength * Math.sin(ang)));

  g.reset();
  handLength = 35;
  minutes = d.getMinutes();
  ang = ((minutes * 6) - 90) * 0.01745329;
  g.drawLine(base, base, base + (handLength * Math.cos(ang)), base + (handLength * Math.sin(ang)));

  g.reset();
  g.setColor(255, 0, 0);
  handLength = 40;
  seconds = d.getSeconds() + d.getMilliseconds() / 1000;
  ang = ((seconds * 6) - 90) * 0.01745329;
  g.drawLine(base, base, base + (handLength * Math.cos(ang)), base + (handLength * Math.sin(ang)));
}

// Clear the screen once, at startup
g.clear();
// draw immediately at first
draw();
var secondInterval = setInterval(draw, 10);
// Stop updates when LCD is off, restart when on
Bangle.on('lcdPower',on=>{
  if (secondInterval) clearInterval(secondInterval);
  secondInterval = undefined;
  if (on) {
    secondInterval = setInterval(draw, 10);
    draw(); // draw immediately
  }
});
// Show launcher when middle button pressed
Bangle.setUI("clock");
// Load widgets
Bangle.loadWidgets();
Bangle.drawWidgets();

[gfwilliams]

Posted at 2021-11-25 by @gfwilliams

Yes, right now antialiased drawing isn't in Bangle.js 2 but there's actually not much reason for the omission. I'll add it in so it'll be in the 2v11 firmware.

However it's not going to be much use on Bangle.js 2 anyway because the screen itself is only 3 bit, so you only get on/off. While there's dithering I think the end effect of that will probably look worse than non-antialiased lines

[espruino-discuss]

Posted at 2021-11-25 by rigrig

If it does look worse, wouldn't it be better to leave it out?
Because otherwise code that tries to do the "right" thing actually makes things worse:

if (g.drawLineAA) g.drawLineAA(...)
else g.drawLine(...) // for devices without AntiAliasing

And if you end up writing this

if (device_is_B2) g.drawLine(...) // AntiAliasing looks bad on 3-bit screen
else g.drawLineAA(...)

You wonder why the Bangle.js 2 even implements AA functions.

I guess you could just make it so *AA functions don't actually AntiAlias, so more code will run on both devices seemlessly, but that just seems Wrong...

[gfwilliams]

Posted at 2021-11-29 by @gfwilliams

Well, I was thinking that, but actually there are cases where AA might be useful...

Like maybe you render to a 16bpp offscreen buffer and half-res and render it pixel-doubled. Then you get antialiasing.

I'd argue that actually device_is_B2 is more readable anyway...

[espruino-discuss]

Posted at 2021-11-29 by rigrig

Oh right, that would be a valid use.
You'll have to start watching for misuses of AA though, I know I only noticed it shouldn't be used on the Bangle.j2 s when it started throwing errors ;-)