setPenWidth not working properly

When drawing a circle with a large pen width, the result is hideous. It is my understanding that this post points out that setPenWidth() doesn't work on the 920XT device at all, but that issue is different.

Here is a bit of sample code that draws a circle around the entire screen with a pen width of 20.

using Toybox.Graphics as Gfx;

using Toybox.Lang as Lang;

using Toybox.WatchUi as Ui;



class Test extends Ui.View

{

    var radius;



    function initialize() {

    }



    function onUpdate(dc) {

        dc.setColor(Gfx.COLOR_BLACK, Gfx.COLOR_BLACK);

        dc.clear();



        var dx = dc.getWidth() / 2;

        var dy = dc.getHeight() / 2;



        radius = dx;

        if (dy < radius) {

            radius = dy;

        }



        dc.setColor(Gfx.COLOR_RED, Gfx.COLOR_RED);

        dc.setPenWidth(20);



        dc.drawCircle(dx, dy, radius - 22);

    }

}

The following shows what I get when I use the above code.

Former Member over 9 years ago

OK this does work, and I will wait patiently for the permanent solution but I do have a question:

I first noticed this in bug when I recently switched to SDK 1.2.4, meaning it was working on the previous SDK I used (1.2.1). But when I went back to that SDK, setPenWidth() was now broken there. I am not saying the two are related, merely implying that, at one point, this function did as it was told. Any insight on this?

Thanks as always,
Jeff

travis.vitek over 9 years ago

I don't know. I reported the issue over a year ago, and switched to the workaround posted above. I'm using the most recent SDK and I no longer see the problem with the following code...

var cx = dc.getWidth() / 2;
var cy = dc.getHeight() / 2;

dc.setColor(Gfx.COLOR_BLACK, Gfx.COLOR_BLACK);
dc.clear();

dc.setColor(Gfx.COLOR_RED, Gfx.COLOR_RED);
dc.setPenWidth(5);
dc.drawCircle(cx, cy, (cx < cy ? cx : cy) / 2);

dc.setPenWidth(1);

I do see a different problem which is shown with this code...

hidden var pen_width = 1;

    // this is in a data field so there is no need to use a timer.
    function onUpdate(dc) {
        var cx = dc.getWidth() / 2;
        var cy = dc.getHeight() / 2;
        var cz = (cx < cy ? cx : cy) / 2;

        dc.setColor(Gfx.COLOR_BLACK, Gfx.COLOR_BLACK);
        dc.clear();

        dc.setPenWidth(pen_width);

        dc.setColor(Gfx.COLOR_RED, Gfx.COLOR_RED);
        dc.drawCircle(cx, cy, cz);

        if (pen_width == 50) {
            pen_width = 0;
        }

        pen_width += 5;

        dc.setPenWidth(1);
    }

Former Member over 9 years ago

Perhaps it is simply a matter of where setPenWidth() is called. I have run into situations when it mattered a great deal (successful compilation vs. um...not) where in my code I called View.onUpdate(dc);

mpirklbauer over 8 years ago

Anything new here?

I would like to use this function on my next watch face.

chrishares over 8 years ago

Just bumping this back up, as I've found an old project with loads of Simulator work-around code to draw circles (with a pen width > 1) and it seems an easy thing to fix.

Brandon.ConnectIQ over 8 years ago

We've addressed the "fragmented" circle problem illustrated by Sweet_Brother_Numpsay. There are still some outstanding issues with setPenWidth, however. For example, drawing a thick circle with a large pen width still produces the "dented rounded rectangle" effect.