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....)
  • I'm missing something I guess, as on a 240x240 screen it's just something like dc.drawCircle(120,120,120), but if the physical screen isn't exactly centered, it might not look correct as a bezel gets in the way.

    You could use dc.setPenWidth() to make the circle a bit "thicker" so it's not noticed.
  • If your origin is (120, 120), that's 120 pixels away from the top edge, 120 pixels away from the left edge, but only 119 pixels away from the bottom and right edges. The width/height is an even number, so it's impossible to pick an origin in the center if you can only use integers. (What's the centre point of a line 10 pixels wide?)

    Unless I'm being an idiot.

    I'll try it in the simulator again.

    But on the sim and in a real watch, I was unable to draw a circle of thickness 6 (for example), all the way around the screen that was always 6 pixels thick and always touched the edge of the screen. Parts of the circle were either clipped or not touching the edge.

    I had to draw multiple overlapping circles, which is obv wasteful.
  • Will you notice 5 vs 6 pixels on an actual watch? Everything is much bigger in the sim. Same with custom fonts. They often look much better on the real device
  • dc.setColor[0xffffff, -1];
    dc.drawCircle[120, 120, 120]; // pen width = 1


    Pretty sure there's no single drawCircle[] call that will draw a perfect circle on even-numbered width/height screen (*), regardless of pen width

    Sure if you set a thicker pen, you might not notice. But I noticed right away even with six pixels.... It's especially noticeable compared to the native circles, which are drawn correctly. Yes, and I did notice on a real watch.

  • Sorry for the multiple posts, forum hates me....

  • So this is my terrible workaround. I draw up to four overlapping circles instead of 1.
    var circleThickness = 6;
    dc.setPenWidth(circleThickness);

    var widthIsEven = ((deviceWidth % 2) == 0);
    var heightIsEven = ((deviceHeight % 2) == 0);
    var originX = deviceWidth/2;
    var originY = deviceHeight/2;

    var radius = deviceWidth/2-circleThickness/2;

    var xArray = [originX];
    if (widthIsEven)
    {
    xArray.add(originX - 1);
    }
    var yArray = [originY];
    if (heightIsEven)
    {
    yArray.add(originY - 1);
    }

    // rly elaborate...
    for (var i = 0; i < xArray.size(); i++)
    {
    for (var j = 0; j < yArray.size(); j++)
    {
    dc.drawCircle(xArray, yArray[j], radius);
    }
    }
    [/code]
  • 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 pixel of the screen ([119,119], [119,120], [120,119], and [120,120] in this case). This gets you very close to a circle and won't be unbalanced around the edges of the screen.

    Edit: I've been Ninja'd by FlowState.
  • Thanks Brian.ConnectIQ. Yep, that's what I did.

    Edit: haha I would've looked really dumb if you beat me to it! Lemme explain this thing in 200 lines of code that Brian said in one sentence.
  • It it really that much of a deal on the device? having an extra pixel at 12 and 9?
    vs doing 4 draws...
  • jim_m_58 I think we all know from first principles that it can't and won't draw a perfect circle, but thank you for responding and considering the problem.

    I realize it's a lil OCD, but I just wanted to draw a circle that looks nice to me, and doesn't look funny, "off" or like a mistake....

    Edit: Like I said, I want a circle drawn by my app to look good, just like the native circles. When you compare the screenshots side-by-side, you notice right away. And I noticed IRL, too. I think the native code does it differently, as when you overlay the native circles with the circles drawn with this method (same pen width), some of the pixels are off. I can even see it in real life when I draw a circle of one colour, and I press START to overlay the native circle of the exact same pen width but a different colour. A tiny number of my pixels are still visible.....

    If the native code has a more efficient way of doing it, I sure wish it was available as a library call to apps, but that's okay.

    Again, not a huge deal, I only wanted to make sure I wasn't missing something obvious.

    And even in the cases that I'm willing to use a workaround or ignore a minor cosmetic issue, I still always want to know the "correct" way of doing things. That's just how I roll.... Probably causes me a lot more trouble than it's worth.