0

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.

mkrieger1
  • 19,194
  • 5
  • 54
  • 65
user2133561
  • 155
  • 1
  • 10

1 Answers1

1

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.

MB95
  • 121
  • 6
  • yes, I forgot to mention, my task can be devided in x parts, so my doing 100/x I could update the progress bar in the for loop. The Flask Socket looks good, I didn't cmoe across it, I will have a look right away, thank you! – user2133561 Oct 20 '20 at 20:20
  • Ok, nice! Let me know how it goes! – MB95 Oct 20 '20 at 20:24