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

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

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

やりたいこと
やることリスト
部品の準備
温度・湿度情報を取得
ブラウザ画面を作成し、ラズパイから温度・湿度を取得・表示する
1. プログラム
2. 実行
最後に

やりたいこと

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

システム構成図

やることリスト

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

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

部品の準備

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

部品名	備考
Raspberry Pi	別途、電源・SDカード・HDMIケーブルが必要です。
温度湿度センサー	SHT31湿度センサーモジュール
ジャンパー線（※１）	オスーメス：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>