2

I am trying to convert a command line script written in python in to a web application.

I intend to design a web application using python and flask. The user will provide some input on the webpage and submit it. The input data will then be passed as arguments to a function written in python (basically the old script). This function will be doing a lot of things. As the function is being executed, I would like to show the status of function execution (completed steps) on the web page in real time.

For example - If the user enters the values for the fields - radius, length, breadth, base, height on the webpage and clicks a submit button, a function named calculate_area(radius, length, breadth, base, height) will run and the application should periodically send the area for circle, rectangle and triangle one after the other with some time delay between each area calculation. Eg.

   Calculating area of circle ...
   Area of circle is - xxx
   Calculating area of rectangle ...
   Area of rectangle is - yyy
   Calculating area of triangle ...
   Area of triangle is - zzz

Can someone point me to what can help to achieve this? Thanks in advance.

Ira
  • 547
  • 4
  • 13
  • you will have to use JavaScript/AJAX to periodically ask server for results. – furas Jan 07 '20 at 03:42
  • Does this answer your question? [Flask App: Update progress bar while function runs](https://stackoverflow.com/questions/24251898/flask-app-update-progress-bar-while-function-runs) – metatoaster Jan 07 '20 at 03:48
  • Well, instead of a progress bar, it would be nicer if I show the user some status on the webpage. – Ira Jan 07 '20 at 04:00
  • @furas - can you please elaborate further or share a link? Thanks! – Ira Jan 07 '20 at 04:01

1 Answers1

0

@metatoaster pointed you in the right direction: Flask App: Update progress bar while function runs Instead of returning an integer as progress, you can return a string (e.g. 'Calculating area of circle ...')

On your webpage you'll need to poll for the progress using JavaScript/JQuery/AJAX and append it to a HTML div or textarea as shown in the example. 

const logarea = $('#logarea');
setInterval(update_progress, 500); // Polling every 500ms

function update_progress() {
    $.get('progress/' + task_id, function (progress) {    
        if (logarea.val().indexOf(progress) === -1) {
            logarea.val(logarea.val() + progress + '\n');
        }
    });
}
Pieter Moens
  • 331
  • 1
  • 4
  • 14