dc.drawCircle inside screen edge (even-numbered screen height/width)

So I have a stupid question.... Is it possible to draw a perfect circle (same radius/thickness all the way around) touching the inside edge of a round screen with an even-numbered width/height without calling drawCircle multiple times?

Since x, y and radius are all integers, I don't see any way to do this except to draw multiple circles (parts of which will be rendered offscreen) at multiple origins. You can't exactly say that your origin and radius is "119.5" for the 240px screens.

I guess maybe drawArc could help, but from what I gather, it's broken on some platforms. Plus that's still making multiple drawing calls.

Not a huge deal or anything, but I'm wondering how others have dealt with this. I also wonder if the native Garmin code is really making multiple "native_drawCircle" calls just to draw a green or red circle around the inside of watch.

(I'll be rly embarrassed if there was a simple solution that I missed, other than drawArc, which I don't want to use because I hear it's broken on Fenix 3....)

Top Replies

Brian.ConnectIQ over 5 years ago +1

It is not currently possible to get a perfectly centered circle as you describe with drawCircle(). The best workaround that is perfectly symmetrical is to draw 4 circles each centered on a different center…

All Replies

markdotai over 5 years ago

I don't know if you are interested in methods other than drawCircle, but I've been playing around with fonts recently and thought you could use that way, so I did a quick test!

I made a 1920x1920 texture with an 8 pixel wide circle and scaled it down to 240x240 so the circle is now 1 pixel wide and anti-aliased. Then created a .fnt file with one 240x240 character for "0". (Rename the attached .fnt.txt file to just .fnt)

You need this in a resource file:
<fonts>
<font id="id_circle" filename="circle_240x240.fnt" antialias="true"></font>
</fonts>

Then code for drawing to the screen is just:
var circleFont = WatchUi.loadResource(Rez.Fonts.id_circle);
dc.setColor(Graphics.COLOR_WHITE, Graphics.COLOR_TRANSPARENT);
dc.drawText(0, -1, circleFont, "0", Graphics.TEXT_JUSTIFY_LEFT);

The -1 for y height seems to be a peculiarity of the font system.

Note that on the simulator it looks offset by half a pixel:

But running on my real watch (Fenix 5X plus) it actually works perfectly and there is a smooth 1 pixel circle all around the edge of the display.

Again the offset between simulator and real watch seems to be a peculiarity of the fonts.

FlowState over 5 years ago

markdotai that's pretty awesome. Thanks!

GSA12 over 5 years ago

Hi markdotai,
which font did you use for the date?

markdotai over 5 years ago

Hi [/SIZE][/FONT][/COLOR]markdotai,[/LEFT]
which font did you use for the date?

That font is called Trivial from here: https://www.1001freefonts.com/trivial.font

Lot of good ones on that site :-)
That particular shot has it at 25 pixel size converted with BMFont.

GSA12 over 5 years ago

Thank you very much!

beta-L-user over 4 years ago in reply to Brian.ConnectIQ

I don't know whether it was possible 10 month ago, but I think it is possible now if you declare the to be used coordinates not as integer but as floating point variables.

var width = dc.getWidth()-.5;
var height = dc.getHeight()-.5;

dc.drawCircle(width/2, height/2, height/2);

works (at least with the simulator).

FlowState over 2 years ago in reply to beta-L-user

beta-L-user said:
I don't know whether it was possible 10 month ago, but I think it is possible now if you declare the to be used coordinates not as integer but as floating point variables.

        var width = dc.getWidth()-.5;
        var height = dc.getHeight()-.5;

        dc.drawCircle(width/2, height/2, height/2);

works (at least with the simulator).

Not to necro a dead thread, but this doesn't work for me. I don't think specifying float values for the width and height actually means that it draws the circle with fractional width and height. Maybe it just rounds or truncates the values you pass in.

    function onUpdate(dc as Dc) as Void {
		dc.setColor(Graphics.COLOR_WHITE, Graphics.COLOR_BLACK);
        dc.clear();
		dc.setPenWidth(1);
		
		var width = dc.getWidth()-.5;
		var height = dc.getHeight() - .5;
		dc.drawCircle(width/2, height/2, height/2);
		return;

FR 245 sim: