lolengine
/
lol
mirror of https://github.com/lolengine/lol
1
0
Fork 0
Code Issues 0 Releases 0 Wiki Activity
Browse Source

Transfered progress bar logic in progress_status.js. 

lol_shell.html modified to get necessary basics.
undefined
Benjamin ‘Touky’ Huet Sam Hocevar <sam@hocevar.net> 11 years ago
parent
c60cc0794c
commit
3d8a58a806
5 changed files with 281 additions and 189 deletions
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. +155
    -81
      src/platform/emscripten/lol_shell.html
  2. +4
    -0
      test/meshviewer.vcxproj
  3. +1
    -0
      test/meshviewer_index.html
  4. +5
    -108
      test/nacl_loading.js
  5. +116
    -0
      test/progress_status.js

+ 155
- 81
src/platform/emscripten/lol_shell.html View File

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


+ 4
- 0
test/meshviewer.vcxproj View File

@@ -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>


+ 1
- 0
test/meshviewer_index.html View File

@@ -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");


+ 5
- 108
test/nacl_loading.js View File

@@ -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);
}
}
}


+ 116
- 0
test/progress_status.js View File

@@ -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);
}
}
}


Write Preview
Loading…
Cancel
Save