Garmin Connect IQ Custom Drawable

Garmin Connect IQ Custom Drawable

A sample of creating a custom drawable, both in xml and via code.

CustomWatchFaceView.mc

using Toybox.WatchUi as Ui;
using Toybox.Graphics as Gfx;
using Toybox.System as Sys;
using Toybox.Lang as Lang;
using Toybox.Application as App;

class CustomWatchFaceView extends Ui.WatchFace {

    function initialize() {
        WatchFace.initialize();
    }

    // Load your resources here
    function onLayout(dc) {
        setLayout(Rez.Layouts.WatchFace(dc));
    }

    // Update the view
    function onUpdate(dc) {
        var moveBar = new ProgressBar({
			:locX=>10,
			:locY=>10,
			:width=>50,
			:height=>50,
			:color=>Gfx.COLOR_ORANGE
        });
	moveBar.setPercent(0.5);
	moveBar.draw( dc );
    }
}

ProgressBar.mc

using Toybox.WatchUi as Ui;
using Toybox.Graphics as Gfx;

function clamp(value, max, min) {
   if(value > max) {
	   return max;
   }
   else if(value < min) {
	   return min;
   }
   return value;
}
    
class ProgressBar extends Ui.Drawable {

    hidden var color, locX, locY, width, height, percentage;

    function initialize(params) {
        Drawable.initialize(params);

        color = params.get(:color);
        locX = params.get(:locX);
        locY = params.get(:locY);
        width = params.get(:width);
        height = params.get(:height);
        percentage = 0.0;
    }
    
    function setPercent(value) {
        percentage = clamp(value, 1.0, 0.0);
    }
    
    function draw(dc) {
        dc.setColor(Gfx.COLOR_LT_GRAY, Gfx.COLOR_LT_GRAY);
        dc.drawRectangle(locX, locY, width, height);
        dc.setColor(color, color);
        dc.fillRectangle(locX + 2, locY + 2, (width - 4) * percentage, height - 4);
    }
}

ProgressBar.xml

<layout id="WatchFace">
	<drawable id="level" class="ProgressBar">
		<param name="locX">(218 / 2) - 25</param>
		<param name="locY">218 / 2</param>
		<param name="width">50</param>
		<param name="height">10</param>
		<param name="color">Gfx.COLOR_RED</param>
	</drawable>
</layout>

progressBar.xml

<layout id="progressBar">
	<drawable class="ProgressBar">
		<param name="locX">176</param>
		<param name="locY">111</param>
		<param name="height">20</param>
		<param name="width">50</param>
		<param name="color">Gfx.COLOR_RED</param>
	</drawable>
</layout>