What does it do?

Have you ever tried to do an indoor bike workout with text-based instructions? When there are multiple intervals and recovery periods it can get really hard to keep track of where you are up to, especially when you're working hard!

Well this app converts those text-based indoor bike workout instructions into a visual representation that makes it super easy to follow.

Instructions are created in an array of JavaScript objects. These are the instuctions that create the workout you can see in the other image:

That array of JavaScript objects populates a drop-down list so that you can choose your workout.

After loading your chosen workout, its structure is represented as a bar chart display. The height of each bar represents intensity, width represents duration.

Click the Start button and a vertical line tracks across the screen indicating elapsed time.

In the top right corner of the screen is a readout showing:

• total elapsed time
• intensity (in watts) for the current block
• time remaining in the current bllock
• intensity (in watts) of the next block

Why did I build it?

I used to be an ultra-distance triathlete. I did a lot of cycling on my indoor trainer. Back then I used an online app called TrainerRoad which offered an interface similar to the one I have built here.

I got back into cycling in a small way recently but didn't want to incur the cost of TrainerRoad or any other online app. Also, my smart trainer is very old (it's a 12 year old Computrainer) as is my laptop (2013 Mac) and they are not up to the task of running modern training apps.

So I decided to build my own. Clearly it doesn't do everything that a proper online training app will do (it won't connect to your smart trainer and control the intensity - you have to do that manually!) but it's perfect for my current needs ... and it's free!

It was also a good excuse to play around with the HTML Canvas API.

Geeky details

• The app is built with vanilla HTML & JavaScript.
• The bar chart is rendered by the HTML Canvas API
• I built a Visualiser class that takes care of drawing the display and redrawing it every second
• The JavaScript setInterval function is not very accurate over longer periods (possibly due to the processor that is running it having to handle lots of other processes) so, every minute, I check the current seconds counter against actual elapsed time and make a small correction if required. This adjustment isn't noticeable in the app.