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

まあちゃんラズベリーパイって、
スマホで操作できるの?

ままあちゃんWebIOPiっていうのを使うと、
簡単にできるんだよ♪
準備するもの
1 | ラズベリーパイ(Raspberry pi zero WH) 詳しくは、こちらです。 初期設定・環境設定が済んだものを使用します。 | |
---|---|---|
2 | microSDカード 8~32GB 詳しくは、こちらです。 Team microSDHCカード 32GB 高速転送UHS-1 日本国内10年保証 SD変換アダプター付属 正規品 | |
3 | microUSB電源ケーブル スマホの充電ケーブルでOKです。 詳しくは、こちらです。 | |
4 | パソコン microSDに書き込めるもの。 詳しくは、こちらです。 エイスース 13.3型ノートパソコン ASUS ZenBook UX331UN ロイヤルブルー UX331UN-8250B | |
5 | ブレッドボード 詳しくは、こちらです。 | |
6 | ジャンパーワイヤー ジャンパーワイヤ(オスーメス)を2本使用します。詳しくは、こちらです。 | |
7 | 抵抗 今回は、330Ωの抵抗を1本使います。詳しくは、こちらです。 | |
8 | LED(発光ダイオード) 何色でもOKです。今回は、3mmの赤いLEDを使用しました。詳しくは、こちらです。 | |
9 | 固定する台 固定できれば何でもOKです。 次で詳しく紹介しています。 | |
10 | LEDの光をあてるもの 初めて、なんちゃってハーバリウムを作ってみました。 次で詳しく紹介しています。 |
固定する台
フルカラーLEDを挿したブレッドボードとRaspberry Pi Zero WHを固定する台をレゴブロックで作りました。LEDの光が反射するようにアルミホイルを紙に貼って反射板を作って……。
カットした牛乳パックの後ろに貼りました。
牛乳パックで周りも白っぽくして完成です。
LEDの光をあてるもの
LEDの光をあてるときれいなものということで、初めてハーバリウム作りに挑戦してみました。材料はこちら! 全部、ダイソーで購入してきました。
材料
- 電球型のガラス瓶
- 中に入れるもの(造花・ポプリ・きらきらしたもの 等)
- ハーバーリウムオイル
作り方
- ガラス瓶の中を消毒スプレーをしたティッシュで拭きます。
- 中に造花やポプリなどを入れます。家にあった透明のビーズなども入れてみました。
- 最後にゆっくりハーバーリウムオイルを注ぎます。
小学2年生のうさたんと一緒に作りました。

うさたん簡単で 楽しかったよ~
配線方法
配線図
配線の方法を、簡単な図で示します。フルカラーLEDの一番長い端子が③カソードです。
緑・青・赤の各LEDを100%点灯したとき、きっちり白く見えるようにするには、各色に接続する抵抗の大きさを変える必要があります。
この製品の具体例は、秋月電子通商のFAQページで紹介されています。
この製品の具体例は、秋月電子通商のFAQページで紹介されています。
配線の写真
ブレッドボード部分のアップです。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リンクをクリックしてダウンロードします。*上のダウンロードボタンではなく、画面の少し下の所のリンクなので注意です。
解凍
ファイルマネージャーで、ダウンロードした/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というプログラムなどを保存・公開できるサービスです。$ wget https://raw.githubusercontent.com/doublebind/raspi/master/webiopi-pi2bplus.patch
$ patch -p1 -i webiopi-pi2bplus.patch
インストール
ターミナルでコマンドを入力します。$ 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/ (コピー)
$mkdir webiopi (フォルダ作成)
$ cp -r /usr/share/webiopi/htdocs/* webiopi/ (コピー)
設定ファイル編集
エディタで設定ファイルを開きます。$ sudo leafpad /etc/webiopi/config (設定ファイルを編集)
設定ファイル内の[SCRIPTS]に、動作させておきたいPythonプログラムを指定します。
[SCRIPTS]
・・・
myscript = /home/pi/webiopi/test/script.py
・・・
myscript = /home/pi/webiopi/test/script.py
ドキュメントルートの設定を変更します
#doc-root = /home/pi/webiopi/examples/scripts/macros
↓
doc-root = /home/pi/webiopi
↓
doc-root = /home/pi/webiopi
*ログイン画面が表示されないようにするには、passwd-file の行を#でコメントアウトします。
WebIOPiの起動と停止
WebIOPiの起動
ターミナルで以下のコマンドを入力して起動します。$ sudo systemctl start webiopi
Failed to start webiopi.service: Unit webiopi.service not found.
しかし、エラーメッセージが表示されてしまいました! ガガーンFailed to start webiopi.service: Unit webiopi.service not found.
ググってみても、解決策が出てきません。

ままあちゃんこんなときは、困った時の再起動!
一度、ラズベリーパイ(Raspberry Pi Zero WH)を再起動してみます。
もう一度、ターミナルで
$ sudo systemctl start webiopi

まあちゃんやったー!今度はエラーが出ない!
ちゃんと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
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

うさたん 動いてます 感動!
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」画面の「GPIO Header」をクリックすると、GPIOの画面が表示されます。
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
スライダー・画像・ボタンの設置と制御をしています。詳しくは、コメントを見てください。
<!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>
JavascriptやCSS(スタイルシート)などは、別のファイルにした方がいいのですが、ここでは内容を追いやすいように1つのファイルにまとめています。
*画像の一部の座標を切り出すのに、こちらのサイトを利用させていだきました。とっても便利でおすすめです。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)
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です。スマホからアクセス
スマホからは名前解決ができないので、IPアドレスを調べて「http://192.168.0.26:8000/test/」のようにアクセスします。*ラズベリーパイ(Raspberry Pi Zero WH)のIPアドレスは、ターミナルで「ip addr show」と入力して確認します。
パソコンと同じ画面でLEDを操作できます。スライダー操作
一番上のスライダーは、緑・青・赤色を個別に操作できます。スライダーを操作している動画です。

まあちゃんぼくが操作してるよ~
少し暗くして光らせてみました。
光の三原色
真ん中の光の三原色の画像は、クリックした色にLEDが光ります。こちらは、操作している動画です。
自動ボタン
一番下の「自動」ボタンをクリックすると、フルカラーLEDが1秒ごとに乱数で設定された色に光ります。どんな色に光るか予測できないので、眺めているとおもしろいです。
そして、「消灯」ボタンでLEDが消えます。
こちらが動画です。
まとめ
無事にラズベリーパイ(Raspberry Pi Zero WH)とパソコンやスマホを連携させることができたでしょうか?もともとネットにつなぐ機能がついているRaspberry Pi Zero WHは、WebIOPiを入れるだけで、簡単にパソコンやスマホから操作できちゃうから、ほんとすごいですよね。
きれいに光るフルカラーLEDもいろいろ使えそうなので、また利用してみたいと思います。
次は、フォトリフレクタというセンサを使ってみたいと思います。
フォトリフレクタ (反射型フォトセンサ)の RPR-220 を ラズベリーパイ ( Raspberry Pi Zero WH )で使う方法を紹介します。 ラズベリーパイ ( Raspberry Pi Zero WH )で使用する際の注意点や、必要な 抵抗の計算方法 なども詳し...
0 件のコメント:
コメントを投稿