06-10-2018 18:30
- Mark as New
- Bookmark
- Subscribe
- Permalink
- Report this post

06-10-2018 18:30
- Mark as New
- Bookmark
- Subscribe
- Permalink
- Report this post
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
Answered! Go to the Best Answer.

Accepted Solutions
06-12-2018 04:09 - edited 06-12-2018 04:18
- Mark as New
- Bookmark
- Subscribe
- Permalink
- Report this post

06-12-2018 04:09 - edited 06-12-2018 04:18
- Mark as New
- Bookmark
- Subscribe
- Permalink
- Report this post
- Who Voted for this post?
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 🙂
06-12-2018 04:09 - edited 06-12-2018 04:18
- Mark as New
- Bookmark
- Subscribe
- Permalink
- Report this post

06-12-2018 04:09 - edited 06-12-2018 04:18
- Mark as New
- Bookmark
- Subscribe
- Permalink
- Report this post
- Who Voted for this post?
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 🙂
06-13-2018 16:19
- Mark as New
- Bookmark
- Subscribe
- Permalink
- Report this post

06-13-2018 16:19
- Mark as New
- Bookmark
- Subscribe
- Permalink
- Report this post
This works brilliantly! Thank you! I will be developing this further, so I may reach out if I get stuck again.
Thanks again!

06-13-2018 22:37
- Mark as New
- Bookmark
- Subscribe
- Permalink
- Report this post

06-13-2018 22:37
- Mark as New
- Bookmark
- Subscribe
- Permalink
- Report this post

10-03-2018 08:18
- Mark as New
- Bookmark
- Subscribe
- Permalink
- Report this post

10-03-2018 08:18
- Mark as New
- Bookmark
- Subscribe
- Permalink
- Report this post
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!

10-03-2018 08:30
- Mark as New
- Bookmark
- Subscribe
- Permalink
- Report this post

10-03-2018 08:30
- Mark as New
- Bookmark
- Subscribe
- Permalink
- Report this post
- Who Voted for this post?
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.
12-15-2018 16:03
- Mark as New
- Bookmark
- Subscribe
- Permalink
- Report this post

12-15-2018 16:03
- Mark as New
- Bookmark
- Subscribe
- Permalink
- Report this post
- Who Voted for this post?
This code worked great! Thank for for posting this, I was pulling my hair on on this
03-17-2019 23:23
- Mark as New
- Bookmark
- Subscribe
- Permalink
- Report this post

03-17-2019 23:23
- Mark as New
- Bookmark
- Subscribe
- Permalink
- Report this post
This issue of the battery icon showing up isn't reproduced in the simulator. At least not that I've seen.

