Generic way to draw a border around the watch

Former Member over 10 years ago

I've seen several apps on my watch (Fenix 3) display a red or green border depending on recording state. I'd like to do the same for my app. Is there a standard UI primitive that would allow me to do this in a watch-independent way? I'd like to support both round and square watches, and `drawCircle` would limit me to round ones.

thanks

travis.vitek over 10 years ago

Ideally you'd be able to use a layout to do this, but I believe it is still broken with connectiq-1.1.1.

The only way that I know of to do this right now is to use the resource system decide if you've got a round watch face or not, then render your screen differently based on that.

function onLayout(dc) {
    var shape = Ui.loadResource(Rez.Strings.ScreenShape);
    round = shape.equals("round");
}

function onUpdate(dc {

    // draw other stuff

    dc.setColor(fgcolor, Gfx.COLOR_TRANSPARENT);
    if (round) {
        var cx = dc.getWidth() / 2;
        var cy = dc.getHeight() / 2;

        //dc.setPenWidth(4);

        dc.drawEllipse(cx, cy, cx - 3, cy - 3);
        dc.drawEllipse(cx, cy, cx - 2, cy - 2);
        dc.drawEllipse(cx, cy, cx - 1, cy - 1);
        dc.drawEllipse(cx, cy, cx    , cy);
        dc.drawEllipse(cx, cy, cx + 1, cy + 1);

        //dc.setPenWidth(1);
    }
    else {
        var width  = dc.getWidth();
        var height = dc.getHeight();

        //dc.setPenWidth(3);

        dc.drawRectangle(0, 0, width    , height);
        dc.drawRectangle(1, 1, width - 2, height - 2);
        dc.drawRectangle(2, 2, width - 4, height - 4);

        //dc.setPenWidth(1);
    }
}

Travis