Help! Battery Level Addition Watch Face

[kallandz]

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

[JeCom · Accepted solution]

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 🙂

[kallandz]

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

Thanks again!

[JeCom]

No problem, glad to help 🙂 

[nokotok]

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!

[JeCom]

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.

[lneib]

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

[MolliorMerx]

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