[RESOLVED] progress bar drawing

This site is best viewed in a modern browser with JavaScript enabled.

cseb

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?

<p id="demo">%! port-adc2</p>
<script>
document.getElementById("demo").innerHTML="%! port-adc2";
</script>
<progress id="progressBar" value="0" max="100" style="width:300px;"></progress>
<span id="status"></span>
<h1 id="finalMessage"></h1>
<script type="text/javascript" language="javascript">
document.getElementById("demo").innerHTML="%! port-adc2";
function progressBarSim(demo) {
  var bar = document.getElementById('progressBar');
  var status = document.getElementById('status');
  status.innerHTML = document.getElementById("demo").innerHTML="%! port-adc2";
  bar.value = document.getElementById("demo").innerHTML="%! port-adc2";

var sim = setTimeout("progressBarSim(" demo ")",10);
}
var amountLoaded = 0;
progressBarSim(amountLoaded);
</script>

JMRKER

You cannot have nested quotes and expect it to execute correctly.

Try this...

<p id="demo">%! port-adc2</p>
<script>
document.getElementById("demo").innerHTML="%! port-adc2";
</script>
<progress id="progressBar" value="0" max="100" style="width:300px;"></progress>
<span id="status"></span>
<h1 id="finalMessage"></h1>
<script type="text/javascript">
document.getElementById("demo").innerHTML="%! port-adc2";
function progressBarSim(demo) {
  var bar = document.getElementById('progressBar');
  var status = document.getElementById('status');
  status.innerHTML = document.getElementById("demo").innerHTML="%! port-adc2";
  bar.value = document.getElementById("demo").innerHTML="%! port-adc2";

[COLOR="#FF0000"]	var sim = setTimeout("progressBarSim('demo'))",1000);[/COLOR]
}
var amountLoaded = 0;
progressBarSim(amountLoaded);
</script>

cseb

I have tried this but it doesnt work. I just want to show a html value in javascript progress bar. the dynamic value is %! port-adc2 that comes from tcp/ip port.

ElvisMac

When you have the progress bar pop up surely you should hold the script in a loop while it is recieving the data. It appears to me that it checks once and prints the value.

<script>
[color="red"]
while ((document.getElementById("demo").innerHTML="%! port-adc2") < 100) 
{
[/color]
function progressBarSim(demo) {
  var bar = document.getElementById('progressBar');
  var status = document.getElementById('status');
  status.innerHTML = document.getElementById("demo").innerHTML="%! port-adc2";
  bar.value = document.getElementById("demo").innerHTML="%! port-adc2";

var sim = setTimeout("progressBarSim('demo'))",1000);
}
[color="red"]}[/color]
var amountLoaded = 0;
progressBarSim(amountLoaded);
</script>

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.

cseb

ElvisMac i have tried your code but it doesnt work. My last code and the printscreen of the pageview are below. i can write the status value but the progress bar doesnt proceed

 ADC Value: %! port-adc2 </p>
<progress id="progressBar" value="0" max="500" style="width:500px;"></progress>
<span id="status">status value = %! port-adc2 </span>
<script>
function progressBarSim(al) {
  var bar = document.getElementById('progressBar');
  var status = document.getElementById('status');  

  var al = document.getElementById('status');
  status.innerHTML = al+"%";
  bar.value = al;    

  var sim = setTimeout("al",100);
 }
progressBarSim(al);
</script>

ElvisMac

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:

while (thePortValue <= 100%) {
   Update my progress bar with some code;
}

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.

haulin

See if you can use something from this example:

<!DOCTYPE html>
<html>
    <head>
        <script>
            function updateStatus( pString ) {
                document.getElementById( "status" ).childNodes[ 0 ].nodeValue = pString;
                }
            var amountLoaded = 0,
                interval;
            window.onload = function() {
                interval = setInterval( function(){
                    if ( amountLoaded === 100 ) {
                        clearInterval( interval );
                        updateStatus( "done :-)" );
                        } else {
                            updateStatus( amountLoaded + "%" );
                            }
                    document.getElementById( "progressBar" ).setAttribute( "value", amountLoaded++ );
                    }, 100 );
                };
            </script>
        <title>Progress</title>
        </head>
    <body>
        <progress id = "progressBar" max = "100" value = "0"></progress>
        <span id = "status">0%</span>
        </body>
    </html>

Just add a line, assigning a value to amountLoaded by whatever way you retrieve the data, at the start of the setInterval callback function. So it would go

