flask で簡単なサイトを作って、そこで入力されたメッセージを、I2C で接続された LCD パネルに出力してみます。
I2C 接続の LCD に出力するプログラムは前回の「Raspberry Pi B + python3 + flask + i2c + PWM 準備」です。
これに Flask の入力画面をくっつけます。
I2C 接続の LCD に出力するプログラムは前回の「Raspberry Pi B + python3 + flask + i2c + PWM 準備」です。
これに Flask の入力画面をくっつけます。
今回は、Flask で文字入力するところまでです。
venv は問題があったので、やめておきます。
pi@raspberrypi:~/Documents $ python3 -m venv env_flask pi@raspberrypi:~/Documents $ cd env_flask/ pi@raspberrypi:~/Documents/env_flask $ mkdir proj pi@raspberrypi:~/Documents/env_flask $ cd proj pi@raspberrypi:~/Documents/env_flask/proj $
pi@raspberrypi:~/Documents/env_flask/proj $ source ../bin/activate (env_flask) pi@raspberrypi:~/Documents/env_flask/proj $
python3 では動かないところがあるので、python2 でやります。
Jessie Lite ではこれ。
$ sudo apt-get install python-pip
Flask のディレクトリを作ります。チュートリアルを参考にしています。
$ mkdir pwm_flask $ cd pwm_flask/ $ mkdir static $ mkdir templates
ディレクトリ pwm_flask の下にプログラムの主処理部分となる pwm_flask.py を置きます。
$ cat pwm_flask.py #!/usr/bin/env python # coding: UTF-8 from flask import Flask, request, session, g, redirect from flask import url_for, abort, render_template, flash DEBUG = True SECRET_KEY = 'something_secret_pwm_flask' USERNAME = 'admin' PASSWORD = 'adminpass' app = Flask(__name__) app.config.from_object(__name__) @app.route('/') def input_text_for_lcd(): return render_template('input_text_for_lcd.html') @app.route('/send_text', methods=['POST']) def send_text(): msg_text = request.form['msg_text'] print('send_text msg_text=', msg_text) flash('New entry was successfully posted ' + msg_text) return redirect(url_for('input_text_for_lcd')) if __name__ == '__main__': app.run()
input_text_for_lcd() は、GET で呼ばれた時の画面表示データを作ります。何もしていません。テンプレートに「input_text_for_lcd.html」を使っています。
send_text() は、先ほどのテプレートにある form で送信ボタンをクリックした時に実行される処理が書かれています。POST でやってきた時の処理です。
ここの print はデバッグ用です。
flash() は、次の画面でメッセージを表示させるための関数です。珍しいので使ってみました。
テンプレートです。
$ cat templates/input_text_for_lcd.html
{% extends "base.html" %}
{% block body %}
<form action="{{ url_for('send_text') }}" method=post>
<dl>
<dt>Message:
<dd><input type="text" size="30" name="msg_text">
<dd><input type="submit" value="send">
</dl>
</form>
<div>
{% with messages = get_flashed_messages() %}
{% if messages %}
<ul class=flashes>
{% for message in messages %}
<li>{{ message }}</li>
{% endfor %}
</ul>
{% endif %}
{% endwith %}
</div>
{% endblock %}ここで使われている base.html です。
$ cat templates/base.html
<!doctype html>
<html>
<head>
<title>PWM_Flask</title>
<meta charset="utf-8">
<link rel=stylesheet type=text/css href="{{ url_for('static', filename='style.css') }}">
</head>
<body>
{% block body %}{% endblock %}
</body>
</html>
形だけの style です。
$ cat static/style.css
body {
font-family: sans-serif;
background: #eee;
}
ディレクトリの構造はこのようになっています。
pwm_flask/ ├── pwm_flask.py ├── static │ └── style.css └── templates ├── base.html └── input_text_for_lcd.html
Jessie Lite の場合は、これを別途インストールします。
(env_flask) pi@raspberrypi:~/Documents/env_flask/proj/pwm_flask $ sudo apt-get install python3-smbus i2c-tools (env_flask) pi@raspberrypi:~/Documents/env_flask/proj/pwm_flask $ pip install flask (env_flask) pi@raspberrypi:~/Documents/env_flask/proj/pwm_flask $ pip install RPIO$ sudo apt-get install python3-smbus i2c-tools $ sudo pip install flask
Lite でない時はもう入っているはずです。
$ pip freeze Flask==0.12 Jinja2==2.8 MarkupSafe==0.23 RPi.GPIO==0.6.3 Werkzeug==0.11.13 argparse==1.2.1 chardet==2.3.0 click==6.6 colorama==0.3.2 html5lib==0.999 itsdangerous==0.24 ndg-httpsclient==0.3.2 pyOpenSSL==0.13.1 pyasn1==0.1.7 python-apt==0.9.3.12 requests==2.4.3 six==1.8.0 smbus==1.1 urllib3==1.9.1 wheel==0.24.0 wsgiref==0.1.2
python のバージョン確認です。
$ python -V Python 2.7.9
実行です。
Jessie Lite の場合、window 環境はないので、外のパソコンから見に行けるように実行します。
$ export FLASK_APP=pwm_flask.py $ flask run --host=0.0.0.0
export は毎回ではなく、一度だけで OK。
flask run の代わりにこれでも大丈夫。これなら python3 でも確認できます。
$ python -m flask run --host='0.0.0.0'
表示するには、Raspberry pi の ip アドレス、例えば 192.168.1.234 であれば 192.168.1.234:5000 で見に行けます。
Lite ではない Jessie の時は、ブラウザが動くので、これで見に行けます。
$ python pwm_flask.pyこちらの場合は、localhost:5000 で表示できます。
何かを入力すると、入力したメッセージが表示されます。
今回はここまで。
次回は、LCD に表示させます。
0 件のコメント:
コメントを投稿