For my birthday I got a Fitbit Sense at a very good price as the Sense 2 had just come out. The default watch face that comes with the Sense is called Spectrum which shows your steps, heart rate and sleep score. As your stats increase so does the graph. The issue I had with this was that your sleep score only changed on a daily basis, and your heart rate graph never really rose very high up the graph. And I am a bit of a stats nerd so I like the faces that show you lots of data.
On the Sense, you can only have five watch faces, but then I found one called FitFace which links to its own watch face platform, and on that one “watch face”, you can save another five from FitFace. This platform does have limited stats, ie you can’t pull sleep score, o2 levels or calendar items, but it does have a really easy-to-use interface that allows anyone to make their own watch face with really no need for coding. So on this platform, I decided to “improve” the Spectrum watch face by displaying steps, heart rate, active minutes and calories burned. Throughout the day, these graphs will grow more than the original set of metrics.
Basically, each graph is a square image that adjusts the Y coordinates and the rotation value based on the percentage of the current stat compared with the daily goal. I had to brush off some trigonometry using Sin to work this out. I also has to put in a condition to stop rotating once the goal was met for the day, otherwise, the square would rotate too much and break the illusion of the graph being a triangle.
There are some imperfections (a right angle line) in each of the graphs, this is a known bug on FitFace when your rotate images bigger than 200px. You can view this face here (I have no idea why their test data has the heart rate up at 200). I think the colours and transparency may need to be tweaked a bit, but it works alright for now.