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://webiopi.touch.com

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 から送り返される値を処理するコールバック関数名をマクロ関数呼び出しの第3引数で指定します。
「webiopi().callMacro( "マクロ関数名", 引数, コールバック関数名 );」
コールバック関数の定義
Raspberry Pi から送り返される値を処理するコールバック関数の定義を記述します。
Raspberry Pi から送り返される値は、コールバック関数の第3引数に格納されてきます。

部品表

部品名 数量 商品名 参考価格
ADコンバータ 1 10ビット2ch ADコンバータ MCP3002 200円
ボリューム 2 小型ボリューム 10KΩB 50円
Raspberry Pi 1 Raspberry Pi 3 Model B 6,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のインストール

SPI通信の有効化

SPI通信を有効化していない場合は、SPI通信の有効化が必要です。

SPI通信の有効化

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

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

HTMLファイルの作成

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

WebIOPi サービスの設定の変更

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

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

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

[SCRIPTS] セクションを探し、[SCRIPTS] セクションの「myscript =」に、作成したスクリプトファイルを指定します。

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

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

実行

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

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

ブラウザ画面の「Send」ボタンをクリックすると、CH0、CH1に流れる電圧に対応する値が更新されます。
値は、0 から 1023 で、0[V] から 3.3[V](Vdd/Vref の電圧) を表します。

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

ダウンロード

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