WebブラウザからRaspberry Pi を操作する（WebIOPi 利用）

解説

（「Raspberry Pi 1」を使用した、古い情報です。
　新しい情報は、「ホーム > フィジカルコンピューティング > Raspberry Pi 3 > WebブラウザからRaspberry Pi を操作する（WebIOPi 利用）」にまとめています。）

WebIOPi を利用すると、Webブラウザから Raspberry Pi をリモート操作することができます。
（Control, debug, and use your Pi's GPIO locally or remotely, from a browser or any app.
　http://code.google.com/p/webiopi/wiki/INTRODUCTION）

WebIOPi を利用すると、Arduinoのスケッチ風のフォーマットで、Raspberry Pi を操作するプログラムを書くことができます（setup関数/loop関数/destroy関数）。
（ You can write your scripts with an Arduino sketch-like format using setup/loop/destroy functions.
　http://code.google.com/p/webiopi/wiki/PYTHONSERVER）

最低すべきこと

・スクリプトファイル

定常時の処理: 定常時の処理の定義は、Arduinoのスケッチ風のフォーマットで記述します。
setup関数/loop関数/destroy関数に必要な処理を記述します。
Webブラウザからの要求時の処理: Webブラウザからの要求時の処理の定義は、マクロ関数として記述します。
「@webiopi.macro」を付加した関数を定義し、必要な処理を記述します。

・HTMLファイル

Javascriptファイルの読み込み: WebIOPiのJavascriptファイルである「webiopi.js」を読み込む処理を記述します。
「<script type="text/javascript" src="/webiopi.js"></script>」
マクロ関数の呼び出し: スクリプトファイルで定義したマクロ関数を呼び出す処理を記述します。
「webiopi().callMacro( "マクロ関数名", 引数 );」

部品表

部品名	数量	商品名	参考価格
LED	3	赤色LED 3mm OSDR3133A	100個350円
75Ω抵抗器	3	カーボン抵抗（炭素皮膜抵抗） 1/6W 75Ω	100本100円
Raspberry Pi	1	Raspberry Pi Type B 512MB	3,300円
ブレッドボード	1	EIC-801	250円
ジャンパーワイヤ	適量	ジャンパーワイヤ（オス－メス）	10本300円

接続例

WebIOPiのインストール

Raspberry Pi にWebIOPiをインストールしてない場合は、まず、WebIOPiをインストールします。

WebIOPiのインストール

スクリプトファイルの作成

Webブラウザからの要求を処理するスクリプトファイルを作成します。
「/home/pi/work/webiopi」フォルダに、「testcallmacro.py」というファイル名で、以下の内容のスクリプトファイルを作成します。

import webiopi webiopi.setDebug() GPIO = webiopi.GPIO LED1PIN = 23 LED2PIN = 24 LED3PIN = 25 g_led1active = 0 g_led2active = 0 g_led3active = 0 g_speed = 5 def setup(): GPIO.setFunction( LED1PIN, GPIO.OUT ) GPIO.setFunction( LED2PIN, GPIO.OUT ) GPIO.setFunction( LED3PIN, GPIO.OUT ) def loop(): # speed | 1 10 # interval[ sec] | 0.5 0.01 interval = 0.5 + (g_speed - 1) * (0.01 - 0.5) / (10-1) if g_led1active: GPIO.digitalWrite( LED1PIN, True ) if g_led2active: GPIO.digitalWrite( LED2PIN, True ) if g_led3active: GPIO.digitalWrite( LED3PIN, True ) webiopi.sleep( interval ) GPIO.digitalWrite(LED1PIN, False ) GPIO.digitalWrite(LED2PIN, False ) GPIO.digitalWrite(LED3PIN, False ) webiopi.sleep( interval ) @webiopi.macro def ChangeLedActive( led, active ): webiopi.debug( "ChangeLedActive : %s, %s" % (led, active) ) global g_led1active, g_led2active, g_led3active if 1 == int(led): g_led1active = int(active) if 2 == int(led): g_led2active = int(active) if 3 == int(led): g_led3active = int(active) @webiopi.macro def ChangeSpeed( speed ): webiopi.debug( "ChangeSpeed : %s" % (speed) ) global g_speed g_speed = int(speed)

HTMLファイルの作成

