You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 
 
 

208 lines
6.2 KiB

  1. <!DOCTYPE html>
  2. <html>
  3. <!--
  4. Copyright (c) 2012 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. <style type="text/css">
  10. #canvas_loading {
  11. position: relative;
  12. left: -2px;
  13. top: -487px;
  14. z-index: 1;
  15. border:2px solid #c3c3c3;
  16. width:640px;height:480px;
  17. }
  18. #nacl_div {
  19. position: relative;
  20. left: 0px;
  21. top: 0px;
  22. z-index: 0;
  23. }
  24. </style>
  25. <!--
  26. -->
  27. <title>mesh viewer NaCl</title>
  28. <script type="text/javascript">
  29. NaClModule = null; // Global application object.
  30. MeshCodeModule = null;
  31. statusText = 'NO-STATUS';
  32. window.setTimeout("Tick()", 100);
  33. document.getElementById('prout').style.top = 0;
  34. function Tick() {
  35. window.setTimeout("Tick()", 100);
  36. var truc = parseInt(document.getElementById('prout').style.top);
  37. //document.getElementById('prout').style.top = truc + 1 + "px";
  38. var statusField = document.getElementById('tick_field');
  39. if (statusField) {
  40. statusField.innerHTML = truc;
  41. }
  42. }
  43. // Indicate load success.
  44. function moduleDidLoad() {
  45. NaClModule = document.getElementById('ID_NaClModule');
  46. MeshCodeModule = document.getElementById('ID_MeshCode');
  47. //document.getElementById('listener').style.visibility = "visible";
  48. //document.getElementById('canvas_loading').style.display = "none";
  49. //document.getElementById('ID_NaClModule').width = 640;
  50. //document.getElementById('ID_NaClModule').height = 480;
  51. updateStatus('SUCCESS');
  52. }
  53. // The 'message' event handler. This handler is fired when the NaCl module
  54. // posts a message to the browser by calling PPB_Messaging.PostMessage()
  55. // (in C) or pp::Instance.PostMessage() (in C++). This implementation
  56. // simply displays the content of the message in an alert panel.
  57. function handleMessage(message_event) {
  58. alert(message_event.data);
  59. }
  60. // If the page loads before the Native Client module loads, then set the
  61. // status message indicating that the module is still loading. Otherwise,
  62. // do not change the status message.
  63. function pageDidLoad() {
  64. if (NaClModule == null) {
  65. updateStatus('LOADING...');
  66. } else {
  67. // It's possible that the Native Client module onload event fired
  68. // before the page's onload event. In this case, the status message
  69. // will reflect 'SUCCESS', but won't be displayed. This call will
  70. // display the current message.
  71. updateStatus();
  72. }
  73. }
  74. // Set the global status message. If the element with id 'statusField'
  75. // exists, then set its HTML to the status message as well.
  76. // opt_message The message test. If this is null or undefined, then
  77. // attempt to set the element with id 'statusField' to the value of
  78. // |statusText|.
  79. function updateStatus(opt_message) {
  80. if (opt_message)
  81. statusText = opt_message;
  82. var statusField = document.getElementById('status_field');
  83. if (statusField) {
  84. statusField.innerHTML = statusText;
  85. }
  86. }
  87. function SendMeshData()
  88. {
  89. if (NaClModule)
  90. {
  91. NaClModule.postMessage(MeshCodeModule.value);
  92. //NaClModule.postMessage("sc#f8f afcb 1 1 1 0");
  93. alert("Data sent");
  94. }
  95. else
  96. alert("Module not loaded");
  97. }
  98. </script>
  99. </head>
  100. <body onload="pageDidLoad()">
  101. <h1>Native Client Module HelloTutorial</h1>
  102. <p>
  103. <!-- Load the published .nexe. This includes the 'nacl' attribute which
  104. shows how to load multi-architecture modules. Each entry in the "nexes"
  105. object in the .nmf manifest file is a key-value pair: the key is the
  106. instruction set architecture ('x86-32', 'x86-64', etc.); the value is a URL
  107. for the desired NaCl module.
  108. To load the debug versions of your .nexes, set the 'nacl' attribute to the
  109. _dbg.nmf version of the manifest file.
  110. Note: Since this NaCl module does not use any real-estate in the browser,
  111. it's width and height are set to 0.
  112. Note: The <EMBED> element is wrapped inside a <DIV>, which has both a 'load'
  113. and a 'message' event listener attached. This wrapping method is used
  114. instead of attaching the event listeners directly to the <EMBED> element to
  115. ensure that the listeners are active before the NaCl module 'load' event
  116. fires. This also allows you to use PPB_Messaging.PostMessage() (in C) or
  117. pp::Instance.PostMessage() (in C++) from within the initialization code in
  118. your NaCl module.
  119. visibility="hidden"
  120. -->
  121. <div id="listener" >
  122. <script type="text/javascript">
  123. var listener = document.getElementById('listener');
  124. listener.addEventListener('load', moduleDidLoad, true);
  125. listener.addEventListener('message', handleMessage, true);
  126. </script>
  127. <!--
  128. <canvas id="myCanvas" width="640" height="480" style="border:1px solid #c3c3c3;">
  129. Your browser does not support the HTML5 canvas tag.
  130. </canvas>
  131. -->
  132. <!--
  133. <table border="1" cellspacing="0" cellpadding="0" style="width:640px;height:490px">
  134. <tr> <td align="center" style="vertical-align:middle">
  135. </td> </tr>
  136. -->
  137. <div id="nacl_div">
  138. <embed name="nacl_module"
  139. id="ID_NaClModule"
  140. width=770 height=200
  141. src="nacl.nmf"
  142. type="application/x-nacl" />
  143. </div>
  144. <!--
  145. <div id="canvas_loading">
  146. <canvas id="myCanvas" width="640" height="480" visibility="hidden"></canvas>
  147. </div>
  148. -->
  149. <script>
  150. var c=document.getElementById("myCanvas");
  151. var ctx=c.getContext("2d");
  152. ctx.fillStyle="#FF0000";
  153. ctx.fillRect(0,0,640,480);
  154. //ctx.clearRect(10,10,620,460);
  155. ctx.fillStyle="#000000";
  156. ctx.font="30px Arial";
  157. ctx.fillText("LOADING",10,50);
  158. </script>
  159. <!--style="width:640px;height:480px;z-index:1" position:absolute;left:0%;top:0%;
  160. <tr> <td align="center" style="vertical-align:middle">
  161. testestestset
  162. </td> </tr>
  163. </table>
  164. -->
  165. </div>
  166. <div id="prout" style="position:absolute;top:0px">
  167. test
  168. </div>
  169. </p>
  170. <h2>Status</h2>
  171. <div id="bouton">
  172. <textarea id="ID_MeshCode" rows="5" cols="80">
  173. //This is a comment
  174. sc#f8f afcb 1 1 1 0
  175. </textarea>
  176. <button onclick="SendMeshData()">Try Me !</button>
  177. </div>
  178. <div id="status_field">NO-STATUS</div>
  179. <div id="tick_field"></div>
  180. </body>
  181. </html>