Example of Vivoactive 3 style widget

I'm curious if anyone is aware of an example of a Vivoactive 3 style widget with the circular ring around the edge showing progress with the animations on the ring and digits. I've got a basic functionality using drawArc, but I would really like to add the animations and extra style.

Travis.ConnectIQ over 8 years ago

You should be able to do the animations pretty easily with the WatchUi.animate() method. Here is an untested code snippet..

// simple layout-compatible arc drawable
class MyArc extends Ui.Drawable
{
    var radius;
    var color;
    var minimum;
    var maximum;
    var percent;

    function initialize(options) {
        Drawable.initialize(options);
        radius = options["radius"];
        color = options["color"];
        minimum = options["degreeMin"];
        maximum = options["degreeMax"];
        direction = options["direction"];
        percent = 1.0;
    }

    function draw(dc) {
        dc.setColor(color, Gfx.COLOR_TRANSPARENT);

        var value = ((1.0 - percent0to1) * minimum) + ((percent0to1 * maximum));
        dc.drawArc(locX, locY, radius, direction, minimum, value);
    }

    function setProgress(aPercent0to1) {
        percent0to1 = aPercent0to1;    
    }

    function setColor(aColor) {
        color = aColor;
    }

    function setMinimumDegrees(aMinimum) {
        minimum = aMinimum;
    }

    function setMaximumDegrees(aMaximum) {
        maximum = aMaximum;
    }
}

// your view class
class MyView extends Ui.View
{
    hidden var arc;

    // assumes you have a layout that defines the arc as described in the Programmer's Guide here
    // developer.garmin.com/.../user-interface
    function onLayout(dc) {
        setLayout(Rez.Layouts.MyLayout(dc));
        arc = findDrawableById("arc");
    }

    function setPercent(aPercent) {
        WatchUi.animate(arc, :percent0to1, Ui.ANIM_TYPE_EASE_IN_OUT, arc.percent0to1, aPercent, 0.5, null);
    }
}

AdmSteck over 8 years ago

Thanks! That should get me started. I'll have to play around a bit and see what I can come up with.

AdmSteck over 8 years ago

Good news is that it works, bad news is that it is extremely slow in the simulator. Does the simulator accurately reflect on device performance?