Raspberry Pi 計測した温度をデータベースに格納し、Webブラウザにグラフで表示する

プログラム構成。

Raspberry Pi 温度を測定し Flask でブラウザーに表示する

Raspberry Pi 作品集 Python Flask 温度の測定値を Webで参照する   Raspberry Pi に接続した温度センサーで室温を測定し、その温度を Python Fl

2024-01-13

2024-01-14

・Enter current password for root (enter for none):
カレントパスワードは空なので、何も押さずにエンターキーを押す。

・Switch to unix_socket authentication [Y/n]
「unix_socket authentication」は無効化したいので、「n」を入力し、エンターキーを押す。

・You already have your root account protected, so you can safely answer 'n'.
rootパスワードを変更したいので、「Y」を入力し、エンターキーを押す。
設定したいrootパスワードを入力し、エンターキーを押す。
入力確認で、設定したいrootパスワードを再度入力し、エンターキーを押す。

・Remove anonymous users? [Y/n]
アノニマスユーザーを削除したいので、「Y」を入力し、エンターキーを押す。

・Disallow root login remotely? [Y/n]
ルートのリモートログインは許可したくないので、「Y」を入力し、エンターキーを押す。

・Remove test database and access to it? [Y/n]
テストデータベースは削除したいので、「Y」を入力し、エンターキーを押す。

・Reload privilege tables now? [Y/n]
権限テーブルをすぐに反映させたいので、「Y」を入力し、エンターキーを押す。

#!/usr/bin/python
# -*- coding: utf-8 -*

from time import sleep
import datetime #日付ライブラリ読み込み
import Adafruit_DHT #温度センサーライブラリ読み込み
import MySQLdb #DBライブラリの読み込み

# DHT22センサーから温度と湿度を読み取る関数
def read_dht22(pin):
    sensor = Adafruit_DHT.DHT22 # センサーの種類
    humidity, temperature = Adafruit_DHT.read_retry(sensor, pin)
    return humidity, temperature

# GPIOピン番号
pin1 = 17 # GPIOポート番号 ＝ 接続するピン番号 11
pin2 = 27 # GPIOポート番号 ＝ 接続するピン番号 13
pin3 = 4 # GPIOポート番号 ＝ 接続するピン番号 7
pin4 = 26 # GPIOポート番号 ＝ 接続するピン番号 37

##---------------------------------------------------------------------------------------

#●日付時刻情報の取得--------------------------------------------------------------------

dtime = datetime.datetime.now() #日付、日時の取得
date = dtime.strftime('%Y-%m-%d') #日付の整形 yyyy-mm-dd
jikok = dtime.strftime('%H:%M') #時間の整形 hh:mm
dayjikoku = dtime.strftime('%Y-%m-%d %H:%M:%S')

#●2つのセンサーから温度と湿度を読み取る--------------------------------------------------------------

humidity1, temperature1 = read_dht22(pin1)
humidity2, temperature2 = read_dht22(pin2)
humidity3, temperature3 = read_dht22(pin3) #センサー No-3 外側
humidity4, temperature4 = read_dht22(pin4) #センサー No-4 室内

#humidityに湿度を代入
humidity1 = "{:.2f}" . format(humidity1) #湿度（小数点第2位まで）
humidity2 = "{:.2f}" . format(humidity2) #湿度（小数点第2位まで）
humidity3 = "{:.2f}" . format(humidity3) #湿度（小数点第2位まで）
humidity4 = "{:.2f}" . format(humidity4) #湿度（小数点第2位まで）

#temperatureに気温を代入
temperature1 = "{:.2f}" . format(temperature1) #気温（小数点第2位まで）
temperature2 = "{:.2f}" . format(temperature2) #気温（小数点第2位まで）
temperature3 = "{:.2f}" . format(temperature3) #気温（小数点第2位まで）
temperature4 = "{:.2f}" . format(temperature4) #気温（小数点第2位まで）

#●DBに書き込む-------------------------------------------------------------------------
# MySQL接続
connector = MySQLdb.connect(
	host = "localhost",
	db = "ondodb",
	user = "flaskpy",
	passwd = "dht22x4",
# テーブル内部で日本語を扱うために追加
	charset = "utf8"
)

# カーソル取得
cursor = connector.cursor()

# SQLクエリ実行（データ追加）
sql = "insert into meas_value (nitiji, temp1, temp2, temp3, temp4) VALUES (%s, %s, %s, %s, %s)"
val = (dayjikoku, temperature4, temperature1,temperature2,temperature3)
cursor.execute(sql, val)

connector.commit()

# カーソル終了
cursor.close()
# MySQL切断
connector.close()

#●DB書込み内容の表示--------------------------------------------------------------------------

print (
	dayjikoku,
	temperature4,
	temperature1,
	temperature2,
	temperature3
)

##---------------------------------------------------------------------------------------

