help menu

Join us on the Community Forums!

  • Community Guidelines

    The Fitbit Community is a gathering place for real people who wish to exchange ideas, solutions, tips, techniques, and insight about the Fitbit products and services they love. By joining our Community, you agree to uphold these guidelines, so please take a moment to look them over.

  • Learn the Basics

    Check out our Frequently Asked Questions page for information on Community features, and tips to make the most of your time here.

  • Join the Community!

    Join an existing conversation, or start a new thread to ask your question. Creating your account is completely free, and takes about a minute.

Not finding your answer on the Community Forums?

Cancel
Turn on suggestions
Auto-suggest helps you quickly narrow down your search results by suggesting possible matches as you type.
Showing results for 
Show  only  | Search instead for 
Did you mean: 

Noob at coding, need help adding date, BPM and battery indicator to clock face

‎02-19-2018 08:51

‎02-19-2018 08:51

Was making my first clock face ever using https://dev.fitbit.com/getting-started/ as a guide since I have never done any coding before. I was pleased with my result - getting the picture I wanted, the placement of the time exactly where I wanted it and format (12h/24h). So, not so complicated I guess, but proud of myself 😛

Then I was thinking that I would like to add day and date in the bottom left corner, BPM in the bottom right corner and a battery indicator in the top left corner. The battery indicator is not that important, but would like to get the others in place. Or maybe the day/date in the bottom and BPM in the top left corner...

I've been trying for hours looking at the forums here and looked at ozibyte.com to see if I can get it the way I want it but just can't get it to work. It just stays as I had originally made it....I can feel some techrage coming on...

Please help....

 

Best Answer
0 Votes
4 REPLIES 4

‎02-19-2018 09:13 - edited ‎02-19-2018 09:50

‎02-19-2018 09:13 - edited ‎02-19-2018 09:50

Congratulations! It does feel very satisfying when things work.

Best Answer
0 Votes

‎02-19-2018 09:46

In response to JonFitbit

‎02-19-2018 09:46

Did not understand any of that.....

Best Answer
0 Votes

‎02-19-2018 09:49

In response to Chri84

‎02-19-2018 09:49

Sorry, I think I totally misread your post, or combined it with another.

Best Answer
0 Votes

‎02-19-2018 09:55

In response to JonFitbit

‎02-19-2018 09:55

Firstly you need to add <text> labels for each bit of information you want to display:

https://dev.fitbit.com/build/guides/user-interface/svg/#text

 

Then you can put an ID on each <text> element, and use CSS to position and style those <text> elements:

https://dev.fitbit.com/build/guides/user-interface/css/

 

Then in your code, you can get a handle on each <text> element by using document.getElementById()

https://dev.fitbit.com/build/guides/user-interface/javascript/#getelementbyid-

 

Now you just need to work out where to get the values you need, and put the values into each <text> element by doing: myThing.text = somevalue;

 

For example, the step count comes from here:

https://dev.fitbit.com/build/reference/device-api/user-activity/#variable-today-

 

There's an example of heart rate here:

https://dev.fitbit.com/build/guides/sensors/heart-rate/

 

 

Best Answer