Cancel
Showing results for 
Show  only  | Search instead for 
Did you mean: 

How to add the battery icon

ANSWERED

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/#

 

Best Answer
0 Votes
1 BEST ANSWER

Accepted Solutions

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 🙂

 

 

View best answer in original post

Best Answer
6 REPLIES 6

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 🙂

 

 

Best Answer

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.

Peter McLennan
Gondwana Software
Best Answer
0 Votes

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

 

Mikes-Clock-Face-screenshot.png

 

The heart symbol flashes by the way 

Best Answer

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 

Best Answer
0 Votes

hey can you put links to the images

Best Answer
0 Votes

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

Best Answer