www.webdeveloper.com
Page 1 of 2 12 LastLast
Results 1 to 15 of 24

Thread: [RESOLVED] progress bar drawing

  1. #1
    Join Date
    Feb 2013
    Posts
    12

    resolved [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?
    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>

  2. #2
    Join Date
    Dec 2005
    Location
    FL
    Posts
    7,373

    Lightbulb

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

    Try this...
    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">
    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'))",1000);
    }
    var amountLoaded = 0;
    progressBarSim(amountLoaded);
    </script>

  3. #3
    Join Date
    Feb 2013
    Posts
    12
    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.

  4. #4
    Join Date
    Jan 2013
    Posts
    7
    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.

  5. #5
    Join Date
    Feb 2013
    Posts
    12
    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>
    http://i46.tinypic.com/149w30p.jpg

  6. #6
    Join Date
    Jan 2013
    Posts
    7
    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.

  7. #7
    Join Date
    Mar 2009
    Location
    Wherever i lay my hat
    Posts
    180
    See if you can use something from this example:
    HTML 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(){
                        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

  8. #8
    Join Date
    Feb 2013
    Posts
    12
    I have edited your code:
    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:

    http://i45.tinypic.com/10x68a0.jpg

  9. #9
    Join Date
    Mar 2009
    Location
    Wherever i lay my hat
    Posts
    180
    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:

    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.

  10. #10
    Join Date
    Feb 2013
    Posts
    12
    Congratulations ,this works clearly. Thank you very much for your helps.
    PROBLEM SOLVED

  11. #11
    Join Date
    Mar 2009
    Location
    Wherever i lay my hat
    Posts
    180
    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.

  12. #12
    Join Date
    Feb 2013
    Posts
    12
    Quote Originally Posted by haulin View Post
    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.

  13. #13
    Join Date
    Mar 2009
    Location
    Wherever i lay my hat
    Posts
    180
    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).

  14. #14
    Join Date
    Feb 2013
    Posts
    12
    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.

  15. #15
    Join Date
    Mar 2009
    Location
    Wherever i lay my hat
    Posts
    180
    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:

    <meta http-equiv = "refresh" CONTENT = "1;URL=file://localhost/progress.html">

    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
    Last edited by haulin; 02-05-2013 at 06:30 PM.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles