ラズベリーパイ(Raspberry Pi Zero WH)をスマホから操作する方法(WebIOPi)

2019年4月27日

ラズベリーパイ(Raspberry Pi Zero WH)にWebIOPiをインストールして、パソコンやスマホから操作する方法を紹介します。

この仕組みを利用してフォトリフレクタからの信号をカウントするプログラムを作りました。

Raspberry Pi(WebIOPi)とスマホ

使用したのは前回の「ラズベリーパイ(Raspberry Pi Zero WH)でのフォトリフレクタ(フォトセンサ)の使い方」で作成した回路です。

作成したプログラムと合わせて、実際の動作を写真と動画で紹介します。

Left Caption
まあちゃん
ラズベリーパイって、
スマホで操作できるの?
Right Caption
ままあちゃん
WebIOPiっていうのを使うと、
簡単にできるんだよ♪

WebIOPiとは?

パソコンやスマホからラズベリーパイ(Raspberry Pi Zero WH)を操作する方法を調べました。いくつか見つかった中で気になったのはこの3つです。

  • WebIOPiを利用する
  • Node.jsを利用する
  • Webサーバ(Apache or lighttpd) + PHP or Python3

3つとも試してみたいので、まずは一番情報がありそうなWebIOPiから挑戦してみます。

WebIOPiとは、パソコンやスマホのブラウザからラズベリーパイ(Raspberry Pi Zero WH)にアクセスできるフレームワークです。

Webサーバーの機能も動いているので、WebIOPiのURLにアクセスして、簡単にLEDやモーターを制御したり、センサーの値を読み取ったりすることができます。

WebIOPiのインストール

インストールについては、こちらのサイトで詳しく説明されています。
開発が終了したWebIOPiを最新のRaspbianで動作させよう。

とっても分かりやすいので、ざっと手順のメモと迷ったところだけ補足します。

ダウンロード

ラズベリーパイ(Raspberry Pi Zero WH)のブラウザで、WebIOPiのダウンロードページにアクセスして、WebIOPi-0.7.1.tar.gzリンクをクリックしてダウンロードします。

*上のダウンロードボタンではなく、画面の少し下の所のリンクなので注意です。

WebIOPiのダウンロード

解凍

ファイルマネージャーで、ダウンロードした/home/pi/Downloads/WebIOPi-0.7.1.tar.gzを右クリック → 「指定先にファイルを展開」→ 展開先に/home/piを指定して「展開」ボタンをクリックします。

パッチを当てる

ターミナルを起動して、コマンドを入力します。

$ cd WebIOPi-0.7.1/
$ wget https://raw.githubusercontent.com/doublebind/raspi/master/webiopi-pi2bplus.patch
$ patch -p1 -i webiopi-pi2bplus.patch

*wgetしている先は、GitHubというプログラムなどを保存・公開できるサービスです。

インストール

ターミナルでコマンドを入力します。

$ sudo ./setup.sh

*「Do you want to access WebIOPi over Internet?」[Y/N]と聞かれたらNを入力してEnterキーを押します

WebIOPiの環境設定

ファイルをコピー

/usr/share/webiopi/htdocs/下のフォルダやファイルを、/home/pi/webiopi/に全てコピーします。

