A mile a day Strava dashboard

Thu Feb 01 2018

Here be dragons (possibly).

This post is tagged as "archive". Either my opinions on the subject have changed, technology has moved on, or I've revisited it more recently and realised it's just old.

I’ve been a semi-regular runner since about 2014, when I was briefly inspired to join the navy, so needed to be able to run. Since then, I’ve gone through a series of peaks and troughs in commitment, in a 6 month cycle that has me highly motivated, building up to running a few 5-10k events, then overtraining, getting injured, and stopping for a while. I thought for 2018 I’d aim for a consistent year, and try to avoid too many overtraining injuries, by setting myself of an average of 1 mile a day measured on a 7 day rolling period. This averages out as running 10k a week, (or 5k twice) plus another short recovery run. To track this I decided to create a Strava dashboard using a 7inch touchscreen and my Raspberry Pi 0, which so far has had little use. I planned to have it show a series of graphs & charts showing metrics, and then mount it on the wall to keep me motivated. Simples.

Access to the Strava APIs is actually very simple. I created a new app, which gave me a test app that only I could use (fine by me), along with access tokens and keys to access their V2 APIs. I opted to use node-RED, and the excellent node-RED dashboard nodes, to code my app logic as it contained all the front-end functionality I needed, and I couldn’t be bothered to create a proper node applet. For those not in the know, node-RED is an open source flow-based programming language, developed by IBM’s very own Emerging Technologies. It’s incredibly simple to use, with a huge array of nodes provided as default and thousands available as add-ons from the community. Say you wanted to connect to your Alexa device, smart lightbulbs, MQTT broker, toaster(?), Facebook or Twitter accounts, database, whatever, the nodes to do so have already been written. And if not, there’s custom nodes available to write JavaScript (the same as a node.js server). It’s really very simple. I started with some basic designs and requirements to help decide what functionality I wanted to show - a main chart showing metrics for all my runs in 2017, 3 gauges displaying my average daily, month to date, and year to date mileage. I also wanted to show my records for some running events, and a notification system for when my shoes were nearing the end of their lifespan. Later, I’d add in a Twitter bot as well (there’s nothing more motivational than a load of internet strangers seeing every run’s detailed metrics). To do this, I needed to use 3 of the Strava APIs to collect the data - User, activities & gear.

Essentially, all my node-RED instance does is make 3 HTTP requests to the APIs, then manipulate the response into a series of formatted numbers/graph objects, which are then sent to the front-end and displayed. This entire app logic can be seen in the flows below -

I tried to use the built in nodes as much as possible (JSON, change, switch, inject, etc) and avoid function nodes as much as possible. I did have to use a few function nodes to calculate my course records, and generate a rolling average mileage, although I suspect with the fairly new addition of JSONata expressions in certain nodes, I could’ve avoided using these at all. Creating the dashboard was as simple as dragging and dropping the components I wanted, selecting colours, then arranging using the provided grid. Once this was completed, I set my Pi to boot up into kiosk mode, added node-RED to the systemctl processes so it would start on boot, then used inject nodes triggering on a semi-regular basis to set the whole thing off. Then I plugged it all in, mounted on the wall, and I was done!