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

解説

Flask を利用すると、Webアプリケーションを簡単に作成することができます。

Webブラウザから、Raspberry Pi のGPIOを操作する、Webアプリケーションを作成することもできます。

コード概要

WebアプリケーションPythonスクリプトファイル（app.py）

「/」にアクセスしたときの処理: 「/」にアクセスしたときに表示する用の「index.html」ファイルを「templates」フォルダに用意します（内容は、下記「HTMLファイル（index.html）」の項）。
「/」にアクセスしたときの処理としては、render_template("index.html") の戻り値を返します。
ファイルの先頭に、「render_template」のimportを追加します。
Webブラウザからのリクエストに対する処理: Webブラウザからのリクエストに対する処理として、「/changepinstate」にアクセスしたときの処理を定義します。（@app.route("/changepinstate")）
POST要求を受け取るように、app.routeの引数に、「method=["POST"]」を追加します。（@app.route("/changepinstate", methods=["POST"])）
リクエストパラメータの値は、request.form["パラメータ名"] で取得できます。
ファイルの先頭に、「request」のimportを追加します。
必要な処理を記述します。

HTMLファイル（index.html）

HTMLのbody: ３つのLEDの点灯/消灯を切り替えるためのチェックボックスについての処理を記述します。
各チェックボックスは、クリックされると、onCheckboxLed()をコールするように記述します。
onCheckboxLed( led ): チェックボックスがクリックされるとコールされます。
ピンの新たな状態の送信関数（changePinState()）をコールします。
changePinState( pin, state ): onCheckboxLed()からコールされます。
動的にフォームを作成し、パラメータの設定をし、POSTメソッドによりリクエスト送信する処理を記述します。

部品表

部品名	数量	商品名	参考価格
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 を使用した場合の接続例

Flask のインストール

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

Flask のインストール

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

「/home/pi/work/flask/changegpiovalue」というフォルダを作成します。

WebアプリケーションPythonスクリプトファイルを作成します。
「/home/pi/work/flask/changegpiovalue」フォルダに、「app.py」というファイル名で、以下の内容のスクリプトファイルを作成します。

# -*- coding: utf-8 -*- from flask import Flask, render_template, request import RPi.GPIO as GPIO import signal import sys # ピン設定 LEDPINS = {"1":23, "2":24, "3":25} # Flaskのインスタンスの作成 app = Flask(__name__) # 「/」にアクセスしたときの処理 @app.route("/") def index(): return render_template("index.html") # 「/changepinstate」にアクセスしたときの処理 @app.route("/changepinstate", methods=["POST"]) def changepinstate(): app.logger.debug(request.method) if "POST" == request.method: pin = request.form["pin"] state = request.form["state"] app.logger.debug("pin = " + pin) app.logger.debug("pin type = " + str(type(pin))) app.logger.debug("state = " + state) app.logger.debug("state type = " + str(type(state))) GPIO.output(LEDPINS[pin], int(state)) return "" # 「Ctrl + C」による終了時の処理 def sigint_handler(signal, frame): app.logger.debug("Closing") GPIO.cleanup() app.logger.debug("Closed") sys.exit(0) # メイン関数 if __name__ == "__main__": # SIGINTハンドラの設定 signal.signal(signal.SIGINT, sigint_handler) # GPIO番号を使用する（ピン番号ではなく） GPIO.setmode(GPIO.BCM) # ピンセットアップ GPIO.setup(LEDPINS["1"], GPIO.OUT) GPIO.setup(LEDPINS["2"], GPIO.OUT) GPIO.setup(LEDPINS["3"], GPIO.OUT) # Flaskインスタンス実行 #app.run("0.0.0.0", debug=True) # デバッグ出力する実行 app.run("0.0.0.0") # デバッグ出力しない実行

HTMLファイルの作成

「/home/pi/work/flask/changegpiovalue/templates」というフォルダを作成します。

Webブラウザからアクセスする HTMLファイルを作成します。
「/home/pi/work/flask/changegpiovalue/templates」フォルダに、「index.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"> // ピンの新たな状態の送信 function changePinState( pin, state ) { // フォームの作成 var form = document.createElement( "form" ); form.setAttribute( "action", "/changepinstate" ); // 送信先URL form.setAttribute( "method", "post" ); // POSTリクエスト送信 form.setAttribute( "target", "hiddeniframe" ); // 画面遷移しないための仕掛け form.style.display = "none"; // 画面表示なし document.body.appendChild( form ); // bodyの子要素として追加 // パラメータの設定 var input; // PIN番号の設定 input = document.createElement( "input" ); input.setAttribute( "type", "hidden" ); input.setAttribute( "name", "pin" ); // パラメータ名は"pin" input.setAttribute( "value", pin ); // PIN番号 form.appendChild( input ); // 状態の設定 input = document.createElement( "input" ); input.setAttribute( "type", "hidden" ); input.setAttribute( "name", "state" ); // パラメータ名は"state" input.setAttribute( "value", state ); // 状態値 form.appendChild( input ); // 送信 form.submit(); } // チェックボックスをクリックしたときのイベントハンドラ function onCheckboxLed( led ) { if( 1 == led ) { // ピンの新たな状態の送信 changePinState( "1", document.getElementsByName("led1")[0].checked ? "1" : "0" ); return; } if( 2 == led ) { // ピンの新たな状態の送信 changePinState( "2", document.getElementsByName("led2")[0].checked ? "1" : "0" ); return; } if( 3 == led ) { // ピンの新たな状態の送信 changePinState( "3", document.getElementsByName("led3")[0].checked ? "1" : "0" ); return; } } </script> </head> <body> LED :<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> <iframe hidden name="hiddeniframe"></iframe> </body> </html>

実行

作成したスクリプトを実行します。

python /home/pi/work/flask/changegpiovalue/app.py

パソコンやスマートフォンのWebブラウザを起動し、Raspberry Pi のIPアドレス、ポート5000にアクセスします。

以下のようなページが表示されます。

ブラウザ画面のチェックボックスの選択状態を変更すると、LEDの点灯、消灯の状態が変わります。

実行したスクリプトは、
Ctrl + C
で終了します。

ダウンロード

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