Category: Fitbit Development

Creating an analog Fitbit Ionic Clockface (Part 3)

Due to a request, I’m adding another part to the tutorial: How to add the date. Since the original tutorials were written, Fitbit have made updates and so the ‘innerText’ we were using before will soon be deprecated we need to change it to ‘text’. First up, let’s add the update to index.gui  This will

Fitbit tips and tricks

Some tips and tricks I’ve come across while developing for the Fitbit Ionic and Versa.  I’ll be updating these when I find more. How to perform a Factory Reset: Settings > About > Factory Reset How to perform a Hard Reset: Hold the left and bottom-right buttons on the Fitbit Ionic or Versa for 15

Creating an analog Fitbit Ionic Clockface (Part 2)

Okay, now we have our basic analog clockface let’s add some other stats to make it funky! Click on resources/index.gui. This is the first one we need to update. Add the following near the bottom before the svg end tag so it looks like this: <text id="heartrateText" class="heartrateText">BPM</text> <text id="stepsText" class="stepsText">STP</text> <text id="caloriesText" class="caloriesText">CAL</text> <text

Creating an analog Fitbit Ionic Clockface (Part 1)

First of all, you will need to either define a minute hand and an hour hand or use PNG images. We’ll generate the second hand. Here’s a couple I put together along with a background: They don’t look great, but they’ll do for our development. You can create your own, better ones.  Download these from