258 lines
9.1 KiB
HTML
258 lines
9.1 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<!--
|
|
Copyright (c) 2011 The Native Client Authors. All rights reserved.
|
|
Use of this source code is governed by a BSD-style license that can be
|
|
found in the LICENSE file.
|
|
-->
|
|
<head>
|
|
<title>Load Progress Example</title>
|
|
<script type="text/javascript" src="check_browser.js"></script>
|
|
<script type="text/javascript">
|
|
// Check for Native Client support in the browser before the DOM loads.
|
|
var isValidBrowser = false;
|
|
var browserSupportStatus = 0;
|
|
var checker = new browser_version.BrowserChecker(
|
|
14, // Minumum Chrome version.
|
|
navigator["appVersion"],
|
|
navigator["plugins"]);
|
|
checker.checkBrowser();
|
|
|
|
loadProgressModule = null; // Global application object.
|
|
statusText = 'NO-STATUS';
|
|
|
|
isValidBrowser = checker.getIsValidBrowser();
|
|
browserSupportStatus = checker.getBrowserSupportStatus();
|
|
|
|
// Handler that gets called when the NaCl module starts loading. This
|
|
// event is always triggered when an <EMBED> tag has a MIME type of
|
|
// application/x-nacl.
|
|
function moduleDidStartLoad() {
|
|
appendToEventLog('loadstart');
|
|
}
|
|
|
|
// Progress event handler. |event| contains a couple of interesting
|
|
// properties that are used in this example:
|
|
// total The size of the NaCl module in bytes. Note that this value
|
|
// is 0 until |lengthComputable| is true. In particular, this
|
|
// value is 0 for the first 'progress' event.
|
|
// loaded The number of bytes loaded so far.
|
|
// lengthComputable A boolean indicating that the |total| field
|
|
// represents a valid length.
|
|
//
|
|
// event The ProgressEvent that triggered this handler.
|
|
function moduleLoadProgress(event) {
|
|
var loadPercent = 0.0;
|
|
var loadPercentString;
|
|
if (event.lengthComputable && event.total > 0) {
|
|
loadPercent = event.loaded / event.total * 100.0;
|
|
loadPercentString = loadPercent + '%';
|
|
} else {
|
|
// The total length is not yet known.
|
|
loadPercent = -1.0;
|
|
loadPercentString = 'Computing...';
|
|
}
|
|
//appendToEventLog('progress: ' + loadPercentString + ' (' + event.loaded + ' of ' + event.total + ' bytes)');
|
|
updateStatus("Loading module : "+ Math.floor(event.loaded / event.total * 100.0) + "% complete");
|
|
}
|
|
|
|
// Handler that gets called if an error occurred while loading the NaCl
|
|
// module. Note that the event does not carry any meaningful data about
|
|
// the error, you have to check lastError on the <EMBED> element to find
|
|
// out what happened.
|
|
function moduleLoadError() {
|
|
appendToEventLog('error: ' + loadProgressModule.lastError);
|
|
}
|
|
|
|
// Handler that gets called if the NaCl module load is aborted.
|
|
function moduleLoadAbort() {
|
|
appendToEventLog('abort');
|
|
}
|
|
|
|
// When the NaCl module has loaded indicate success.
|
|
function moduleDidLoad() {
|
|
loadProgressModule = document.getElementById('load_progress');
|
|
appendToEventLog('load');
|
|
updateStatus('SUCCESS');
|
|
}
|
|
|
|
function check_dl_status() {
|
|
var module = document.getElementById('load_progress');
|
|
module.postMessage("get_package_status");
|
|
module.postMessage(0);
|
|
};
|
|
|
|
// Handler that gets called when the NaCl module loading has completed.
|
|
// You will always get one of these events, regardless of whether the NaCl
|
|
// module loaded successfully or not. For example, if there is an error
|
|
// during load, you will get an 'error' event and a 'loadend' event. Note
|
|
// that if the NaCl module loads successfully, you will get both a 'load'
|
|
// event and a 'loadend' event.
|
|
function moduleDidEndLoad() {
|
|
appendToEventLog('loadend');
|
|
var lastError = event.target.lastError;
|
|
if (lastError == undefined || lastError.length == 0) {
|
|
lastError = '<none>';
|
|
window.setTimeout(check_dl_status, 1000);
|
|
}
|
|
appendToEventLog('lastError: ' + lastError);
|
|
}
|
|
|
|
|
|
// Handle a message coming from the NaCl module.
|
|
function handleMessage(message_event) {
|
|
var data = message_event.data;
|
|
if (data == "loaded") {
|
|
updateStatus("Data Loaded!");
|
|
} else if (data == "none") {
|
|
// nothing
|
|
updateStatus("Downloading package: connecting");
|
|
window.setTimeout(check_dl_status, 1000);
|
|
} else {
|
|
updateStatus("Downloading package: " + data + " bytes");
|
|
window.setTimeout(check_dl_status, 1000);
|
|
};
|
|
}
|
|
|
|
// Set the global status message. Updates the 'status_field' element with
|
|
// the new text.
|
|
// opt_message The message text. If this is null or undefined, then
|
|
// attempt to set the element with id 'status_field' to the value of
|
|
// |statusText|.
|
|
function updateStatus(opt_message) {
|
|
if (opt_message)
|
|
statusText = opt_message;
|
|
var statusField = document.getElementById('status_field');
|
|
if (statusField) {
|
|
statusField.innerHTML = statusText;
|
|
}
|
|
}
|
|
|
|
// Append an event name to the 'event_log_field' element. Event names
|
|
// are separated by a <br> tag so they get listed one per line.
|
|
// logMessage The message to append to the log.
|
|
function appendToEventLog(logMessage) {
|
|
var eventLogField = document.getElementById('event_log_field');
|
|
if (eventLogField.innerHTML.length == 0) {
|
|
eventLogField.innerHTML = logMessage;
|
|
} else {
|
|
eventLogField.innerHTML = eventLogField.innerHTML +
|
|
'<br />' +
|
|
logMessage;
|
|
}
|
|
}
|
|
|
|
</script>
|
|
</head>
|
|
<body bgcolor=#000000>
|
|
|
|
<font color=#FFFFFF>
|
|
|
|
<h1>Native Client Load Event Example</h1>
|
|
|
|
<h2>Status</h2>
|
|
<div id="status_field">NO-STATUS</div>
|
|
|
|
<div id="listener">
|
|
<script type="text/javascript">
|
|
var listener = document.getElementById('listener');
|
|
listener.addEventListener('loadstart', moduleDidStartLoad, true);
|
|
listener.addEventListener('progress', moduleLoadProgress, true);
|
|
listener.addEventListener('error', moduleLoadError, true);
|
|
listener.addEventListener('abort', moduleLoadAbort, true);
|
|
listener.addEventListener('load', moduleDidLoad, true);
|
|
listener.addEventListener('loadend', moduleDidEndLoad, true);
|
|
listener.addEventListener('message', handleMessage, true);
|
|
|
|
switch (browserSupportStatus) {
|
|
case browser_version.BrowserChecker.StatusValues.NACL_ENABLED:
|
|
appendToEventLog('Native Client plugin enabled.');
|
|
break;
|
|
case browser_version.BrowserChecker.StatusValues.UNKNOWN_BROWSER:
|
|
updateStatus('UNKNOWN BROWSER');
|
|
break;
|
|
case browser_version.BrowserChecker.StatusValues.CHROME_VERSION_TOO_OLD:
|
|
appendToEventLog(
|
|
'Chrome too old: You must use Chrome version 14 or later.');
|
|
updateStatus('NEED CHROME 14 OR LATER');
|
|
break;
|
|
case browser_version.BrowserChecker.StatusValues.NACL_NOT_ENABLED:
|
|
appendToEventLog(
|
|
'NaCl disabled: Native Client is not enabled.<br>' +
|
|
'Please go to <b>chrome://plugins</b> and enable Native Client ' +
|
|
'plugin.');
|
|
updateStatus('NaCl NOT ENABLED');
|
|
break;
|
|
case browser_version.BrowserChecker.StatusValues.NOT_USING_SERVER:
|
|
appendToEventLog(
|
|
'file: URL detected, please use a web server to host Native ' +
|
|
'Client applications.');
|
|
updateStatus('NaCl NOT ENABLED');
|
|
default:
|
|
appendToEventLog('Unknown error: Unable to detect browser and/or ' +
|
|
'Native Client support.');
|
|
updateStatus('UNKNOWN ERROR');
|
|
break;
|
|
}
|
|
</script>
|
|
|
|
<!-- Load the published .nexe. This includes the 'src' attribute which
|
|
shows how to load multi-architecture modules. Each entry in the "nexes"
|
|
object in the .nmf manifest file is a key-value pair: the key is the runtime
|
|
('x86-32', 'x86-64', etc.); the value is a URL for the desired NaCl module.
|
|
To load the debug versions of your .nexes, set the 'src' attribute to the
|
|
_dbg.nmf version of the manifest file.
|
|
|
|
Note: The <EMBED> element is wrapped inside a <DIV>, which has both a 'load'
|
|
and a 'message' event listener attached. This wrapping method is used
|
|
instead of attaching the event listeners directly to the <EMBED> element to
|
|
ensure that the listeners are active before the NaCl module 'load' event
|
|
fires. This also allows you to use PPB_Messaging.PostMessage() (in C) or
|
|
pp::Instance.PostMessage() (in C++) from within the initialization code in
|
|
your NaCl module.
|
|
-->
|
|
<embed name="nacl_module"
|
|
id="load_progress"
|
|
width=1024 height=600
|
|
src="godot_nacl.nmf"
|
|
type="application/x-nacl"
|
|
package="data.pcz"
|
|
arg1="-path" arg2="."
|
|
no_arg1="-test" no_arg2="gui" />
|
|
|
|
<script type="text/javascript">
|
|
loadProgressModule = document.getElementById('load_progress');
|
|
// Futher diagnose NaCl loading.
|
|
if (loadProgressModule == null ||
|
|
typeof loadProgressModule.readyState == 'undefined') {
|
|
switch (browserSupportStatus) {
|
|
case browser_version.BrowserChecker.StatusValues.NACL_ENABLED:
|
|
// The NaCl plugin is enabled and running, it's likely that the flag
|
|
// isn't set.
|
|
appendToEventLog(
|
|
'NaCl flag disabled: The Native Client flag is not enabled.<br>' +
|
|
'Please go to <b>chrome://flags</b> enable Native Client and ' +
|
|
'relaunch your browser. See also: ' +
|
|
'<a href="http://code.google.com/chrome/nativeclient/docs/' +
|
|
'running.html">Running Web Applications that Use Native Client' +
|
|
'</a>');
|
|
updateStatus('NaCl NOT ENABLED');
|
|
break;
|
|
case browser_version.BrowserChecker.StatusValues.UNKNOWN_BROWSER:
|
|
appendToEventLog('Native Client applications are not supported by ' +
|
|
'this browser.');
|
|
break;
|
|
default:
|
|
appendToEventLog('Unknown error when loading Native Client ' +
|
|
'application.');
|
|
}
|
|
}
|
|
</script>
|
|
</div>
|
|
|
|
<h2>Event Log</h2>
|
|
<div id="event_log_field">event log?</div>
|
|
|
|
</body>
|
|
</html>
|
|
|