If this is your first visit, be sure to
check out the FAQ by clicking the
link above. You may have to register
before you can post: click the register link above to proceed. To start viewing messages,
select the forum that you want to visit from the selection below.

[RESOLVED] progress bar drawing

Hi all,
I am trying to draw a dynamic progress bar according to a dynamic value. The data comes from ethernet port like that "%! data" . I can write this value on the html page. But when i try to draw a progress bar according to this value it doesnt work. my code is below. Can you help me please?

I'm a bit of a new guy to JS so forgive my ad-hoc scripting as it may be incorrect and require some tweaking. If I was updating a progress bar from another source then this is how I would, in theory, do it.

What I can see is your code will only run once. To update the progress bar you will have to somehow hold the code in a loop (while loop for example) by taking the progress value and checking it in the while loop ie:

This should force the bar to be updated to 100% before the loop breaks. Like I said, I was only second guessing how to do it as I am new to programming in general. So my theory would need to be tweaked/played with until you can make it work. Hopefully the simplistic way I have detailed in the code box above should give you an idea of where you could be going wrong.

@ElvisMac: Your approach with while is not good, since the loop will eat all the system resources; it might even prevent the browser from displaying anything at all, because it will spend all its time comparing the two values. Also, theres no % in javascript

Yeah. It's not that easy. First off, i'd remove the text from the <p>, so we can easily retrieve the value. If you must, split it into two separate paragraphs, like:<p>the incoming dynamic data is :</p>
<p id="demo">%! port-adc2</p>

That sounds interesting. But do you need to refresh the page to see the progress change? If so, the code that i provided is superfluous. You could go without that Interval. I thought that the value is somehow changing automatically without page reload (AJAX or sth).

Cool. What exactly does the webserver output? Can you modify the server script? An AJAX solution would be great for this, but maybe a little bit too complicated. You'd have to process a GET/POST request, which really could be as simple as 2 lines of code, but i don't know JSP, so you tell me.

This is simplified version of my first suggestion and the setTimeout is there just to reload the page every 500ms automatically:

just replace the "file://localhost/progress.html" with whatever is in your adress bar when you want to access the webserver. However, you are limited to whole seconds with this approach. But i believe, that you could get rid of all the javascript (i hope noone reads this, since it is a javascript forum). Try this: