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）

Webブラウザに Raspberry Pi の情報を送り返すこともできます。

最低すべきこと

・スクリプトファイル

Webブラウザからの要求時の処理: Webブラウザからの要求時の処理の定義は、マクロ関数として記述します。
「@webiopi.macro」を付加した関数を定義し、必要な処理を記述します。
値の返却の処理: マクロ関数では、Webブラウザへ送り返す値を、「return 値」で記述します。

・HTMLファイル

Javascriptファイルの読み込み: WebIOPiのJavascriptファイルである「webiopi.js」を読み込む処理を記述します。
「<script type="text/javascript" src="/webiopi.js"></script>」
マクロ関数の呼び出し: スクリプトファイルで定義したマクロ関数を呼び出す処理を記述します。
Raspberry Pi から送り返される値を処理するコールバック関数名をマクロ関数呼び出しの第３引数で指定します。
「webiopi().callMacro( "マクロ関数名", 引数, コールバック関数名 );」
コールバック関数の定義: Raspberry Pi から送り返される値を処理するコールバック関数の定義を記述します。
Raspberry Pi から送り返される値は、コールバック関数の第３引数に格納されてきます。

部品表

部品名	数量	商品名	参考価格
ADコンバータ	1	10ビット2ch ADコンバータ MCP3002	200円
ボリューム	2	小型ボリューム 10KΩB	50円
Raspberry Pi	1	Raspberry Pi Type B 512MB	3,300円
ブレッドボード	1	EIC-801	250円
ジャンパーワイヤ	適量	ブレッドボード・ジャンパーコード（オス－オス）セット	100mm49個 150mm8個 200mm4個 250mm4個のセット200円
ジャンパーワイヤ	適量	ジャンパーワイヤ（オス－メス）	10本300円

接続表

MCP3002側		Raspberry Pi側
ピン番号	ピン名称	ピン名称
1	ChipSelect	SPIチップセレクト0
2	CH0	ボリューム1の真ん中の端子
3	CH1	ボリューム2の真ん中の端子
4	Vss	GND
5	Din	SPI MOSI
6	Dout	SPI MISO
7	CLK	SPI SCLK
8	Vdd/Vref	3.3V

接続例

WebIOPiのインストール

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

WebIOPiのインストール

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

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

import webiopi from webiopi.devices.analog.mcp3x0x import MCP3X0X class MCP3002(MCP3X0X): def __init__(self, chip, channelCount, name): MCP3X0X.__init__(self, chip, channelCount, 10, name) def __command__(self, channel, diff): d = [0x00, 0x00] d[0] |= 1 << 6 # start d[0] |= (not diff) << 5 # SGL d[0] |= (channel & 0x01) << 4 # Ch d[0] |= (1) << 3 # MBSF return d def __analogRead__(self, channel, diff): data = self.__command__(channel, diff) r = self.xfer(data) return ((r[0] & self.MSB_MASK) << 8) | r[1] webiopi.setDebug() mcp = MCP3002( 0, 2, "MCP3002" ) @webiopi.macro def GetChValue( ch ): value = mcp.analogRead(int(ch)) webiopi.debug( "GetChValue : %s : %d" % (ch, value) ) return "%d" % (value)

HTMLファイルの作成

Webブラウザからアクセスする HTMLファイルを作成します。
「/home/pi/work/webiopi」フォルダに、「testmacrocallback.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 onSendButtonClick(); } ); function onSendButtonClick() { webiopi().callMacro( "GetChValue", 0, callbackGetChValue ); webiopi().callMacro( "GetChValue", 1, callbackGetChValue ); } function callbackGetChValue( macro, args, data ) { if( 0 == args ) { document.getElementById("div_ch0").innerHTML = data; } if( 1 == args ) { document.getElementById("div_ch1").innerHTML = data; } } </script> </head> <body> Ch0 :<div id="div_ch0"></div><br> Ch1 :<div id="div_ch1"></div><br> <br> <input type="button" value="Send" onclick="onSendButtonClick()" data-role="none"> </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/testmacrocallback.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 = testmacrocallback.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
　と入力します。）

パソコンのWebブラウザからアクセスした結果

ダウンロード

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