The Online Heart Rate Monitor has been realised as part of my online Harvard CS50X course. I started that cource because I was recovering from a heart attack and had lots of spare time. Besides that I was looking for a training that could help me starting with Flask. During the course I learned that at the end there was a final project to showcase your skills. So I tried to combine the one and the other...
After a heart attack you become aware of the importance of the motor that drives you; your HEART! During sporting I sometimes use a heart rate sensor so I came up with the idea of monitoring my heart rate with the help of a full stack website.
Also... this kind of functionality becomes more and more main stream. Companies like Zwift (virtual sporting), use all kind of sensors to feed the virtual environment.
Visual design
Textual design
1) To measure my heart rate I use a chest band sensor from ‘XAND’. This sensor is able to use both Bluetooth and ANT. In my case I use the Bluetooth protocol to gather the measured heart rate data.2) Since my laptop doesn’t support Bluetooth I use a cheap dongle to receive the data over Bluetooth on my laptop.
3) On my laptop a Flask application is running. This application supports a couple of routes:
- Home; a short description on the background of the application
- Connect; makes a connection between the application and the sensor. Kudo’s for Adafruit for sharing the Python code to do this. The app is notified if the connection has been made. Once the connection is there the sensor data is received and stored in a sqlite database.
- Monitor; displays in a streaming mode the received heart rate data together with a chart displaying the last 60 heart rates received in the database.
- Design; a more functional description about the design of the application.
- Specs; a more technical description about the components used.
- Test; where you can manually add a heart rate to the database table heart_rates.
Screen shot of the monitoring tab
4) Since the application is using a local webserver the front-end can be reached through the browser at URL http://127.0.0.1:50000
Running local
5) To use the monitor functionality you must first connect the application to the sensor and then choose monitor.
6) To do: since this is the MVP version of the application there is still a wish list of functionality like:
a. seamlessly refresh the data instead of the complete page refresh
b. change the colors of the rate and data points based on heart rate
c. activate alert based on high measured heart rate
d. activate/deactivate monitor button/tab based on connection
e. be able to drop the connection with the sensor
f. improve the front end to better adapt to multiple devices
g. make app available within my local network
h. give more feedback about the connection made
The MVC application consists of the following components:
1) Python app (app.py) as Controller
Main modules that are used within the Python application are:
a. Flask; A full stack microframework for Python.
b. Adafruit BLE; Adafruit shared the code for BLE (Bluetooth Low Energy) functionality.
c. Sqlite3; the most used database engine in the world (according to sqlite).
d. helpers.py; mainly for error handling
Code for connecting to the sensor and storing the rates in the database
2) HTML files (layout, index, connect, monitor, design, specs, test, apology) as View
The front end is using Javascript and Javascript libraries to deliver a nice UX:
a. jQuery; to simplify the HTML handling
b. Chart.js; to create a nice graphic chart with heart rates
Front end also uses:
a. CSS; to control the layout of the web pages
b. Bootstrap; as HTML, CSS, and JavaScript framework
3) Database (monitor.db) as Model
The database consists of only one file heart_rates to hold the received heart rates.
- Harvard CS50X for there great free offer of this course
- David and Brian for there great lecture
- Adafruit for sharing there BLE code
- Python community for all the great content that is out there
- Other communities for other great content that got me to a working app
- Community around the great IDE Visual Studio Code
Author: Jos van der Have
City: Vlaardingen
Country: The Netherlands
e-mail: [email protected]
on Git: https://github.com/jossieb