如何将变量从python发送和更新到html(Flask)?

时间:2019-04-17 21:29:21

标签: python html image-processing flask

我正在创建一个用于智能停车的Web应用程序,它将有两个按钮,它们将显示按下按钮时相机所看内容的图像或帧,另一个将显示一条消息,告知驾驶员每个插槽的可用性。

这是代码的一部分,负责在停车场中查找可用性,然后我调用了一个使我进行透视转换以保存代码的函数,但是在使用flask时,最终在调用该方法时产生了问题。 / p>

smartparking.py

    def get_Disponibilidad(self):
        _, frame = self.cap.read()
        frame = cv2.resize(frame,(np.int(frame.shape[1]/2),np.int(frame.shape[0]/2)))
        gray = cv2.cvtColor(frame, cv2.COLOR_BGR2GRAY)

        cv2.circle(frame, (65, 190), 5, (0, 0, 255), -1)
        cv2.circle(frame, (490, 200), 5, (0, 0, 255), -1)
        cv2.circle(frame, (30, 310), 5, (0, 0, 255), -1)
        cv2.circle(frame, (530, 310), 5, (0, 0, 255), -1)

        pts1 = np.float32([[65, 190], [490, 200], [30, 310], [530, 310]])
        pts2 = np.float32([[0, 0], [600, 0], [0, 500], [600, 500]])

        matrix = cv2.getPerspectiveTransform(pts1, pts2)
        result = cv2.warpPerspective(gray, matrix, (600, 500))

        v = np.median(result)    
        lower = int(max(0, (1.0 - 0.33) * v))
        upper = int(min(255, (1.0 + 0.33) * v))
    ##    edged = cv2.Canny(image, 50, 100)
        edges = cv2.Canny(result, lower, upper)

        estado = 0
        blancos = cv2.countNonZero(edges)
        if (blancos >= 6000):
            estado = 1
        #estado = disponibilidadPlaza(edges)
        return estado

    def get_Image(self):
        _, frame = self.cap.read()
        frame = cv2.resize(frame,(np.int(frame.shape[1]/2),np.int(frame.shape[0]/2)))        
        cv2.circle(frame, (65, 190), 1, (0, 0, 255), -1)
        cv2.circle(frame, (490, 200), 1, (0, 0, 255), -1)
        cv2.circle(frame, (30, 310), 1, (0, 0, 255), -1)
        cv2.circle(frame, (530, 310), 1, (0, 0, 255), -1)

        pts1 = np.float32([[65, 190], [490, 200], [30, 310], [530, 310]])
        pts2 = np.float32([[0, 0], [600, 0], [0, 500], [600, 500]])

        matrix = cv2.getPerspectiveTransform(pts1, pts2)
        result = cv2.warpPerspective(frame, matrix, (600, 500))
        _, jpeg = cv2.imencode('.jpg', frame)
        return jpeg.tobytes()

在下面的代码中,我调用了smartparking的get_Availability()函数,该函数在繁忙的情况下应返回1,否则返回0,该值是在按下按钮时应在html中显示的值,但应该如果在停车场发现有人时按下此按钮,将进行更新。

main.py

from flask import Flask, request, redirect, render_template, Response
from SmartParking import VideoCamera

app = Flask(__name__)

@app.route('/')
def index():    
        return render_template('index.htm')

def disponible(parking):
        while True:                 
                availability = VideoCamera().get_Disponibilidad()
                render_template('index.htm',availability=availability)

def gen(camera):        
        while True:
                frame = camera.get_Image()                
                yield (b'--frame\r\n'
                b'Content-Type: image/jpeg\r\n\r\n' + frame + b'\r\n')

@app.route('/video_feed')
def video_feed():
    return Response(gen(VideoCamera()),
                    mimetype='multipart/x-mixed-replace; boundary=frame')

if __name__ == '__main__':
        app.run(debug=True)

最后,现在可以实时显示摄像机所见内容的html,但是其想法是每次按下按钮时都会显示视频帧以及可用性状态。

<!DOCTYPE html>
<html>
  <head>
    <title>Smart-Parking</title>
  </head>
  <body>
    <h1>Smart Parking</h1> <h1 style="color: red;">LIVE STREAM</h1> 
    <img id="bg" src="{{ url_for('video_feed') }}">

    <h1>Slot 1:  {{availability}}</h1>

    <form method="POST"> 
      <button type="submit" name="Parking">Image</button>
      <button type="submit" name="Slots">Availability</button>
    </form>

    </body>
</html>

变量可用性将其视为空,并且按钮也不起作用,因为我不知道如何在main.py中调用它们

Imgur

1 个答案:

答案 0 :(得分:1)

def disponible(parking)函数没有路由装饰器,并且从不调用。 您正在使用没有可用性变量的index函数呈现模板。

也没有在任何地方阅读表单提交。您应该查看flask的请求上下文。或至少指向一条新路线。

这将为您提供刷新的可用性,而无需按钮:

@app.route('/')
def disponible(parking):
                availability = VideoCamera().get_Disponibilidad()
                render_template('index.htm',availability=availability)

While True永远不会起作用,因为它会立即返回。

要获取使按钮触发返回程序的信息,您需要提交表单,并在表单操作指向的路径中解决该问题。 即提交到新路线(/图片)或使用请求获取提交的参数

@app.route('/image/)
# Do some action that you want as a result of the image button

模板中包含表单代码

<form name="image" action="/image"><button type=submit>image</button></form>

http://flask.pocoo.org/docs/1.0/reqcontext/