● WebIOPiを installしてスマホから Remote制御する

　2020.07.04　　　　　更新 2024.05.25

WebIOPi を使用すれば、Web Browser から直接 Raspberry Pi の GPIO を
制御する事ができます。





install
/home/pi Directory に移動して、Down Load から始めます。
WebIOPi の開発は2015年頃から止まっており、
現在の最新版は WebIOPi-0.7.1 です。

$ cd /home/pi
$ wget https://sourceforge.net/projects/webiopi/files/WebIOPi-0.7.1.tar.gz
$ tar xvzf WebIOPi-0.7.1.tar.gz
$ cd WebIOPi-0.7.1


Patch の適用
Web Browser で表示する GPIO の表示を修正する Patch を適用します。

$ wget https://raw.githubusercontent.com/doublebind/raspi/master/webiopi-pi2bplus.patch
$ patch -p1 -i webiopi-pi2bplus.patch
$ sudo ./setup.sh

Set Up 画面が「Do you want to access WebIOPi over Internet ?[y/n]」で
止まったら Internet経由で外から WebIOPiを操作する事は無いので「n」を押します

WebIOPi Service を、systemctl で操作できる様にするために、
設定 File を Down Load します。
$ cd /etc/systemd/system/multi-user.target.wants
$ sudo wget https://raw.githubusercontent.com/doublebind/raspi/master/webiopi.service


WebIOPi main Menu 画面の html のパスを config で指定します。
$ cd /etc/webiopi
$ sudo nano config
下記の1行を追加します。
doc-root = /usr/share/webiopi/htdocs
また、default で WebIOPi-main Menu 画面を表示させたい場合は、
下記の行の # を外します。
#welcome-file = index.html
　↓
welcome-file = index.html


WebIOPi の起動・停止・status 確認・再起動。

●start
$ sudo systemctl start webiopi
●stop
$ sudo systemctl stop webiopi
●status確認
$ sudo systemctl status webiopi
●restart
$ sudo systemctl restart webiopi

電源の起動と同時に WebIOPi を起動しておきたい時は、
下記の Command を１回実行するだけです。
$ sudo systemctl enable webiopi

enable を無効にしたい時は、下記 Command を実行します。
$ sudo systemctl disable webiopi


動作確認
まず、webiopi を起動してから動作確認をします。
$ sudo systemctl start webiopi

Web Browser から、http://192.168.1.11:8000 に Access してみます。
Raspberry Pi の IP Address を Key in して、Port 番号8000を入力します。

認証画面が表示されるので、User 名・Password を入れます。

User 名　 ：webiopi
Password ：raspberry

これで、WebIOPi に Login できます。
Login すると、WebIOPi の Top 画面が表示されます。


WebIOPi Menu画面



GPIO Header の画面を開くと、GPIO ピン配列の画面が出てきます。
「IN」又は「OUT」のボタンを押せば、入出力を切替する事ができます。
また、GPIO のピン番号を Click すると、直接 Raspberry Pi の
GPIOピンを「ON」「OFF」制御する事ができます。


GPIO 画面



RasRobo Controller

スマホ(Smart phone)や、パソコン(Personal computer)から Raspberry Pi を
制御する Program があったのでこれを Down Load します。

$ cd /usr/share/webiopi/htdocs
$ wget https://raw.githubusercontent.com/doublebind/rasrobo/master/rasroboplus.html
$ sudo mv rasroboplus.html　rasrobo.html
$ sudo nano rasrobo.html

Down Load した File は自分の ROBOT と、IP Address と GPIO のピン番号が
違いますのでこれを修正します。

rasrobo.html Controller Program



RasRobo Controller には、スマホ側で入力した文字を Raspberry Pi の
Speaker から出力する機能があります。
RaspPi Robot に、おしゃべりをさせる事ができるのです。
まず、/home/pi 配下に、Script を作成します。
$ cd /home/pi
$ sudo nano my-webiopi-script.py



次に、この Script の場所を、config で指定します。
$ cd /etc/webiopi
$ sudo nano config


my-script sample の下に下記の1行を追加します。
myscript = /home/pi/my-webiopi-script.py


スマホ画面
RasRobo Controller を呼び出すには、下記の URL を Access します。
スマホの画面には、Rasrobo の Camera で撮影した画像が表示できます。
URL: http://192.168.1.11:8000/rasrobo.html


RasRobo Controller の表示画面



1. 画面上の「前進」「後退」ボタンを押すと RasRobo を走行させる事が出来て
　「左前」「右前」「左後」「右後」を押すと方向転換をする事ができます。





スマホ画面から制御する RasRobo




2. 「おしゃべり」欄に文章を作って、「話す」ボタンを押すと
　 RasRobo の Speaker から音声合成で作成した声が出ます。