データからグラフへ：Raspberry Pi で Flask・SQLite IoT ダッシュボードを構築

DHT22 センサーからリアルデータを取得し、軽量な SQLite データベースに保存、Flask で構築した Web ダッシュボードで可視化します。

1. はじめに

前回のチュートリアル Python WebServer With Flask and Raspberry Pi では、センサーデータを Web フロントエンドで公開する方法を学びました。次の論理的ステップは、それらの読み取り値を永続化して後で分析できるようにすることです。

2. 部品表

Raspberry Pi 3 – $32.00
DHT22 温度・湿度センサー – $9.95
4.7 kΩ プルアップ抵抗

3. SQLite のインストール

SQLite はシングルボードコンピューターに最適なデータベースエンジン：サーバーレス、軽量、完全オープンソース。以下でインストール：

sudo apt-get install sqlite3

作業ディレクトリとデータベースファイルを作成：

mkdir Sensors_Database
cd Sensors_Database
sqlite3 sensorsData.db

SQLite プロンプトが表示されたら .quit で終了し、シェルに戻ります。

4. DHT テーブルの作成

DHT_data テーブルはタイムスタンプ、温度、湿度を保持します。

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

または 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. サンプル行の挿入

SQLite で手動挿入：

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

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 の配線

VCC を 3.3 V、Data を GPIO 16、GND をグラウンドに接続し、VCC と Data の間に 4.7 kΩ プルアップ抵抗を配置。

7. Adafruit DHT ライブラリのインストール

GitHub からダウンロードしてインストール：

sudo python3 setup.py install

8. データの読み取りとログ記録

センサーを読み取り、値を丸めてデータベースに書き込む最小限のスクリプト：

import time
import sqlite3
import Adafruit_DHT

DB_NAME = 'sensorsData.db'
SAMPLE_FREQ = 120  # 秒
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. 継続的なログ記録

リアルタイムロガーとして、専用ターミナルで以下を実行。1 分ごとにサンプリング：

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. データベースのクエリ

典型的なクエリ：

全行：SELECT * FROM DHT_data
最新エントリ：SELECT * FROM DHT_data ORDER BY timestamp DESC LIMIT 1
温度 > 30 °C：SELECT * FROM DHT_data WHERE temp > 30
湿度 = 29 %：SELECT * FROM DHT_data WHERE hum = 29

11. Flask Web サーバー

Flask をインストール：sudo apt-get install python3-flask。プロジェクト構造を作成：

mkdir dhtWebServer
cd dhtWebServer
mkdir templates static

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)

テンプレート 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. JustGage でフロントエンドを強化

JustGage をダウンロードし、justgage.js と raphael-2.1.4.min.js を static に配置。テンプレートを更新してアニメーションゲージを描画：

<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. Matplotlib で履歴グラフ

Matplotlib をインストール：sudo apt-get install python3-matplotlib。appDhtWebHist.py という新しい Flask アプリを作成し、その場で生成した PNG 画像を提供：

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()  # 時系列順
    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)

テンプレート templates/index.html には、PNG ルートをリクエストする 2 つの <img> タグを含めます。

14. 結論

このエンドツーエンドのプロジェクトは、安価なセンサーをデータロギング・監視プラットフォームに変える方法を示しています：取得、永続化、クエリ、可視化のすべてをローカル Flask Web サーバー経由で実現。全ソースコードは GitHub で公開、さらなる例は MJRoBot.org で確認できます。

Raspberry Pi で水中ドローンを自作：設計、開発、組み立てガイド Raspberry Pi と Arduino を連携させてロボットを自作：ステップバイステップガイド

製造プロセス

3Dプリント

自動制御システム

産業技術