My latest addition to the code in post #13 were line 80, 90 and 110. They are relevant for removing / cleaning up the traverse lines - or 'ladder step' - that go from the outer to the inner arc when redrawing the outlining of a 'fat' gauge with a different value. You can see them in picture of post #12 - the white 'fat' gauge - where the cleanup was not in place yet. When calculating the outline, the clean-Up property ._cUp holds on to the 4 points that define these two 'traverse' lines of the arc outlines (line 110) for the next redraw (line 90):
80 _.cUp=[]; // clean up vertices
90 g.setColor(0,0,0); while (this.cUp.length) g.drawLine.apply(g,this.cUp.pop());
That they are working show the pictures of post #15.
Why do I mention this after the recent posts #19 thru #21: Rendering - outlining and proper filling - has still it's issues: initially I used the 4 points to fill a polygon with the (black) background color... which was pretty disappointing, because it did not 'remove' -the ladders completely. I'm not complaining at all. Having a clean, fully symmetric and completely filled polygon is is no easy task. I noticed this earlier when trying to draw round and bevelled shapes on PixlJS. Math-wise it should not make a difference... but with finite size of a line and low resolution all kinds of numeric effects creep in.
Espruino is a JavaScript interpreter for low-power Microcontrollers. This site is both a support community for Espruino and a place to share what you are working on.
My latest addition to the code in post #13 were line 80, 90 and 110. They are relevant for removing / cleaning up the traverse lines - or 'ladder step' - that go from the outer to the inner arc when redrawing the outlining of a 'fat' gauge with a different value. You can see them in picture of post #12 - the white 'fat' gauge - where the cleanup was not in place yet. When calculating the outline, the clean-Up property
._cUp
holds on to the 4 points that define these two 'traverse' lines of the arc outlines (line 110) for the next redraw (line 90):_.cUp=[]; // clean up vertices
g.setColor(0,0,0); while (this.cUp.length) g.drawLine.apply(g,this.cUp.pop());
this.cUp.push((c)?v.slice(j-1,j+3):v.slice(0,2).concat(v.slice(-2)));
That they are working show the pictures of post #15.
Why do I mention this after the recent posts #19 thru #21: Rendering - outlining and proper filling - has still it's issues: initially I used the 4 points to fill a polygon with the (black) background color... which was pretty disappointing, because it did not 'remove' -the ladders completely. I'm not complaining at all. Having a clean, fully symmetric and completely filled polygon is is no easy task. I noticed this earlier when trying to draw round and bevelled shapes on PixlJS. Math-wise it should not make a difference... but with finite size of a line and low resolution all kinds of numeric effects creep in.
1 Attachment