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

Help! Battery Level Addition Watch Face

ANSWERED

Hello all,

  I hope someone can help. I have developed my very first Watch Face for the Versa, and I want to continue to develop it further. 

 

  The next thing I would like to add to the Watch Face is a battery indicator on the main screen. I have been digging through the forums, but nothing is real clear on how to add it. When I run some of the code that I am finding on here and other places, I keep getting 'Undefined' errors in the code. Is there anyone that can maybe give a step by step on how to set this up? 

 

  My overall goal would be to have a battery that shows the current level in the upper left corner of the screen, but a simple percentage will work from the start. 

 

  Any help would be greatly appreciated! Thanks

Best Answer
0 Votes
1 BEST ANSWER

Accepted Solutions

Hi, for a simple percentage you can do this:
- In index.js:

import { battery } from "power";
const myBattery = document.getElementById("myBattery");
myBattery.text = `${battery.chargeLevel}%`; // initialize on startup battery.onchange = (charger, evt) => {    myBattery.text = `${battery.chargeLevel}%`; }

- In index.gui:

<text id="myBattery" class="topLeft smallFont"/>

"topLeft" and "smallFont" are css classes I used.

I also show a battery image dependant on how full my 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. This is just one way to do it. If you'd like to see how I did that, just let me know 🙂

View best answer in original post

Best Answer
7 REPLIES 7

Hi, for a simple percentage you can do this:
- In index.js:

import { battery } from "power";
const myBattery = document.getElementById("myBattery");
myBattery.text = `${battery.chargeLevel}%`; // initialize on startup battery.onchange = (charger, evt) => {    myBattery.text = `${battery.chargeLevel}%`; }

- In index.gui:

<text id="myBattery" class="topLeft smallFont"/>

"topLeft" and "smallFont" are css classes I used.

I also show a battery image dependant on how full my 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. This is just one way to do it. If you'd like to see how I did that, just let me know 🙂

Best Answer

This works brilliantly! Thank you! I will be developing this further, so I may reach out if I get stuck again.

 

Thanks again!

Best Answer
0 Votes
No problem, glad to help 🙂 
Best Answer
0 Votes

Hi there!

 

I managed to show battery icons depending on the percentage, but Fitbit overrides them when battery level is very low, by showing it's own icon. This results in having two icons at once. I was wondering if you managed to find a workaround so that only custom battery icon is shown if battery is very low?

 

Thanks!

Best Answer
0 Votes

No, I haven't found a workaround for that sadly. The core system of Fitbit shows the low battery icon whenever hitting 15 or below I believe and as far as I know, they don't have an option to not do that.

 

However I read that some people hide their own battery icon whenever the low battery icon from Fitbit turns up automatically. It's not ideal but it's something.

Best Answer

This code worked great! Thank for for posting this, I was pulling my hair on on this

Best Answer

This issue of the battery icon showing up isn't reproduced in the simulator. At least not that I've seen.

Best Answer
0 Votes