Browse Source

Platform: docs for multiple applications

pull/482/head
Pablo Escobar 6 years ago committed by Vladimír Vondruš
parent
commit
cc238237fc
  1. 58
      doc/platforms-html5.dox

58
doc/platforms-html5.dox

@ -294,6 +294,64 @@ if(CORRADE_TARGET_EMSCRIPTEN)
endif()
@endcode
@section platforms-html5-multiple-apps Multiple applications on one page
@note Support for this feature is currently only tested with
@ref Platform::EmscriptenApplication. @ref Platform::Sdl2Application
and @ref Platform::GlfwApplication support largely depends on Emscripten's
underlying emulation libraries and may vary across Emscripten versions.
Running multiple graphical applications on a single page is possible, but
requires a few changes. By default, Emscripten populates a global @cb{.js} Module @ce
object with things like callbacks and the canvas element to render into. This is not
suitable when using more than one application. Emscripten's `MODULARIZE` option
creates a script that defines a function with a local @cb{.js} Module @ce object
instead. This way each application runs inside its own function with a separate
environment:
@code{.cmake}
target_link_libraries(my-application PRIVATE "-s MODULARIZE -s EXPORT_NAME=createModule")
@endcode
Instead of running instantly, the application can then be instantiated
using the function name set with `EXPORT_NAME`. The function optionally
takes an object to populate the local @cb{.js} Module @ce.
While `EmscriptenApplication.js` populates the @cb{.js} Module @ce object by default,
it also defines a function @cb{.js} createMagnumModule @ce that lets you create
new module objects to pass to the Emscripten module function. This allows you
to include `EmscriptenApplication.js` only once per page without having to bundle it with
Emscripten's `--pre-js` option. To override the default values, pass an object to
@cb{.js} createMagnumModule @ce. This is the easiest way to set the canvas or
status elements of each application:
@code{.html-jinja}
<script src="EmscriptenApplication.js"></script>
<script src="{{ application }}.js"></script>
<script>
const myModule = createMagnumModule({
canvas: document.getElementById('my-canvas'),
status: document.getElementById('my-status'),
statusDescription: document.getElementById('my-status-description')
});
createModule(myModule).then(function(myModule) {
// application loaded and running
});
</script>
@endcode
If you need to make changes to the @cb{.js} Module @ce object created by
EmscriptenApplication.js, you can add that code to a file that's loaded
with `--pre-js` right after `EmscriptenApplication.js`. This is usually
needed for pointing to elements with custom IDs, like the canvas to
render into or the elements to display status updates:
@code{.js}
Module.canvas = document.getElementById('my-canvas');
Module.status = document.getElementById('my-status');
Module.statusDescription = document.getElementById('my-status-description');
@endcode
@section platforms-html5-layout Modifying page style, canvas size and aspect ratio
The `WebApplication.css` file contains a basic style and the additional

Loading…
Cancel
Save