tests/manual_wasm_instantiate.html - external/github.com/kripken/emscripten - Git at Google

 <!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; background-color: black; }

       .spinner {
         height: 50px;
         width: 50px;
         margin: 0px auto;
         -webkit-animation: rotation .8s linear infinite;
         -moz-animation: rotation .8s linear infinite;
         -o-animation: rotation .8s linear infinite;
         animation: rotation 0.8s linear infinite;
         border-left: 10px solid rgb(0,150,240);
         border-right: 10px solid rgb(0,150,240);
         border-bottom: 10px solid rgb(0,150,240);
         border-top: 10px solid rgb(100,0,200);
         border-radius: 100%;
         background-color: rgb(200,100,250);
       }
       @-webkit-keyframes rotation {
         from {-webkit-transform: rotate(0deg);}
         to {-webkit-transform: rotate(360deg);}
       }
       @-moz-keyframes rotation {
         from {-moz-transform: rotate(0deg);}
         to {-moz-transform: rotate(360deg);}
       }
       @-o-keyframes rotation {
         from {-o-transform: rotate(0deg);}
         to {-o-transform: rotate(360deg);}
       }
       @keyframes rotation {
         from {transform: rotate(0deg);}
         to {transform: rotate(360deg);}
       }

     </style>
   </head>
   <body>
     <hr/>
     <figure style="overflow:visible;" id="spinner"><div class="spinner"></div><center style="margin-top:0.5em"><strong>emscripten</strong></center></figure>
     <div class="emscripten" id="status">Downloading...</div>
     <div class="emscripten">
       <progress value="0" max="100" id="progress" hidden=1></progress>
     </div>
     <div class="emscripten_border">
       <canvas class="emscripten" id="canvas" oncontextmenu="event.preventDefault()"></canvas>
     </div>
     <hr/>
     <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)">
     </div>

     <hr/>
     <textarea class="emscripten" id="output" rows="8"></textarea>
     <hr>
     <script type='text/javascript'>
       var statusElement = document.getElementById('status');
       var progressElement = document.getElementById('progress');
       var spinnerElement = document.getElementById('spinner');

       var Module = {
         preRun: [],
         postRun: [],
         print: (function() {
           var element = document.getElementById('output');
           if (element) element.value = ''; // clear browser cache
           return function(text) {
             if (arguments.length > 1) 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');
             console.log(text);
             if (element) {
               element.value += text + "\n";
               element.scrollTop = element.scrollHeight; // focus on bottom
             }
           };
         })(),
         printErr: function(text) {
           if (arguments.length > 1) 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.error(text);
           }
         },
         canvas: (function() {
           var canvas = document.getElementById('canvas');

           // As a default initial behavior, pop up an alert when webgl context is lost. To make your
           // application robust, you may want to override this behavior before shipping!
           // See http://www.khronos.org/registry/webgl/specs/latest/1.0/#5.15.2
           canvas.addEventListener("webglcontextlost", function(e) { alert('WebGL context lost. You will need to reload the page.'); e.preventDefault(); }, false);

           return canvas;
         })(),
         setStatus: function(text) {
           if (!Module.setStatus.last) Module.setStatus.last = { time: Date.now(), text: '' };
           if (text === Module.setStatus.text) return;
           var m = text.match(/([^(]+)\((\d+(\.\d+)?)\/(\d+)\)/);
           var now = Date.now();
           if (m && now - Date.now() < 30) return; // if this is a progress update, skip it if too soon
           if (m) {
             text = m[1];
             progressElement.value = parseInt(m[2])*100;
             progressElement.max = parseInt(m[4])*100;
             progressElement.hidden = false;
             spinnerElement.hidden = false;
           } else {
             progressElement.value = null;
             progressElement.max = null;
             progressElement.hidden = true;
             if (!text) spinnerElement.hidden = true;
           }
           statusElement.innerHTML = text;
         },
         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...');
       window.onerror = function() {
         Module.setStatus('Exception thrown, see JavaScript console');
         spinnerElement.style.display = 'none';
         Module.setStatus = function(text) {
           if (text) Module.printErr('[post-exception status] ' + text);
         };
       };

       function downloadWasm(url) {
         return new Promise(function(resolve, reject) {
           var wasmXHR = new XMLHttpRequest();
           wasmXHR.open('GET', url, true);
           wasmXHR.responseType = 'arraybuffer';
           wasmXHR.onload = function() { resolve(wasmXHR.response); }
           wasmXHR.onerror = function() { reject('error '  + wasmXHR.status); }
           wasmXHR.send(null);
         });
       }

       var wasm = downloadWasm('manual_wasm_instantiate.wasm');

       // Module.instantiateWasm is a user-implemented callback which the Emscripten runtime calls to perform
       // the WebAssembly instantiation action. The callback function will be called with two parameters, imports
       // and successCallback. imports is a JS object which contains all the function imports that need to be passed
       // to the Module when instantiating, and once instantiated, the function should call successCallback() with
       // the WebAssembly Instance object.
       // The instantiation can be performed either synchronously or asynchronously. The return value of this function
       // should contain the exports object of the instantiated Module, or an empty dictionary object {} if the
       // instantiation is performed asynchronously, or false if instantiation failed.
       Module.instantiateWasm = function(imports, successCallback) {
         console.log('instantiateWasm: instantiating asynchronously');
         wasm.then(function(wasmBinary) {
           console.log('wasm download finished, begin instantiating');
           var wasmInstantiate = WebAssembly.instantiate(new Uint8Array(wasmBinary), imports).then(function(output) {
             console.log('wasm instantiation succeeded');
             Module.testWasmInstantiationSucceeded = 1;
             successCallback(output.instance);
           }).catch(function(e) {
             console.log('wasm instantiation failed! ' + e);
           });
         });
         return {}; // Compiling asynchronously, no exports.
       }

       var script = document.createElement('script');
       script.src = "manual_wasm_instantiate.js";
       document.body.appendChild(script);
 </script>
   </body>
 </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; background-color: black; }

	.spinner {
	height: 50px;
	width: 50px;
	margin: 0px auto;
	-webkit-animation: rotation .8s linear infinite;
	-moz-animation: rotation .8s linear infinite;
	-o-animation: rotation .8s linear infinite;
	animation: rotation 0.8s linear infinite;
	border-left: 10px solid rgb(0,150,240);
	border-right: 10px solid rgb(0,150,240);
	border-bottom: 10px solid rgb(0,150,240);
	border-top: 10px solid rgb(100,0,200);
	border-radius: 100%;
	background-color: rgb(200,100,250);
	}
	@-webkit-keyframes rotation {
	from {-webkit-transform: rotate(0deg);}
	to {-webkit-transform: rotate(360deg);}
	}
	@-moz-keyframes rotation {
	from {-moz-transform: rotate(0deg);}
	to {-moz-transform: rotate(360deg);}
	}
	@-o-keyframes rotation {
	from {-o-transform: rotate(0deg);}
	to {-o-transform: rotate(360deg);}
	}
	@keyframes rotation {
	from {transform: rotate(0deg);}
	to {transform: rotate(360deg);}
	}

	</style>
	</head>
	<body>
	<hr/>
	<figure style="overflow:visible;" id="spinner"><div class="spinner"></div><center style="margin-top:0.5em"><strong>emscripten</strong></center></figure>
	<div class="emscripten" id="status">Downloading...</div>
	<div class="emscripten">
	<progress value="0" max="100" id="progress" hidden=1></progress>
	</div>
	<div class="emscripten_border">
	<canvas class="emscripten" id="canvas" oncontextmenu="event.preventDefault()"></canvas>
	</div>
	<hr/>
	<div class="emscripten">
	<input type="checkbox" id="resize">Resize canvas
	<input type="checkbox" id="pointerLock" checked>Lock/hide mouse pointer

	<input type="button" value="Fullscreen" onclick="Module.requestFullscreen(document.getElementById('pointerLock').checked,
	document.getElementById('resize').checked)">
	</div>

	<hr/>
	<textarea class="emscripten" id="output" rows="8"></textarea>
	<hr>
	<script type='text/javascript'>
	var statusElement = document.getElementById('status');
	var progressElement = document.getElementById('progress');
	var spinnerElement = document.getElementById('spinner');

	var Module = {
	preRun: [],
	postRun: [],
	print: (function() {
	var element = document.getElementById('output');
	if (element) element.value = ''; // clear browser cache
	return function(text) {
	if (arguments.length > 1) text = Array.prototype.slice.call(arguments).join(' ');
	// These replacements are necessary if you render to raw HTML
	//text = text.replace(/&/g, "&");
	//text = text.replace(/</g, "<");
	//text = text.replace(/>/g, ">");
	//text = text.replace('\n', '<br>', 'g');
	console.log(text);
	if (element) {
	element.value += text + "\n";
	element.scrollTop = element.scrollHeight; // focus on bottom
	}
	};
	})(),
	printErr: function(text) {
	if (arguments.length > 1) 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.error(text);
	}
	},
	canvas: (function() {
	var canvas = document.getElementById('canvas');

	// As a default initial behavior, pop up an alert when webgl context is lost. To make your
	// application robust, you may want to override this behavior before shipping!
	// See http://www.khronos.org/registry/webgl/specs/latest/1.0/#5.15.2
	canvas.addEventListener("webglcontextlost", function(e) { alert('WebGL context lost. You will need to reload the page.'); e.preventDefault(); }, false);

	return canvas;
	})(),
	setStatus: function(text) {
	if (!Module.setStatus.last) Module.setStatus.last = { time: Date.now(), text: '' };
	if (text === Module.setStatus.text) return;
	var m = text.match(/([^(]+)\((\d+(\.\d+)?)\/(\d+)\)/);
	var now = Date.now();
	if (m && now - Date.now() < 30) return; // if this is a progress update, skip it if too soon
	if (m) {
	text = m[1];
	progressElement.value = parseInt(m[2])*100;
	progressElement.max = parseInt(m[4])*100;
	progressElement.hidden = false;
	spinnerElement.hidden = false;
	} else {
	progressElement.value = null;
	progressElement.max = null;
	progressElement.hidden = true;
	if (!text) spinnerElement.hidden = true;
	}
	statusElement.innerHTML = text;
	},
	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...');
	window.onerror = function() {
	Module.setStatus('Exception thrown, see JavaScript console');
	spinnerElement.style.display = 'none';
	Module.setStatus = function(text) {
	if (text) Module.printErr('[post-exception status] ' + text);
	};
	};

	function downloadWasm(url) {
	return new Promise(function(resolve, reject) {
	var wasmXHR = new XMLHttpRequest();
	wasmXHR.open('GET', url, true);
	wasmXHR.responseType = 'arraybuffer';
	wasmXHR.onload = function() { resolve(wasmXHR.response); }
	wasmXHR.onerror = function() { reject('error ' + wasmXHR.status); }
	wasmXHR.send(null);
	});
	}

	var wasm = downloadWasm('manual_wasm_instantiate.wasm');

	// Module.instantiateWasm is a user-implemented callback which the Emscripten runtime calls to perform
	// the WebAssembly instantiation action. The callback function will be called with two parameters, imports
	// and successCallback. imports is a JS object which contains all the function imports that need to be passed
	// to the Module when instantiating, and once instantiated, the function should call successCallback() with
	// the WebAssembly Instance object.
	// The instantiation can be performed either synchronously or asynchronously. The return value of this function
	// should contain the exports object of the instantiated Module, or an empty dictionary object {} if the
	// instantiation is performed asynchronously, or false if instantiation failed.
	Module.instantiateWasm = function(imports, successCallback) {
	console.log('instantiateWasm: instantiating asynchronously');
	wasm.then(function(wasmBinary) {
	console.log('wasm download finished, begin instantiating');
	var wasmInstantiate = WebAssembly.instantiate(new Uint8Array(wasmBinary), imports).then(function(output) {
	console.log('wasm instantiation succeeded');
	Module.testWasmInstantiationSucceeded = 1;
	successCallback(output.instance);
	}).catch(function(e) {
	console.log('wasm instantiation failed! ' + e);
	});
	});
	return {}; // Compiling asynchronously, no exports.
	}

	var script = document.createElement('script');
	script.src = "manual_wasm_instantiate.js";
	document.body.appendChild(script);
	</script>
	</body>
	</html>