Flask,Python,jsでタクトスイッチが押されたらwebページ内の値を変更したい

質問内容はタイトルの通りです。
RaspberryPi3 modelBのGPIO25番とGNDに接続されたタクトスイッチが押されたらkazuという変数がOKからclickに変え、変更された値をjsに渡し、ページに変更された値を反映させるということをやりたいのです。

while Trueでタクトスイッチが押されるのを待機しているのですが、これではタクトスイッチを押さないとそもそもページに接続できなくなってしまいます。
どこにwhile文をおけばよいのでしょうか？よろしくお願いします。
以下ソースコードです。

Python
1from flask import Flask, render_template , request , url_for
2import RPi.GPIO as GPIO
3
4GPIO.setmode(GPIO.BCM)
5GPIO.setup(25 , GPIO.IN)
6
7app = Flask(__name__ , static_folder='./images')
8
9@app.route('/')
10def index_render():
11    kazu = "OK"
12    while True:
13        if GPIO.input(25) == GPIO.HIGH:
14            kazu="click"
15            break
16    return render_template("main.html",kazu=kazu)
17
18if __name__ == '__main__':
19         app.run()

main.html
1<!-- main.html -->
2<!DOCTYPE html>
3<html>
4<head>
5<meta charset="UTF-8">
6<title>Slot Page</title>
7<style type="text/css">
8#this_kazu{
9   color: #FFFFFF;
10   position: absolute;
11}
12</style>
13<script src="{{url_for('static', filename='index.js')}}"></script>
14</script>
15</head>
16<p id="this_kazu">{{kazu}}</p>
17</body>
18</html>
19

index.js
1//index.js
2
3window.onload = function(){
4alert("js loaded")
5}

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

回答1件

ベストアンサー

flaskを以下のような感じにして、main.htmlにswitch_checkerを定期的に読み込む処理(ajax処理、interval実行)を追加し、その取得結果の値を表示するようにしてはいかがでしょうか？

python
1
2@app.route('/')
3def index_render():
4    return render_template("main.html",kazu=kazu)
5
6
7@app.route('/switch_checker')
8def switch_checker():
9    kazu = "OK"
10    while True:
11        if GPIO.input(25) == GPIO.HIGH:
12            kazu="click"
13            break
14
15    if kazu == 'OK':
16        return jsonify({'result': 'OK'})
17    else:
18        return jsonify({'result': 'click'})