Efficient way to draw custom numbers

[MomentumV]

I have a clock (DayMoon) that I want to make some custom shaped numbers to avoid redrawing parts of the screen that the numbers would otherwise overlap. I thought maybe a custom font, but I believe those are by definition rectangular.
I'm thinking that I might be better suited to having a set of [3,10,6,10] (29 total) special polyfills that I use to draw the time numbers, plus maybe 4 "blanking" polygons to clear the previous number.
I am also looking at other clocks to set up the drawinterval and I think I would like to use an overlay for the pointer of my clock.
Are there good examples of using overlay on a clock? I understand that Bangle uses an overlay for widgets, but can I use if for my clock?

[gfwilliams]

Hi! I'm not entirely sure what you mean about drawing digits, but you could use transparent images I believe - so one colour is the foreground, one is background, and the transparent area is where you don't want to draw - I'm not convinced that'll be faster than just redrawing the whole area though as the image still has to be iterated over even if pixels aren't drawn.

It might be worth doing some simple benchmarking first with one digit to see if it really makes a noticeable performance improvement.

On the overlay front, you could use it for clocks, but using an overlay causes the whole screen to be updated each time something changes, so I wouldn't use it for efficiency reasons. Also there can only be one overlay at a time, so if someone swipes down on hidden widgets to display them, the overlay will then display widgets and not what you wanted it to...

[MomentumV]

Here's an example of my watchface.
The day/night ring only changes once a day, and is two fillArc calls, and a for loop of 24 circles for the dots.

Here's my problems:

1. the red indicator sweeps over the day/night ring. It is a 1 bit transparent image that gets rotated. I don't really want to redraw everything under it every time it gets updated, which is why I was thinking about an overlay, but it sounds like that isn't the way to go.
   I guess I should benchmark drawing a rendered copy vs the programmatic re-drawing.

2. The Time digits overlap the day/night ring as well, and so when they get cleared, the day/night ring has to be redrawn. I guess I could probably just limit it to when the tens digit changes. The original question was getting around this by having uniquely shaped digits that wouldn't overlap the ring, like this 53: And then have a blanking polygon like the green shape.

[MomentumV]

So, I think the right way to do this is just to set it up to redraw only the small sections affected. I'll need to restructure some of the code, but I think it's going to be the right way to go.

[fanoush]

would the https://www.espruino.com/Reference#l_Graphics_drawImages help with this? You could draw the changing parts into offscreen image and then combine the image with part of offscreen background image for same rectangle area and use drawImages. I haven't used it but I guess it was designed precicesly for this?

[gfwilliams]

Yes, there are some examples in the BangleApps repo of using it, for instance https://github.com/espruino/BangleApps/blob/3ac4b0d6bd5273fc811dcd3332e741b85f93a8ca/apps/analogimgclk/app.js#L86

And then you can set everything up but just specify which rect you actually want to render. Your actual background image could be rendered to an offscreen buffer at startup (or you just include an image in the source code?) - it looks like if you used a colour palette you could get away with a 3 bit image that would compress pretty well

[MomentumV]

The moon itself is currently a white circle, then a 1 bit image that provides the texture. By using a dithered color of yellow-black, I kinda get a 4 bit moon (transparent, white, yellow, black) for just a circle and a 1 bit image. Then I draw the shadow as a calculated fillPoly.

I guess you're suggesting that the day/night ring is rendered as an image as well? It'd have to be computed every day, so I'm currently doing it with filled Arcs. I think I can restructure the drawing methods to actually just redraw the parts of the day/night ring that need blanking out with each update.
The real efficiency is going to be coming from reducing my calls to suncalc library, and using better timers/callback to update things only when needed to. It's currently just drawing and calculating everything every 10 sec.