ラズパイのGPIOをブラウザから操作できるツールWebIOPiを試してみた
コンテンツ
WebIOPiについて
Raspberry PiのGPIOをブラウザから操作出来るツールのWebIOPiをRaspberry Pi 3 B+にて試した時の備忘録。
尚、WebIOPi は2015年に開発が止まってしまっていて Raspberry Pi 3 B+にて実行するにはパッチを当てる必要がある。
Raspberry Pi 4にてWebIOPiが正常に動作するかどうかは試していないのだが、いずれは試してみたいと思っている。
![WebIOPi GPIO操作画面 WebIOPi GPIO操作画面](https://i0.wp.com/www.souichi.club/wp-content/uploads/webiopi-01.png?resize=503%2C660&ssl=1)
上記のようなGPIOを操作できるページがブラウザ上に表示されてピン番号やその横のIN、OUTをクリックすることでRaspberry PiのGPIOが操作が可能になる。
環境
尚、WebIOPi なのだがパソコンの性能やブラウザによっては表示されない事がある様だ。
ちなみに自分は今回は以下の環境で試した。
ラズパイ | Raspberry Pi 3 B+ |
OS | Raspberry Pi OS 32Bit |
パソコン | DELL G7 15 7588(Windows10) |
ブラウザ | Google Chrome |
インストール
ファイルの確認
こちらのホームページにアクセスしてダウンロードをクリックする。
![WebIOPiのホームページ WebIOPiのホームページ](https://i0.wp.com/www.souichi.club/wp-content/uploads/webiopi-02.png?resize=1024%2C649&ssl=1)
最新(最終?)版のファイル名がWebIOPi-0.7.1.tar.gzである事を確認する。
ここでダウンロードをしてファイルをRaspberry Piにコピーをしても良いだがRaspberry Piから直接wgetコマンドでダウンロードすることにする。
![WebIOPi-0.7.1.tar.gz WebIOPi-0.7.1.tar.gz](https://i0.wp.com/www.souichi.club/wp-content/uploads/webiopi-03.png?resize=1024%2C733&ssl=1)
ダウンロード
Raspberry Pi上でLXterminalを起動して以下のコマンドでホームディレクトリ配下に作業用のディレクトリを作成する。
cd ~/
mkdir WebIOPi
作成したディレクトリに移動してWebIOPiをダウンロードする。
cd WeBIOPi
wget https://sourceforge.net/projects/webiopi/files/WebIOPi-0.7.1.tar.gz
WebIOPi-0.7.1.tar.gzがダウンロードされた。
![WebIOPi-0.7.1.tar.gzがダウンロードされた WebIOPi-0.7.1.tar.gzがダウンロードされた](https://i0.wp.com/www.souichi.club/wp-content/uploads/webiopi-04.png?resize=1024%2C608&ssl=1)
ファイルの解凍
以下のコマンドでファイルを解凍する。
tar -xvf WebIOPi-0.7.1.tar.gz
オプションの説明。
-x | アーカイブされたファイルを解凍する |
-v | アーカイブ結果を表示する |
-f | アーカイブファイル名を指定する |
解凍したら元のtarファイルは不要なので削除する。
rm WebIOPi-0.7.1.tar.gz
![解答後、元ファイルの削除 解答後、元ファイルの削除](https://i0.wp.com/www.souichi.club/wp-content/uploads/webiopi-05.png?resize=1024%2C608&ssl=1)
修正パッチ
Raspberry Pi 3 B+で動作させるために修正パッチを取得する。
ディレクトリを移動してから修正パッチを入手する。
cd WebIOPi-0.7.1
wget https://raw.githubusercontent.com/doublebind/raspi/master/webiopi-pi2bplus.patch
以下のコマンドで修正パッチをあてる。
patch -p1 -i webiopi-pi2bplus.patch
![パッチをあてる パッチをあてる](https://i0.wp.com/www.souichi.club/wp-content/uploads/webiopi-06.png?resize=1024%2C606&ssl=1)
セットアップ
セットアップを開始する。
sudo ./setup.sh
途中でインターネット越しの接続を行うかどうかの確認をされるが、今回はインターネット越しにはアクセスしないので”n”と答える。
Do you want to access WebIoPi over Internet ?
![インターネット越しの接続の確認 インターネット越しの接続の確認](https://i0.wp.com/www.souichi.club/wp-content/uploads/webiopi-07.png?resize=1024%2C606&ssl=1)
以上でインストールが終了した。
サービスの起動
サービスファイル
WebIOPiサービスをsystemctlから起動出来るように設定ファイル(サービスファイル)をダウンロードする。
尚、サービスファイルは/etc/systemd/system/配下にコピーする。
cd /etc/systemd/system/
sudo wget https://raw.githubusercontent.com/doublebind/raspi/master/webiopi.service
サービスファイルの中身は以下の通り。
syslog.target、network.targetの後にExecStartに記述されたコマンドでWebIOPiを起動している。
尚、各セクションの意味は以前の「systemdによる自動起動」の記事を参照して欲しい。
![サービスファイル サービスファイル](https://i0.wp.com/www.souichi.club/wp-content/uploads/webiopi-08.png?resize=654%2C448&ssl=1)
startする
下記のコマンドでWebIOPiをスタートする。
sudo systemctl start webiopi
スタート後のステータスの確認は以下のコマンド。
sudo systemctl status webiopi
自動起動
Raspberry PiのOS起動時に常にWebIOPiを自動起動したい時はenableコマンドを使う。
この辺のコマンドについても詳細は「systemdによる自動起動」の記事を参照して欲しい。
sudo systemctl enable webiopi
ログインをする
パソコンのブラウザからRaspberry PiのIP Addressとポート番号を入力してWebIOPiにアクセスする。
[IP address]:8000
Raspberry PiのIP AddressはLXTerminalからのifconfigコマンドで確認をすることができる。
またデフォルト設定だとRaspberry Piの IP AddressはDHCPより毎回空いているAddressを割り当てられるので前回と違ってくる可能性がある。
systemctl enableで自動起動の設定をしている場合はIP Addressが変わってしまうのは都合が悪いので固定IPを設定すると良い。
設定方法は以前の「RaspberryPi 3 B+ 固定IPの割当」の記事を参照して欲しい。
IDとパスワード
接続時にIDとパスワードの入力を求められるので、
- ID:webiopi
- password:raspberry
を入力する。
![IPとパスワードの入力 IPとパスワードの入力](https://i0.wp.com/www.souichi.club/wp-content/uploads/webiopi-09.png?resize=417%2C233&ssl=1)
トップページ
以下のページが表示される。
![WebIOPiトップページ WebIOPiトップページ](https://i0.wp.com/www.souichi.club/wp-content/uploads/webiopi-10.png?resize=501%2C341&ssl=1)
GPIO Headerをクリックすると下記のページが表示される。
![GPIO Header GPIO Header](https://i0.wp.com/www.souichi.club/wp-content/uploads/webiopi-11.png?resize=473%2C652&ssl=1)
実際のRaspberry Piのピン番号と同様に並んでいるので分かりやすい。
IN、OUTをクリックするとINとOUTが切り替わる。
ピン番号をクリックするとLOWとHIGHが切り替わる。
LEDの点灯
WebIOPiでのLEDの点灯を試してみる。
回路図
回路図は以下の通り。
![WEBIoPiによるLEDの点滅回路図 WEBIoPiによるLEDの点滅回路図](https://i0.wp.com/www.souichi.club/wp-content/uploads/webiopi-12.png?resize=1024%2C642&ssl=1)
GPIO23をOUTに変更
ピン番号16、GPIO23の右横をクリックしてINからOUTに変更する。
![GPIO23をOUTに変更する GPIO23をOUTに変更する](https://i0.wp.com/www.souichi.club/wp-content/uploads/webiopi-13.png?resize=493%2C662&ssl=1)
LED点灯
16(ピン番号)をクリックすると色が黒からオレンジに変わりLOW→HIGHになったことが分かる。
![16をクリックする 16をクリックする](https://i0.wp.com/www.souichi.club/wp-content/uploads/webiopi-14.png?resize=503%2C660&ssl=1)
パソコンのブラウザ経由でRaspberry Piのピンを操作してLEDを点灯させられる事が分かった。
以上で今回の記事は終了する。
この記事が何処かで誰かの役に立つことを願っている。
尚、当記事中の商品へのリンクはAmazonアソシエイトへのリンクが含まれています。Amazonのアソシエイトとして、当メディアは適格販売により収入を得ていますのでご了承ください。
GPIO Headerの画面を開くとこのサイトではIN OUTのようになっている灰色の枠に何も表示されておらずpin番号を押しても何も変化がありません。
解決方法を教えていただいたら幸いです
ログインが出来たという事はラズパイ上でwebiopiのサービスは起動しているのだとは思います。
F5でブラウザをReFleshしてらどうでしょうか。
またブラウザによっては読み込めない事があるようです。
自分はGoogle chromeを使用しています。