ラズパイに接続したいろいろなデバイスやセンサーをWebベースで制御したりモニターするためのインターフェースのベースを作成してみます。
ラズパイをIoTプラットフォームにするための準備です。
まぁ、サーバーを立てるっちゅうことですが、ここでは軽量のFlaskを使ってみます。
FlaskはPythonのWebアプリケーションフレームワークです。
Raspbianの最新バージョンならプレインストールされています。
同様にテンプレートエンジンのjinja2もプレインストールされています。
＄pip3 list
Flaskの現バージョン（2018/12/07）は0.12.1
適当なディレクトリ(FLASK)を作成して、直下にstaticとtemplatesというサブディレクトリを置いておきます。
これが基本形
FLASK/server.py
FLASK/templates/index.html
FLASK/static/index.js,index.css
実行
＄python3 server.py
これを実行することで、 server.pyがindex.htmlを読み込んで、index.htmlがindex.jsやindex.cssを読み込んでサーバーを立てるという構成です。
コードはこんな感じ
”192.168.0.31”はRaspbianのローカルIPの例（確認）
8080は使用するポート番号の例（好み、但し1024番以下を使用する場合はroot権限が必要）
messageboxの表示にtkinter.messageboxの代わりにeasyguiを使ってみます。
＄pip3 install easygui
【server.py】
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 |
from flask import Flask, render_template, request import easygui #メッセージ表示用 import subprocess #シェルスクリプト起動やコマンド実行用 app = Flask(__name__) @app.route('/') def index(title='Helllo!'): message = 'World!!' return render_template('index.html',title=title,message=message) #ajaxで使用 @app.route('/control', methods=['POST']) def control(): param1 = request.form['param1']; param2 = request.form['param2']; cmd = param1 + ' ' + param2 p = subprocess.Popen(cmd,shell=True,stdout=subprocess.PIPE,stderr=subprocess.PIPE) stdout_data,stderr_data = p.communicate() res = stdout_data return res if __name__ == '__main__': app.debug = True app.run(host='192.168.0.31', port=8080) |
【index.html】
sampleというボタンをクリックすると、param1,param2のvalueが送信され、
pythonで’ls -al’というコマンドが実行され、結果がダイアログで表示されます。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 |
<!DOCTYPE html> <html lang="ja"> <head> <meta name="viewport" content="width=device-width"> <meta charset="UTF-8"> {% if title %}<title>{{ title }}</title>{% else %}<title>Maido!</title>{% endif %} <link rel="stylesheet" href="{{url_for('static', filename='index.css')}}"> <script src="{{url_for('static', filename='index.js')}}"></script> <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script> <!-- 必須ではない --> <script src="https://cdnjs.cloudflare.com/ajax/libs/jQuery-rwdImageMaps/1.6/jquery.rwdImageMaps.js"></script> </head> <body> {% if message %}<h1>{{ message }}</h1>{% endif %} <form id="frm_sample" style="width:100%;display:none;"> <input id="command" type="text" name="param1" value="ls"> <input id="option" type="text" name="param2" value="-al"> </form> <br/> <Button onClick="ajax_request('/control','#frm_sample')">sample</Button> </body> </html> |
【index.js】
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
function ajax_request(url,id){ $(document).ready(function() { $.ajax({ url: url, data: $(id).serialize(), type: 'POST', success: function(response) { alert(response); }, error: function(error) { //alert("ERR:" + error); } }); }); } |
【index.css】
|
1 |
Button {width:100px;height:100px;color:green;} |
＄python3 server.py
スマホのブラウザーでアクセス
http://192.168.0.31:8080
ルータの設定で、例えば192.168.0.31のローカルIPを持っているサーバーのポート番号8080を開放しておけば、外出先からラズパイを制御できます。
HTTPS対応
工事中
スマートコンセントを使って外出先から家電の電源をON・OFFしてみる
ラズパイにAI推論実行用プロセッシング・ユニットを使ってみる
IoTプラットフォームをAIで賢くしてみる
Appendix
Pythonは普通にサーバー用のライブラリを持っています。
＄python3
>>>import http.server
>>>server_address = (“＜ローカルIPアドレス＞”, 8080)
>>>handler_class = http.server.SimpleHTTPRequestHandler
>>>simple_server = http.server.HTTPServer(server_address, handler_class)
>>>simple_server.serve_forever()
あるいは単体起動
適当なフォルダーを作って以下のファイルを設置（ここがドキュメントルートになります）
例えば….
【webserver.py】
#!/usr/bin/env python3
import http.server
server_address = (“192.168.0.31”, 8080)
handler_class = http.server.SimpleHTTPRequestHandler
simple_server = http.server.HTTPServer(server_address, handler_class)
simple_server.serve_forever()
【index.html】
<html><body>
Hello World !
</body></html>
webserver.pyに実行権を与えて起動
Leave a Reply