index.html 9.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259
  1. <!DOCTYPE html>
  2. <html>
  3. <!--
  4. Copyright (c) 2011 The Native Client Authors. All rights reserved.
  5. Use of this source code is governed by a BSD-style license that can be
  6. found in the LICENSE file.
  7. -->
  8. <head>
  9. <title>Load Progress Example</title>
  10. <script type="text/javascript" src="check_browser.js"></script>
  11. <script type="text/javascript">
  12. // Check for Native Client support in the browser before the DOM loads.
  13. var isValidBrowser = false;
  14. var browserSupportStatus = 0;
  15. var checker = new browser_version.BrowserChecker(
  16. 14, // Minumum Chrome version.
  17. navigator["appVersion"],
  18. navigator["plugins"]);
  19. checker.checkBrowser();
  20. loadProgressModule = null; // Global application object.
  21. statusText = 'NO-STATUS';
  22. isValidBrowser = checker.getIsValidBrowser();
  23. browserSupportStatus = checker.getBrowserSupportStatus();
  24. // Handler that gets called when the NaCl module starts loading. This
  25. // event is always triggered when an <EMBED> tag has a MIME type of
  26. // application/x-nacl.
  27. function moduleDidStartLoad() {
  28. appendToEventLog('loadstart');
  29. }
  30. // Progress event handler. |event| contains a couple of interesting
  31. // properties that are used in this example:
  32. // total The size of the NaCl module in bytes. Note that this value
  33. // is 0 until |lengthComputable| is true. In particular, this
  34. // value is 0 for the first 'progress' event.
  35. // loaded The number of bytes loaded so far.
  36. // lengthComputable A boolean indicating that the |total| field
  37. // represents a valid length.
  38. //
  39. // event The ProgressEvent that triggered this handler.
  40. function moduleLoadProgress(event) {
  41. var loadPercent = 0.0;
  42. var loadPercentString;
  43. if (event.lengthComputable && event.total > 0) {
  44. loadPercent = event.loaded / event.total * 100.0;
  45. loadPercentString = loadPercent + '%';
  46. } else {
  47. // The total length is not yet known.
  48. loadPercent = -1.0;
  49. loadPercentString = 'Computing...';
  50. }
  51. //appendToEventLog('progress: ' + loadPercentString + ' (' + event.loaded + ' of ' + event.total + ' bytes)');
  52. updateStatus("Loading module : "+ Math.floor(event.loaded / event.total * 100.0) + "% complete");
  53. }
  54. // Handler that gets called if an error occurred while loading the NaCl
  55. // module. Note that the event does not carry any meaningful data about
  56. // the error, you have to check lastError on the <EMBED> element to find
  57. // out what happened.
  58. function moduleLoadError() {
  59. appendToEventLog('error: ' + loadProgressModule.lastError);
  60. }
  61. // Handler that gets called if the NaCl module load is aborted.
  62. function moduleLoadAbort() {
  63. appendToEventLog('abort');
  64. }
  65. // When the NaCl module has loaded indicate success.
  66. function moduleDidLoad() {
  67. loadProgressModule = document.getElementById('load_progress');
  68. appendToEventLog('load');
  69. updateStatus('SUCCESS');
  70. }
  71. function check_dl_status() {
  72. var module = document.getElementById('load_progress');
  73. module.postMessage("get_package_status");
  74. module.postMessage(0);
  75. };
  76. // Handler that gets called when the NaCl module loading has completed.
  77. // You will always get one of these events, regardless of whether the NaCl
  78. // module loaded successfully or not. For example, if there is an error
  79. // during load, you will get an 'error' event and a 'loadend' event. Note
  80. // that if the NaCl module loads successfully, you will get both a 'load'
  81. // event and a 'loadend' event.
  82. function moduleDidEndLoad() {
  83. appendToEventLog('loadend');
  84. var lastError = event.target.lastError;
  85. if (lastError == undefined || lastError.length == 0) {
  86. lastError = '&lt;none&gt;';
  87. window.setTimeout(check_dl_status, 1000);
  88. }
  89. appendToEventLog('lastError: ' + lastError);
  90. }
  91. // Handle a message coming from the NaCl module.
  92. function handleMessage(message_event) {
  93. var data = message_event.data;
  94. if (data == "loaded") {
  95. updateStatus("Data Loaded!");
  96. } else if (data == "none") {
  97. // nothing
  98. updateStatus("Downloading package: connecting");
  99. window.setTimeout(check_dl_status, 1000);
  100. } else {
  101. updateStatus("Downloading package: " + data + " bytes");
  102. window.setTimeout(check_dl_status, 1000);
  103. };
  104. }
  105. // Set the global status message. Updates the 'status_field' element with
  106. // the new text.
  107. // opt_message The message text. If this is null or undefined, then
  108. // attempt to set the element with id 'status_field' to the value of
  109. // |statusText|.
  110. function updateStatus(opt_message) {
  111. if (opt_message)
  112. statusText = opt_message;
  113. var statusField = document.getElementById('status_field');
  114. if (statusField) {
  115. statusField.innerHTML = statusText;
  116. }
  117. }
  118. // Append an event name to the 'event_log_field' element. Event names
  119. // are separated by a <br> tag so they get listed one per line.
  120. // logMessage The message to append to the log.
  121. function appendToEventLog(logMessage) {
  122. var eventLogField = document.getElementById('event_log_field');
  123. if (eventLogField.innerHTML.length == 0) {
  124. eventLogField.innerHTML = logMessage;
  125. } else {
  126. eventLogField.innerHTML = eventLogField.innerHTML +
  127. '<br />' +
  128. logMessage;
  129. }
  130. }
  131. </script>
  132. </head>
  133. <body bgcolor=#000000>
  134. <font color=#FFFFFF>
  135. <h1>Native Client Load Event Example</h1>
  136. <h2>Status</h2>
  137. <div id="status_field">NO-STATUS</div>
  138. <div id="listener">
  139. <script type="text/javascript">
  140. var listener = document.getElementById('listener');
  141. listener.addEventListener('loadstart', moduleDidStartLoad, true);
  142. listener.addEventListener('progress', moduleLoadProgress, true);
  143. listener.addEventListener('error', moduleLoadError, true);
  144. listener.addEventListener('abort', moduleLoadAbort, true);
  145. listener.addEventListener('load', moduleDidLoad, true);
  146. listener.addEventListener('loadend', moduleDidEndLoad, true);
  147. listener.addEventListener('message', handleMessage, true);
  148. switch (browserSupportStatus) {
  149. case browser_version.BrowserChecker.StatusValues.NACL_ENABLED:
  150. appendToEventLog('Native Client plugin enabled.');
  151. break;
  152. case browser_version.BrowserChecker.StatusValues.UNKNOWN_BROWSER:
  153. updateStatus('UNKNOWN BROWSER');
  154. break;
  155. case browser_version.BrowserChecker.StatusValues.CHROME_VERSION_TOO_OLD:
  156. appendToEventLog(
  157. 'Chrome too old: You must use Chrome version 14 or later.');
  158. updateStatus('NEED CHROME 14 OR LATER');
  159. break;
  160. case browser_version.BrowserChecker.StatusValues.NACL_NOT_ENABLED:
  161. appendToEventLog(
  162. 'NaCl disabled: Native Client is not enabled.<br>' +
  163. 'Please go to <b>chrome://plugins</b> and enable Native Client ' +
  164. 'plugin.');
  165. updateStatus('NaCl NOT ENABLED');
  166. break;
  167. case browser_version.BrowserChecker.StatusValues.NOT_USING_SERVER:
  168. appendToEventLog(
  169. 'file: URL detected, please use a web server to host Native ' +
  170. 'Client applications.');
  171. updateStatus('NaCl NOT ENABLED');
  172. default:
  173. appendToEventLog('Unknown error: Unable to detect browser and/or ' +
  174. 'Native Client support.');
  175. updateStatus('UNKNOWN ERROR');
  176. break;
  177. }
  178. </script>
  179. <!-- Load the published .nexe. This includes the 'src' attribute which
  180. shows how to load multi-architecture modules. Each entry in the "nexes"
  181. object in the .nmf manifest file is a key-value pair: the key is the runtime
  182. ('x86-32', 'x86-64', etc.); the value is a URL for the desired NaCl module.
  183. To load the debug versions of your .nexes, set the 'src' attribute to the
  184. _dbg.nmf version of the manifest file.
  185. Note: The <EMBED> element is wrapped inside a <DIV>, which has both a 'load'
  186. and a 'message' event listener attached. This wrapping method is used
  187. instead of attaching the event listeners directly to the <EMBED> element to
  188. ensure that the listeners are active before the NaCl module 'load' event
  189. fires. This also allows you to use PPB_Messaging.PostMessage() (in C) or
  190. pp::Instance.PostMessage() (in C++) from within the initialization code in
  191. your NaCl module.
  192. -->
  193. <embed name="nacl_module"
  194. id="load_progress"
  195. width=1024 height=600
  196. src="godot_nacl.nmf"
  197. type="application/x-nacl"
  198. package="data.pcz"
  199. arg1="-path" arg2="."
  200. no_arg1="-test" no_arg2="gui" />
  201. <script type="text/javascript">
  202. loadProgressModule = document.getElementById('load_progress');
  203. // Futher diagnose NaCl loading.
  204. if (loadProgressModule == null ||
  205. typeof loadProgressModule.readyState == 'undefined') {
  206. switch (browserSupportStatus) {
  207. case browser_version.BrowserChecker.StatusValues.NACL_ENABLED:
  208. // The NaCl plugin is enabled and running, it's likely that the flag
  209. // isn't set.
  210. appendToEventLog(
  211. 'NaCl flag disabled: The Native Client flag is not enabled.<br>' +
  212. 'Please go to <b>chrome://flags</b> enable Native Client and ' +
  213. 'relaunch your browser. See also: ' +
  214. '<a href="http://code.google.com/chrome/nativeclient/docs/' +
  215. 'running.html">Running Web Applications that Use Native Client' +
  216. '</a>');
  217. updateStatus('NaCl NOT ENABLED');
  218. break;
  219. case browser_version.BrowserChecker.StatusValues.UNKNOWN_BROWSER:
  220. appendToEventLog('Native Client applications are not supported by ' +
  221. 'this browser.');
  222. break;
  223. default:
  224. appendToEventLog('Unknown error when loading Native Client ' +
  225. 'application.');
  226. }
  227. }
  228. </script>
  229. </div>
  230. <h2>Event Log</h2>
  231. <div id="event_log_field">event log?</div>
  232. </body>
  233. </html>