HTMLファイルからPythonファイルの変数を参照できない。

####やりたいこと
モーターを回転させるプログラムを書いているのですが、モーターの状態を確認するために「停止中」か「回転中」なのかを表示させるようにしたいです。
回転中かどうかをisRotateで判断し、モーターが停止中(プログラム開始前と終了後)はFalse、モーターが回転中(プログラムが実行中)はTrueとし、HTMLから現在のisRotateの状態を参照し、Jinja2で条件分岐させて「停止中」か「回転中」かを表示させたいです。

####わからないこと
HTMLからisRotateを参照したいのですが、うまく参照できません。

####試したこと

@app.route('/checkstatus', methods=['POST'])
def checkStatus():
    return render_template('index.html', isRotate=isRotate)

のようにして、HTMLにisRotateの情報を渡そうとしたのですが、isRotateを宣言しなければならなく、

from flask import Flask, render_template, request
from gpiozero_stepping import C28BYJ48 as stepping_motor
from jinja2 import *

app = Flask(__name__)
isRotate = False

のように宣言すると、全てがFalseになってしまい「停止中」になってしまいます。

うまく私のやりたいことを実行するにはどのように変更すればよろしいでしょうか？

###index.html

HTML
1<!DOCTYPE html>
2<html lang="en">
3  <head>
4    <meta charset="UTF-8">
5    <title>カメラ操作画面</title>
6  </head>
7    
8  <body>
9    <header>
10      <h1>カメラコントロール</h1>
11    </header>
12    <hr>
13    <form action="/" method="POST">
14    <p>角度を選択してください。<br>
15      <input type="radio" name="angle" value="30" checked>30°
16      <input type="radio" name="angle" value="45">45°
17      <input type="radio" name="angle" value="60">60°
18      <input type="radio" name="angle" value="75">75°
19      <input type="radio" name="angle" value="90">90°
20      <input type="radio" name="angle" value="105">105°
21      <input type="radio" name="angle" value="120">120°
22      <input type="radio" name="angle" value="135">135°
23      <input type="radio" name="angle" value="150">150°
24      <input type="radio" name="angle" value="165">165°
25      <input type="radio" name="angle" value="180">180°
26    </p>
27    <br>
28    <p>時間を選択してください。<br>
29      <input type="radio" name="time" value="1" checked>1分
30      <input type="radio" name="time" value="30">30分
31      <input type="radio" name="time" value="60">60分
32      <input type="radio" name="time" value="90">90分
33      <input type="radio" name="time" value="120">120分
34    </p>
35    <br>
36      <button type="submit" name="button">撮影開始</button>
37    </form>
38    <hr>
39    <form action="/checkstatus" method="POST">
40      <button type="submit" name="checkstatus">状態確認</button>
41      {% if isRotate == True %}
42        <p>回転中</p>
43      {% else %}
44        <p>停止中</p>
45      {% endif %}
46    </form>
47
48    <footer>
49      <p>ラズパイ勉強会</p>
50    </footer>
51  </body>
52</html>

###app.py

Python
1from flask import Flask, render_template, request
2from gpiozero_stepping import C28BYJ48 as stepping_motor
3from jinja2 import *
4
5app = Flask(__name__)
6
7@app.route('/', methods=["GET"])
8def index():
9    return render_template('index.html')
10        
11@app.route('/', methods=['POST'])
12def post():
13    angle = int(request.form.get('angle'))
14    time = int(request.form.get('time'))
15    isRotate = True
16    StepMotor = stepping_motor(14, 15, 18, 23)
17    StepMotor.run(angle, time, 1)
18    isRotate=False
19
20    return render_template('index.html')
21
22@app.route('/checkstatus', methods=['POST'])
23def checkStatus():
24    return render_template('index.html')
25
26if __name__ == '__main__':
27    app.run(debug=False, host="0.0.0.0", port=5000)

###gpiozero_stepping.py

