1. 記事一覧 >
  2. ブログ記事
category logo

BME280で取得した温湿度気圧をWeb画面に表示する(wiringpi-php8使用)

(更新) (公開)
Raspberry Pi,C言語,php,Apache,jQuery,JavaScript

はじめに

ラズベリーパイとセンサーを組み合わせて温度、湿度、気圧のデータを取得しWeb画面にグラフを表示するシステムを構築しました。 いわゆる IoT です。

前回の「Raspberry Pi 4に温湿度気圧センサBME280を取り付けてデータをLCD 1602Aに表示する」は、センターとLCDの取り付け、単体動作確認まででしたが、今回は、wiringpi-php8を使用して、phpプログラムでデータを取り出して記録→Web画面にグラフを表示までやっていきます。

【 wiringpi-php8 】

php8対応wiringpiです。wiringpi（ワイヤリングパイ）とは、GPIOを操作するライブラリです。C言語、Pythonには有りますが、php8に対応したものが無かったため、作成し、githubに公開しました。php7対応版（wiringpi-php7）もあります。


・環境構築 - apache2インストール
・環境構築 - phpインストール
・wiringpi-php8 インストール
・wiringpi-php8 動作確認
・Web画面にグラフを表示
・複数のノードに対応


今回の検証環境は、

LABISTS Raspberry Pi 4 STARTER KIT

Raspbian GNU/Linux 10 (buster)

Python 2.7.16

温湿度気圧センサBME280

LCD 1602A

gpio(wiringpi) 2.52

Apache 2.4.38

PHP 8.0.7

になります。


環境構築 - apache2インストール

ラズパイ本体にWebサーバーapache2をインストールします。まずは、以下の状況を目指します。

$ sudo passwd root
$ su
# apt update
# apt install apache2

以降、sudoを省略し、root権限でコマンドを入力しているものとします。apt installには-yを付けて、? [Y/n]のような確認は省略します。


/var/www/html/index.html が自動的に作成されますので、
http://[ラズパイのIPアドレス]/
にアクセスします。


⇒Apache2 Debian Default Pageが表示されればＯＫです。


環境構築 - phpインストール

php8インストール

PHP 8のパッケージは、DEB.SURY.ORG リポジトリにあるため、DEB.SURY.ORG リポジトリをインストールします。

# apt update
# apt install -y lsb-release ca-certificates apt-transport-https software-properties-common

lsb-release コマンドは、OS(Linux)のバージョン番号、リリース コード名、ディストリビューター ID などの情報（LSB = Linux Standard Base）を返すコマンドです。

apt-transport-https は、aptのhttps通信対応版です。

ca-certificates は、apt-transport-https のSSL通信に必要です。

software-properties-common は、サードパーティーのパッケージ、個人開発パッケージPPA(Personal Package Archive)を管理するツール類になります。


APTリポジトリにPHPパッケージの情報を追加します。

# echo "deb https://packages.sury.org/php/ $(lsb_release -sc) main" > /etc/apt/sources.list.d/sury-php.list

APT署名をダウンロードして、登録します。→apt.gpgは、phpパッケージが改ざんされていないか確認するものです。

# wget -qO - https://packages.sury.org/php/apt.gpg | apt-key add -

-O : ダウンロードファイルの保存先です。ファイル名を - とすると、ファイルに保存せずに標準出力されます。

-q : 進捗などの詳細表示を表示しないようにします。


# apt update
# apt upgrade -y
# apt install -y php8.0
# php -v
PHP 8.0.7 (cli) (built: Jun  4 2021 23:17:30) ( NTS )
Copyright (c) The PHP Group
Zend Engine v4.0.7, Copyright (c) Zend Technologies
    with Zend OPcache v8.0.7, Copyright (c), by Zend Technologies

時期によりバージョンは一致しないかもしれませんが、PHP 8.0.*であれば、インストール成功です。
phpモジュールを追加するときは、以下のようにインストールしますが、今回特に必要無いため、実行せず、進めます。
# apt install -y php8.0-{mysql,cli,common,imap,ldap,xml,fpm,curl,mbstring,zip}


php8動作確認

動作確認用にphpファイルを作成します。

