How to add the battery icon

[SunsetRunner]

My next challenge on my quest to build my ideal watch face is to add the battery icon to my watch face.

I noticed when I plugged in my charger that an icon appeared in the top left corner, and this is exactly what I want centre bottom.

I have found the battery API, but not clues as to where to get the icon from or how to draw it

https://dev.fitbit.com/build/reference/device-api/power/#

[JeCom · Accepted solution]

Fitbit only has a limited number of their images/icons freely available and the battery icons are not in there unfortunately. (You can find the ones that are available over here https://dev.fitbit.com/build/guides/design-guidelines/visual-styles/#icons )

So I'm afraid you'll have to search some images on the web or create them yourself.

On how to draw the icon(s), you can show a battery image dependant on how full the watch's battery is. I made several images ranging from empty battery to a full battery and update the image shown with the battery.onchange event. Here is the code I used for that as an example.

In index.js file

import { battery } from "power";

const batImg = document.getElementById("batImg"); // Get icon image of battery

batImg.href = calcBatImg(); //Initialise battery image

// On change event for when the battery percentage changes
battery.onchange = (charger, evt) => {
 batImg.href = calcBatImg();
}

// Determine which battery image needs to be shown.
// I have a map "bat" under resources containing the images bat0.png, bat05.png, 
// bat10.png, ..., bat95.png, bat100.png.
function calcBatImg() {
 if(battery.chargeLevel > 98) {
   return "bat/bat100.png"
 } else {
   let ratio = Math.floor(battery.chargeLevel/5);
   return 'bat/bat' + ratio*5 + '.png';
 }
}

In index.gui:

<image id="batImg" x="2" y="2"/>

(I show my battery icon in top left.)

 I hope this gives you a possible way on how to do this 🙂

[Gondwana]

You could also do it by dynamically changing the width of a <rect> or other element.

Beware that the built-in battery indicator will be displayed whenever the battery level is low, so you might want to hide yours in that situation (and ideally place it in the same location on the screen). The API gives no control over the default behaviour.

[SunsetRunner]

Thanks for that I used a variant of what you showed to create a Battery image with 5 cells that grow based on battery percentage

The heart symbol flashes by the way 

[Wizz001]

This is a great help many thanks for this. I was wondering if people could point me in the right direction on something;  I have designed an image 20px by 50px, but for some reason, the image is taken over the full watch screen. Any ideas?

Thanks

WIll 

[spencerscelfo]

hey can you put links to the images

[Krish_2009]

You could also do this, in the code using an image called "myImg" under resources containing the images  10.png, ..., 60.png, 70.png,  80.png, 90.png, 100.png. 

Put this in the index.js: 

const myBattery = document.getElementById("myBattery");

Put this in the index.js: 

import { battery } from "power";
//calculates the battery
myBattery.text=(Math.floor(battery.chargeLevel) + "%");
//changes the image when battery is low
const myImg = document.getElementById("myImg");
if (battery.chargeLevel > 90) {
  myImg.href = "100.png"; // 76-100
} else if (battery.chargeLevel > 80) {
  myImg.href = "90.png"; // 51-75
} else if (battery.chargeLevel > 70) {
  myImg.href = "80.png"; // 26-50
} else if (battery.chargeLevel > 60) {
  myImg.href = "70.png"; // 6-25
  } else if (battery.chargeLevel > 50) {
  myImg.href = "60.png"; // 51-75
} else if (battery.chargeLevel > 40) {
  myImg.href = "50.png"; // 26-50
} else if (battery.chargeLevel > 30) {
  myImg.href = "40.png"; // 6-25
  } else if (battery.chargeLevel > 20) {
  myImg.href = "30.png"; // 26-50
} else if (battery.chargeLevel > 10) {
  myImg.href = "20.png"; // 6-25
} else {
 myImg.href = "10.png";
}

 Then put this in the index.gui: 

<text id="myBattery"></text>
<image id="myImg" x="230" y="12" width="12" height="23"  />

At last the CSS:  

#myBattery {
  font-size: 20;
  font-family: Seville-Bold ;
  text-length: 32;
  text-anchor: middle;
  x: 90%;
  y: 10%+0;
  fill: #FFFF7A;
}

Hopefully, this will work 🙂

If this answer works please mark this post as a Best Answer.  ~ K.K Designs