Mini Project Part 3: Temperature Monitor — Web Dashboard

ခဏလေး ဒီလိုပဲ စဉ်းစားကြည့်

'Setting Up a Web Server on Pi' lesson ကို ဒီနေရာမှာ ပေါင်းစပ် အသုံးချမှာပါ — Flask route တစ်ခုက temp_log.csv ဖိုင်ကို ဖတ်ပြီး, latest reading (current temp/humidity) + history table (last N readings) ကို HTML page အဖြစ် render ပါတယ်။ Auto-refresh (HTML meta refresh tag ဒါမှမဟုတ် simple JavaScript setInterval) ကို ထည့်ရင် page ကို manual reload မလိုဘဲ latest data ကို ပုံမှန် ပြသနေပါလိမ့်မယ်။

လက်တွေ့ scenario နဲ့ ချိတ်ကြည့်မယ်

Flask route ထဲမှာ csv.reader ဖြင့် temp_log.csv ကို ဖတ်, last 20 row ကို list အဖြစ် ယူပြီး HTML template ထဲ loop ဖြင့် table row အဖြစ် render ပါ — dashboard ကို phone browser ကနေ http://raspberrypi.local:5000 ဖြင့် ဝင်ကြည့်ရင် Temperature Monitor project တစ်ခုလုံး (hardware → data collection → web display) ပြီးစီးသွားပါလိမ့်မယ်။

• Flask route က temp_log.csv ကို ဖတ်ပြီး HTML table အဖြစ် render ခြင်း
• Latest reading + history (last N rows) ကို ပြသခြင်း
• Auto-refresh (meta tag/JS) ဖြင့် manual reload မလိုအောင် ပြုလုပ်ခြင်း

အတူတူ ကြည့်မယ်

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)

http://raspberrypi.local:5000 ကို ဝင်ကြည့်ရင် current temperature/humidity ကို header မှာ ပြပြီး, history table ကို ၁၀ စက္ကန့်တစ်ခါ auto-refresh ဖြင့် ပြသမည်။