# vi /var/www/html/info.php

info.phpは、以下の内容とします。

<?php phpinfo ();?>
# systemctl restart apache2

http://[ラズパイのIPアドレス]/info.php
にアクセスします。


⇒phpinfoの画面が表示されれば、ＯＫです。


wiringpi-php8 インストール

wiringpi

まずは、wiringpiをインストールします。

# cd /tmp
# wget https://project-downloads.drogon.net/wiringpi-latest.deb
# dpkg -i wiringpi-latest.deb
# gpio -v
gpio version: 2.52
Copyright (c) 2012-2018 Gordon Henderson
This is free software with ABSOLUTELY NO WARRANTY.
For details type: gpio -warranty

Raspberry Pi Details:
  Type: Pi 4B, Revision: 02, Memory: 4096MB, Maker: Sony
  * Device tree is enabled.
  *--> Raspberry Pi 4 Model B Rev 1.2
  * This Raspberry Pi supports user-level GPIO access.

dpkgは、ダウンロードしたパッケージを指定してインストールするコマンドです。（RedHat,CentOSのrpmに相当。）


wiringpi-php8

php8に拡張機能wiringpi-php8を組み込みます。

wiringpi-php8 から wiringpi-php8-main.zip をダウンロードして、/home/piに置かれているものとします。 

# cd /home/pi
# unzip wiringpi-php8-main.zip
# cd wiringpi-php8-main
# apt install -y php8.0-dev
# vi /usr/bin/phpize

今回の環境では、以下のエラーになるため、phpizeの書き換えが必要でした。

/usr/bin/phpize: 1: /usr/bin/phpize: /usr/bin/sed: not found

SED="/usr/bin/sed"
↓
SED="/bin/sed"
# phpize
# ./configure
# make && make install

phpizeとは、拡張モジュールをビルドするビルドツールです。これを使用することにより、PHPをソースから再コンパイルすることなく拡張モジュールをビルドすることができます。

⇒/usr/lib/php/20200930/wiringpi.so ができます。


php.iniに拡張モジュールの設定を追加します。

# vi /etc/php/8.0/cli/conf.d/wiringpi.ini

