Webブラウザで Raspberry Pi からの情報を受け取る（Flask 利用）
解説
Flask を利用すると、Webアプリケーションを簡単に作成することができます。
Webブラウザに Raspberry Pi の情報を送り返すこともできます。
コード概要
WebアプリケーションPythonスクリプトファイル（app.py）
- 「/」にアクセスしたときの処理
- 「/」にアクセスしたときに表示する用の「index.html」ファイルを「templates」フォルダに用意します（内容は、下記「HTMLファイル（index.html）」の項）。
「/」にアクセスしたときの処理としては、ADコンバータ MCP3002 からアナログ値を取得し、取得した値と「index.html」を引数として、render_template関数をコールし、戻り値を返します。
ファイルの先頭に、「render_template」のimportを追加します。
HTMLファイル（index.html）
- HTMLのbody
- ２つのアナログ値を表示する処理を記述します。
リロードボタンを表示する処理を記述します。
部品表
| 部品名 | 数量 | 商品名 | 参考価格 |
|---|---|---|---|
| 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 |
接続例
Flask のインストール
Raspberry Pi に Flask をインストールしてない場合は、まず、Flask をインストールします。
Flask のインストール
SPI通信の有効化
SPI通信を有効化していない場合は、SPI通信の有効化が必要です。
SPI通信の有効化
スクリプトファイルの作成
「/home/pi/work/flask/readgpiovalue」というフォルダを作成します。
WebアプリケーションPythonスクリプトファイルを作成します。
「/home/pi/work/flask/readgpiovalue」フォルダに、「app.py」というファイル名で、以下の内容のスクリプトファイルを作成します。
HTMLファイルの作成
「/home/pi/work/flask/readgpiovalue/templates」というフォルダを作成します。
Webブラウザからアクセスする HTMLファイルを作成します。
「/home/pi/work/flask/readgpiovalue/templates」フォルダに、「index.html」というファイル名で、以下の内容のHTMLファイルを作成します。
実行
作成したスクリプトを実行します。
パソコンやスマートフォンのWebブラウザを起動し、Raspberry Pi のIPアドレス、ポート5000にアクセスします。
以下のようなページが表示されます。
ブラウザ画面の「reload」ボタンをクリックすると、CH0、CH1に流れる電圧に対応する値が更新されます。
値は、0 から 1023 で、0[V] から 3.3[V](Vdd/Vref の電圧) を表します。
実行したスクリプトは、
Ctrl + C
で終了します。