Webブラウザからアクセスする HTMLファイルを作成します。
「/home/pi/work/webiopi」フォルダに、「testcallmacro.html」というファイル名で、以下の内容のHTMLファイルを作成します。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title></title> <script type="text/javascript" src="/webiopi.js"></script> <script type="text/javascript"> webiopi().ready( function() { // Initialize webiopi().callMacro( "ChangeLedActive", [1, 0] ); webiopi().callMacro( "ChangeLedActive", [2, 0] ); webiopi().callMacro( "ChangeLedActive", [3, 0] ); webiopi().callMacro( "ChangeSpeed", 5 ); } ); function onCheckboxLed( led ) { if( 1 == led ) { webiopi().callMacro( "ChangeLedActive", [1, document.getElementsByName("led1")[0].checked ? 1 : 0] ); return; } if( 2 == led ) { webiopi().callMacro( "ChangeLedActive", [2, document.getElementsByName("led2")[0].checked ? 1 : 0] ); return; } if( 3 == led ) { webiopi().callMacro( "ChangeLedActive", [3, document.getElementsByName("led3")[0].checked ? 1 : 0] ); return; } } function onRadioSpeed( speed ) { webiopi().callMacro( "ChangeSpeed", speed ); } </script> </head> <body> LED Active :<br> LED1<input type="checkbox" name="led1" onclick="onCheckboxLed(1)"><br> LED2<input type="checkbox" name="led2" onclick="onCheckboxLed(2)"><br> LED3<input type="checkbox" name="led3" onclick="onCheckboxLed(3)"><br> <br> Blink Speed :<br> 1 <input type="radio" name="speed" onclick="onRadioSpeed(1)"><br> <input type="radio" name="speed" onclick="onRadioSpeed(2)"><br> <input type="radio" name="speed" onclick="onRadioSpeed(3)"><br> <input type="radio" name="speed" onclick="onRadioSpeed(4)"><br> <input type="radio" name="speed" onclick="onRadioSpeed(5)" checked><br> <input type="radio" name="speed" onclick="onRadioSpeed(6)"><br> <input type="radio" name="speed" onclick="onRadioSpeed(7)"><br> <input type="radio" name="speed" onclick="onRadioSpeed(8)"><br> <input type="radio" name="speed" onclick="onRadioSpeed(9)"><br> <input type="radio" name="speed" onclick="onRadioSpeed(10)"><br> 10 </body> </html>

WebIOPi サービスの設定の変更

WebIOPi のサービスを開始したときに、作成したスクリプトが実行されるように、WebIOPi サービスの設定を変更します。
また、Webブラウザからアクセスしたときに、作成したHTMLが表示されるように、WebIOPi サービスの設定を変更します。

WebIOPi サービスの設定は、「/etc/webiopi/config」ファイルに記述されています。

以下のコマンドを実行し、「/etc/webiopi/config」ファイルを開きます。

sudo nano /etc/webiopi/config

[SCRIPTS] セクションを探し、[SCRIPTS] セクションの「myscript =」を以下のように書き換えます。

（・・・省略・・・） #------------------------------------------------------------------------# [SCRIPTS] # Load custom scripts syntax : # name = sourcefile # each sourcefile may have setup, loop and destroy functions and macros #myscript = /home/pi/webiopi/examples/scripts/macros/script.py myscript = /home/pi/work/webiopi/testcallmacro.py #------------------------------------------------------------------------# [HTTP] （・・・省略・・・）

[HTTP] セクションを探し、[HTTP] セクションの「doc-root =」、「welcome-file =」を以下のように書き換えます。

（・・・省略・・・） [HTTP] # HTTP Server configuration enabled = true port = 8000 # File containing sha256(base64("user:password")) # Use webiopi-passwd command to generate it passwd-file = /etc/webiopi/passwd # Use doc-root to change default HTML and resource files location #doc-root = /home/pi/webiopi/examples/scripts/macros doc-root = /home/pi/work/webiopi/ # Use welcome-file to change the default "Welcome" file #welcome-file = index.html welcome-file = testcallmacro.html #------------------------------------------------------------------------# （・・・省略・・・）

編集し終えたら、
Ctrl + O
で上書き保存し、
Ctrl + X
で nano を終了します。

実行

WebIOPi のサービスを開始します。

sudo /etc/init.d/webiopi start

WebIOPi のサービスを終了するには、以下のコマンドを実行します。

sudo /etc/init.d/webiopi stop

パソコンやスマートフォンのWebブラウザを起動し、Raspberry Pi のポート8000にアクセスします。
（認証ダイアログが表示された場合は、
　ユーザー名：webiopi
　パスワード：raspberry
　と入力します。）

ダウンロード

サンプルスクリプトファイル