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?
Code:
<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>
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.
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.
Code:
<script>
while ((document.getElementById("demo").innerHTML="%! port-adc2") < 100)
{
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);
}
}
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.
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
Code:
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>
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:
Code:
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.
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
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>
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:
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.
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.
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.
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:
HTML Code:
<!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:
Code:
<!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 = "%! port-adc2"></progress>
<span id = "status">%! port-adc2%</span>
</body>
</html>
I am not sure if JSP will replace the content inside quotes, but if yes, we have the simplest solution ever
[RESOLVED] progress bar drawing
Reply With Quote
Originally Posted by haulin
Bookmarks