以下の内容とします。※/etc/php/8.0/cli/php.ini→/etc/php/8.0/cli/conf.d/*.ini の順に読み込まれるため、wiringpi.iniに限らず、どこかに書けば良い設定になります。

extension=wiringpi.so

apacheのユーザーwww-dataでi2c,gpio,spiデバイスのアクセス権が与えられるようにwww-dataの所属グループを追加します。

# adduser www-data i2c
# adduser www-data spi
# adduser www-data gpio

wiringpi-php8 動作確認

wiringpi-php-bme280の opt/bme280.php を使って、動作確認をします。
opt/bme280.php は、温湿度気圧センサBME280からデータを取得し、LCD 1602Aに表示すると同時に、/var/log/bme280log/YYYYMMDD.logにデータを記録し続けるプログラムです。

wiringpi-php-bme280 から wiringpi-php-bme280-main.zip をダウンロードして、/home/piに置かれているものとします。 

# cd /home/pi
# unzip wiringpi-php-bme280-main.zip
# cd /home/pi/wiringpi-php-bme280-main/opt
# chmod 755 bme280.php
# ./bme280.php

⇒/var/log/bme280log/YYYYMMDD.log に

# tail /var/log/bme280log/20210627.log
date    time    temp    humid   press
2021/06/27      17:05:00        26.15   47.05   999.00
2021/06/27      17:10:00        25.79   42.96   998.98
2021/06/27      17:15:00        25.91   46.81   999.21
2021/06/27      17:20:00        26.13   50.05   999.40

のように記録されていれば、phpと温湿度気圧センサBME280の動作は、ＯＫです。※５分間隔で記録します。起動して５分後に初めてYYYYMMDD.log に出力されます。



のようにLCDに表示されていれば、phpとLCD 1602Aの動作は、ＯＫです。

ここまででで確認した内容を図示すると、以下になります。


止めるときは、以下のコマンドになります。

# cd /home/pi/wiringpi-php-bme280-main/opt
# ./bme280.php stop

Web画面にグラフを表示

グラフ表示用にプログラムを配置します。

# cd /home/pi/wiringpi-php-bme280-main
# cp -r html/* /var/www/html/.

ここまでで以下の配置になるはずです。
# find /var/www/html -type f
/var/www/html/index.html
/var/www/html/info.php
/var/www/html/bme280.html
/var/www/html/js/jquery.flot.tooltip.min.js
/var/www/html/js/jquery-1.8.3.min.js
/var/www/html/js/excanvas.min.js
/var/www/html/js/jquery.flot.min.js
/var/www/html/js/jquery.flot.crosshair.min.js
/var/www/html/getlogdata.php

以下のような流れで、グラフを表示します。

http://[ラズパイのIPアドレス]/bme280.html をブラウザで表示
↓
jQueryのajaxで
http://[ラズパイのIPアドレス]/getlogdata.php にアクセス
↓
[ラズパイのIPアドレス] の /var/www/html/getlogdata.php が /var/log/bme280log/YYYYMMDD.log を読み取って、jsonを返す。
↓
ブラウザにjsonデータが返ってきて、/js/jquery.flot.min.jsでグラフ描画
グラフ上にマウスホバーすると、/js/jquery.flot.tooltip.min.jsで値を表示

構成を図示すると、以下です。


http://[ラズパイのIPアドレス]/bme280.html にアクセスしてみます。


表示されました！


複数のノードに対応

以下の構成にして複数のノード（ラズパイ＋センサ）の結果を一画面に表示します。

インストール - ラズパイ２台とも

ノード（ラズパイ＋センサ）を作成します。（今回は２台）
以下の構成にしてデータ収集と応答だけに特化します。

上述の手順の通り、 apache、php、wiringpi-php8をインストールして、wiringpi-php-bme280 から wiringpi-php-bme280-main.zip をダウンロードして、/home/piに置かれているものとします。 

# cd /home/pi
# unzip wiringpi-php-bme280-main.zip
# cd /home/pi/wiringpi-php-bme280-main/opt
# chmod 755 bme280.php
# ./bme280.php
# cd /home/pi/wiringpi-php-bme280-main
# cp html/getlogdata.php /var/www/html/
# curl -X POST --data "TYPE=CURRENT" http://localhost/getlogdata.php
{"datetime":"2021\/06\/27 18:37:13","temp":"26.14","humid":"49.15","press":"999.71"}

のように現在値が返ればＯＫです。


インストール - 画面兼中継サーバー

以下の構成にして画面表示とデータ中継を担います。

Apacheとphpが動作する場合、特に縛りは無いですが・・・
分かりやすく、上述の手順の通り、apache、phpがインストール済みとします。（wiringpi-php8は不要です。）

中継サーバーは、curlの機能を使うため、curlのphp extensionが必要です。

# apt install -y php8.0-curl

wiringpi-php-bme280 から wiringpi-php-bme280-main.zip をダウンロードして、/home/piに置かれているものとします。 
# cd /home/pi
# unzip wiringpi-php-bme280-main.zip
# cd wiringpi-php-bme280-main
# cp -r html/js /var/www/html/
# cp html_relay/rooms.json /var/www/html/
# cp html_relay/proxyproc.php /var/www/html/
# cp html_relay/bme280s.html /var/www/html/
# vi /var/www/html/rooms.json

この例のように、ノード（ラズパイ＋センサ）の台数分のIPアドレスを設定します。 今回は、
192.168.2.32
192.168.2.38
２台とします。※192.168.2.33、192.168.2.34はコメントアウトされています。
↓

[
        {       "url": "http://192.168.2.38/", "name": "居間"           },
        {       "url": "http://192.168.2.32/", "name": "洋室１" },
        {       "//url": "http://192.168.2.33/", "name": "洋室２"       },
        {       "//url": "http://192.168.2.34/", "name": "洋室３"       },
        {}
]

Web画面にグラフを表示

以下の仕組みにより、まとめてグラフを表示します。

http://[画面兼中継サーバー]/bme280s.html にアクセスします。



できました！


loading...
よく読まれている記事
1
2
3
4
5
6
7
8
9
10