MeshViewer html : Added Progress bar.

11 年之前 · f8fe3613fe
--- a/test/meshviewer_index.html
+++ b/test/meshviewer_index.html
@@ -10,25 +10,25 @@
 <head>

 <style type="text/css">
 progress {  
    background-color: #f3f3f3;  
    border: 0;  
    height: 18px;  
    border-radius: 9px;  
 progress {  
    background-color: #f3f3f3;  
    border: 0;  
    height: 18px;  
    border-radius: 9px;  
 }

 progress::-webkit-progress-bar {  
    background-color: #f3f3f3;
    border: 1px solid #000000;
    padding: 2px 2px;
    height: 20px;
    border-radius: 0px;
 }
 progress::-webkit-progress-value {  
    background-color: #22BB22;
    border: 0px;
    height: 14px;
    border-radius: 0px;
 progress::-webkit-progress-bar {  
    background-color: #f3f3f3;
    border: 1px solid #000000;
    padding: 2px 2px;
    height: 20px;
    border-radius: 0px;
 }
 progress::-webkit-progress-value {  
    background-color: #22BB22;
    border: 0px;
    height: 14px;
    border-radius: 0px;
 }
 </style>
 <!--
@@ -100,23 +100,24 @@ progress::-webkit-progress-value {
      var statusField = document.getElementById('status_field');
      if (statusField) {
        statusField.innerHTML = statusText;
      }
    }

    function moduleLoadProgress(event)
    {
        var progressBar = document.getElementById("p");
        var statusField = document.getElementById('status_field');
        if (event.lengthComputable) {
            progressBar.max = event.total;
            progressBar.value = event.loaded;
            status_field.innerHTML = 'Loading [' + (event.total / event.max * 100.0) + ']';
        }
        else {
            progressBar.value = -1;
            status_field.innerHTML = 'Computing progress ...'
        }
    }
      }
    }

    function moduleLoadProgress(event)
    {
        var progressBar = document.getElementById("p");
        var statusField = document.getElementById('status_field');
        if (event.lengthComputable) {
            progressBar.max = event.total;
            progressBar.value = event.loaded;
            var load_progress = ((event.loaded / event.total) * 100.0);
            status_field.innerHTML = 'Loading [' + load_progress.toFixed(0) + '%]';
        }
        else {
            progressBar.value = -1;
            status_field.innerHTML = 'Computing progress ...'
        }
    }


    function SendMeshData()
@@ -141,28 +142,28 @@ progress::-webkit-progress-value {
    <tr border="0"> <td border="0" align="center">

    <div id="status_field">NO-STATUS</div>
    <progress id=p align="left"></progress>
    <script type="text/javascript">
        var progressBar = document.getElementById("p");
        progressBar.max = 100;
        progressBar.value = 100;
    <progress id=p align="left"></progress>
    <script type="text/javascript">
        var progressBar = document.getElementById("p");
        progressBar.max = 100;
        progressBar.value = 100;
    </script>
 <!--
 <script>
    var progressBar = document.getElementById("p"), client = new XMLHttpRequest()
    client.open("GET", "magical-unicorns")
    client.onprogress = function (pe) {
        if (pe.lengthComputable) {
            progressBar.max = pe.total
            progressBar.value = pe.loaded
        }
    }
    client.onloadend = function (pe) {
        progressBar.value = pe.loaded
    }
    client.send()
    progressBar.max = pe.total;
    progressBar.value = pe.loaded;
 <!--
 <script>
    var progressBar = document.getElementById("p"), client = new XMLHttpRequest()
    client.open("GET", "magical-unicorns")
    client.onprogress = function (pe) {
        if (pe.lengthComputable) {
            progressBar.max = pe.total
            progressBar.value = pe.loaded
        }
    }
    client.onloadend = function (pe) {
        progressBar.value = pe.loaded
    }
    client.send()
    progressBar.max = pe.total;
    progressBar.value = pe.loaded;
 </script>
 -->

@@ -183,17 +184,17 @@ sc#f8f afcb 1 1 1 0
 </div>

  <div id="listener" >
    <script type="text/javascript">
        var listener = document.getElementById('listener');
        listener.addEventListener('load', moduleDidLoad, true);
        listener.addEventListener('progress', moduleLoadProgress, true);
    <script type="text/javascript">
        var listener = document.getElementById('listener');
        listener.addEventListener('load', moduleDidLoad, true);
        listener.addEventListener('progress', moduleLoadProgress, true);
        listener.addEventListener('message', handleMessage, true);
    </script>
    <div id="nacl_div">
        <embed name="nacl_module"
           id="ID_NaClModule"
           width=770 height=200
           src="nacl.nmf"
           src="meshviewer_nacl.nmf"
           type="application/x-nacl" />
    </div>
    </div>