karthik menon
karthik menon

Reputation: 25

Printing Data Received using POST Request to local server using Flask

So, apparently I am trying to send data from my openCV webcam to a local sever spun using Flask. I am able to receive the data and print it on terminal, however, I am not really sure as to how to print it on a webpage.

This is my program :

from flask import jsonify, Flask, make_response,request, render_template
from flask_restful import Resource, Api

# creating the flask app 
from flask import jsonify, Flask, make_response,request, render_template
from flask_restful import Resource, Api

app = Flask(__name__)
api = Api(app)



@app.route("/getData", methods=['POST', 'GET'])
def get():
        if request.method == 'POST':
                textInput = request.form["data"]
                print(textInput)
                return render_template("text.html",text=textInput)
        else:
                return render_template("text.html")

@app.route("/", methods=['GET'])
def contact():
        return render_template("index.html")

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

I am sending data from webcam.py using requests module via post request. The data is received and currently printed on terminal. However, I want it to be redirected to text.html.

data = {"data": res} 
requests.post(url = API_ENDPOINT, data = data)

The above is the code snippet I use to send data from webcam.py to API_ENDPOINT (127.0.0.1:5000/getData).

<!DOCTYPE html>

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>Sign to Speech</title>
    <meta name="description" content="">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <style>
        html,
        body {
            background-color: #FFC107
        }
    </style>
</head>

<body>

       <h4>{{text}}</h4>


</body>

</html>

The above is my text.html page under templates directory. Any Help will be appreciated :D

Upvotes: 1

Views: 2609

Answers (2)

simkusr
simkusr

Reputation: 812

The problem with your code is that you send data from OpenCV webcam to a local server and from local server you return a response to openCV webcam and that's why you see data in the terminal as you print it and you can't see data in the webpage of flask app as you don't have that data, because you have lost data at the moment you have returned a response to the openCV webcam.

In this case, you could use 1 of the 3 approaches.

  1. Using a database, like sqlite3 and save received data from the openCV webcam, but then you will need to do more, like create models and etc.

  2. Save data received from OpenCV webcam to a file - quicker option to verify that everything works (the one I will use in my code example)

  3. Using flask.session and saving data to flask session and then reading from it as you would read data from python dictionary.

In these cases, when you open your flask web app in the browser, you need to read data from either DB, file or flask.session.

In this example, I will use a file named data.txt to which I will write (I will use a that means open file to append to the end of a file, then the old data will be left when you will send multiple requests from OpenCV webcam) information received from OpenCV webcam server.

from flask import Flask, request, render_template, jsonify

# creating the flask app
app = Flask(__name__)


@app.route("/getData", methods=['POST', 'GET'])
def getInfo():
    if request.method == 'POST':
        text_input = request.form["data"]
        with open('data.txt', 'a') as data_file:
            data_file.write(text_input)
        return jsonify({'message': 'Data saved sucessfully!'}), 200
    else:
        text_input = None
        with open('data.txt', 'r') as data_file:
            text_input = data_file.read()
        return render_template("text.html", text=text_input)


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

This way your OpenCV webcam will receive 200 response with a message. Then you can navigate to your web app /getData page, then the request method will be GET and then it will read the content of a file data.txt and will pass this to the webpage you have just opened.

Make sure that you can access data.txt, it should be placed in the same directory as your app exists (at least with this example, but you should make more appropriate structure later on or at all use the sqlite3 database for local development).

Upvotes: 1

Abhishek Kulkarni
Abhishek Kulkarni

Reputation: 1767

Try this below:

from flask import jsonify, Flask, make_response,request, render_template
from flask_restful import Resource, Api

# creating the flask app 
app = Flask(__name__) 
# creating an API object 
api = Api(app) 

@app.route("/getData", methods=['POST', 'GET'])
def getInfo():
        textInput = request.form["data"]
        print(textInput)
        return render_template("text.html",text=textInput)
if __name__ == '__main__':
    app.run(debug=True)

And in your HTML use Jinja like following below:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Example</title>
</head>
<body>
{{ text }}
</body>
</html>

Upvotes: 0

Related Questions