Thuta Learning
Search
ProjectsHardwarebeginner

Mini Project Part 3: Temperature Monitor — Web Dashboard

Relax. We'll talk through this in plain words — no textbook voice.

What you'll walk away with

  • Get comfortable with Mini Project Part 3: Temperature Monitor — Web Dashboard, no intimidation required
  • Be able to wire the hardware and run the code yourself
  • Apply this concept right away in a real project

Let's think about this for a second

This is where we bring in the 'Setting Up a Web Server on Pi' lesson — a Flask route reads the temp_log.csv file and renders it as an HTML page showing the latest reading (current temp/humidity) plus a history table (the last N readings). Adding auto-refresh (either an HTML meta refresh tag or a simple JavaScript setInterval) keeps the page showing the latest data without needing a manual reload.

Let's connect this to a real-world scenario

In your Flask route, read temp_log.csv with csv.reader, grab the last 20 rows as a list, and render them as table rows in your HTML template with a loop — visit the dashboard from your phone's browser at http://raspberrypi.local:5000, and the whole Temperature Monitor project (hardware → data collection → web display) is complete.

Let's walk through it together

python
from flask import Flask
import csv

app = Flask(__name__)

@app.route('/')
def dashboard():
    with open('temp_log.csv') as f:
        rows = list(csv.reader(f))[-20:]  # last 20 readings
    latest = rows[-1] if rows else ['--', '--', '--']
    rows_html = ''.join(f'<tr><td>{r[0]}</td><td>{r[1]}°C</td><td>{r[2]}%</td></tr>' for r in rows)
    return f'''
    <meta http-equiv="refresh" content="10">
    <h1>Current: {latest[1]}°C, {latest[2]}%</h1>
    <table border="1"><tr><th>Time</th><th>Temp</th><th>Humidity</th></tr>{rows_html}</table>
    '''

if __name__ == '__main__':
    app.run(host='0.0.0.0', port=5000)
You should see
Visiting http://raspberrypi.local:5000 will show the current temperature/humidity in the header, and the history table will auto-refresh every 10 seconds.

5-Minute Try-It

Combine the hardware and logging script from Parts 1-2 with this dashboard code and run the Temperature Monitor project end-to-end — this is the capstone project for the whole tutorial.

A quick word of caution

If you want a production-ready project, register the logging script and dashboard script as two systemd services (log-service, dashboard-service) following the 'Running Services on Boot' lesson earlier — that way they'll keep auto-running even after the Pi restarts.

Easy traps

  • Running only the dashboard script (Part 3) without running the logging script (Part 2) in the background — no new data gets added to the log file, so the dashboard just keeps showing stale old data
  • Trying to run both scripts (logging + dashboard) in the same single terminal window — you need separate processes/terminals (or two systemd services)

Now try it yourself

Combine the hardware and logging script from Parts 1-2 with this dashboard code and run the Temperature Monitor project end-to-end — this is the capstone project for the whole tutorial.

You'll know it worked when: Visiting http://raspberrypi.local:5000 will show the current temperature/humidity in the header, and the history table will auto-refresh every 10 seconds.

Mini Project Part 3: Temperature Monitor — Web Dashboard | Thuta Learning