REAL-TIME HEALTH MONITOR WITH WEB INTEGRATION

by SPLASH ELECTRONIC in Circuits > Arduino

413 Views, 7 Favorites, 0 Comments

REAL-TIME HEALTH MONITOR WITH WEB INTEGRATION

REALTIME HEALTH MONITORING SYSTEM WITH WEB INTEGRATION.png
2.jpeg
4.jpeg
WhatsApp Image 2025-08-08 at 01.23.26_c3476a50.jpg

This is a Health Monitoring Device. it tracks the important vitals like heart rate , spO2 and temperature and sends it to a centralized server.


where would be this project useful?

  1. think of a hospital with lots of patients, by developing and deploying the project to keep track of a patient and the server being capable of handling data from multiple esp and log them according to the user , we can also deploy some ML to predict abnormality in the data and hence detect any new diseases


HOW DOES THE WHOLE SYSTEM WORKS ?

  1. using the sensors MAX30100 ( spo2 , HR ) , DS18B20 ( temp ) the esp gets the vitals of the patient and prints it in the serial port
  2. A python script runs in the host machine to get the data from the serial and to updates to the server
  3. data is stored in MongoDB and accessed using python flask and data is displayed out in the website and graphs is also rendered in the web page as requested
LIVE SERVER RUNNING HERE -> https://health-monitor-legitcoconut.vercel.app/
CODE WILL BE AVAILABLE IN GIT -> https://github.com/LegitCoconut/health-monitor

Downloads

health_monitor_pdf.pdf

Supplies

6.jpeg
1.jpeg
3.jpeg
7.jpeg
WhatsApp Image 2025-08-08 at 01.27.11_98ce8972.jpg
  1. ESP8266 / ESP32
  2. MAX30100 heart rate sp02 sensor
  3. DS18B20 temperature sensor
  4. Buzzer
  5. Perfboard
  6. carboards , some wires anfd glue

Wiring Up the Microcontroller

F1FDW5KM9H34I2W.jpg
FAFYEVEM9H34I3I.jpg
FMJGSZ8M9H34I2T.jpg

connections for MAX30100 sensor ( refer this blog to setup the sensor -> setup_blog )

  1. SCL -> D1 ( gpio1 )
  2. SDA -> D2 ( gpio2 )
  3. VCC -> 3V
  4. GND -> GND

connections for DS18B20 sensor

  1. VCC -> 3v
  2. GND -> GND
  3. SIGNAL -> D5 ( gpio14 )

connections for buzzer

  1. VCC -> 3v
  2. GND -> GND
  3. SIGNAL -> D6 ( gpio12 )


Uploading Code to Microcontroller

What all does the code running in the microcontroller do?

  1. it fetches data from heart rate sensor and updates in the microcontroller
  2. Fetches data from the SP02 sensor and updates in the MC
  3. Fetches the temp data and updates in the MC
  4. The condition for some critical cases like low temp or high temp, low Hear rate, Sp02 will trigger the buzzer
  5. All these data is uploaded to the cloud for saving and logging
bpm = pox.getHeartRate();
spo2 = pox.getSpO2();

if (spo2 < 90 || bpm < 40 || bpm > 180) {
tone(BUZZER_PIN, 1000);
} else {
noTone(BUZZER_PIN);
}

Code for the esp8266 is given with this part

Downloads

update_to_local_server.ino

Setting Up the Webserver

Screenshot 2025-08-08 012900.png
Screenshot 2025-08-08 012937.png

What the web server does?


  1. The webserver is based on python flask framework and HTML,CSS & JS.
  2. There is an end point in the flask app in which it accepts the data send by the ESP and save to the database which is MongoDB in this case
@app.route("/add_log", methods=["POST"])
def add_log():
data = request.json
if not data:
return jsonify({"error": "Invalid data"}), 400
logs_collection.insert_one(data)
return jsonify({"message": "Log added successfully"}), 200

this is the part of python server which helps in saving the data to the database

// Flask Server URL
const char* serverURL = "http://192.168.93.7:5000/add_log";

// code in esp8266 which send the data to server
void sendDataToServer(float hr, float spo2, String timestamp) {
if (WiFi.status() == WL_CONNECTED) {
HTTPClient http;
WiFiClient client;

http.begin(client, serverURL);
http.addHeader("Content-Type", "application/json");

String jsonPayload = "{\"heart_rate\": " + String(hr) +
", \"spo2\": " + String(spo2) +
", \"timestamp\": \"" + timestamp + "\"}";

int httpResponseCode = http.POST(jsonPayload);
Serial.print("Server Response: ");
Serial.println(httpResponseCode);

http.end();
} else {
Serial.println("WiFi not connected, cannot send data.");
}
}
  1. the updated values are the displayed in the webpage ( visit webpage ) and also graphs are generated upon users request and then send to front-end

this particular graph creation method is used since vercel dont have the functionality to save images to the storage, images are created upon request and then shown in the front end

@app.route("/generate_graph")
def generate_graph():
logs = list(logs_collection.find({}, {"_id": 0}))
if not logs:
return jsonify({"error": "No data available"}), 404

df = pd.DataFrame(logs)
df["time_of_check"] = pd.to_datetime(df["time_of_check"])
df.sort_values("time_of_check", inplace=True)

plt.figure(figsize=(8, 5))
plt.plot(df["time_of_check"], df["Heart_beat_rate"], label="Heart Rate (BPM)", marker='o')
plt.plot(df["time_of_check"], df["Sp02_level"], label="SpO2 Level (%)", marker='s')
plt.plot(df["time_of_check"], df["Temperature"], label="Temperature (°C)", marker='^')

plt.xlabel("Time of Check")
plt.ylabel("Values")
plt.legend()
plt.xticks(rotation=45)
plt.grid()

# Save the image in memory
img_io = io.BytesIO()
plt.savefig(img_io, format='png', bbox_inches="tight")
plt.close()
img_io.seek(0)

return send_file(img_io, mimetype='image/png')

code for the webserver is given below can also clone from the online repo also

Downloads

app.py

Project Complete

FRZSTGWM9H34I3B.jpg
FODJK4KM9H34I30.jpg
FN5DFS1MDRNA9CO.jpg
F3NXKNVMDRNA9EL.png

This was a project done into consideration of using for a mass public or for the elderly people


  1. If you are trying to add some more features like fall detection and all , u have to add another sensor which depends on I2C, then u have to upgrade the heart rate sensor to a good one because there was some issues that we were facing while adding both heart rate and gyro at the same time
in case of any helps -> check bio for social media handles or drop a message in the given mail id