From 106921ac990b8466c01412b7214fdb5cb78294d6 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Vladim=C3=ADr=20Vondru=C5=A1?= Date: Fri, 5 Jul 2013 22:20:27 +0200 Subject: [PATCH] Platform: improve magnum-info in NaCl, add reusable JS and CSS files. The page now displays download progress, last error and also hints to the user that JS console might contain something useful. NaClApplication and WindowlessNaClApplication documentation has been updated with brief "bootstrap guide". --- src/Platform/CMakeLists.txt | 5 ++ src/Platform/NaClApplication.css | 51 +++++++++++++++++++ src/Platform/NaClApplication.h | 49 +++++++++++++++++-- src/Platform/NaClApplication.js | 43 ++++++++++++++++ src/Platform/WindowlessNaClApplication.h | 9 ++-- src/Platform/magnum-info-nacl.html | 62 ++---------------------- 6 files changed, 154 insertions(+), 65 deletions(-) create mode 100644 src/Platform/NaClApplication.css create mode 100644 src/Platform/NaClApplication.js diff --git a/src/Platform/CMakeLists.txt b/src/Platform/CMakeLists.txt index 43f072490..5ff61f660 100644 --- a/src/Platform/CMakeLists.txt +++ b/src/Platform/CMakeLists.txt @@ -84,6 +84,11 @@ if(WITH_WINDOWLESSNACLAPPLICATION) install(TARGETS MagnumWindowlessNaClApplication DESTINATION ${MAGNUM_LIBRARY_INSTALL_DIR}) endif() +# JavaScript stuff for NaCl +if(WITH_NACLAPPLICATION OR WITH_WINDOWLESSNACLAPPLICATION) + install(FILES NaClApplication.js DESTINATION ${MAGNUM_DATA_INSTALL_DIR}) +endif() + # GLX application if(WITH_GLXAPPLICATION) set(NEED_ABSTRACTXAPPLICATION 1) diff --git a/src/Platform/NaClApplication.css b/src/Platform/NaClApplication.css new file mode 100644 index 000000000..a2abf2c85 --- /dev/null +++ b/src/Platform/NaClApplication.css @@ -0,0 +1,51 @@ +body { + margin: 0px; + padding: 0px; + font-family: sans-serif; + background-color: #111111; + color: #aaaaaa; +} + +h1 { + text-align: center; + font-size: 20px; +} + +#listener { + border-style: solid; + border-color: #333333; + border-width: 1px; + padding: 1px; + width: 640px; + height: 480px; + margin-left: auto; + margin-right: auto; + margin-top: 20px; + margin-bottom: 20px; + position: relative; +} + +#module { + width: 640px; + height: 480px; + z-index: 10; +} + +#status { + position: absolute; + width: 640px; + text-align: center; + top: 200px; + font-size: 30px; + font-weight: bold; + z-index: 9; +} + +#statusDescription { + position: absolute; + width: 640px; + text-align: center; + top: 250px; + font-size: 15px; + z-index: 9; +} diff --git a/src/Platform/NaClApplication.h b/src/Platform/NaClApplication.h index e1a04d654..75b65d68c 100644 --- a/src/Platform/NaClApplication.h +++ b/src/Platform/NaClApplication.h @@ -73,12 +73,53 @@ to simplify porting. @section NaClApplication-html HTML markup and NMF file -You need to provide HTML markup containing `<embed>` pointing to `*.nmf` -file describing the application. +You need to provide HTML markup for your application. Template one is below, +you can modify it to your liking. The markup references two files, +`NaClApplication.js` and `NaClApplication.css`, both are in `Platform/` +directory in the source tree and are also installed into `share/magnum/` inside +your NaCl toolchain. +@code + + + +Magnum NaCl Application + + + +

Magnum NaCl Application

