diff options
Diffstat (limited to 'platform/nacl/html/index.html')
| -rw-r--r-- | platform/nacl/html/index.html | 258 |
1 files changed, 258 insertions, 0 deletions
diff --git a/platform/nacl/html/index.html b/platform/nacl/html/index.html new file mode 100644 index 0000000000..e8be6f69b9 --- /dev/null +++ b/platform/nacl/html/index.html @@ -0,0 +1,258 @@ +<!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> + |