Flask/Python - how to update progress bar with running progress
Question
I have a process that takes some time and I would like to show a progress bar on a waiting screen and the progress bar updates during the progress untill it is finishes, and it goes to the next page. I have the following code:
I have a part that renders the waiting screen:
@app.route('/waiting_screen', methods=['POST','GET'])
def waiting():
return render_template("waiting_screen.html")
And a part that is handling the processing:
@app.route('/process',methods=['POST', 'GET'])
def process():
file = df
# Fill database
for row in df:
print(row)
return render_template('finished_process.html')
and my html file of the waiting_screen looks like this:
{% block content %}
<div method="POST">
<h4 style="text-align:center"> Busy processing... </h4>
<br>
<head>
<div id="loader"></div>
<div style="display:none;" id="myDiv" class="animate-bottom" >
</div >
<script>
var myVar;
function myFunction() {
myVar = setTimeout(showPage, 3000);
}
function showPage() {
document.getElementById("myDiv").style.display = "block";
}
document.addEventListener("DOMContentLoaded", function(event) {
waitForMe().then(() => {
window.location.href = "/process";
});
});
</script>
</head>
</div>
{% endblock %}
This page gives me a waiting animation but because the process is taking quiet long, I really need a processbar.
I already tried examples where you push the button an the progress bar just runs, but I notice that I don't have the experience to get how my Python function and the script in my HTML page communicate, so I can't get them connected.
1 answers
solution1
0 2020-10-20 20:15:50
First, are you able to extract the percentage from your running background task at the moment?
If you are, I think that you should use something like Flask-SocketIO which will allow your server to communicate to your frontend easily and in "real-time". In that way you could for example each second send a status update. In your frontend, you will listen for this event and update the progress bar accordingly.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.