sql = "insert into meas_value (nitiji, temp1, temp2, temp3, temp4) VALUES (%s, %s, %s, %s, %s)" 
val = (dayjikoku, temperature4, temperature1,temperature2,temperature3) 
cursor.execute(sql, val)

# app.py
# -*- coding: utf-8 -*-

from flask import Flask, render_template
import MySQLdb
import datetime

# Flaskインスタンス作成
app = Flask(__name__)

@app.route('/')
def index():

	# 2次元リストを定義
	temp_list = []

	# MySQLに接続
	connector = MySQLdb.connect(
		host = "localhost",
		db = "ondodb",
		user = "flaskpy",
		passwd = "dht22x4",
	# テーブル内部で日本語を扱うために追加
		charset = "utf8"
	)

	# カーソル取得
	cursor = connector.cursor()

	# SQLクエリ実行（データの読込）
	sql = "select * from meas_value where DATE_ADD(nitiji, INTERVAL 24 HOUR) > NOW()"
	cursor.execute(sql)

	# 結果を取得し、2次元リストの形式に変換
	records = cursor.fetchall()
	for record in records:
		temp_list.append(
		{'nitiji':record[0].strftime("%Y-%m-%d %H:%M"),
		 'temp1':record[1],
		 'temp2':record[2],
		 'temp3':record[3],
		 'temp4':record[4]}
		)

	# データベースとの接続を閉じる
	cursor.close()
	connector.close()

	#テンプレートへ挿入するデータの作成
	title = "Raspberry Pi で測定した温度の推移（10min x 24H）グラフ"

	return render_template('template.html', title=title, temp_list=temp_list)

if __name__ == '__main__':
    app.run("0.0.0.0",debug=True)

sql = "select * from meas_value where DATE_ADD(nitiji, INTERVAL 24 HOUR) > NOW()" 

	for record in records:
		temp_list.append(
		{'nitiji':record[0].strftime("%Y-%m-%d %H:%M"),
		 'temp1':record[1],
		 'temp2':record[2],
		 'temp3':record[3],
		 'temp4':record[4]}
		)

return render_template('template.html', title=title, temp_list=temp_list)

<html>
  <head>
    <title>Temperature Chart</title>
    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
    <script type="text/javascript" src="https://www.google.com/jsapi"></script>
    <script type="text/javascript">
      google.load("visualization", "1", {packages:["corechart"]});
      google.setOnLoadCallback(drawChart);
      function drawChart() {
        var data = google.visualization.arrayToDataTable([
          ['Date', '室内', 'カーテン', '内窓', '窓際'],
        {% for record in temp_list %}
          ['{{record.nitiji}}',  {{record.temp1}},  {{record.temp2}},  {{record.temp3}},  {{record.temp4}}],
        {% endfor %}
        ]);
        // グラフのオプションを設定
        var options = {
		title: '{{title}}',
			titleTextStyle: {
        	        color: '#444',    // タイトルの文字の色を設定
                	fontSize: 24      // タイトルの文字のサイズを設定
			},
		fontSize: 14,     // グラフ内の文字サイズを設定
		vAxis: {
                title: '温度',   // 縦軸のタイトルを設定
                maxValue: 35     // 縦軸の最大値を40に設定
                },
		colors: ['#FF0000', '#ffa500', '#008000', '#0000FF']
        };
        var chart = new google.visualization.LineChart(document.getElementById('chart_div'));
        chart.draw(data, options);
      }
    </script>
  </head>
  <body>
 
  <div style="text-align:center;"> 
  <div id="chart_div" style="width: 100%; height: 500px;"></div>
  <br />
  <hr style="height: 6px; width: 900px; background-color: blue;">
  <input style="width:100px;height:50px; font-size: 200%;" type="button" value="更新" onclick="location.reload()">
  </div>

  </body>
</html>

function drawChart() {
        var data = google.visualization.arrayToDataTable([
          ['Date', '室内', 'カーテン', '内窓', '窓際'],
        {% for record in temp_list %}
          ['{{record.nitiji}}',  {{record.temp1}},  {{record.temp2}},  {{record.temp3}},  {{record.temp4}}],
        {% endfor %}
        ]);

// グラフのオプションを設定
        var options = {
		title: '{{title}}',
			titleTextStyle: {
        	        color: '#444',    // タイトルの文字の色を設定
                	fontSize: 24      // タイトルの文字のサイズを設定
			},
		fontSize: 14,     // グラフ内の文字サイズを設定
		vAxis: {
                title: '温度',   // 縦軸のタイトルを設定
                maxValue: 35     // 縦軸の最大値を40に設定
                },
		colors: ['#FF0000', '#ffa500', '#008000', '#0000FF']
        };

<input style="width:100px;height:50px; font-size: 200%;" type="button" value="更新" onclick="location.reload()">

ブラウザに表示された温度の推移グラフ。