Python
1# -*- coding: utf-8 -*-
2from time import sleep
3
4from flask.templating import render_template
5from gpiozero import OutputDevice as stepper
6
7class C28BYJ48:
8
9    def __init__(self, IN1, IN2, IN3, IN4):
10        self.IN1 = stepper(IN1)
11        self.IN2 = stepper(IN2)
12        self.IN3 = stepper(IN3)
13        self.IN4 = stepper(IN4)
14        #Setting GPIO
15        self.stepPins = [self.IN1, self.IN2, self.IN3, self.IN4]
16        self.sequenceNumber = 0
17        self.stepCount = 8
18    
19    def seq(self):
20        return [[1,0,0,1], [1,0,0,0],[1,1,0,0],[0,1,0,0],[0,1,1,0],[0,0,1,0],[0,0,1,1],[0,0,0,1]]
21
22    def SetRoll(self, angle, wait):
23        #入力値が0以下の場合
24        if angle <= 0 : return 0,0
25        #回転ステップ数の計算
26        #カメラ台座ギア比2：1のため、角度入力値を二倍にします
27        steps = (angle * 2) * 4096 / 360
28        #回転インターバル時間の計算
29        #入力値分単位を秒単位へ変換
30        interval = float(wait * 60.0 / steps)
31        return steps, interval
32
33    #シーケンスのピンをセットする
34    def SetPinVoltage(self, NSeq):
35        self.sequenceNumber = NSeq
36        for pin in range(0,4):
37            xPin = self.stepPins[pin]
38            seq = self.seq()
39            if seq[self.sequenceNumber][pin]!=0:
40                xPin.on()
41            else:
42                xPin.off()
43
44    def run(self, angle, wait, direction):
45        # Set to 1 for clockwise
46        # Set to -1 for anti-clockwise
47        self.direction = direction
48        #回転設定
49        steps, interval = self.SetRoll(angle, wait)
50        for i in range(0, int(steps)):
51            self.SetPinVoltage(self.sequenceNumber)
52            self.sequenceNumber += self.direction
53            if self.sequenceNumber >= self.stepCount:
54                self.sequenceNumber = 0
55            if self.sequenceNumber < 0:
56                self.sequenceNumber = self.stepCount + self.direction
57            sleep(interval)
58
59if __name__ == '__main__':
60
61    StepMotor = C28BYJ48(14,15,18,23)
62    #時計周り 180度回転/撮影時間1分
63    StepMotor.run(180, 1, 1)
64
65    #反時計周り 180度回転/撮影時間1分
66    StepMotor.run(180, 1, -1)

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

回答1件

Pythonのことはよく分からないですが、ボタン押下でform送信するのではなく/checkstatusをAjaxなど非同期通信で実行してtrue/falseの結果だけを得て、結果の文字列表示はJavascriptに任せたらどうでしょうか。

というか、問題点は「/checkstatusで回転中かどうか判断するロジックに繋がってない」という風にも見えます。

投稿2021/01/28 06:53

m.ts10806

総合スコア80850

Rivermouth

2021/01/28 08:45

今回はHTML/Flask/Jinja2のみを使用して、実装したいと考えておりますので、JSを使用する予定はありません。。

m.ts10806

2021/01/28 09:15 編集

今回の問題点は回答の最後に指摘したとおりです。そこが通ってるなら非同期だろうとなんだろうとやることは同じです。ただ、「HTMlからPythonの変数を参照させる」という考えは間違いです。サーバーサイドで動くので、「何かしらでリクエストを送信し、Pythonで受け取って処理、結果をHTMLとして出力」という形になります。

m.ts10806

2021/01/28 09:14

非同期にしないなら送信先/checkstatusに表示する形になります。それか自身に送信して/checkstatusのロジックを回して結果を自身に返すか。

errormaker74

2021/01/28 09:41

websocketを使うとかjsで定期的に状態を取りに行くとかしないとHTMLの表示だけではモーターが本当に動いているのかどうかかわからないような…(ページにアクセスしたその瞬間だけ分かればいいのかな？) さておき、どうやってモーターが回っているかどうかの判定をするのかソースからは読み取れなかったのですが、下記のように`checkStatus`メソッド内に書いてその結果を渡すのはダメなんでしょうか？ ``` @app.route('/checkstatus', methods=['POST']) def checkStatus(): # isRotateの判定処理 # isRotate = ???? return render_template('index.html', isRotate=isRotate) ```

Rivermouth

2021/01/28 12:34

>m.ts10806 コメントありがとうございます。非同期というのはどういうことでしょうか？あと、例えばisRotateの状態を知りたいとリクエストをして、Pythonで受け取って現在のisRotateの状態をHTMLに返すことは可能でしょうか？

Rivermouth

2021/01/28 12:36

>errormaker74 コメントありがとうございます。 ``` @app.route('/checkstatus', methods=['POST']) def checkStatus(): # isRotateの判定処理 # isRotate = ???? return render_template('index.html', isRotate=isRotate) ``` この方法で少し試してみます。ありがとうございます。

m.ts10806

2021/01/29 01:36

>非同期というのはどういうことでしょうか？はじめから回答に書いてますが、でも「JSは使用しない」んですよね。 >あと、例えばisRotateの状態を知りたいとリクエストをして、Pythonで受け取って現在のisRotateの状態をHTMLに返すことは可能でしょうか？これもはじめから回答に書いてあることに繋がるんですが、「/checkstatusで回転中かどうか判断するロジックに繋がってない」可能かどうかだと「そのように実装すれば可能」となります。大抵のことは可能。ご自身のスキルで可能かどうか聞かれてるなら「分からない」です。サーバーサイド、クライアントサイドの考え方、リクエストレスポンスの概念このあたりがしっかりしてれば質問することなく進めるはずです。

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