From 3d8a58a806a2da77b0e4c6c197997dd55afca539 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Benjamin=20=E2=80=98Touky=E2=80=99=20Huet?=
 <huet.benjamin@gmail.com>
Date: Sat, 28 Sep 2013 21:29:44 +0000
Subject: [PATCH] Transfered progress bar logic in progress_status.js.
 lol_shell.html modified to get necessary basics.

---
 src/platform/emscripten/lol_shell.html | 236 ++++++++++++++++---------
 test/meshviewer.vcxproj                |   4 +
 test/meshviewer_index.html             |   1 +
 test/nacl_loading.js                   | 113 +-----------
 test/progress_status.js                | 116 ++++++++++++
 5 files changed, 281 insertions(+), 189 deletions(-)
 create mode 100644 test/progress_status.js
diff --git a/src/platform/emscripten/lol_shell.html b/src/platform/emscripten/lol_shell.html
index 2900c21d..a1010614 100644
--- a/src/platform/emscripten/lol_shell.html
+++ b/src/platform/emscripten/lol_shell.html
@@ -1,91 +1,165 @@
-<!doctype html>
+﻿<!doctype html>
 <html lang="en-us">
-  <head>
-    <meta charset="utf-8">
-    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
-    <title>Emscripten-Generated Code</title>
-    <style>
-      .emscripten { padding-right: 0; margin-left: auto; margin-right: auto; display: block; }
-      textarea.emscripten { font-family: monospace; width: 80%; }
-      div.emscripten { text-align: center; }
-      div.emscripten_border { border: 1px solid black; }
-      /* the canvas *must not* have any border or padding, or mouse coords will be wrong */
-      canvas.emscripten { border: 0px none; }
-    </style>
-  </head>
-  <body>
-    <hr/>
-    <div class="emscripten" id="status">Downloading...</div>
-    <div class="emscripten">
-      <progress value="0" max="100" id="progress" hidden=1></progress>  
-    </div>
+<head>
+<meta charset="utf-8">
+<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
+<title>YOUR PAGE NAME HERE</title>
+
+<style>
+.emscripten
+{
+    padding-right: 0;
+    margin-left: auto;
+    margin-right: auto;
+    display: block;
+}
+textarea.emscripten
+{
+    font-family: monospace;
+    width: 80%;
+}
+div.emscripten
+{
+    text-align: center;
+}
+div.emscripten_border
+{
+    border: 1px solid black;
+    position: absolute;
+    left: 0px;
+    top: 0px;
+}
+/* the canvas *must not* have any border or padding, or mouse coords will be wrong */
+canvas.emscripten
+{
+    border: 0px none;
+}
+</style>
+</head>
+
+<body>
     <div class="emscripten_border">
-      <canvas class="emscripten" id="canvas" oncontextmenu="event.preventDefault()"></canvas>
+        <canvas class="emscripten" id="id_cvas_render" oncontextmenu="event.preventDefault()"></canvas>
     </div>
-    <hr/>
+
+<!-- this part is a little weird, I don't really know what to do with it. -->
     <div class="emscripten">
-      <input type="checkbox" id="resize">Resize canvas
-      <input type="checkbox" id="pointerLock" checked>Lock/hide mouse pointer
-      &nbsp;&nbsp;&nbsp;
-      <input type="button" value="Fullscreen" onclick="Module.requestFullScreen(document.getElementById('pointerLock').checked, 
-                                                                                document.getElementById('resize').checked)">
+        <input type="checkbox" id="id_ckbox_resize">Resize canvas
+        <input type="checkbox" id="id_ckbox_pointer_lock" checked>Lock/hide mouse pointer
+        &nbsp;&nbsp;&nbsp;
+        <input type="button" value="Fullscreen" onclick="ClickFullscreen()">
     </div>
