06-10-2018 18:30
06-10-2018 18:30
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.
06-12-2018 04:09 - edited 06-12-2018 04:18
06-12-2018 04:09 - edited 06-12-2018 04:18
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
06-12-2018 04:09 - edited 06-12-2018 04:18
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
06-13-2018 16:19
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
06-13-2018 22:37
10-03-2018 08:18
10-03-2018 08:18
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
10-03-2018 08:30
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
12-15-2018 16:03
This code worked great! Thank for for posting this, I was pulling my hair on on this
03-17-2019 23:23
03-17-2019 23:23
This issue of the battery icon showing up isn't reproduced in the simulator. At least not that I've seen.