I bought myself a FitBit earlier this year, and one of the major attractions has been the ability to turn everyday activity into data. A lot of data is either collected or produced by the FitBit ecosystem, and so combinations of data to display on the watchface are almost endless. Finding a pre-built clockface that displays the combination you want, however, is not so straighforward. After I a little research, I discovered that FitBit apps and clockfaces are built in FitBit Studio in a variation of JavaScript, so I decided to try my hand.

I was a little rusty on JavaScript, and needed to learn about the APIs for FitBit devices, so I found the FitBit Open Source apps list on GitHub. I leaned on the FitBitOS-Really-Basic clockface code and comments pretty heavily to learn the ropes.

Once I had the basics, I started to tinker with bringing in additional data from the device API, and using graphic elements, manipulating the styles.css and index.view files to create the aesthetic style of the clockface. Other open source clockfaces provided many examples of how to do similar things in different ways, and so my own clockface developed from many sources of inspiration.

In addition to basic date and time, I have displayed heart rate, steps and active zone minutes in this design. In future iterations, I will modify the battery detail, and I want to add water consumption to the clockface, however as this isn’t measured by sensors in the watch, the data is accessed via the FitBit Web API, so the next step is to do more research around that area, where I hope the Water Logged code will be of great assistance.