Should antialiased graphics methods work in Banglejs2?

Posted on
  • 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
      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)));
      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.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
    // draw immediately at first
    var secondInterval = setInterval(draw, 10);
    // Stop updates when LCD is off, restart when on
      if (secondInterval) clearInterval(secondInterval);
      secondInterval = undefined;
      if (on) {
        secondInterval = setInterval(draw, 10);
        draw(); // draw immediately
    // Show launcher when middle button pressed
    // Load widgets
  • 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

  • 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...

  • 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...

  • 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 ;-)

  • Post a reply
    • Bold
    • Italics
    • Link
    • Image
    • List
    • Quote
    • code
    • Preview

Should antialiased graphics methods work in Banglejs2?

Posted by Avatar for myownself @myownself