Von Daten zum Graphen: Flask-SQLite IoT-Dashboard mit Raspberry Pi erstellen

Echte Daten von einem DHT22-Sensor erfassen, in einer leichten SQLite-Datenbank speichern und die Ergebnisse auf einem Web-Dashboard visualisieren, das mit Flask erstellt wurde.

1. Einführung

In unserem vorherigen Tutorial, Python WebServer With Flask and Raspberry Pi, lernten wir, Sensordaten über ein Web-Frontend bereitzustellen. Der nächste logische Schritt ist, diese Messwerte zu persistieren, damit sie später analysiert werden können.

2. Stückliste

• Raspberry Pi 3 – 32,00 $
• DHT22 Temperatur- & Luftfeuchtigkeitssensor – 9,95 $
• 4,7 kΩ Pull-Up-Widerstand

3. SQLite installieren

SQLite ist die ideale Datenbank-Engine für einen Single-Board-Computer: serverlos, leichtgewichtig und vollständig Open Source. Installation:

sudo apt-get install sqlite3

Arbeitsverzeichnis und Datenbankdatei erstellen:

mkdir Sensors_Database
cd Sensors_Database
sqlite3 sensorsData.db

Wenn der SQLite-Prompt erscheint, mit .quit beenden und Sie sind zurück in der Shell.

4. DHT-Tabelle erstellen

Die Tabelle DHT_data speichert Zeitstempel, Temperatur und Luftfeuchtigkeit.

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

Alternativ per 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. Beispielreihen einfügen

Manuelle Einfügung via SQLite:

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

Oder Masseneinfügung 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. DHT22 verdrahten

VCC an 3,3 V, Data an GPIO 16, GND an Masse, und 4,7 kΩ Pull-Up zwischen VCC und Data platzieren.

7. Adafruit DHT Library installieren

Von GitHub herunterladen und installieren:

sudo python3 setup.py install

8. Daten lesen und protokollieren

Unten ist ein minimales Skript, das den Sensor liest, Werte rundet und in die Datenbank schreibt:

import time
import sqlite3
import Adafruit_DHT

DB_NAME = 'sensorsData.db'
SAMPLE_FREQ = 120 # Sekunden
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. Kontinuierliches Logging

Für einen Echtzeit-Logger folgendes in einem dedizierten Terminal ausführen. Erfasst jede Minute einen 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. Datenbank abfragen

Typische Abfragen:

• Alle Zeilen: SELECT * FROM DHT_data
• Letzter Eintrag: SELECT * FROM DHT_data ORDER BY timestamp DESC LIMIT 1
• Temperatur > 30 °C: SELECT * FROM DHT_data WHERE temp > 30
• Luftfeuchtigkeit = 29 %: SELECT * FROM DHT_data WHERE hum = 29

11. Flask Webserver

Flask installieren: sudo apt-get install python3-flask. Projektstruktur erstellen:

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. Frontend mit Gauges erweitern

JustGage herunterladen und justgage.js sowie raphael-2.1.4.min.js in static ablegen. Template aktualisieren für animierte Gauges:

<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 Graphen mit Matplotlib

Matplotlib installieren: sudo apt-get install python3-matplotlib. Neuen Flask-App appDhtWebHist.py erstellen, der on-the-fly generierte PNG-Bilder ausliefert.

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 Reihenfolge
 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 enthält zwei <img>-Tags, die die PNG-Routen anfordern.

14. Fazit

Dieses End-to-End-Projekt demonstriert, wie man einen günstigen Sensor in eine Datenlogging- und Monitoring-Plattform verwandelt: Erfassen, Persistieren, Abfragen und Visualisieren – alles über einen lokalen Flask-Webserver. Der gesamte Quellcode ist auf GitHub verfügbar, weitere Beispiele auf MJRoBot.org.