+
+ + +
Initialization...
+
+
+ + +@endcode + +You can modify all the files to your liking, but the HTML file must contain at +least the `<embed>` enclosed in listener `<div>`. The JavaScript +file contains event listeners which print loading status on the page. The +status displayed in the remaining two `<div>`s, if they are available. +The CSS file contains rudimentary style to avoid eye bleeding. + +The `<embed>` file references NMF file which you need to provide too. If +you target @ref CORRADE_TARGET_NACL_NEWLIB_ "newlib", the file is pretty +simple, for example: +@code +{ + "program": { + "x86-32": {"url": "application-x86-32.nexe"}, + "x86-64": {"url": "application-x86-64.nexe"} + } +} +@endcode -@todoc Document this better, add "bootstrap" examples +If you target @ref CORRADE_TARGET_NACL_GLIBC_ "glibc", you need to specify also +all additional dependencies. See [Native Client](https://developers.google.com/native-client/) +documentation for more information. -@subsection NaClApplication-html-console Redirecting output to Chrome's JavaScript console +@section NaClApplication-console Redirecting output to Chrome's JavaScript console The application redirects @ref Corrade::Utility::Debug "Debug", @ref Corrade::Utility::Warning "Warning" and @ref Corrade::Utility::Error "Error" diff --git a/src/Platform/NaClApplication.js b/src/Platform/NaClApplication.js new file mode 100644 index 000000000..50bbe023a --- /dev/null +++ b/src/Platform/NaClApplication.js @@ -0,0 +1,43 @@ +function setStatus(message) { + var status = document.getElementById('status'); + if(status) status.innerHTML = message; +} + +function setStatusDescription(message) { + var statusDescription = document.getElementById('statusDescription'); + if(statusDescription) statusDescription.innerHTML = message; +} + +var listener = document.getElementById('listener'); + +listener.addEventListener('loadstart', function() { + setStatus('Loading...'); +}, true); + +listener.addEventListener('progress', function(event) { + setStatus('Downloading...'); + + /* Show progress */ + if(event.lengthComputable && event.total > 0) + setStatusDescription(Math.round(event.loaded*100/event.total) + '% of ' + + Math.round(event.total/1024) + ' kB'); + + /* Unknown total size */ + else setStatusDescription(Math.round(event.loaded/1024) + ' kB'); + +}, true); + +listener.addEventListener('error', function() { + setStatus('Loading failed'); + setStatusDescription(document.getElementById('module').lastError + '
Check JavaScript console for more information.'); +}, true); + +listener.addEventListener('abort', function() { + setStatus('Loading aborted'); + setStatusDescription(''); +}, true); + +listener.addEventListener('load', function() { + setStatus(''); + setStatusDescription(''); +}, true); diff --git a/src/Platform/WindowlessNaClApplication.h b/src/Platform/WindowlessNaClApplication.h index d0f4ebb19..54de3ea05 100644 --- a/src/Platform/WindowlessNaClApplication.h +++ b/src/Platform/WindowlessNaClApplication.h @@ -71,11 +71,12 @@ If no other application header is included this class is also aliased to @section WindowlessNaClApplication-html HTML markup and NMF file You need to provide HTML markup containing `<embed>` pointing to `*.nmf` -file describing the application. +file describing the application. See @ref NaClApplication for more information. +You may want to hide the `<embed>` (for example using CSS +`visibility: hidden;`), as it probably won't display anything to default +framebuffer. -@todoc Document this better, add "bootstrap" examples - -@subsection WindowlessNaClApplication-html-console Redirecting output to Chrome's JavaScript console +@section WindowlessNaClApplication-console Redirecting output to Chrome's JavaScript console The application redirects @ref Corrade::Utility::Debug "Debug", @ref Corrade::Utility::Warning "Warning" and @ref Corrade::Utility::Error "Error" diff --git a/src/Platform/magnum-info-nacl.html b/src/Platform/magnum-info-nacl.html index f12bcf996..4a3af2251 100644 --- a/src/Platform/magnum-info-nacl.html +++ b/src/Platform/magnum-info-nacl.html @@ -2,37 +2,10 @@ Magnum Info + - +

Magnum Info

+
Initialization...
+