native_client_sdk/src/examples/demo/nacl_io_demo/index.html

   1 <!DOCTYPE html>
   2 <html>
   3 <!--
   4 Copyright (c) 2012 The Chromium 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   <meta http-equiv="Pragma" content="no-cache">
  10   <meta http-equiv="Expires" content="-1">
  11   <title>{{title}}</title>
  12   <script type="text/javascript" src="common.js"></script>
  13   <script type="text/javascript" src="example.js"></script>
  14 </head>
  15 <body data-custom-load="true" {{attrs}}>
  16   <h1>{{title}}</h1>
  17   <h2>Status: <code id="statusField">NO-STATUS</code></h2>
  18   <p>
  19     This example shows how you can use standard C library file and socket
  20     operation functions in Native Client using a library called nacl_io.
  21   </p>
  22   <p>
  23     nacl_io provides a virtual filesystem. The filesystem can be "mounted"
  24     in a given directory tree. When you perform operations on files in those
  25     directories, the mount determines how those operations should be performed.
  26   </p>
  27   <p>
  28     This example has four mounts by default.
  29     <ol>
  30       <li><i>/</i> the root of the filesystem. This is a memory mount, and
  31           is non-persistent.</li>
  32       <li><i>/persistent</i> a persistent storage area. Any data written
  33           here can be read back after Chrome is restarted.</li>
  34       <li><i>/http</i> a mount that can read from a URL. Try reading from
  35           /http/index.html.</li>
  36       <li><i>/dev</i> a mount containing some utility files. /dev/null,
  37           /dev/zero, etc.</li>
  38     </ol>
  39   </p>
  40   <p>
  41     nacl_io also provides a (currently incomplete) posix socket api. Like the
  42     virtual filesystem, it is an abstraction layer on top of ppapi. To use this
  43     API, an app must be a packaged app with the appropriate socket permissions
  44     specified in the manifest file.
  45   <hr>
  46   <p><b>File Operations:</b></p>
  47   <div>
  48     <span>
  49       <input type="radio" id="radiofopen" name="group" checked="checked">fopen
  50       <input type="radio" id="radiofclose" name="group">fclose
  51       <input type="radio" id="radiofread" name="group">fread
  52       <input type="radio" id="radiofwrite" name="group">fwrite
  53       <input type="radio" id="radiofseek" name="group">fseek
  54       <input type="radio" id="radiofflush" name="group">fflush
  55       <input type="radio" id="radiostat" name="group">stat
  56     </span>
  57   </div>
  58   <div class="function" id="fopen">
  59     <span>
  60       Filename:
  61       <input type="text" id="fopenFilename">
  62       <select id="fopenMode">
  63         <option value="r">Read Existing (r)</option>
  64         <option value="r+">Read/Write Existing (r+)</option>
  65         <option value="w">Write New File (w)</option>
  66         <option value="w+">Read/Write New File (w+)</option>
  67         <option value="a">Append Write (a)</option>
  68         <option value="w+">Append Read/Write (a+)</option>
  69       </select>
  70       <button>fopen</button>
  71     </span>
  72   </div>
  73   <div class="function" id="fclose" hidden>
  74     <span>
  75       <select class="file-handle" id="fcloseHandle"></select>
  76       <button>fclose</button>
  77     </span>
  78   </div>
  79   <div class="function" id="fread" hidden>
  80     <span>
  81       <select class="file-handle" id="freadHandle"></select>
  82       Count:
  83       <input type="text" id="freadBytes">
  84       <button>fread</button>
  85     </span>
  86   </div>
  87   <div class="function" id="fwrite" hidden>
  88     <span>
  89       <select class="file-handle" id="fwriteHandle"></select>
  90       Data:
  91       <input type="text" id="fwriteData">
  92       <button>fwrite</button>
  93     </span>
  94   </div>
  95   <div class="function" id="fseek" hidden>
  96     <span>
  97       <select class="file-handle" id="fseekHandle"></select>
  98       Offset:
  99       <input type="text" id="fseekOffset">
 100       Whence:
 101       <select id="fseekWhence">
 102         <option value="0">SEEK_SET</option>
 103         <option value="1">SEEK_CUR</option>
 104         <option value="2">SEEK_END</option>
 105       </select>
 106       <button>fseek</button>
 107     </span>
 108   </div>
 109   <div class="function" id="fflush" hidden>
 110     <span>
 111       <select class="file-handle" id="fflushHandle"></select>
 112       <button>fflush</button>
 113     </span>
 114   </div>
 115   <div class="function" id="stat" hidden>
 116     <span>
 117       Filename:
 118       <input type="text" id="statFilename">
 119       <button>stat</button>
 120     </span>
 121   </div>
 122   <hr>
 123   <p><b>Directory Operations:</b></p>
 124   <div>
 125     <span>
 126       <input type="radio" id="radioopendir" name="group">opendir
 127       <input type="radio" id="radioreaddir" name="group">readdir
 128       <input type="radio" id="radioclosedir" name="group">closedir
 129       <input type="radio" id="radiomkdir" name="group">mkdir
 130       <input type="radio" id="radiormdir" name="group">rmdir
 131       <input type="radio" id="radiochdir" name="group">chdir
 132       <input type="radio" id="radiogetcwd" name="group">getcwd
 133     </span>
 134   </div>
 135   <div class="function" id="opendir" hidden>
 136     <span>
 137       Dirname:
 138       <input type="text" id="opendirDirname">
 139       <button>opendir</button>
 140     </span>
 141   </div>
 142   <div class="function" id="readdir" hidden>
 143     <span>
 144       <select class="dir-handle" id="readdirHandle"></select>
 145       <button>readdir</button>
 146     </span>
 147   </div>
 148   <div class="function" id="closedir" hidden>
 149     <span>
 150       <select class="dir-handle" id="closedirHandle"></select>
 151       <button>closedir</button>
 152     </span>
 153   </div>
 154   <div class="function" id="mkdir" hidden>
 155     <span>
 156       Dirname:
 157       <input type="text" id="mkdirDirname">
 158       Mode (in octal):
 159       <input type="text" id="mkdirMode" value="0644">
 160       <button>mkdir</button>
 161     </span>
 162   </div>
 163   <div class="function" id="rmdir" hidden>
 164     <span>
 165       Dirname:
 166       <input type="text" id="rmdirDirname">
 167       <button>rmdir</button>
 168     </span>
 169   </div>
 170   <div class="function" id="chdir" hidden>
 171     <span>
 172       Dirname:
 173       <input type="text" id="chdirDirname">
 174       <button>chdir</button>
 175     </span>
 176   </div>
 177   <div class="function" id="getcwd" hidden>
 178     <span>
 179       <button>getcwd</button>
 180     </span>
 181   </div>
 182   <hr>
 183   <p><b>Socket Operations:</b></p>
 184   <div>
 185     <span>
 186       <input type="radio" id="radiogethostbyname" name="group">gethostbyname
 187       <input type="radio" id="radiogetaddrinfo" name="group">getaddrinfo
 188       <input type="radio" id="radioconnect" name="group">connect
 189       <input type="radio" id="radiosend" name="group">send
 190       <input type="radio" id="radiorecv" name="group">recv
 191       <input type="radio" id="radioclose" name="group">close
 192     </span>
 193   </div>
 194   <div class="function" id="gethostbyname" hidden>
 195     <span>
 196       Hostname:
 197       <input type="text" id="gethostbynameName" value="google.com">
 198       <button>gethostbyname</button>
 199     </span>
 200   </div>
 201   <div class="function" id="getaddrinfo" hidden>
 202     <span>
 203       Hostname:
 204       <input type="text" id="getaddrinfoName" value="google.com">
 205       <select id="getaddrinfoFamily">
 206         <option>AF_INET</option>
 207         <option>AF_INET6</option>
 208         <option>AF_UNSPEC</option>
 209       </select>
 210       <button>getaddrinfo</button>
 211     </span>
 212   </div>
 213   <div class="function" id="connect" hidden>
 214     <span>
 215       Host:
 216       <input type="text" id="connectHost" value="google.com">
 217       Port:
 218       <input type="text" id="connectPort" value="80">
 219       <button>connect</button>
 220     </span>
 221   </div>
 222   <div class="function" id="send" hidden>
 223     <span>
 224       <select class="sock-handle" id="sendHandle"></select>
 225       Message:
 226       <input type="text" id="sendMessage" value="Hello!">
 227       <button>send</button>
 228     </span>
 229   </div>
 230   <div class="function" id="recv" hidden>
 231     <span>
 232       <select class="sock-handle" id="recvHandle"></select>
 233       Buffer Size:
 234       <input type="text" id="recvBufferSize" value="256">
 235       <button>recv</button>
 236     </span>
 237   </div>
 238   <div class="function" id="close" hidden>
 239     <span>
 240       <select class="sock-handle" id="closeHandle"></select>
 241       <button>close</button>
 242     </span>
 243   </div>
 244   <hr>
 245   <p><b>JavaScript Pipe Operations:</b></p>
 246   <p>Type input while the focus is on this box the send input to the pipe
 247   device:
 248   <select id="pipe_name">
 249     <option>jspipe1</option>
 250     <option>jspipe2</option>
 251     <option>jspipe3</option>
 252   </select>
 253   <input type="text" id="pipe_input_box"></p>
 254   <p>Any output from the pipe will be printed below: <textarea id="pipe_output"></textarea></p>
 255   <hr>
 256   <p><b>Log:</b></p>
 257   <pre id="log" style="font-weight: bold"></pre>
 258   <!-- The NaCl plugin will be embedded inside the element with id "listener".
 259       See common.js.-->
 260   <div id="listener"></div>
 261 </body>
 262 </html>