ic
/
magnum
mirror of https://github.com/mosra/magnum.git
6
0
Fork 0
Code Issues Projects Releases Wiki Activity
Browse Source

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".
pull/278/head
Vladimír Vondruš 13 years ago
parent
6a52e64d71
commit
106921ac99
6 changed files with 154 additions and 65 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 5
      src/Platform/CMakeLists.txt
  2. 51
      src/Platform/NaClApplication.css
  3. 49
      src/Platform/NaClApplication.h
  4. 43
      src/Platform/NaClApplication.js
  5. 9
      src/Platform/WindowlessNaClApplication.h
  6. 62
      src/Platform/magnum-info-nacl.html

5
src/Platform/CMakeLists.txt
Unescape View File

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

51
src/Platform/NaClApplication.css
Unescape View File

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

49
src/Platform/NaClApplication.h
Unescape View File

@ -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
<!DOCTYPE html>
<html>
<head>
<title>Magnum NaCl Application</title>
<link rel="stylesheet" href="NaClApplication.css" />
</head>
<body>
<h1>Magnum NaCl Application</h1>
<div id="listener">
<script type="text/javascript" src="NaClApplication.js"></script>
<embed name="nacl" id="module" type="application/x-nacl" src="application.nmf" />
<div id="status">Initialization...</div>
<div id="statusDescription"></div>
</div>
</body>
</html>
@endcode
You can modify all the files to your liking, but the HTML file must contain at
least the `&lt;embed&gt;` enclosed in listener `&lt;div&gt;`. The JavaScript
file contains event listeners which print loading status on the page. The
status displayed in the remaining two `&lt;div&gt;`s, if they are available.
The CSS file contains rudimentary style to avoid eye bleeding.
The `&lt;embed&gt;` 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"

43
src/Platform/NaClApplication.js
Unescape View File

@ -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 + '<br />Check JavaScript console for more information.');
}, true);
listener.addEventListener('abort', function() {
setStatus('Loading aborted');
setStatusDescription('');
}, true);
listener.addEventListener('load', function() {
setStatus('');
setStatusDescription('');
}, true);

9
src/Platform/WindowlessNaClApplication.h
Unescape View File

@ -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 `&lt;embed&gt;` pointing to `*.nmf`
file describing the application.
file describing the application. See @ref NaClApplication for more information.
You may want to hide the `&lt;embed&gt;` (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"

62
src/Platform/magnum-info-nacl.html
Unescape View File

@ -2,37 +2,10 @@
<html>
<head>
<title>Magnum Info</title>
<link rel="stylesheet" href="NaClApplication.css" />
<style type="text/css">
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 {
visibility: hidden;
position: absolute;
visibility: hidden; /* The module doesn't display anything */
}
#info {
@ -42,49 +15,24 @@ h1 {
font-family: monospace;
white-space: pre-wrap;
}
#status {
position: absolute;
width: 640px;
text-align: center;
top: 200px;
font-size: 30px;
font-weight: bold;
z-index: 9;
}
</style>
</head>
<body onload="pageLoaded();">
<body>
<h1>Magnum Info</h1>
<div id="listener">
<script type="text/javascript" src="NaClApplication.js"></script>
<script type="text/javascript">
var module = null;
function pageLoaded() {
if(!module) setStatus('Loading...');
}
function moduleLoaded() {
module = document.getElementById('module');
setStatus('');
}
function messageReceived(message) {
var info = document.getElementById('info');
info.innerHTML += message.data;
}
function setStatus(message) {
var status = document.getElementById('status');
if(status) status.innerHTML = message;
}
var listener = document.getElementById('listener');
listener.addEventListener('load', moduleLoaded, true);
listener.addEventListener('message', messageReceived, true);
</script>
<embed name="nacl" id="module" type="application/x-nacl" src="magnum-info.nmf" />
<div id="status">Initialization...</div>
<div id="statusDescription"></div>
<div id="info"></div>
</div>
</body>

Write Preview
Loading…
Cancel
Save