web-based progress bar

B

Bill Guindon

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.
 
T

trans. (T. Onoma)

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 ;)

....

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.
/ \ (e-mail address removed)

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

Bill Guindon

give you a fiver if you can do a smooth one of those in pure ruby ;)

....

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!

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).
 
D

David Ross

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

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






--- "trans. (T. Onoma) said:
give you a fiver if you can do a smooth one of those
in pure ruby ;)

....

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.
/ \ (e-mail address removed)

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
 
G

Gavin Kistner

--Apple-Mail-1-981559773
Content-Transfer-Encoding: 7bit
Content-Type: text/plain;
charset=US-ASCII;
format=flowed

<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.
--Apple-Mail-1-981559773--
 
B

Bill Guindon

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.
 
L

Lennon Day-Reynolds

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
 
B

Bill Guindon

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

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 ;)
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Members online

No members online now.

Forum statistics

Threads
473,770
Messages
2,569,583
Members
45,074
Latest member
StanleyFra

Latest Threads

Top