Spin Bike Monitor App

I bought a cheap spin bike. It was great for staying fit with the gyms closed. But I was disappointed by the monitor. The main issue - no RPM display. Most online spin classes would tell you to target a specific value. I searched online for something better, but couldn't find anything that would work how I wanted. I decided to build one myself.

I thought about using a cheap LCD screen from an old project, but since we have so many good screens everywhere nowadays, I decided it would be much better, cheaper and easier to build a web app and use any device with a screen and browser. I got my trusty Wemos D1 and started coding.

The Result

This is what I came up with. It is still a work in progress and it was my first front end development project. The site is responsive meaning it adapts for mobile and desktop screens.

Mobile view:

Desktop view:

Features

This app displays RPM, distance, calories and time. The timer stops counting automatically when you stop spinning.

The app allows you to set a target RPM value using the +/- buttons. When you are below target RPM, the background of the page and the RPM number change to yellow or red color depending on how far below.

The app also saves history of your past workouts and displays an all-time total.

Hardware

The RPM sensor on the bike was super simple. It is a switch mounted close the pedals that closes briefly once per cycle. Two wires come off this switch and are routed to a 3.5mm audio plug. I had some spare audio jacks from another project, so I simply glued it to the back of the Wemos D1 and soldered on two wires to the GPIO pin D2 and the GND pin. Below is what I soldered together quickly to test with.

Software

RPM Reading Algorithm

To read the RPM, we need to measure the time it takes to complete 1 cycle. We put an interrupt on the input GPIO pin. It triggers once a cycle. During the interrupt service routine, we record the time since the last interrupt. In the main loop, we use this duration to calculate the instantaneous RPM.

File Storage and API on ESP8266

To host the web files on the ESP8266 chip, I used the SPIFFS library. This creates a simple filesystem on part of the chip's flash to store files of any time. For me this was an index.html file, style.css, main.js and favicon.ico files. Then is used the following two libraries to serve these files to the user when they enter the IP address of the module into their browsers: ESPAsyncTCP and the ESP Async WebServer. These libraries also allow me to create a simple API endpoint, where I can use GET requests to fetch data a couple times per second from the module.

Webpage Architecture

At first, I wrote everything in one big long index.html file. That was enough to get it working and prove the concept. I kept adding more features to it until the poor Wemos D1 was no longer able to load the page at a sufficiently fast speed. I decided to change the design to host the web page on Netlify (like this site), and have the Wemos D1 act as a tiny API server. After the page has loaded in the user's browser, I request real time data from the chip twice a second and display it to the user.

The Code

I plan to release this software once it is more stable and pretty. Contact me if you have questions or want to get early access to it.