-    
-    <hr/>
-    <textarea class="emscripten" id="output" rows="8"></textarea>
-    <hr>
-    <script type='text/javascript'>
-      // connect to canvas
-      var Module = {
-        preRun: [],
+    <textarea class="emscripten" id="id_txt_output" rows="8"> </textarea>
+
+<script type='text/javascript'>
+    // connect to canvas
+    var Module =
+    {
+        output:  document.getElementById('id_txt_output'),
+        canvas:  document.getElementById('id_cvas_render'),
+        preRun:  [],
         postRun: [],
-        print: (function() {
-          var element = document.getElementById('output');
-          element.value = ''; // clear browser cache
-          return function(text) {
-            text = Array.prototype.slice.call(arguments).join(' ');
-            // These replacements are necessary if you render to raw HTML
-            //text = text.replace(/&/g, "&amp;");
-            //text = text.replace(/</g, "&lt;");
-            //text = text.replace(/>/g, "&gt;");
-            //text = text.replace('\n', '<br>', 'g');
-            element.value += text + "\n";
-            element.scrollTop = 99999; // focus on bottom
-          };
-        })(),
-        printErr: function(text) {
-          text = Array.prototype.slice.call(arguments).join(' ');
-          if (0) { // XXX disabled for safety typeof dump == 'function') {
-            dump(text + '\n'); // fast, straight to the real console
-          } else {
-            console.log(text);
-          }
-        },
-        canvas: document.getElementById('canvas'),
-        setStatus: function(text) {
-          if (Module.setStatus.interval) clearInterval(Module.setStatus.interval);
-          var m = text.match(/([^(]+)\((\d+(\.\d+)?)\/(\d+)\)/);
-          var statusElement = document.getElementById('status');
-          var progressElement = document.getElementById('progress');
-          if (m) {
-            text = m[1];
-            progressElement.value = parseInt(m[2])*100;
-            progressElement.max = parseInt(m[4])*100;
-            progressElement.hidden = false;
-          } else {
-            progressElement.value = null;
-            progressElement.max = null;
-            progressElement.hidden = true;
-          }
-          statusElement.innerHTML = text;
-        },
+        clickFullsreen: function()
+                        {
+                            Module.requestFullScreen(document.getElementById('id_ckbox_pointer_lock').checked,
+                                                     document.getElementById('id_ckbox_resize').checked);
+                        },
+        print: (function()
+                {
+                    if (this.output)
+                    {
+                        this.output.value = ''; // clear browser cache
+                        return function(text)
+                        {
+                            this.text = Array.prototype.slice.call(arguments).join(' ');
+                            // These replacements are necessary if you render to raw HTML
+                            //text = text.replace(/&/g, "&amp;");
+                            //text = text.replace(/</g, "&lt;");
+                            //text = text.replace(/>/g, "&gt;");
+                            //text = text.replace('\n', '<br>', 'g');
+                            this.output.value += text + "\n";
+                            this.output.scrollTop = 99999; // focus on bottom
+                        };
+                    }
+                    else
+                        return '';
+                })(),
+        printErr:   function(text)
+                    {
+                        text = Array.prototype.slice.call(arguments).join(' ');
+                        if (0)  // XXX disabled for safety typeof dump == 'function')
+                            dump(text + '\n'); // fast, straight to the real console
+                        else
+                            console.log(text);
+                    },
+        //Load Status handling
+        setStatus:  function(text, new_value, new_max)
+                    {
+                        var tmp_status = '';
+                        var tmp_value = undefined;
+                        var tmp_max = undefined;
+                        var should_hide = false;
+
+                        //Clear any interval put on this Status.
+                        if (Module.setStatus.interval)
+                            clearInterval(Module.setStatus.interval);
+                        //If value and max have been set, directly go for the win.
+                        if (new_value != undefined && new_max != undefined)
+                        {
+                            tmp_status = text;
+                            tmp_value = new_value;
+                            tmp_max = new_max;
+                        }
+                        else
+                        //Else do the complicated stuff.
+                        {
+                            var m = text.match(/([^(]+)\((\d+(\.\d+)?)\/(\d+)\)/);
+                            if (m)
+                            {
+                                text = m[1];
+                                tmp_value = parseInt(m[2]) * 100;
+                                tmp_max = parseInt(m[4]) * 100;
+                            }
+                            else
+                                should_hide = true;
+                        }
+                        if (parent)
+                        {
+                            //parent.UpdateProgressBarValue(tmp_status, tmp_value, tmp_max);
+                            //parent.HideProgressStatus(should_hide);
+                        }
+                    },
         totalDependencies: 0,
-        monitorRunDependencies: function(left) {
-          this.totalDependencies = Math.max(this.totalDependencies, left);
-          Module.setStatus(left ? 'Preparing... (' + (this.totalDependencies-left) + '/' + this.totalDependencies + ')' : 'All downloads complete.');
-        }
-      };
-      Module.setStatus('Downloading...');
+        monitorRunDependencies:
+                    function(left)
+                    {
+                        this.totalDependencies = Math.max(this.totalDependencies, left);
+                        if (left)
+                            Module.setStatus('Downloading dependencies ', (this.totalDependencies - left), this.totalDependencies);
+                        else
+                            Module.setStatus('All downloads complete.', 1, 1);
+                    },
+        //IMPORTANT : This is the C -> Javascript wraping, add your functions list here.
+        wrapup_list: [ {src_obj: this, func_name: 'DoSendMessage', c_func_name: '_C_Send', return_var: 'number', args: ['number', 'string'] } ],
+        do_wrapup:  function()
+                    {
+                        for (var i = 0; i < this.wrapup_list.length; i++)
+                            this.wrapup_list[i].src_obj[this.wrapup_list[i].func_var] =
+                                cwrap(this.wrapup_list[i].c_func_name, 
+                                      this.wrapup_list[i].return_var,
+                                      this.wrapup_list[i].args);
+                    },
+        SendMessage:function()
+                    {
+                        this.DoSendMessage(1, 'prout');
+                    }
+    };
+    Module.setStatus('Please wait, calculating load balance ...', 0, 1);
+    //Module <-> Page communication setup
+    parent.g_embed_em_module = Module;
+    parent.SendMessageToModule = function() { g_embed_em_module.DoSendMessage(); };
+    parent.ModuleSentMessage = function(message) { /* */ };
+    window.setTimeout("Module.do_wrapup()", 100);
     </script>      
 
 <!-- Copy this HTML in your site folder and put your built program script in the src.
diff --git a/test/meshviewer.vcxproj b/test/meshviewer.vcxproj
index a2c9aacd..b72f58b5 100644
--- a/test/meshviewer.vcxproj
+++ b/test/meshviewer.vcxproj
@@ -66,12 +66,16 @@
     <None Include="meshviewer_index.html">
       <ExcludedFromBuild Condition="'$(Configuration)|$(Platform)'=='Debug|Win32'">true</ExcludedFromBuild>
     </None>
+    <None Include="meshviewer_nacl.html">
+      <ExcludedFromBuild Condition="'$(Configuration)|$(Platform)'=='Debug|Win32'">true</ExcludedFromBuild>
+    </None>
     <None Include="meshviewer_nacl.nmf">
       <ExcludedFromBuild Condition="'$(Configuration)|$(Platform)'=='Debug|Win32'">true</ExcludedFromBuild>
     </None>
     <None Include="nacl_loading.js">
       <ExcludedFromBuild Condition="'$(Configuration)|$(Platform)'=='Debug|Win32'">true</ExcludedFromBuild>
     </None>
+    <None Include="progress_status.js" />
     <None Include="type_dictionnary.js">
       <ExcludedFromBuild Condition="'$(Configuration)|$(Platform)'=='Debug|Win32'">true</ExcludedFromBuild>
     </None>
diff --git a/test/meshviewer_index.html b/test/meshviewer_index.html
index 0754592e..92f05cca 100644
--- a/test/meshviewer_index.html
+++ b/test/meshviewer_index.html
@@ -116,6 +116,7 @@ progress::-webkit-progress-value
 </script>
 
 <script src="./utils.js"></script>
+<script src="./progress_status.js"></script>
 <script src="./type_dictionnary.js"></script>
 <script type="text/javascript">
     var EasyMeshDict = new TypeDictionnary("EasyMesh");
diff --git a/test/nacl_loading.js b/test/nacl_loading.js
index 75335fb3..815fefb0 100644
--- a/test/nacl_loading.js
+++ b/test/nacl_loading.js
@@ -1,7 +1,3 @@
-g_status_text           = [null];
-g_status_timer          = [-1.0];
-g_var_progress_bar      = -1;
-
 g_embed_nacl_module     = null;
 
 if (IsUsingNaCl()) NaClLoadingInit();
@@ -49,26 +45,10 @@ function ModuleStartedLoad()
 //Module progress event
 function ModuleLoadUpdate(event)
 {
-    var progress_bar = GetProgressBar();
-    if (progress_bar)
-    {
-        if (event.lengthComputable)
-        {
-            if (progress_bar.value < 0)
-                g_var_progress_bar = -1;
-            var loading_text = 'Please wait, loading [' + (Math.min(1.0, event.loaded / event.total) * 100.0).toFixed(0) + '%]';
-            //update the progress status.
-            progress_bar.max = event.total;
-            progress_bar.value = event.loaded;
-            g_var_progress_bar = AddTextStatus(loading_text, g_var_progress_bar);
-        }
-        //Load length is not usable.
-        else
-        {
-            progress_bar.value = -1;
-            g_var_progress_bar = AddTextStatus('Please wait, calculating load balance ...', g_var_progress_bar);
-        }
-    }
+    if (event.lengthComputable)
+        UpdateProgressBarValue('Please wait, loading', event.loaded, event.total);
+    else
+        UpdateProgressBarValue('Please wait, calculating load balance ...');
 }
 
 //Indicate module load success.
@@ -79,11 +59,7 @@ function ModuleDidLoad()
 
     //Hide the progress div
     AddTextStatus('Module is live, thank you for your patience.');
-    var hide_timer = 0.1;
-    for (var i = 0; i < g_status_timer.length; i++)
-        if (g_status_timer[i])
-            hide_timer = Math.max(g_status_timer[i], hide_timer);
-    window.setTimeout('HideProgressStatus(true)', hide_timer * 1000);
+    window.setTimeout('HideProgressStatus(true)', GetMaxStatusTime(0.5) * 1000);
 }
 
 //Module did crash
@@ -129,82 +105,3 @@ function SendMessageToModule()
     else
         alert("Module not loaded !");
 }
