MyWhoosh Workout Progress

In my recent update post I showed off the very first draft of the MyWhoosh Workout page I have been working on.

If you missed that, it looked like this:

MyWhoosh Workout Progress first pass

Certainly not the nicest looking thing. But as a first pass it was good enough to ‘reveal’.

I managed to get more time on it today, and I wanted to drop a quick update on how it currently looks:

MyWhoosh Workout Progress second pass

There are still some problems with it. I’ll get on to them in a second.

I did a bunch of changes:

  • Put the workout summary on the left on desktop, but it drops to the bottom on mobile
  • Added Intensity Factor to the Workout overview section
  • Added Free Ride to the Zone distribution section
  • Made sure to include the workout creator’s name under the Workout description

There are a few other tweaks to display on mobile, but nothing huge to call out.

I think the nicest changes are the colours of the zones, and the gaps added between the zones on the workout graph. That 1px gap makes all the difference.

What Remains?

There’s actually quite a lot left to do. You can see on the screenshot above – 3 errors on the left.

Those errors are a new thing – but I haven’t yet solved them. The thing I need to do is render out the workout graph so that when the workout is viewed in Google or Twitter (err, X) or whatever, it shows the graph as a particular image format called a PNG.

Right now, it displays as an SVG on the page. That’s great, because it means it scales to whatever screen size you have, but Google, etc, they don’t like that. They want a static image. So I need a way to remove everything and just show the graph, but the framework I use – NextJS – it doesn’t make that easy. So that’s my currently stumbling block.

Well, that and other things.

The workout listing is still untouched. See the previous post for an image of how bad that currently looks.

But still, I’m happy with the progress. I will keep at it until it’s done.

As before, I’m going to avoid directly linking to the page because if Google gets ahold of it, then it will not like that image format as above. But if you’d like to have a sneak peak, update the bikeclimbs.com URL in your browser to end with /workout/mywhoosh

4 thoughts on “MyWhoosh Workout Progress”

  1. Looks nice. When will it launch do you think? I use the workouts extensively on mywhoosh. As good as zwift and far more attractively priced!

    Reply
  2. Not sure what your plan is with the MyWhoosh Workouts page, but a great addition could be to be able to create a workout file directly or indirectly from the workout detail you have published, which could then used for outdoor rides. For example you can currently copy the Zwift workout details from WhatsonZwift and through a couple of steps create a workout file to use on your head unit. Just a thought.

    Reply
    • Hi Drew, thanks for your message. I still have a bunch of things to do with the MyWhoosh Workouts pages related to sorting, filtering, some fixes with the data (duplicates) and the workout graph for free rides is still a mess.

      Thanks for the suggestion about being able to convert the workouts to be used outdoors. I tend not to do structured workouts outdoors so hadn’t considered this, or ever used the WhatsOnZwift feature. I’ll take a look at how they are doing it, and see what’s involved. A brief look earlier this morning showed that it wasn’t just a simple one-liner type thing, or that someone else had already done all the hard work and I could download their code into mine. Maybe that exists out there somewhere.

      If I can do it, I certainly will. Cheers, Chris

      Reply

Leave a Reply