05-19-2019 12:08
05-19-2019 12:08
Hi Fitbit Community,
I recently purchased the Fitbit Ionic because my old Blaze no longer seemed to track my distances accurately. I also liked the idea of having a swim tracker and built-in GPS. I've been creating my own clock face for the Ionic and I was wondering if any of you kind folks had any suggestions or examples of how to create a power level staus bar. I've seen a few in the clock face gallery but I'm not sure how to start adding one to my own clock face. I understand how to add the battery icon etc. from the examples here in the SDK documentation. I'm relatively new to javascript but I've been developing apps in C# off and on for about 5+ years.
What I'd like to do is run the status bar across the top or side of my clock face and have it get shorter as my power level decreases. I would have it be green at full power, yellow at 50% power and then red at %25 and under. The color part I could figure out, its how to match the bar length with the power level that I'm having the trouble. Thank you for taking the time to read this, my apologies if it was long winded!
Answered! Go to the Best Answer.
05-20-2019 07:28
05-20-2019 07:28
The general idea is to create a rectangle for your battery level status bar. Then set the width of the status bar as a function of the battery charge level.
Rect.width = battery.charge.level / 100 x screen.width
05-20-2019 07:28
05-20-2019 07:28
The general idea is to create a rectangle for your battery level status bar. Then set the width of the status bar as a function of the battery charge level.
Rect.width = battery.charge.level / 100 x screen.width
05-21-2019 18:15
05-21-2019 18:15
Thank You, CharliesGal.
That is very helpful. I wasn't thinking of it in terms of a rectangle - it makes sense to do it as you have described.
Thanks Again.