-
-//-------------------------------------------------------------------------
-// PROGRESS BAR STATUS FUNCTIONS
-//-------------------------------------------------------------------------
-
-//Update progress bar status
-function UpdateTextStatus(seconds)
-{
-    var div_progress_status = GetDivProgressStatus();
-    if (div_progress_status)
-    {
-        div_progress_status.innerHTML = '';
-        for (var i = 0; i < g_status_text.length; i++)
-        {
-            if (g_status_timer[i] == undefined || g_status_timer[i] < 0.0)
-            {
-                g_status_timer[i] = -1.0;
-                g_status_text[i] = undefined;
-            }
-            else
-            {
-                g_status_timer[i] -= seconds;
-                div_progress_status.innerHTML += g_status_text[i];
-                //div_progress_status.innerHTML += '[' + g_status_timer[i].toFixed(2) + ']';
-                if (i < g_status_text.length - 1)
-                    div_progress_status.innerHTML += '<br>';
-            }
-        }
-        window.setTimeout("UpdateTextStatus(0.1)", 100);
-    }
-}
-
-//Add text status to the stack
-function AddTextStatus(message, message_id)
-{
-    var msg_timer = 2.0;
-    if (message_id == undefined || message_id < 0)
-    {
-        for (var i = g_status_timer.length - 1; i >= 0; i--)
-            if (g_status_timer[i])
-                msg_timer = Math.max(msg_timer, g_status_timer[i] + 0.5);
-
-        g_status_text[g_status_text.length] = message;
-        g_status_timer[g_status_timer.length] = msg_timer;
-        return g_status_timer.length - 1;
-    }
-    else
-    {
-        g_status_text[message_id] = message;
-        g_status_timer[message_id] = msg_timer;
-        return message_id;
-    }
-}
-
-//Hide Progress Status and empty status texts
-function HideProgressStatus(should_hide)
-{
-    var progress_bar = GetProgressBar();
-    var div_progress = GetDivProgress();
-    if (div_progress && progress_bar)
-    {
-        if (should_hide == true)
-        {
-            div_progress.style.visibility = "hidden";
-            g_status_text.splice(0, g_status_text.length);
-            g_status_timer.splice(0, g_status_timer.length);
-            progress_bar.value = -1;
-            UpdateTextStatus(1.0);
-        }
-        else
-        {
-            div_progress.style.visibility = "visible";
-            progress_bar.value = -1;
-            AddTextStatus('Please wait for module loading');
-            UpdateTextStatus(1.0);
-        }
-    }
-}
-
diff --git a/test/progress_status.js b/test/progress_status.js
new file mode 100644
index 00000000..02e9a85f
--- /dev/null
+++ b/test/progress_status.js
@@ -0,0 +1,116 @@
+g_var_progress_bar      = -1;
+g_status_text           = [null];
+g_status_timer          = [-1.0];
+
+//-------------------------------------------------------------------------
+// PROGRESS BAR STATUS FUNCTIONS
+//-------------------------------------------------------------------------
+
+//Update the actual progress bar
+function UpdateProgressBarValue(new_status, new_value, new_max)
+{
+    var progress_bar = GetProgressBar();
+    if (progress_bar)
+    {
+        if (new_value != undefined && new_max != undefined)
+        {
+            if (progress_bar.value < 0)
+                g_var_progress_bar = -1;
+            var loading_text = new_status + '[' + (Math.min(1.0, new_value / new_max) * 100.0).toFixed(0) + '%]';
+            //update the progress status
+            progress_bar.max = new_max;
+            progress_bar.value = new_value;
+            g_var_progress_bar = AddTextStatus(loading_text, g_var_progress_bar);
+        }
+        //Load length is not usable
+        else
+        {
+            if (progress_bar.value > 0)
+                g_var_progress_bar = -1;
+            progress_bar.value = -1;
+            g_var_progress_bar = AddTextStatus(new_status, g_var_progress_bar);
+        }
+        //Force Status text update for coherency
+        UpdateTextStatus(0.0);
+    }
+}
+
+//Add text status to the stack
+function GetMaxStatusTime(min_value)
+{
+    var higher_time = (min_value) ? (min_value) : (0.0);
+    for (var i = 0; i < g_status_timer.length; i++)
+        if (g_status_timer[i])
+            higher_time = Math.max(higher_time, g_status_timer[i]);
+}
+
+//Update progress bar status
+function UpdateTextStatus(seconds)
+{
+    var div_progress_status = GetDivProgressStatus();
+    if (div_progress_status)
+    {
+        div_progress_status.innerHTML = '';
+        for (var i = 0; i < g_status_text.length; i++)
+        {
+            if (g_status_timer[i] == undefined || g_status_timer[i] < 0.0)
+            {
+                g_status_timer[i] = -1.0;
+                g_status_text[i] = undefined;
+            }
+            else
+            {
+                g_status_timer[i] -= seconds;
+                div_progress_status.innerHTML += g_status_text[i];
+                //div_progress_status.innerHTML += '[' + g_status_timer[i].toFixed(2) + ']';
+                if (i < g_status_text.length - 1)
+                    div_progress_status.innerHTML += '<br>';
+            }
+        }
+        window.setTimeout("UpdateTextStatus(0.1)", 100);
+    }
+}
+
+//Add text status to the stack
+function AddTextStatus(message, message_id)
+{
+    var msg_timer = 2.0;
+    if (message_id == undefined || message_id < 0)
+    {
+        g_status_text[g_status_text.length] = message;
+        g_status_timer[g_status_timer.length] = GetMaxStatusTime(msg_timer) + 0.5;
+        return g_status_timer.length - 1;
+    }
+    else
+    {
+        g_status_text[message_id] = message;
+        g_status_timer[message_id] = msg_timer;
+        return message_id;
+    }
+}
+
+//Hide Progress Status and empty status texts
+function HideProgressStatus(should_hide)
+{
+    var progress_bar = GetProgressBar();
+    var div_progress = GetDivProgress();
+    if (div_progress && progress_bar)
+    {
+        if (should_hide == true)
+        {
+            div_progress.style.visibility = "hidden";
+            g_status_text.splice(0, g_status_text.length);
+            g_status_timer.splice(0, g_status_timer.length);
+            progress_bar.value = -1;
+            UpdateTextStatus(1.0);
+        }
+        else
+        {
+            div_progress.style.visibility = "visible";
+            progress_bar.value = -1;
+            AddTextStatus('Please wait for module loading');
+            UpdateTextStatus(1.0);
+        }
+    }
+}
+
