ラズベリーパイのGPIOでINPUTしたらブラウザへ表示する方法

前提・実現したいこと

ラズベリーパイ4のGPIOピンをINPUT（入力）として使用し、
HIGH状態（電流を検知）になったらブラウザ上にHIGHと言う文字を、
電流が流れていない時はLOWを表示させたいと思っています。

発生している問題・エラーメッセージ

Flaskを利用し、app.pyとindex.htmlの2種類のファイルを作成しました。
1.app.pyのソース内で書いた文字をindex.htmlへ送りブラウザで表示させる事はできました
2.input入力時に別ピンをHIGHにしLEDを点灯させる事もできました
こらら2つのプログラムを合わせて、入力時に状態（HIGHかLOW）を表示させる所で
躓いてしまっています。

該当のソースコード

Python
1
2# -*- coding: utf-8 -*-
3
4from flask import Flask, render_template
5import RPi.GPIO as GPIO
6import time
7
8app = Flask(__name__)
9
10@app.route('/')
11def index():
12
13 try:
14  while True:
15        if GPIO.input(17) == GPIO.HIGH:
16            GPIO.output(4, GPIO.HIGH)
17        else:
18            GPIO.output(4, GPIO.LOW)
19        time.sleep(0.01)
20
21  test = 'hello'
22  return render_template('index.html',message=test)
23
24 except KeyboardInterrupt:
25    pass
26
27 finally:
28    GPIO.cleanup()
29
30if __name__ == "__main__":
31    GPIO.setmode(GPIO.BCM)
32    GPIO.setup(4, GPIO.OUT)
33    GPIO.setup(17, GPIO.IN, pull_up_down=GPIO.PUD_DOWN)
34
35if __name__ == '__main__':
36  app.run("0.0.0.0", debug=True)

試したこと

順序を変えたり、重複している部分を省いたり、数週間色々と試したのですが、
進展が難しいと判断した為、今回思い切って質問させて頂きました。
無知で申し訳ありませんが、お力を貸して頂けますと幸いです。
どうぞよろしくお願い致します。

補足情報（FW/ツールのバージョンなど）

HTML部分は
{{ message }}
でPythonから文字を問題なく送れています。
＜ラズベリーパイ4・Python2.7＞
すみません、宜しくお願い致します。

行動規範の内容に同意します

回答1件

ベストアンサー

まずソースコードですが、いくつか気になるところがあります。

Python2はすでにサポートが終了しているのでPython3で実行することをおすすめします(個人でたのしむだけなら特に気にしなくてもいいですが)
FlaskなどのWebフレームワークで使う関数(今回だとindex())にwhile Trueループを書くというやり方はあまりやりません。書いてしまうと、いつまで経っても画面が表示されず読み込み状態になります。
if __name__ == "__main__":構文は一つのソースコードにつき、一つ書くのが普通です。

以上を踏まえて、試してないですが以下のコードに書き直せばボタンの状態をWebアプリ上で表示されると思います。

python
1# -*- coding: utf-8 -*-
2
3from flask import Flask, render_template
4import RPi.GPIO as GPIO
5import time
6
7app = Flask(__name__)
8
9GPIO.setmode(GPIO.BCM)
10GPIO.setup(4, GPIO.OUT)
11GPIO.setup(17, GPIO.IN, pull_up_down=GPIO.PUD_DOWN)
12
13
14
15@app.route('/')
16def index():
17  if GPIO.input(17) == GPIO.HIGH:
18    text = 'HIGH'
19    GPIO.output(4, GPIO.HIGH)
20  else:
21    text = 'LOW'
22    GPIO.output(4, GPIO.LOW)
23  return render_template('index.html',message=test)
24
25if __name__ == '__main__':
26  try:
27    app.run("0.0.0.0", debug=True)
28  except:
29    GPIO.cleanup()