qtloader.js / custom html support for webassembly

We provide a standard html file that loads the Qt application, but users may want provide custom html and then use a javascript API to load Qt. We can provided a standard qtloader.js where we implement common tasks such as:

• Display a spinner/loading screen, possibly customizable
• Provide application crash/exit handling (restart or bluescreen)
• Test if WebGL is available (not GPU blacklisted), before downloading the app binary
• Support multi-canvas usage
• Filter standard out/err

Some prototyping has been done at: https://github.com/msorvig/qt-webassembly-examples/tree/master/emscripten_startup

Deployables (typical/minimal example)

Note: There are ways to have emscripten output a .wasm file only (no myapp.js)

• Compile as a side module: "SIDE_MODULE=1". But then you also get no runtime.
• https://github.com/kripken/emscripten/wiki/WebAssembly-Standalone

What does minimal loader HTML and JavaScript look like?

<canvas id="appcanvas"> </canvas>
<script>
    var module = Module(); 
    module.canvas = $("appcanvas")
</script>
{{{ SCRIPT }}} 

emcc will expand {{{ SCRIPT }}} to load the app .js file which contains the emscripten runtime:

<script async type="text/javascript" src="myapp.js"></script>

This approach will also work with Qt. qtloader.js is in other words optional, not required.

qtloader.js API usage example

var config = {
    containerElements: [$("qt-container")];
}
var qtLoader = QtLoader(config);
qtLoader.loadEmscriptenModule(Module);

In this example QtLoader will immediately populate the container element(s) with a placeholder spinner, then start downloading the application binary, and finally replace the spinner with a canvas once the application is running.

Misc

• We should build with and MODULARIZE=1 and EXPORT_NAME to give each application an unique emscripten module name. This allows hosting multiple applications/modules on the same page.