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

2019年10月24日

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

そして、このWebIOPiを使ってフルカラーLEDを操作! 100均の材料で作ったハーバリウムをきれいに光らせてみたいと思います。

ハーバーリウム

 

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

準備するもの

1

ラズベリーパイ(Raspberry pi zero WH)

詳しくは、こちらです。

初期設定環境設定が済んだものを使用します。

Raspberry Pi Zero WH
2

microSDカード 8~32GB

詳しくは、こちらです。

Team microSDHCカード 32GB 高速転送UHS-1 日本国内10年保証 SD変換アダプター付属 正規品

3

microUSB電源ケーブル

スマホの充電ケーブルでOKです。
詳しくは、こちらです。

microUSB電源ケーブル
4

パソコン

microSDに書き込めるもの。
詳しくは、こちらです。

エイスース 13.3型ノートパソコン ASUS ZenBook UX331UN ロイヤルブルー UX331UN-8250B

5

ブレッドボード

詳しくは、こちらです。今回はミニサイズのブレッドボードを使用しています。

ブレッドボード
6

ジャンパーワイヤー

詳しくは、こちらです。

ジャンパーワイヤ
7

抵抗

詳しくは、こちらです。

抵抗
8

フルカラーLED

詳しくは、こちらです。

フルカラーLED
9

固定する台

固定できれば何でもOKです。

次で詳しく紹介しています 

固定する台
10

LEDの光をあてるもの

初めて、なんちゃってハーバリウムを作ってみました。

次で詳しく紹介しています 

ハーバリウム

固定する台

フルカラーLEDを挿したブレッドボードとRaspberry Pi Zero WHを固定する台をレゴブロックで作りました。

固定する台

 

LEDの光が反射するようにアルミホイルを紙に貼って反射板を作って……。

反射板

カットした牛乳パックの後ろに貼りました。

カットした牛乳パック

牛乳パックで周りも白っぽくして完成です。

固定する台

LEDの光をあてるもの

LEDの光をあてるときれいなものということで、初めてハーバリウム作りに挑戦してみました。

材料はこちら! 全部、ダイソーで購入してきました。

ハーバリウムの材料

材料

  • 電球型のガラス瓶
  • 中に入れるもの(造花・ポプリ・きらきらしたもの 等)
  • ハーバーリウムオイル

作り方

  1. ガラス瓶の中を消毒スプレーをしたティッシュで拭きます。
  2. 中に造花やポプリなどを入れます。家にあった透明のビーズなども入れてみました。
  3. 最後にゆっくりハーバーリウムオイルを注ぎます。

コツはぎゅうぎゅうにならないように、光が通る空間を空けることです。

 

小学2年生のうさたんと一緒に作りました。

Left Caption
うさたん
簡単で 楽しかったよ~

 

配線方法

配線図

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

フルカラーLEDの一番長い端子が③カソードです。

Raspberry Pi  フルカラーLEDの配線図

緑・青・赤の各LEDを100%点灯したとき、きっちり白く見えるようにするには、各色に接続する抵抗の大きさを変える必要があります。
この製品の具体例は、秋月電子通商のFAQページで紹介されています。

配線の写真

ブレッドボード部分のアップです。

フルカラーLEDの配線の写真

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

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

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があります。

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

プログラム

WebIOPiを使って、フルカラーLEDを光らせるプログラムを作成しました。

/home/pi/webiopi/test/に、以下のindex.htmlとscript.pyを保存します。

index.html

スライダー・画像・ボタンの設置と制御をしています。

詳しくは、コメントを見てください。

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

*画像の一部の座標を切り出すのに、こちらのサイトを利用させていだきました。とっても便利でおすすめです。

HTML Imagemap Generator

script.py

Python3のプログラムファイルです。

PWMとは

ソースの中に出てくるPWM(Palse Width Modulation パルス幅変調)は、デジタル信号のONとOFFを高速に繰り返すことで、疑似的にアナログ信号を出力する方式です。

デジタル信号の入出力のみに対応しているラズベリーパイアナログ信号を出力したいときに利用します。

ONとOFFの比率をデューティー比といい、プログラムの中では0~100%の値を設定します。

 

ラズベリーパイは、次の2種類のPWM信号を生成することができます。精度の高いPWM信号は2つしか出力できないので、用途によって使い分けます。

  • ソフトで生成する制度の低いPWM信号 LED DCモーター
  • ハードで生成する制度の高いPWM信号 サーボモータの角度制御
 

デバッグ

こちらのサイト「デバッグする(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/ にアクセスして、こちらの画面が表示されればOKです。

フルカラーLEDの操作画面

 

スマホからアクセス

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

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

パソコンと同じ画面でLEDを操作できます。

スライダー操作

一番上のスライダーは、緑・青・赤色を個別に操作できます。

フルカラーLED フルカラーLED フルカラーLED

スライダーを操作している動画です。

Left Caption
まあちゃん
ぼくが操作してるよ~

少し暗くして光らせてみました。

光の三原色

真ん中の光の三原色の画像は、クリックした色にLEDが光ります。

フルカラーLED

こちらは、操作している動画です。

自動ボタン

一番下の「自動」ボタンをクリックすると、フルカラーLEDが1秒ごとに乱数で設定された色に光ります。

どんな色に光るか予測できないので、眺めているとおもしろいです。

フルカラーLED

フルカラーLED

そして、「消灯」ボタンでLEDが消えます。

こちらが動画です。

まとめ

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

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

きれいに光るフルカラーLEDもいろいろ使えそうなので、また利用してみたいと思います。

 

Posted by ままあちゃん