My own fitness tracker

Written on 15 February 2014, 11:05pm

Tagged with: , ,

The awkward Tanita incident in the beginning of February inspired me to build my own fitness data input + visualising tool. After some nights of work, they are done; and I am pretty happy with the result. Screenshots and description below.

1. Background

I spent some time choosing the new repository for my data. After considering multiple options (like MongoDB, Google Fusion Tables, Dropbox xml, AWS), I chose a MySQL database + periodic Dropbox backup.
So, the measurement data was migrated from Tanita XML to MySQL. Funny enough, shortly after I started to work on this tool, my shared hosting provider had a data corruption incident (for the first time in 5 years since I am using them), and the database had to be restored. This is just another reminder to always backup 🙂

2. Add new data

I designed this interface to suit the following 2 use cases:
1. I will use it from my mobile
2. I will use it almost daily
Finally it looks like that:
Fitness Tracker - add

It’s HTML5, designed to look best on mobile and to take advantage on the input type='tel'. I used this template as starting point, then added some Javascript to allow me to use the full telephone keyboard, without the need to insert the dot character (see how 29 is transformed to 2.9 when the field lost focus).
At some point I considered using a HTML5 slider instead of the tel input types, but the current solution was simpler to implement and is a bit faster. It takes me less than 30 seconds to copy the data from the scale to mobile. After I hit ‘Submit’, I am redirected to the next interface:

3. Visualise data

Here I used a front-end tool to draw the plots: JQPlot. For 2 reasons:
– I already played with a back-end tool (JPGraph – in drawing the Panini simulation graphs)
– it’s faster – which is very convenient on mobile.
[Paranthesis: Exactly 3 years ago I plotted the formula of love using a similar tool – Flot.]
The starting point for the interface was the JQPlot’s animated dashboard, and I liked it so much I used it twice 🙂 First for drawing the weight, muscular mass and body water, and second for the body fat and the metabolic age (on a logarithmic Y axis). The interface also features some buttons for changing the range of visualisation data (this time I believe that a range slider would have been more helpful, but the current solution does the job).
More in the screenshots:
Fitness Tracker - view

I designed this interface to be used both on mobile and on desktop: on mobile it’s useful because it comes up right after adding the data, with the plot for the last 2 weeks. On desktop I would probably be more interested in seeing the bigger picture.

4. Edit data

I added this interface in the end because I feared I will have to edit some data, and the phpMyAdmin was a few more clicks away 🙂 So here it is, I resurrected the ancient phpMyEdit and put a little Bootstrap styling over it. It looks like this:
Fitness Tracker - edit

While this interface can still be used on mobile (with a bit of zooming an careful tapping), I see myself using it more on the desktop (for adding notes, filtering data, sorting or counting the raw data).

So here they are. I already used the combination for more than a week and it works fine. At some point I thought about putting in on GitHub, but I don’t see that much interest around this subject.

What’s next? I would like to have an automated way (except scrapping) to get my running data from Endomondo, but apparently they don’t plan to do this. For the tracking of my other activities, I used Human and I really hope their 2.0 version is better than 1.0. And, for the future, I am waiting for the iWatch. My wrist is free 🙂

PS: Here is good book about getting in shape: Cardio Sucks, by Michael Matthews.

Comments (1)

Leave a response