?
Solved

Implement HTML5 progress bar with CGI program

Posted on 2013-12-04
3
Medium Priority
?
1,027 Views
Last Modified: 2014-02-01
I am trying to figure out how to use a HTML5 "progress" tag to implement
a progress bar in conjunction with a CGI host program.  The CGI is a compiled
C program which I can revise as necessary.  This program will take a while
and I want to have the user sit there looking at the progress bar.

So, in my html I can update the progress bar like this:

<script>
 var UpdateProgress = function(value) {
   var pbar = document.getElementById('p');
   pbar.value = value;
 }
</script>

<progress id='p' value='0' max='100'>
</progress>

So I need to call UpdateProgress() supplying whatever percentage the
host program is at.  My first thought was I would have the host program
output something like this:

print "content-type:text/plain\n\n"
print "25"
sleep 1
print "50"
sleep 1
print "75"
sleep 1
print "100"

and I would somehow intercept the data coming from the host and use
the value to call UpdateProgress().  But how do I intercept the data?
Anyway, nothing gets displayed in my browser until the host program
is done.

Sorry if this is dumb question but I am a newbie at this stuff.
0
Comment
Question by:jmckay321
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 2
3 Comments
 
LVL 53

Expert Comment

by:COBOLdinosaur
ID: 39699241
If you initiate a request from the browser, then it is going just wait for the response.

To do what you want, you need to uses Ajax to initiate the server side process from an existing page that contains the progress element.

You actually have to use the progress event:
http://www.w3.org/TR/progress-events/

The bare bones script would look something like:
<script>
  var progressBar = document.getElementById("p"),
      client = new XMLHttpRequest()
  client.open("GET", "your.cgi")
  client.onprogress = function(pe) {
    if(pe.lengthComputable) {
      progressBar.max = pe.total
      progressBar.value = pe.loaded
    }
  }
  client.onloadend = function(pe) {
    progressBar.value = pe.loaded
  }
  client.send()
</script>

Open in new window



Cd&
0
 

Accepted Solution

by:
jmckay321 earned 0 total points
ID: 39699361
I think I've got this figured out.  Basically my host cgi program is emitting html, and I just need to put in that html the code:  <script>UpdateProgress(n)</script> every time I want to update the bar.  (And of course, create the UpdateProgress script before that).  It seems to be working.  The big problem I had was getting the browser to start accepting data from the cgi instead of waiting until the end.  I had to make it put out enough data to get the browser started, then fiddle with headers, and flushing the output buffer.  What a pain.
0
 

Author Closing Comment

by:jmckay321
ID: 39826131
Because it is correct.
0

Featured Post

Free Tool: Path Explorer

An intuitive utility to help find the CSS path to UI elements on a webpage. These paths are used frequently in a variety of front-end development and QA automation tasks.

One of a set of tools we're offering as a way of saying thank you for being a part of the community.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Today, the web development industry is booming, and many people consider it to be their vocation. The question you may be asking yourself is – how do I become a web developer?
Q&A with Course Creator, Mark Lassoff, on the importance of HTML5 in the career of a modern-day developer.
Any person in technology especially those working for big companies should at least know about the basics of web accessibility. Believe it or not there are even laws in place that require businesses to provide such means for the disabled and aging p…
How to create a custom search shortcut to site-search Experts Exchange using Google in the Firefox browser. This eliminates the need to type out site:experts-exchange.com whenever you want to search the site. Launch your Bookmark Menu: Press 'Ctrl +…
Suggested Courses

770 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question