ホーム / 電子工作 /

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

2019/03/01

電子工作

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

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

ハーバーリウム




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


ままあちゃんWebIOPiっていうのを使うと、
簡単にできるんだよ♪


準備するもの

1 ラズベリーパイ(Raspberry pi zero WH)
詳しくは、こちらです。
初期設定・環境設定が済んだものを使用します。
Raspberry Pi Zero WH
2 microSDカード 8～32GB
詳しくは、こちらです。
Team microSDHCカード 32GB 高速転送UHS-1 日本国内10年保証 SD変換アダプター付属 正規品
3microUSB電源ケーブル
スマホの充電ケーブルでOKです。
詳しくは、こちらです。
microUSB電源ケーブル
4 パソコン
microSDに書き込めるもの。
詳しくは、こちらです。
エイスース 13.3型ノートパソコン ASUS ZenBook UX331UN ロイヤルブルー UX331UN-8250B
5 ブレッドボード
詳しくは、こちらです。
ブレッドボード
6 ジャンパーワイヤー
ジャンパーワイヤ(オスーメス)を2本使用します。詳しくは、こちらです。
ジャンパーワイヤ
7 抵抗
今回は、330Ωの抵抗を1本使います。詳しくは、こちらです。
抵抗
8LED(発光ダイオード)
何色でもOKです。今回は、3mmの赤いLEDを使用しました。詳しくは、こちらです。
LED
9 固定する台
固定できれば何でもOKです。
次で詳しく紹介しています。 
固定する台
10 LEDの光をあてるもの
初めて、なんちゃってハーバリウムを作ってみました。
次で詳しく紹介しています。 

固定する台

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

固定する台

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

反射板

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

カットした牛乳パック

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

固定する台

LEDの光をあてるもの

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

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

ハーバリウムの材料


材料

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

作り方

  1. ガラス瓶の中を消毒スプレーをしたティッシュで拭きます。
  2. 中に造花やポプリなどを入れます。家にあった透明のビーズなども入れてみました。
  3. 最後にゆっくりハーバーリウムオイルを注ぎます。
コツはぎゅうぎゅうにならないように、光が通る空間を空けることです。

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


うさたん簡単で 楽しかったよ～

配線方法

配線図

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

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

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

配線の写真

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

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

WebIOPiとは？

パソコンやスマホからラズベリーパイ(Raspberry Pi Zero WH)を操作する方法を調べました。いくつか見つかった中で気になったのはこの3つです。
  • WebIOPiを利用する
  • Node.jsを利用する
  • Webサーバ(Apache or lighttpd) ＋ PHP or Python3

３つとも試してみたいので、まずは一番情報がありそうな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.
しかし、エラーメッセージが表示されてしまいました！　ガガーン
ググってみても、解決策が出てきません。

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



一度、ラズベリーパイ(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

うさたん 動いてます　感動！

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

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

詳しくは、コメントを見てください。
<!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です。

フルカラーLEDの操作画面

スマホからアクセス

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

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

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

スライダー操作

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

フルカラーLED

フルカラーLED

フルカラーLED

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


まあちゃんぼくが操作してるよ～


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


光の三原色

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

フルカラーLED


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


自動ボタン

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

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

フルカラーLED


フルカラーLED


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

こちらが動画です。

まとめ

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

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

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

次は、フォトリフレクタというセンサを使ってみたいと思います。

ラズベリーパイ(Raspberry Pi Zero WH)でのフォトリフレクタ(フォトセンサ)の使い方

フォトリフレクタ (反射型フォトセンサ)の RPR-220 を ラズベリーパイ ( Raspberry Pi Zero WH )で使う方法を紹介します。 ラズベリーパイ ( Raspberry Pi Zero WH )で使用する際の注意点や、必要な 抵抗の計算方法 なども詳し...

www.ma-chanblog.com

QooQ