$cd                         (ホームディレクトリ /home/pi/ に移動)
$mkdir webiopi        (フォルダ作成)
$ cp -r /usr/share/webiopi/htdocs/* webiopi/    (コピー)

設定ファイル編集

エディタで設定ファイルを開きます。

$ sudo leafpad /etc/webiopi/config (設定ファイルを編集)

 

設定ファイル内の[SCRIPTS]に、動作させておきたいPythonプログラムを指定します。

[SCRIPTS]

・・・

myscript = /home/pi/webiopi/test/script.py

 

ドキュメントルートの設定を変更します

#doc-root = /home/pi/webiopi/examples/scripts/macros

doc-root = /home/pi/webiopi

*ログイン画面が表示されないようにするには、passwd-file の行を#でコメントアウトします。

WebIOPiの起動と停止

WebIOPiの起動

ターミナルで以下のコマンドを入力して起動します。

$ sudo systemctl start webiopi

Failed to start webiopi.service: Unit webiopi.service not found.

というエラーメッセージが表示されてしまいました! ガガーン

ググってみても、解決策が出てきません。

Right Caption
ままあちゃん
こんなときは、困った時の再起動!

一度、ラズベリーパイ(Raspberry Pi Zero WH)を再起動してみます。

もう一度、ターミナルで

$ sudo systemctl start webiopi

Left Caption
まあちゃん
やったー!今度はエラーが出ない!

ちゃんとWebIOPiが実行されているかは、psコマンドで確認します。

$ ps ax | grep webiopi
1377 ? Sl 37:45 /usr/bin/python3 -m webiopi -l /var/log/webiopi -c /etc/webiopi/config
1617 pts/0 S+ 0:00 grep --color=auto webiopi

Left Caption
うさたん
動いてます 感動!

WebIOPiの停止

停止コマンドはこちらです。

$ sudo systemctl stop webiopi

終了処理に時間がかかるのか、シャットダウンにかなり時間がかかるようになりました。

ちなみに、再起動するコマンドはこちらです。

$ sudo systemctl restart webiopi

WebIOPiの使い方

動作確認

パソコンのブラウザから http://raspberrypi.local:8000 にアクセスします。

認証画面でユーザー名とパスワードを入力し、「ログイン」ボタンをクリックします。

ユーザー名: webiopi
パスワード: raspberry

*設定ファイルでpasswd-fileの行をコメントアウトした場合は表示されません。

「Main Menu」画面が表示されたらOKです。

WebIOPi Main Menu

サンプル画面

WebIOPiには、すぐに動くサンプル画面が用意されています。 

「Main Menu」画面の「GPIO Header」をクリックすると、GPIOの画面が表示されます。

GPIOのIN/OUTやHIGH/LOWを変更することができます。

WebIOPi GPIO Header

*もし、反応しなかったら、何回かリロードすると動くこともあります。

チュートリアル&ドキュメント

WebIOPiをどうやって使うのか、とっても参考になるチュートリアルドキュメント(Javascriptライブラリなど)も用意されています。

1個目のチュートリアル「Framework basis」は、時間でLEDをON/OFFするプログラム。

2個目のチュートリアル「Using macros」では、SENDボタンでマクロを呼び出し、LEDをON/OFFする時間を変更できます。

/home/pi/WebIOPi-0.7.1/tutorials/2.macros/ に index.html とscript.pyがあります。

このプログラムを変更して、プログラムを作っていきます。

配線方法

使用する回路は、前回の「ラズベリーパイ(Raspberry Pi Zero WH)でのフォトリフレクタ(フォトセンサ)の使い方」で作成したセットです。

1つだけ、74HC14(6回路シュミットトリガインバーター(秋月電子通商 \40))というロジックICを追加します。

Left Caption
まあちゃん
ロジックIC? 難しそう~
Right Caption
ままあちゃん
実は、中身は簡単なんだよ

74HC14とは

74HC14とは、データシートにあるように、インバーター(HIGH → LOW、LOW → HIGH に変える回路)が6個入っているIC(集積回路)です。

74HC14 ピン接続図

この74HC14を通すことで、フォトリフレクタからのアナログ信号をデジタル信号に変換することができます。

*ADコンバーターを使うより処理が速いのでこのICを使用します。

*しっかり、奥まで挿してください。そうしないと動きが不安定になってしまいます。

シュミットトリガとは、ギザギザしたアナログ信号をきれいなデジタル信号にしてくれものです。

シュミットトリガ

配線図

配線の方法を、図で示します。

配線は、前回の「ラズベリーパイ(Raspberry Pi Zero WH)でのフォトリフレクタ(フォトセンサ)の使い方」とほぼ同様です。

Raspberry Pi Zero WHとフォトリフレクタの配線

新規に追加した74HC14の欠けている方向に気をつけて、74HC14のVccピンに3.3V電源を、GNDピンにグラウンドを接続します。

また、フォトリフレクタからの出力をインバーターを介して、GPIO26(ピン番号37)に接続します。

配線の写真

写真で見るとこんなかんじです。

Raspberry Piとフォトリフレクタ回路

ブレッドボードの方をアップにします。

フォトリフレクタ回路

動作確認用にインバーターを2回通した信号をLEDにつないでいます。2回通しているので、HIGH → LOW → HIGH で、信号がHIGHのときに点灯します。

プログラム

チュートリアルのプログラムを(かなり)変更して、フォトリフレクタから入力回数をカウントするプログラムを作成しました。

上の説明の通り、インバーターを挟んでいるので、フォトリフレクタからの入力GPIO26(ピン番号37)が、LOWになる回数をカウントします。

ボタンの色は、HIGHの時はうすいピンク、LOWの時は赤になります。

/home/pi/webiopi/test/に、下のindex.htmlとscript.pyをコピペして保存してください。

プログラムの処理内容については、#コメントで解説しています。

[index.html]

 

[script.py]

JavascriptやCSS(スタイルシート)などは、別のファイルにした方がいいのですが、ここでは内容を追いやすいように1つのファイルにまとめています。

デバッグ

こちらのサイト「デバッグする(WebIOPi 利用)」でデバッグの方法が紹介されています。ありがとうございます!

Pythonのプログラム中にデバッグ用のコードを書きます。

webiopi.setDebug()

webiopi.debug("Hello World!")

 

以下のコマンドでWebIOPiを起動します。

sudo webiopi -c /etc/webiopi/config -d

*Google Chromeの場合、 [f12]キーでJavaScriptのデバッグができます。

動作確認

WebIOPiを起動し、パソコンやスマホのブラウザからアクセスして動作を確認します。

パソコンからアクセス

パソコンのブラウザから http://raspberrypi.local:8000/test/ にアクセスします。

最初は、[gpio26]ボタンが薄いピンク色で、回数が0回になっています。

フォトリフレクタの検出回数

フォトリフレクタが反射物を検出すると……

Raspberry Piとフォトリフレクタ回路

フォトリフレクタからの入力で、[gpio26]ボタンが赤くなり、カウントアップしていきます。

フォトリフレクタの検出回数

スマホからアクセス

スマホからは、名前解決ができないので、IPアドレスを調べて「http://192.168.0.4:8000/test/」のようにアクセスします。

ラズベリーパイ(Raspberry Pi Zero WH)のIPアドレスは、ターミナルで「ip addr show」と入力して確認します。

画面はパソコンと同じなので、動画をアップします。

 

まとめ

無事にラズベリーパイ(Raspberry Pi Zero WH)とパソコンやスマホを連携させることができたでしょうか?

もともとネットにつなぐ機能がついているRaspberry Pi Zero WHは、WebIOPiを入れるだけで、簡単にパソコンやスマホから操作できちゃうから、ほんとすごいですよね。

今後もWebIOPiを使って、いろいろトライしてみたいと思います。

Posted by ままあちゃん