Creating a Battery Indicator Watch Face for Garmin

Today, I want to show you how to create a very simple battery indicator in Garmin. I want to create a label that shows the current battery percentage which also changes colour depending on the percentage level.

So, I’ll start by creating a new label in the watch that I will use. This is my layout.xml:

<layout id="WatchFace">
<label id="BatteryLabel" x="center" y="center" font="Graphics.FONT_NUMBER_THAI_HOT" justification="Graphics.TEXT_JUSTIFY_CENTER" color="Graphics.COLOR_WHITE" />
</layout>

Now, in the View.mc file I will use this label to add the battery percentage and assign a colour based on that percentage.

First, I will paste in my updateDisplayObject method to update the label text:

//Update the display object text
function updateDisplayObject(updateObject, updateText){
var _viewObject = View.findDrawableById(updateObject) as Text;
_viewObject.setText(updateText);
}

I will then create a method to update the battery label’s text colour based on the battery percentage. This will need to take in the battery percentage as a parameter:

//Update the battery text color
function updateBatteryTextColor(updateBatPerc){
var _color = Graphics.COLOR_GREEN;
//Setting battery label color based on percentage
if (updateBatPerc > 75){
_color = Graphics.COLOR_DK_GREEN;
}
if (updateBatPerc < 75 && updateBatPerc >= 25){
_color = Graphics.COLOR_YELLOW;
}
if (updateBatPerc < 25){
_color = Graphics.COLOR_RED;
}
var _viewObject = View.findDrawableById("BatteryLabel");
_viewObject.setColor(_color);
}

From the above code, you can see I am assigning a specific color based on the batter percentage on a three tier system. The label colour will be based on the following rules:

ValuesColor
Greater than 75%Green
Lower than 75% and higher than or equal to 25%Yellow
Lower than 25%Red
Battery label colour table

I can now update the onUpdate method to use the above methods to show the battery indicator correctly. This is what the onUpdate method looks like:

// Update the view
function onUpdate(dc as Dc) as Void {
//Get and show the current battery percentage
var pwr = System.getSystemStats().battery;
var batStr = Lang.format( "$1$%", [ pwr.format( "%2d" ) ] );
updateDisplayObject("BatteryLabel", batStr);
//Update battery text color
updateBatteryTextColor(pwr);
// Call the parent onUpdate function to redraw the layout
View.onUpdate(dc);
}

After all that, you can see the watch face showing the correct three colours below:

Red battery indicator
Yellow battery indicator
Green battery indicator

Enjoy! 🎉


Leave a Reply