Raspberry Piを使って、【温度・湿度】をブラウザ表示

electric

今回は、
温度湿度センサーを使って、部屋の温度・湿度をブラウザに表示します。

この記事では単に部屋の温度・湿度をブラウザに表示するだけですが、
将来的には、温度・湿度をDataBaseに保存したり、
BI(Business Intelligence)ツールを使って、温度・湿度をグラフで可視化していきます。
また、外に持っていけるように、
LCDを搭載したり、温度湿度センサー・LCDを搭載する基盤を作っていきます。

やりたいこと

・ブラウザの「更新」ボタンを押すと、ラズパイの温度湿度センサーの値を取得する。
・取得した値をブラウザに表示する。

システム構成図

やることリスト

上記の「やりたいこと」をみて、
どんな作業が必要か、自分で項目を考えてみてください。
これを考えることで、「プログラミング的思考」が身に付いていきます。

番号作業項目備考
やりたいこと・システム構成図の作成
やることリストの作成処理項目の洗い出し
部品の準備
温度・湿度情報を取得温度湿度センサー
ブラウザ画面を作成し、ラズパイから温度・湿度を取得・表示するFlask・HTML・CSS

部品の準備

今回のシステムに必要な部品です。
不足している部品があれば購入下さい。

部品名備考
Raspberry Pi別途、電源・SDカード・HDMIケーブルが必要です。
温度湿度センサー SHT31湿度センサーモジュール
ジャンパー線(※1)オスーメス:4本

購入に必要な部品を、
Raspberry Pi 関連に記載しています。

ラズパイは、電源を入れただけでは起動しません。
ラズパイの起動手順の記事を参照ください。

温度・湿度情報を取得

温度・湿度情報を取得するのに、SHT31センサーを使用します。

SHT31は、I2C(Inter-Integrated Circuit)の規格を使って、
ラズパイと通信(データのやり取り)を行います。

I2Cのデータのやり取りには、
シリアルクロック(SCL)、シリアルデータ(SDA)の2本の信号を使います。

配線図

I2C有効化

I2Cの機能は、デフォルトでは使用できません。
使用するために、ラズパイの設定からI2Cを有効にする必要があります。

では、設定をしていきましょう♪
左上の「ラズパイアイコン」 → 「設定」→「Raspberry Piの設定」を選択。

「インターフェイス」タブ → I2Cの有効/無効ボタンを「有効」を選択し、
画面右下の「OK」ボタンを押して完了です。

スレーブアドレス確認

I2C規格では、
1台のマスタデバイスと、複数台のスレーブデバイスを接続・通信することが出来ます。

マスターデバイスは、複数台のスレーブデバイスとの通信を実現する為に、
データの中に、通信を行いたいスレーブデバイスのスレーブアドレスも含んで通信を行います。

では、デバイスのスレーブアドレスの確認方法です。
以下コマンドをターミナルソフトで実行します。

i2cdetect -y 1

結果は以下様に表示され、スレーブアドレスは、0x44 であることがわかりました。

プログラム

以下ディレクトリ通り、ディレクトリとファイルを作成する。
この章では、以下赤字のファイルを修正する。

/home/pi/work/
temp/
└temperature.py

temperature.py

# -*- coding: utf-8 -*-
import smbus

# インスタンス作成
smb = smbus.SMBus(1)
# スレーブアドレス
TEMP_ADDR = 0x44

def get_temp_hum():
    smb.write_byte_data(TEMP_ADDR, 0x2C, 0x06)
    data = smb.read_i2c_block_data(TEMP_ADDR, 0x00, 6)

    # 気温
    mlsb = data[0] <<8 | data[1]
    temp = -45 + (175 * mlsb / (pow(2, 16) - 1))

    # 湿度
    mlsb = data[3] <<8 | data[4]
    hum = 100 * mlsb / (pow(2, 16) - 1)

    return temp, hum


if __name__ == '__main__':
    temp, hum = get_temp_hum()

    # 気温と湿度の表示
    print ('Temp : %.1f ℃' %temp)
    print ('Humi : %.1f %%' %hum)

実行

以下コマンドでプログラムを実行する。

python3 temp.py

以下画面の通り、温度と湿度が表示されれば成功です!!!

参考

SHT3xのデータシートです。
「測定データの物理量値への換算方法」も載ってます。
https://strawberry-linux.com/pub/Sensirion_Humidity_SHT3x_DIS_Datasheet_V3_J.pdf

ブラウザ画面を作成し、ラズパイから温度・湿度を取得・表示する

ブラウザの画面とラズパイ間でデータのやり取りを行う為に、Flaskを使用します。
Flaskは、Python用のWebアプリケーションフレームワークです。
Webアプリケーションフレームワークとは、
ウェブサイト、Webアプリケーション等の作成をサポートする為のフレームワーク(ソフト)です。

以下コマンドでラズパイにFlaskをインストールする。

pip3 install flask

プログラム

以下ディレクトリ通り、ディレクトリとファイルを作成する。
この章では、以下赤字のファイルを修正する。

/home/pi/work/
temp/
├templates/
│└index.html
├app.py
└temperature.py

app.py

# -*- coding: utf-8 -*-

import temperature
from flask import Flask, render_template

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


# ブラウザに画面を表示
@app.route('/', methods=['GET'])
def get():
    temp, hum = temperature.get_temp_hum()
    return render_template('index.html', temp=round(temp, 1), hum=round(hum, 1))


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

index.html

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>温度・湿度 表示</title>
</head>
<body>

    <div style="text-align:center;">
        <div style="font-size: 3em;">
            温度 :{{ temp }} ℃<br>
            湿度 :{{ hum }} %<br>
        </div>
        <input style="width:200px;height:100px; font-size: 200%;" type="button" value="更新" onclick="location.reload()">
    </div>
</body>
</html>

実行

以下コマンドでプログラムを実行する。

python3 app.py

以下画面の通り、温度と湿度が表示され、
更新ボタンを押して、温度や湿度が変われば成功です!!!

最後に

如何だったでしょうか?

自分で作ったものが動くって楽しいですよね♪

次は、
温度・湿度をDataBaseに保存したり、
BI(Business Intelligence)ツールを使って、温度・湿度をグラフで可視化していきます。

楽しみにしてくださいね。

以下記事では他にも色んな電子工作を作っています。
あなたが作りたいモノのヒントがあれば嬉しいです。

電子工作(Raspberry Pi でできること)
このサイトは、「モノづくりの楽しさをあなたに伝えたい」との思いで作っています。「難易度:☆☆☆」の章に、Raspberry Pi(マイコン) と Python(プログラミング言語)を使ったおもちゃの作り方を書いています。あ...

記事を更新するとTwitterでつぶやきます。
フォローしてもらうと、記事を書くモチベーションが上がります。
下のTwitterアイコンからフォローお願いします。

不明な点があればページTOPの「お問い合わせ」にてご連絡下さい。

もし一人で作るのが難しかったら、
一緒に作るサービスをしています。
お気軽に ページTOPの「お問い合わせ」にてご連絡下さい。

タイトルとURLをコピーしました