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

Power Level Status Bar Instead of Battery Icon

ANSWERED

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!

Best Answer
0 Votes
1 BEST ANSWER

Accepted Solutions

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

 

View best answer in original post

Best Answer
2 REPLIES 2

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

 

Best Answer

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.

Best Answer
0 Votes