Van Data naar Grafiek: Een Flask-SQLite IoT Dashboard Bouwen met Raspberry Pi

Realtime data vastleggen van een DHT22-sensor, opslaan in een lichtgewicht SQLite-database en visualiseren van de resultaten op een webdashboard gebouwd met Flask.

1. Inleiding

In onze vorige tutorial, Python WebServer With Flask and Raspberry Pi, leerden we hoe sensordata via een web-frontend beschikbaar te maken. De volgende logische stap is die metingen te persisteren zodat ze later geanalyseerd kunnen worden.

2. Benodigdheden

• Raspberry Pi 3 – $32,00
• DHT22 Temperatuur & Relatieve Vochtigheid Sensor – $9,95
• 4,7 kΩ pull-up weerstand

3. SQLite Installeren

SQLite is de ideale database-engine voor een single-board computer: het is serverloos, lichtgewicht en volledig open-source. Installeer het met:

sudo apt-get install sqlite3

Maak vervolgens een werkmap en een databasebestand aan:

mkdir Sensors_Database cd Sensors_Database sqlite3 sensorsData.db

Wanneer de SQLite-prompt verschijnt, verlaat met .quit en je bent terug in de shell.

4. De DHT Tabel Aanmaken

De tabel DHT_data bevat een timestamp, temperatuur en vochtigheid.

sqlite3 sensorsData.db BEGIN; CREATE TABLE DHT_data (timestamp DATETIME, temp NUMERIC, hum NUMERIC); COMMIT;

Alternatief via Python:

import sqlite3 con = sqlite3.connect('sensorsData.db') with con: cur = con.cursor() cur.execute('DROP TABLE IF EXISTS DHT_data') cur.execute('CREATE TABLE DHT_data(timestamp DATETIME, temp NUMERIC, hum NUMERIC)') 

5. Voorbeeldrijen Invoegen

Handmatige invoeging via SQLite:

INSERT INTO DHT_data VALUES(datetime('now'), 20.5, 30);

Of bulk invoegen in Python:

with con: cur.execute('INSERT INTO DHT_data VALUES(datetime('now'), 20.5, 30)') cur.execute('INSERT INTO DHT_data VALUES(datetime('now'), 25.8, 40)') cur.execute('INSERT INTO DHT_data VALUES(datetime('now'), 30.3, 50)') 

6. De DHT22 Aansluiten

Verbinde VCC met 3,3 V, Data met GPIO 16, GND met grond, en plaats een 4,7 kΩ pull-up tussen VCC en Data.

7. De Adafruit DHT Bibliotheek Installeren

Download van GitHub en installeer:

sudo python3 setup.py install

8. Data Uitlezen en Loggen

Hieronder een minimaal script dat de sensor uitleest, waarden afrondt en naar de database schrijft:

import time import sqlite3 import Adafruit_DHT DB_NAME = 'sensorsData.db' SAMPLE_FREQ = 120 # seconden DHT_SENSOR = Adafruit_DHT.DHT22 DHT_PIN = 16 def read_and_log(): humidity, temperature = Adafruit_DHT.read_retry(DHT_SENSOR, DHT_PIN) if humidity is not None and temperature is not None: humidity = round(humidity) temperature = round(temperature, 1) conn = sqlite3.connect(DB_NAME) cur = conn.cursor() cur.execute('INSERT INTO DHT_data VALUES(datetime('now'), ?, ?)', (temperature, humidity)) conn.commit() conn.close() for _ in range(3): read_and_log() time.sleep(SAMPLE_FREQ) 

9. Continu Loggen

Voor een real-time logger, voer het volgende uit in een dedicated terminal. Het neemt elke minuut een sample:

import time, sqlite3, Adafruit_DHT DB = 'sensorsData.db' SAMPLE_FREQ = 60 while True: humidity, temperature = Adafruit_DHT.read_retry(Adafruit_DHT.DHT22, 16) if humidity is not None and temperature is not None: conn = sqlite3.connect(DB) cur = conn.cursor() cur.execute('INSERT INTO DHT_data VALUES(datetime('now'), ?, ?)', (round(temperature,1), round(humidity))) conn.commit() conn.close() time.sleep(SAMPLE_FREQ) 

10. De Database Opvragen

Typische queries:

• Alle rijen: SELECT * FROM DHT_data
• Laatste entry: SELECT * FROM DHT_data ORDER BY timestamp DESC LIMIT 1
• Temperatuur > 30 °C: SELECT * FROM DHT_data WHERE temp > 30
• Vochtigheid = 29 %: SELECT * FROM DHT_data WHERE hum = 29

11. Flask Web Server

Installeer Flask: sudo apt-get install python3-flask. Maak de projectstructuur aan:

mkdir dhtWebServer cd dhtWebServer mkdir templates static 

In appDhtWebServer.py:

from flask import Flask, render_template import sqlite3 app = Flask(__name__) def fetch_latest(): conn = sqlite3.connect('../sensorsData.db') cur = conn.cursor() cur.execute('SELECT * FROM DHT_data ORDER BY timestamp DESC LIMIT 1') row = cur.fetchone() conn.close() return row @app.route('/') def index(): time, temp, hum = fetch_latest() return render_template('index.html', time=time, temp=temp, hum=hum) if __name__ == '__main__': app.run(host='0.0.0.0', port=80, debug=False) 

Template templates/index.html:

<!DOCTYPE html> <html> <head> <title>DHT Sensor Dashboard</title> <link rel='stylesheet' href='../static/style.css'> </head> <body> <h1>DHT Sensor Data</h1> <p>Temperature: {{ temp }} °C</p> <p>Humidity: {{ hum }} %</p> <p>Last reading: {{ time }}</p> <a href='/' class='button'>Refresh</a> </body> </html>

12. Front-End Verbeteren met Meters

Download JustGage en plaats justgage.js en raphael-2.1.4.min.js in static. Update de template om geanimeerde meters weer te geven:

<div id='g1'></div> <div id='g2'></div> <script src='../static/raphael-2.1.4.min.js'></script> <script src='../static/justgage.js'></script> <script> new JustGage({id:'g1', value:{{ temp }}, min:-10, max:50, title:'Temperature', label:'°C'}); new JustGage({id:'g2', value:{{ hum }}, min:0, max:100, title:'Humidity', label:'%'}); </script>

13. Historische Grafieken met Matplotlib

Installeer Matplotlib: sudo apt-get install python3-matplotlib. Maak een nieuwe Flask app appDhtWebHist.py die PNG-afbeeldingen on-the-fly serveert.

from flask import Flask, render_template, make_response from matplotlib.backends.backend_agg import FigureCanvasAgg as FigureCanvas from matplotlib.figure import Figure import sqlite3, io app = Flask(__name__) DB = '../sensorsData.db' def get_latest(): conn = sqlite3.connect(DB) cur = conn.cursor() cur.execute('SELECT * FROM DHT_data ORDER BY timestamp DESC LIMIT 1') row = cur.fetchone() conn.close() return row def get_history(samples): conn = sqlite3.connect(DB) cur = conn.cursor() cur.execute('SELECT * FROM DHT_data ORDER BY timestamp DESC LIMIT ?', (samples,)) rows = cur.fetchall() conn.close() rows.reverse() # chronologische volgorde times, temps, hums = zip(*rows) return times, temps, hums @app.route('/') def index(): time, temp, hum = get_latest() return render_template('index.html', time=time, temp=temp, hum=hum, samples=100) @app.route('/plot/temp') def plot_temp(): times, temps, _ = get_history(100) fig = Figure() ax = fig.add_subplot(1,1,1) ax.plot(range(len(temps)), temps) ax.set_title('Temperature (°C)') canvas = FigureCanvas(fig) output = io.BytesIO() canvas.print_png(output) return make_response(output.getvalue(), 200, {'Content-Type':'image/png'}) @app.route('/plot/hum') def plot_hum(): _, _, hums = get_history(100) fig = Figure() ax = fig.add_subplot(1,1,1) ax.plot(range(len(hums)), hums) ax.set_title('Humidity (%)') canvas = FigureCanvas(fig) output = io.BytesIO() canvas.print_png(output) return make_response(output.getvalue(), 200, {'Content-Type':'image/png'}) if __name__ == '__main__': app.run(host='0.0.0.0', port=80, debug=False) 

Template templates/index.html bevat twee <img> tags die de PNG-routes opvragen.

14. Conclusie

GitHub en verdere voorbeelden op MJRoBot.org.