Web-based progress bar

Trying to display output from a ruby script that has a command line
interface with a progress bar.

I'd like to convert that progress bar to something web-based using
javascript or dhtml. Just wondering if anyone has anything like that
already.

On the Ruby side, I've found a ton of text and GUI progress bars, but
none that have a web interface. Did I miss a gem somewhere?

thx in advance.

···

--
Bill Guindon (aka aGorilla)

give you a fiver if you can do a smooth one of those in pure ruby :wink:

....

in other words, you will probably need an additional tool, like javascript at
he very least.

But buddy, what I wouldn't give to script my browser in ruby instead of js!

···

On Tuesday 14 September 2004 11:18 pm, Bill Guindon wrote:

Trying to display output from a ruby script that has a command line
interface with a progress bar.

I'd like to convert that progress bar to something web-based using
javascript or dhtml. Just wondering if anyone has anything like that
already.

On the Ruby side, I've found a ton of text and GUI progress bars, but
none that have a web interface. Did I miss a gem somewhere?

thx in advance.

--
( o _ カラチ
// trans.
/ \ transami@runbox.com

I don't give a damn for a man that can only spell a word one way.
-Mark Twain

Yeah, unfortunately it seems to be the only way to do anything like this.

I was really hoping that one of the many progress bars had a web
output, but I'll keep searching for one that's easy to hook into (easy
for somebody that's JS challenged so to speak).

···

On Wed, 15 Sep 2004 12:43:20 +0900, trans. (T. Onoma) <transami@runbox.com> wrote:

On Tuesday 14 September 2004 11:18 pm, Bill Guindon wrote:
> Trying to display output from a ruby script that has a command line
> interface with a progress bar.
>
> I'd like to convert that progress bar to something web-based using
> javascript or dhtml. Just wondering if anyone has anything like that
> already.
>
> On the Ruby side, I've found a ton of text and GUI progress bars, but
> none that have a web interface. Did I miss a gem somewhere?
>
> thx in advance.

give you a fiver if you can do a smooth one of those in pure ruby :wink:

....

in other words, you will probably need an additional tool, like javascript at
he very least.

But buddy, what I wouldn't give to script my browser in ruby instead of js!

--
Bill Guindon (aka aGorilla)

You just need to make a page refresh for a easy
progress bar, its really easy to do.

<META HTTP-EQUIV="Refresh" CONTENT="1">

Point it to a page which can give back data, etc.

there are several ways to contruct the bars, gifs,
tables with many cells, etc. just change color of
cells by adding to the new page on refresh, etc. Its
really easy to perform.

Actually you just need JS to make sure some IEs
refresh

<Script language="Javascript">
# add the if browser == IE here because some IEs turn
# off the META REFRESH :frowning:

window.setTimeout('refresh()', 1*2500);
function refresh(){
  window.location.href = window.location.href;
  window.setTimeout('refresh()', 1*2500);
}
</Script>

···

--- "trans. (T. Onoma)" <transami@runbox.com> wrote:

On Tuesday 14 September 2004 11:18 pm, Bill Guindon > wrote:
> Trying to display output from a ruby script that
has a command line
> interface with a progress bar.
>
> I'd like to convert that progress bar to something
web-based using
> javascript or dhtml. Just wondering if anyone has
anything like that
> already.
>
> On the Ruby side, I've found a ton of text and GUI
progress bars, but
> none that have a web interface. Did I miss a gem
somewhere?
>
> thx in advance.

give you a fiver if you can do a smooth one of those
in pure ruby :wink:

....

in other words, you will probably need an additional
tool, like javascript at
he very least.

But buddy, what I wouldn't give to script my browser
in ruby instead of js!

--
( o _ カラチ
// trans.
/ \ transami@runbox.com

I don't give a damn for a man that can only spell a
word one way.
-Mark Twain

-------------------------
David Ross

__________________________________
Do you Yahoo!?
Yahoo! Mail - You care about security. So do we.
http://promotions.yahoo.com/new_mail

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&quot;&gt;&lt;/script&gt;
<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.

···

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 :frowning:

window.setTimeout('refresh()', 1*2500);
function refresh(){
  window.location.href = window.location.href;
  window.setTimeout('refresh()', 1*2500);
}
</Script>

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.

···

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 :frowning:
>
> 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&quot;&gt;&lt;/script&gt;
<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.

--
Bill Guindon (aka aGorilla)

I've done some DHTML stuff like this, and the smoothest (i.e., least
visible redraw lag to the user) way to do it is with the
XmlHttpRequest object, which most modern browsers (IE,
Mozilla/Firefox, Konqeror, Safari) support for at least GET requests.
Your JS code uses that object to fetch some server-side URL, then grab
the result and use it to dynamically update an onscreen element, like
your progressbar.

If you want something similar, just use an iframe element which points
to the server-side "progress bar" page; you should even just be able
to set the "refresh" meta tag the in header of the HTML the iframe
loads, and have the browser refresh it every second or so. Otherwise,
it's a pretty trivial amount of Javascript to refresh just that
element periodically.

Here's some decent documentation on Apple's developer site about using
the XmlHttpRequest object:
http://developer.apple.com/internet/webcontent/xmlhttpreq.html

And they've got a great tutorial on using iframe elements to do
dynamic updates in browser-based interfaces:
http://developer.apple.com/internet/webcontent/iframe.html

···

--
Lennon
rcoder.net

Minus the odd typo, it was just what I needed. Thanks to all for the pointers.

Here's what I came up with:
Client: http://www.codepaste.org/view/paste/140
Server: http://www.codepaste.org/view/paste/139
sample server output: http://www.codepaste.org/view/paste/141

I love the fact that this setup means I can run _any_ shell routine,
and display the output on a web page, but I'm wondering if there's a
cleaner way to do the server side of it.

The dance I'm doing with STDOUT and $stdout is a bit ugly, but I'm not
sure what the alternatives are. I want the display to be as close to
'real time' as possible. I'm not sure I'm achieving that now, but
it's certainly not for lack of trying :wink:

···

On Thu, 16 Sep 2004 01:38:53 +0900, Lennon Day-Reynolds <rcoder@gmail.com> wrote:

And they've got a great tutorial on using iframe elements to do
dynamic updates in browser-based interfaces:
http://developer.apple.com/internet/webcontent/iframe.html

--
Bill Guindon (aka aGorilla)