※この記事は公開から時間が経っているため、現在の環境とは内容が異なる場合があります。
ラズベリーパイ（Raspberry Pi Zero WH）には、もともとネットワーク機能があります。
そのため、Webブラウザからアクセスできる仕組みを作ると、パソコンやスマホからラズベリーパイを操作できるようになります。
この記事では、WebIOPi を使って、スマホからラズベリーパイを操作する方法を紹介します。
そして、このWebIOPiを使って、フルカラーLED を操作し、100均の材料で作ったハーバリウム を光らせてみます。
うさたんラズベリーパイって、
スマホから操作できるの？
まあるWebIOPiを使うと、Webブラウザから操作できるようになるよ。
LEDやセンサーの制御にも使えるんだ。
今回の制作内容
今回は、WebIOPiをインストールして、スマホのブラウザからRGBフルカラーLEDを操作できるようにします。
大まかな流れは、次の通りです。
- Raspberry Pi Zero WHとフルカラーLEDを配線する
- WebIOPiをダウンロードしてインストールする
- 設定ファイルを編集する
- ブラウザからWebIOPiへアクセスする
- パソコンやスマホからLEDの色を操作する
- ハーバリウムなど、光を通すオブジェクトを光らせて動作を確認する
Webアプリのような見た目で操作できるので、「ブラウザからラズベリーパイを動かす」感覚がつかみやすいです。
WebIOPiでフルカラーLEDを操作できるようになると、LEDの色をブラウザから変えられるようになります。
この記事ではハーバリウムを光らせていますが、透明なクリスタルやアクリルオブジェ、惑星模型などを光らせても面白いです。
WebIOPiとは
WebIOPiは、ラズベリーパイ上で動くWebベースのフレームワークです。
Webサーバーの機能を持っていて、ブラウザからラズベリーパイへアクセスし、GPIOピンの制御やPythonスクリプトの実行ができます。
スマホやパソコンのブラウザからアクセスできるので、
- LEDを点ける
- モーターを動かす
- センサーの値を読む
- Pythonの処理と連携する
といったことを、Web画面から操作しやすくなります。
ラズベリーパイをスマホから操作する方法としては、ほかにもいくつか候補があります。
- WebIOPiを利用する
- Node.jsを利用する
- Webサーバー（Apache / lighttpd）＋ PHP または Python を使う
いくつか方法はありますが、この記事では、まず情報量が比較的多い WebIOPi を使って進めます。
準備するもの
今回使うものは、次の通りです。
- Raspberry Pi Zero WH
- microSDカード
- microUSB電源ケーブル
- パソコン
- ブレッドボード
- ジャンパーワイヤー
- 抵抗
- フルカラーLED
- 固定する台
- LEDの光を当てるもの（今回はハーバリウム）
準備するもの全体は、こちらの記事にもまとめています。
Raspberry Pi Zero WH
Raspberry pi zero WH は、初期設定と環境設定が済んだものを使います。
microSDカード
Raspberry PiのOSやプログラムを保存するために、microSDカード を使います。
8〜32GB程度のものを目安に使っています。
microUSB電源ケーブル
Raspberry Pi Zero WHの電源用に、microUSB電源ケーブルを使います。
パソコン
最初の設定や、パソコンのブラウザからの動作確認に使います。
この記事では、Raspberry Piの画面をVNC Viewerなどで表示し、WebIOPiの設定やブラウザからの動作確認を行います。
ブレッドボード
ブレッドボード は、はんだ付けをしなくても電子部品を差し込んで配線できるボードです。
ジャンパーワイヤー
ジャンパーワイヤー は、Raspberry PiのGPIOピンとブレッドボードをつなぐために使います。
抵抗
フルカラーLEDに流れる電流を制限するために、抵抗を使います。
LEDをRaspberry Piに直接つなぐと、電流が流れすぎてLEDやRaspberry Piを壊してしまう可能性があります。
必ず抵抗を入れて使います。
フルカラーLED
赤・緑・青の光を組み合わせて、いろいろな色を表現できるフルカラーLEDです。
固定する台
ブレッドボードとラズベリーパイをまとめて固定する台があると扱いやすいです。
LEDの光を当てるもの
LEDの光をあてるもの として、今回は手作りのハーバリウムを光らせます。
固定する台
フルカラーLEDを挿したブレッドボードと、ラズベリーパイを固定する台を作っておくと扱いやすくなります。
記事では、レゴブロックと牛乳パック、アルミホイルなどを使って固定台を作っています。
LEDの光が反射するように、アルミホイルを紙に貼って反射板を作ります。
それをカットした牛乳パックの後ろに貼ります。
周りも白っぽくすると、光が回り込みやすくなります。
LEDの光をあてるもの
LEDの光を当てるものとして、今回はハーバリウムを使いました。
きれいなものに光を通すと、RGB LEDの色の変化が見えやすくなります。
材料は100均で購入してきました。
材料は次の通りです。
- 電球型のガラス瓶
- 中に入れるもの（造花、ポプリ、きらきらしたものなど）
- ハーバリウムオイル
作り方の流れは、次の通りです。
- ガラス瓶の中をきれいに拭く
- 造花やポプリなどを入れる
- 透明ビーズなどを加える
- 最後にゆっくりハーバリウムオイルを注ぐ
光が通る空間を少し残すと、LEDを当てたときにきれいに見えやすいです。
配線方法
ここでは、フルカラーLEDとRaspberry Pi Zero WHの配線を行います。
配線図
フルカラーLEDの一番長い端子は、共通端子です。
この記事では、一番長い端子がカソード のフルカラーLEDを使っています。
緑・青・赤の各LEDを100%点灯したときに、きれいな白へ近づけるには、各色に接続する抵抗値を調整する必要があります。
この製品の具体例は、秋月電子通商のFAQページで紹介されています。
配線写真
実際の配線写真も残しておきます。
はじめて配線するときは、図だけでなく写真も見ながら確認すると分かりやすいです。
WebIOPiのインストール
導入の流れは、先に全体像をつかんでおくと進めやすいです。
インストールについては、こちらのサイトがとても参考になります。
開発が終了したWebIOPiを最新のRaspbianで動作させよう。
ここでは、手順の流れが追いやすいように、メモとして整理しておきます。
ダウンロード
Raspberry Piのブラウザで、WebIOPiのダウンロードページにアクセスして、WebIOPi-0.7.1.tar.gz のリンクをクリックしてダウンロードします。
※上の大きなダウンロードボタンではなく、少し下にあるリンクなので注意します。
解凍
ファイルマネージャーで、ダウンロードした /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.patchwget のダウンロード先は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.そこで一度ラズベリーパイを再起動して、もう一度同じコマンドを実行したところ、今度はエラーが出ずに起動できました。
ちゃんと動いているかは、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 webiopiWebIOPiを停止する
停止コマンドはこちらです。
$ sudo systemctl stop webiopiWebIOPiを再起動する
再起動コマンドはこちらです。
$ sudo systemctl restart webiopiWebIOPiの使い方
動作確認
パソコンのブラウザから、次のURLにアクセスします。
http://raspberrypi.local:8000認証画面が表示されたら、ユーザー名とパスワードを入力します。
ユーザー名：webiopi
パスワード：raspberry設定ファイルで passwd-file の行をコメントアウトした場合は、認証画面は表示されません。
「Main Menu」画面が表示されたらOKです。
サンプル画面
WebIOPiには、すぐに試せるサンプル画面も用意されています。
「Main Menu」画面の GPIO Header をクリックすると、GPIOの画面が表示されます。
IN / OUT や HIGH / LOW を切り替えることができます。
もし反応しない場合は、何回かリロードすると動くことがあります。
チュートリアルとドキュメント
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
まずは、Webブラウザに表示する画面を作ります。
index.html では、フルカラーLEDを操作するためのスライダー、光の三原色の画像、自動 ボタン、消灯 ボタンを配置しています。
この画面をパソコンやスマホのブラウザで開くことで、WebIOPiを通してRaspberry Pi Zero WHにつないだフルカラーLEDを操作できるようになります。
このファイルで行っている主な処理は、次の通りです。
- 緑・青・赤のLEDを操作するGPIO番号を指定する
- 各色を調整するスライダーを作る
- スライダーの値を画面に表示する
- 光の三原色の画像をクリックしたときに、LEDの色を切り替える
自動ボタンで、1秒ごとにランダムな色へ変える消灯ボタンで、LEDを消す
長いコードなので、必要な場合だけ開いて確認できるようにしています。
index.html のコードを見る
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>WebIOPi | RGBフルカラーLED</title>
<script type="text/javascript" src="/webiopi.js"></script>
<script type="text/javascript">
// WebIOPiの準備が整ったら実行
webiopi().ready(function() {
// 各LEDを接続したGPIO端子番号
var greenGpio = 2;
var blueGpio = 3;
var redGpio = 4;
// 自動表示で使用するタイマー
var timer = null;
// スライダーの作成(緑)
slider = webiopi().createRatioSlider(greenGpio);
$("#green").append(slider.val(0));
var greenId = '#'+slider.attr('id');
// スライダーの作成(青)
slider = webiopi().createRatioSlider(blueGpio);
$("#blue").append(slider.val(0));
var blueId = '#'+slider.attr('id');
// スライダーの作成(赤)
var slider = webiopi().createRatioSlider(redGpio);
$("#red").append(slider.val(0));
var redId = '#'+slider.attr('id');
// スライダーが変更されたら
$(greenId).on('change', function() {
$("#greenVal").text($(this).val());
});
$(blueId).on('change', function() {
$("#blueVal").text($(this).val());
});
$(redId).on('change', function() {
$("#redVal").text($(this).val());
});
// 指定されたLEDをON (引数配列[赤・緑・青])
function dispLed($arr) {
webiopi().pulseRatio(greenGpio, $arr[0]);
webiopi().pulseRatio(blueGpio, $arr[1]);
webiopi().pulseRatio(redGpio, $arr[2]);
$(greenId).val($arr[0]);
$(blueId).val($arr[1]);
$(redId).val($arr[2]);
$("#greenVal").text($arr[0]);
$("#blueVal").text($arr[1]);
$("#redVal").text($arr[2]);
}
// 光の三原色の画像をクリック
$("#mapGreen").click(function(){
dispLed( Array(1,0,0) );
});
$("#mapBlue").click(function(){
dispLed( Array(0,1,0) );
});
$("#mapRed").click(function(){
dispLed( Array(0,0,1) );
});
$("#mapMagenta").click(function(){
dispLed( Array(0,1,1) );
});
$("#mapCyan").click(function(){
dispLed( Array(1,1,0) );
});
$("#mapYellow").click(function(){
dispLed( Array(1,0,1) );
});
$("#mapWhite").click(function(){
dispLed( Array(1,1,1) );
});
// 「自動」ボタンをクリック
$('#btnAuto').click(function(e) {
var rnd = Array(3);
// 1秒ごとに実行
timer = setInterval(function(){
// 乱数でLEDを表示
for(let i = 0; i < rnd.length; i++){
rnd[i] = Math.floor(Math.random()*100)/100;
}
dispLed( rnd );
},1000);
});
// 「消灯」ボタンをクリック
$('#btnOff').click(function(e) {
// 自動表示を終了
if(timer){
clearInterval(timer);
}
// LED消灯
dispLed( Array(0,0,0) );
});
});
</script>
<style type="text/css">
/* スライダーのスタイル設定 */
input[type="range"] {
display: block;
width: 160px;
height: 35px;
}
/* ボタンのスタイル設定 */
button {
display: inline-block;
margin: 5px 5px 5px 5px;
width: 80px;
height: 35px;
font-size: 12pt;
color: black;
background-color: White;
}
</style>
</head>
<body>
<div align="center">
<!-- スライダー -->
緑： <span id="greenVal">0</span><span id="green"></span>
青： <span id="blueVal">0</span><span id="blue"></span>
赤： <span id="redVal">0</span><span id="red"></span>
<!-- 光の三原色の画像 -->
<img src="three-colors.gif" usemap="#ImageMap" width="326" height="300" alt="光の三原色">
<map name="ImageMap">
<area id="mapBlue" shape="poly" coords="72,100,91,58,129,30,163,24,207,38,235,66,250,100,205,92,161,104,112,90,72,99" alt="blue" />
<area id="mapGreen" shape="poly" coords="67,109,22,174,42,243,92,274,156,265,126,236,114,200,80,166,68,133,69,106" alt="green" />
<area id="mapRed" shape="poly" coords="255,109,289,151,297,203,275,248,232,276,167,268,191,237,207,202,246,165,256,112" alt="red" />
<area id="mapMagenta" shape="poly" coords="250,107,209,97,165,108,195,138,207,170,206,196,236,170,250,136,250,107" alt="magenta" />
<area id="mapYellow" shape="poly" coords="120,203,134,237,158,261,187,236,199,204,161,212,161,212" alt="yellow" />
<area id="mapCyan" shape="poly" coords="71,105,83,161,115,194,123,146,157,107,115,95,102,96" alt="cyan" />
<area id="mapWhite" shape="poly" coords="161,110,130,143,120,195,161,207,200,197,190,143,190,143" alt="white" />
</map>
</div>
<div align="center">
<!-- ボタン -->
<button id="btnAuto">自動</button><button id="btnOff">消灯</button>
</div>
</body>
</html>index.html のポイントは、JavaScriptでWebIOPiの機能を呼び出しているところです。
webiopi().ready(function() {この部分で、WebIOPiの準備ができたあとに処理を開始します。
緑・青・赤のフルカラーLEDは、それぞれ次のGPIOに割り当てています。
var greenGpio = 2;
var blueGpio = 3;
var redGpio = 4;スライダーは、次のように createRatioSlider() を使って作っています。
slider = webiopi().createRatioSlider(greenGpio);スライダーを動かすと、WebIOPiを通してRaspberry Pi側のGPIO出力が変わり、LEDの明るさが変化します。
また、光の三原色の画像をクリックしたときは、dispLed() に赤・緑・青の値を渡して、LEDの色を切り替えています。
dispLed( Array(1,0,0) );たとえばこの場合は、緑だけを点灯する指定です。
自動 ボタンでは、1秒ごとにランダムな値を作り、フルカラーLEDの色を自動で変えています。
timer = setInterval(function(){消灯 ボタンでは、自動表示を止めて、赤・緑・青をすべて0にしています。
dispLed( Array(0,0,0) );本来は、HTML、JavaScript、CSSを別々のファイルに分けたほうが管理しやすいです。
ただ、この記事では処理の流れを追いやすくするために、index.html の中にまとめて書いています。
※画像の一部の座標を切り出すのに使ったツールとして、こちらも参考になります。
HTML Imagemap Generator
script.py
Python3のプログラムファイルです。
import webiopi
GPIO = webiopi.GPIO
GREEN = 2
BLUE = 3
RED = 4
def setup():
# GPIOをPWMに設定
GPIO.setFunction(GREEN, GPIO.PWM)
GPIO.setFunction(BLUE , GPIO.PWM)
GPIO.setFunction(RED , GPIO.PWM)
# WebIOPiにより繰り返される関数
def loop():
webiopi.sleep(5)
# WebIOPi終了時に呼ばれる関数
def destroy():
# GPIO関数のリセット
GPIO.setFunction(GREEN, GPIO.IN)
GPIO.setFunction(BLUE, GPIO.IN)
GPIO.setFunction(RED, GPIO.IN)プログラムのポイント
greenGpio = 2、blueGpio = 3、redGpio = 4で接続先のGPIOを決めるcreateRatioSlider()で各色のスライダーを作るpulseRatio()でPWMの比率を設定して明るさを変える- 色画像のクリックで、赤・緑・青・シアン・マゼンタ・黄・白を切り替える
自動ボタンでランダムに色を変える消灯ボタンでLEDを消す
「何を操作できるようにしたいか」がそのまま画面に出るので、Webアプリ的な考え方の入口としても面白い部分です。
PWMとは
ソースの中に出てくるPWM（Pulse Width Modulation パルス幅変調）は、デジタル信号のON/OFFを高速に繰り返すことで、疑似的にアナログ信号を出力する方式です。
ラズベリーパイは基本的にデジタル信号を扱いますが、PWMを使うことで、LEDの明るさをなめらかに変えているように見せられます。
ONとOFFの比率をデューティー比といい、プログラムの中では0～100%の値を設定して、各色の明るさを変えています。
ラズベリーパイは、次の2種類のPWM信号を生成することができます。
精度の高いPWM信号は2つしか出力できないので、用途によって使い分けます。
- ソフトで生成する精度の低いPWM信号 LED DCモーター
- ハードで生成する精度の高いPWM信号 サーボモータの角度制御
デバッグ
WebIOPiでうまく動かないときは、デバッグ表示も役に立ちます。
Pythonのプログラム中に、次のようなコードを書きます。
webiopi.setDebug()
webiopi.debug("Hello World!")デバッグモードで起動するコマンドはこちらです。
sudo webiopi -c /etc/webiopi/config -d*Google Chromeの場合、F12キーで開発者ツールを開いてJavaScriptのデバッグができます。
動作確認
WebIOPiを起動し、パソコンやスマホのブラウザからアクセスして、フルカラーLEDを操作できるか確認します。
パソコンからアクセス
パソコンのブラウザから、次のURLにアクセスします。
http://raspberrypi.local:8000/test/次のような画面が表示されればOKです。
スマホからアクセス
スマホからは、名前解決がうまくいかないことがあるため、IPアドレスを使ってアクセスします。
たとえば、次のようなURLです。
http://192.168.0.26:8000/test/Raspberry PiのIPアドレスは、ターミナルで次のコマンドを入力して確認します。
ip addr showスマホでも、パソコンと同じ画面からLEDを操作できます。
スライダー操作
一番上のスライダーでは、緑・青・赤を個別に調整できます。
スライダーを動かすと、フルカラーLEDの色の混ざり方が変わります。
少し暗くして光らせると、ハーバリウムに色が広がる様子が分かりやすくなります。
光の三原色
真ん中の光の三原色の画像は、クリックした色にLEDが光るようになっています。
赤・緑・青だけでなく、シアン・マゼンタ・黄・白も選べます。
実際の操作画面はこちらです。
こちらは、操作している動画です。
自動ボタン
一番下の「自動」ボタンをクリックすると、フルカラーLEDが1秒ごとにランダムな色へ変化します。
どんな色に光るか予測できないので、眺めているとおもしろいです。
「消灯」ボタンを押すと、LEDが消えます。
こちらが動画です。
うまく動かないときに確認したいこと
WebIOPiが起動しているか
まずは、WebIOPi自体が起動しているか確認します。
ps ax | grep webiopiURLが合っているか
パソコンでは raspberrypi.local:8000、スマホではIPアドレス指定のほうがつながりやすいです。
配線が合っているか
RGB LEDの端子の向きや、GPIO番号、抵抗の入れ方を確認します。
認証設定を変えていないか
ログイン画面が出ないように設定を変えた場合は、認証の動きも変わります。
反応しないときは再読み込みも試す
サンプル画面では、リロードで動くこともあります。
まとめ
Raspberry Pi Zero WHにWebIOPiを導入して、スマホやパソコンのブラウザから操作する方法を試しました。
今回の流れは、次の通りです。
- フルカラーLEDとRaspberry Piを配線する
- WebIOPiをダウンロードしてインストールする
- 設定ファイルを編集する
- WebIOPiを起動する
- ブラウザからアクセスする
- RGBのスライダーや色ボタンでフルカラーLEDを操作する
- ハーバリウムを光らせて動作を確認する
WebIOPiを使うと、ラズベリーパイをブラウザから操作できるようになります。
LEDの色を切り替えるだけでもかなり面白いですが、ここからセンサーやモーターにつなげていくと、さらにできることが広がります。
次は、フォトリフレクタ（反射型フォトセンサ）を使った記事へ進みます。
こちらの記事では、Lチカ(LED点滅)させる方法を紹介しています。
制作ノート全体はこちらです。
