From: Bill Guindon <agorilla@...>
Date: 2004-09-15T22:31:52+09:00
Subject: Re: [OT] Re: web-based progress bar

On Wed, 15 Sep 2004 21:54:45 +0900, Gavin Kistner <gavin@refinery.com> wrote:
> On Sep 15, 2004, at 6:29 AM, David Ross wrote:
> > <Script language="Javascript">
> > # add the if browser == IE here because some IEs turn
> > # off the META REFRESH :(
> >
> > window.setTimeout('refresh()', 1*2500);
> > function refresh(){
> >       window.location.href = window.location.href;
> >       window.setTimeout('refresh()', 1*2500);
> > }
> > </Script>
> 
> To make this HTML 4 compliant and cleaner:
> 
> <script type="text/javascript">
>         setTimeout( function(){ location.reload(true) }, 2500 );
> </script>
> 
> Note that you do not need to re-call the reload function, as the act of
> reloading the page will unload any such timeout you make.
> 
> If you're progressively writing the response, one way to make a
> progress bar is to use CSS to progressively overlap longer and longer
> elements on top of one another. For example (untested):
> <style type="text/css">
>         .progressbounds, .progressbar {
>                 position:absolute;
>                 height:1em;
>                 top: 50%; margin-top:-0.5em
>                 left: 20%;
>         }
>         .progressbounds {
>                 width:60%;
>                 margin:0 auto;
>                 border:1px solid black;
>         }
>         .progressbar {
>                 background:green;
>                 color:white;
>                 font-weight:bold;
>                 font-size:80%;
>                 text-align:center;
>                 overflow:hidden
>         }
> </style>
> 
> <div class="progressbounds"></div>
> ...
> <div class="progressbar" style="width:10%">10%</div>
> ...
> <div class="progressbar" style="width:25%">25%</div>
> ...
> <div class="progressbar" style="width:50%">50%</div>
> ...
> <div class="progressbar" style="width:80%">80%</div>
> ...
> <div class="progressbar" style="width:100%">DONE</div>
> <script type="text/javascript"
> src="http://phrogz.net/JS/FindRule2_js.txt"></script>
> <script type="text/javascript">
>         //Hide the progress bar in 10 seconds
>         setTimeout( function(){
>                 FindRule2( '.progressbounds' ).style.display='none';
>                 FindRule2( '.progressbar' ).style.display='none';
>         }, 10 * 1000 );
> </script>
> 
> If you're not writing the page but want to show progress of a
> server-task, you'll need to use a cross-browser XMLHTTP library like
> XHConn ( http://xkr.us/code/javascript/XHConn/ ) to repeatedly make
> client-server queries to get the progress, and then just use JS to
> manipulate the DOM to change the width of your progress bar.
> 

thx for your help, here's where I've gotten since my earlier post...

I like the css technique, and I've found something similar that's not
doing a page reload -- which I'd like to avoid.
http://slayeroffice.com/code/gradientProgressBar/

So far... I'm outputting the page header before I call the app (to get
the javascript out there), then I'm trying to capture and parse the
output from $stdout which looks like this:

000% [                                        ] 82016 bytes
001% [                                        ] 82016 bytes
002% [=                                       ] 82016 bytes
003% [=                                       ] 82016 bytes
004% [=                                       ] 82016 bytes
005% [==                                      ] 82016 bytes
006% [==                                      ] 82016 bytes
006% [==                                      ] 82016 bytes
008% [===                                     ] 82016 bytes
008% [===                                     ] 82016 bytes
009% [===                                     ] 82016 bytes
010% [====                                    ] 82016 bytes

It'd be pretty trivial to turn that into a function that spits out a
single percentage, but I'm still stuck on how to "drive" the progress
bar level with html that's showing up one line at a time.

-- 
Bill Guindon (aka aGorilla)