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

解説

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

WebIOPi を利用すると、Arduinoのスケッチ風のフォーマットで、Raspberry Pi を操作するプログラムを書くことができます（setup関数/loop関数/destroy関数）。
（ You can extend the WebIOPi behavior by loading custom Python script using an Arduino like syntax with setup/loop functions.
　http://http://webiopi.trouch.com/Tutorial_Basis.html

Webブラウザから Raspberry Pi のGPIOを操作することができます。

最低すべきこと

スクリプトファイル

定常時の処理: 定常時の処理の定義は、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円
100Ω抵抗器	3	カーボン抵抗（炭素皮膜抵抗） 1/6W 100Ω	100本100円
Raspberry Pi	1	Raspberry Pi 3 Model B	6,300円
ブレッドボード	1	EIC-801	250円
ジャンパーワイヤ	適量	ジャンパーワイヤ（オス－メス）	10本300円

接続例

出力ピンとして、GPIO 23、24、25 を使用した場合の接続例

WebIOPiのインストール

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

WebIOPiのインストール

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

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

import webiopi 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 ): 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 ): global g_speed g_speed = int(speed)

HTMLファイルの作成

Webブラウザからアクセスする HTMLファイルを作成します。
「/home/pi/work/webiopi」フォルダに、「callmacro_leds.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> 2<input type="radio" name="speed" onclick="onRadioSpeed(2)"><br> 3<input type="radio" name="speed" onclick="onRadioSpeed(3)"><br> 4<input type="radio" name="speed" onclick="onRadioSpeed(4)"><br> 5<input type="radio" name="speed" onclick="onRadioSpeed(5)" checked><br> 6<input type="radio" name="speed" onclick="onRadioSpeed(6)"><br> 7<input type="radio" name="speed" onclick="onRadioSpeed(7)"><br> 8<input type="radio" name="speed" onclick="onRadioSpeed(8)"><br> 9<input type="radio" name="speed" onclick="onRadioSpeed(9)"><br> 10<input type="radio" name="speed" onclick="onRadioSpeed(10)"><br> </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/callmacro_leds.py #------------------------------------------------------------------------# [HTTP] （・・・省略・・・）

[HTTP] セクションを探し、[HTTP] セクションの「doc-root =」、「welcome-file =」に、作成したHTMLファイルを指定します。

（・・・省略・・・） [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 = callmacro_leds.html #------------------------------------------------------------------------# （・・・省略・・・）

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

実行

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

sudo systemctl start webiopi

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

ブラウザ画面のチェックボックスの選択状態を変更することで、LEDの点滅、消灯を変更できます。
ブラウザ画面のラジオボタンの選択状態を変更することで、LEDの点滅速度を変更できます。

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

sudo systemctl stop webiopi

ダウンロード

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