...
interval = setInterval( function(){
amountLoaded = parseInt( %a way of retrieving the value%, 10 )
if ( amountLoaded === 100 ) {
...

@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

cseb

I have edited your code:

<!DOCTYPE html>
<html>
    <head>

    <script>
        function updateStatus( pString ) {
            document.getElementById( "status" ).childNodes[ 0 ].nodeValue = pString;
            }
        var amountLoaded = 0,
            interval;
        window.onload = function() {
            interval = setInterval( function(){
				amountLoaded = parseInt( "demo", 10 )
                if ( amountLoaded === 100 ) {
                    clearInterval( interval );
                    updateStatus( "done :-)" );
                    } else {
                        updateStatus( amountLoaded + "%" );
                        }
                document.getElementById( "progressBar" ).setAttribute( "value", amountLoaded++ );
                }, 100 );
            };
        </script>
    <title>Progress</title>
    </head>
<body>
     <p id="demo">the incoming dynamic data is : %! port-adc2</p>
    <progress id = "progressBar" max = "100" value = "0"></progress>
    <span id = "status">0%</span>
    </body>
</html>

And the result is below:

haulin

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

Then, to obtain it from the element, you need to:

access the element via DOM - e.g. document.getElementById( "demo" )
access its text node - e.g. .childNodes[ 0 ]
and finally retrieve the value of that text node - .nodeValue
combined:

amountLoaded = parseInt( document.getElementById( "demo" ).childNodes[ 0 ].nodeValue, 10 );

innerHTML or some jQuery would make it simpler, but this is the plain JS method.

How do you write to the page, anyway? I think you may require a bit different approach. I don't see any additional script, which would replace the "%! port-adc2" with the actual value.

cseb

Congratulations ,this works clearly. Thank you very much for your helps.
PROBLEM SOLVED

haulin

My pleasure. However, i am still interested in how you get the numeric value to the page. Do you generate the page at once on the server side? The %! looks like JSP.

cseb

haulin;1248815 wrote:
Do you generate the page at once on the server side? The %! looks like JSP.

yes, exactly. it is tiny webserver electronic circuit that communicates through tcp/ip protocol. it sends the analog data to the router and the data can be seen from the webpage.

haulin

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

cseb

yes it is the other problem for me. if i dont refresh the page i can not see the change. maybe you can help me about the solution.

haulin

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:

<!DOCTYPE html>
<html>
    <head>
        <script>
            function updateStatus( pString ) {
                document.getElementById( "status" ).childNodes[ 0 ].nodeValue = pString;
                }
            window.onload = function() {
                setTimeout( function() { window.location = window.location; }, 500 );
                var amountLoaded = parseInt( document.getElementById( "demo" ).childNodes[ 0 ].nodeValue, 10 );
                if ( amountLoaded === 100 ) {
                    updateStatus( "done :-)" );
                    } else {
                        updateStatus( amountLoaded + "%" );
                        }
                document.getElementById( "progressBar" ).setAttribute( "value", amountLoaded );
                };
            </script>
        <title>Progress</title>
        </head>
    <body>
        <p>the incoming dynamic data is :</p>
        <p id="demo">%! port-adc2</p>
        <progress id = "progressBar" max = "100" value = "0"></progress>
        <span id = "status">0%</span>
        </body>
    </html>

You could even get rid of the setTimeout line and use the Refresh meta-tag:

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:

<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv = "refresh" CONTENT = "1;URL=file://localhost/progress.html">
        <title>Progress</title>
        </head>
    <body>
        <p>the incoming dynamic data is :</p>
        <p id="demo">%! port-adc2</p>
        <progress id = "progressBar" max = "100" value = "[COLOR="#FF0000"]%! port-adc2[/COLOR]"></progress>
        <span id = "status">[COLOR="#FF0000"]%! port-adc2[/COLOR]%</span>
        </body>
    </html>

I am not sure if JSP will replace the content inside quotes, but if yes, we have the simplest solution ever

cseb

I recommend you to read the article below if you want to understand the server side work. it is the whole work that i handle.

http://www.brc-electronics.nl/ethernet

By the way i have tried this but it doesnt work.

<progress id = "progressBar" max = "100" value = "%! port-adc2"></progress>

haulin

I didn't read it all, but it seems, that it should execute a pre-defined function, if it finds the %! symbol combination. I don't know, why it doesn't work. Maybe try to omit the doublequotes or make a space after it, so the %! stands alone surrounded by whitespace. Or maybe it will do it only once on the page. However, they encouraged that meta-tag approach, too. It appears, you can even omit the URL part and it will refresh itself. Did you try the JS method with setTimeout line?

cseb

yes i have tried with setTimeout line but then the links on the webpage doesnt work. my webpage sends data to the circuit by these links. with the settimeout line the page refreshes and these links doesnt work.

by the way i have learned ajax alittle bit, and edited the code like below:

<script>
  function updateStatus( pString ) {
                document.getElementById( "status" ).childNodes[ 0 ].nodeValue = pString;
                }
            var amountLoaded = 0,
                interval;
            window.onload = function() {
                interval = setInterval( function(){
					amountLoaded = parseInt( document.getElementById( "demo" ).childNodes[ 0 ].nodeValue, 10 );
				    if ( amountLoaded === 512 ) {
                        clearInterval( interval );
                        updateStatus( "done :-)" );
                        } else {
                            updateStatus( amountLoaded + "%" );
                            }
                    document.getElementById( "progressBar" ).setAttribute( "value", amountLoaded++ );
                    }, 100 );
                };
           </script>
<script>
function loadXMLDoc()
{

var xmlhttp;
if (window.XMLHttpRequest)
  {// code for IE7+, Firefox, Chrome, Opera, Safari
  xmlhttp=new XMLHttpRequest();
  }
else
  {// code for IE6, IE5
  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  }
xmlhttp.onreadystatechange=function()
  {
  if (xmlhttp.readyState==4 && xmlhttp.status==200)
    {
    document.getElementById("demo").innerHTML=xmlhttp.responseText;
    }
  }
xmlhttp.open("GET","adc.shtml",true);
xmlhttp.send();

}
</script>
<div id="demo2"><h2>%! port-adc2</h2></div>
    <button type="button" onclick="loadXMLDoc()">Change Content</button>

after the first click on the chage buton the progress bar disappears and doesnt go back?

haulin

Ok, if there's some more stuff on the page, then probably AJAX is the way. I'm guessing trouble with adc.shtml, what are the exact contents of it? If it is a whole webpage with headers and stuff, that might be the culprit. By using innerHTML you force the browser to parse again all the contents of it. If you want to add just text, you should go with nodeValue:

document.getElementById("demo").childNodes[ 0 ].nodeValue=xmlhttp.responseText;

also, you don't have to worry about IE5/6/7, as these do not support <progress> anyway. You could replace it with just variable width <div> (rectangle), if you need to support them.

cseb

the exact contents of adc.shtml is %! port-adc2 .