Dynamic progress bar based on script progress?
I have a Google App Engine application using the webapp2 framework that interacts with a MySQL database. Application users can upload data. I want to show a progress bar while loading, as it can take up to several minutes.
Based on what I've seen in other threads (mainly: this section and this one , m working on a JSON / Javascript solution that is new to me.
The progress bar itself works if I pass in a random number. However, I cannot figure out how to "load" the changing values ββfrom a Python script.
Here's the HTML / CSS / Javascript:
HTML:
<div id="myProgress">
<div id="myBar"</div>
</div>
CSS:
#myProgress {width: 300px;
height: 30px;
background-color: #ddd;
}
#myBar {width: 1%;
height: 30px;
background-color: #4CAF50;
}
Javascript:
<script type="text/javascript">
function move() {
var elem = document.getElementById("myBar");
var width = 1;
var id = setInterval(frame, 1000);
function frame() {
if (width >= 100) {
clearInterval(id);
}
else {
//var randomnumber = Math.floor(Math.random() * 100); --> works
var randomnumber = function update_values() {
$SCRIPT_ROOT = {{ script_root }};
$.getJSON($SCRIPT_ROOT+"/uploading",
function(data) {
$("#width").text(data.width+" %")
});
} ; --> this is wrong I assume
var width = randomnumber;
elem.style.width = width + '%';
}
}
}
window.onload=move();
</script>
The progress comes from a for loop in Python, which is embedded in the script that loads the page. After the script finishes in one action, I want the counter result to be passed to the progress bar as its width. With static variables, I use the usual Jinja way.
class UploadingpageHandler(webapp2.RequestHandler):
def get(self):
activities_list = [1,2,3,4,5,6,7,8,9,10]
counter = 0
script_root = 'localhost:10080'
for activity in activities_list:
counter = counter + 10
upload.do_stuff_in_some_function_with_MySQL()
obj = {
'width': counter
}
self.response.headers['Content-Type'] = 'application/json' --> this
self.response.out.write(json.dumps(obj)) --> and this is wrong I assume
template_vars = {
'script_root': script_root
}
template = jinja_environment.get_template('uploading.html')
self.response.out.write(template.render(template_vars))
How do I change the scripts to make it work? Or is there a better way to solve this?
source to share
You need to store the flow of your "actions" outside of your function somewhere.
A hacky "solution" would be to save it to some kind of caching solution like memcached or redis with some kind of timestamp / signature so you can restore it (and invalidate old entries using a cron job).
Or, you can exit the game and make your task completely asynchronous with something like Celery , but I doubt you can do that on Google App Engine.
source to share