native_client_sdk/src/examples/demo/nacl_io_demo/index.html - chromium/src - Git at Google

 <!DOCTYPE html>
 <html>
 <!--
 Copyright (c) 2012 The Chromium 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>
   <meta http-equiv="Pragma" content="no-cache">
   <meta http-equiv="Expires" content="-1">
   <title>{{title}}</title>
   <script type="text/javascript" src="common.js"></script>
   <script type="text/javascript" src="example.js"></script>
 </head>
 <body data-custom-load="true" {{attrs}}>
   <h1>{{title}}</h1>
   <h2>Status: <code id="statusField">NO-STATUS</code></h2>
   <p>
     This example shows how you can use standard C library file and socket
     operation functions in Native Client using a library called nacl_io.
   </p>
   <p>
     nacl_io provides a virtual filesystem. The filesystem can be "mounted"
     in a given directory tree. When you perform operations on files in those
     directories, the mount determines how those operations should be performed.
   </p>
   <p>
     This example has four mounts by default.
     <ol>
       <li><i>/</i> the root of the filesystem. This is a memory mount, and
           is non-persistent.</li>
       <li><i>/persistent</i> a persistent storage area. Any data written
           here can be read back after Chrome is restarted.</li>
       <li><i>/http</i> a mount that can read from a URL. Try reading from
           /http/index.html.</li>
       <li><i>/dev</i> a mount containing some utility files. /dev/null,
           /dev/zero, etc.</li>
     </ol>
   </p>
   <p>
     nacl_io also provides a (currently incomplete) posix socket api. Like the
     virtual filesystem, it is an abstraction layer on top of ppapi. To use this
     API, an app must be a packaged app with the appropriate socket permissions
     specified in the manifest file.
   <hr>
   <p><b>File Operations:</b></p>
   <div>
     <span>
       <input type="radio" id="radiofopen" name="group" checked="checked">fopen
       <input type="radio" id="radiofclose" name="group">fclose
       <input type="radio" id="radiofread" name="group">fread
       <input type="radio" id="radiofwrite" name="group">fwrite
       <input type="radio" id="radiofseek" name="group">fseek
       <input type="radio" id="radiofflush" name="group">fflush
       <input type="radio" id="radiostat" name="group">stat
     </span>
   </div>
   <div class="function" id="fopen">
     <span>
       Filename:
       <input type="text" id="fopenFilename">
       <select id="fopenMode">
         <option value="r">Read Existing (r)</option>
         <option value="r+">Read/Write Existing (r+)</option>
         <option value="w">Write New File (w)</option>
         <option value="w+">Read/Write New File (w+)</option>
         <option value="a">Append Write (a)</option>
         <option value="w+">Append Read/Write (a+)</option>
       </select>
       <button>fopen</button>
     </span>
   </div>
   <div class="function" id="fclose" hidden>
     <span>
       <select class="file-handle" id="fcloseHandle"></select>
       <button>fclose</button>
     </span>
   </div>
   <div class="function" id="fread" hidden>
     <span>
       <select class="file-handle" id="freadHandle"></select>
       Count:
       <input type="text" id="freadBytes">
       <button>fread</button>
     </span>
   </div>
   <div class="function" id="fwrite" hidden>
     <span>
       <select class="file-handle" id="fwriteHandle"></select>
       Data:
       <input type="text" id="fwriteData">
       <button>fwrite</button>
     </span>
   </div>
   <div class="function" id="fseek" hidden>
     <span>
       <select class="file-handle" id="fseekHandle"></select>
       Offset:
       <input type="text" id="fseekOffset">
       Whence:
       <select id="fseekWhence">
         <option value="0">SEEK_SET</option>
         <option value="1">SEEK_CUR</option>
         <option value="2">SEEK_END</option>
       </select>
       <button>fseek</button>
     </span>
   </div>
   <div class="function" id="fflush" hidden>
     <span>
       <select class="file-handle" id="fflushHandle"></select>
       <button>fflush</button>
     </span>
   </div>
   <div class="function" id="stat" hidden>
     <span>
       Filename:
       <input type="text" id="statFilename">
       <button>stat</button>
     </span>
   </div>
   <hr>
   <p><b>Directory Operations:</b></p>
   <div>
     <span>
       <input type="radio" id="radioopendir" name="group">opendir
       <input type="radio" id="radioreaddir" name="group">readdir
       <input type="radio" id="radioclosedir" name="group">closedir
       <input type="radio" id="radiomkdir" name="group">mkdir
       <input type="radio" id="radiormdir" name="group">rmdir
       <input type="radio" id="radiochdir" name="group">chdir
       <input type="radio" id="radiogetcwd" name="group">getcwd
     </span>
   </div>
   <div class="function" id="opendir" hidden>
     <span>
       Dirname:
       <input type="text" id="opendirDirname">
       <button>opendir</button>
     </span>
   </div>
   <div class="function" id="readdir" hidden>
     <span>
       <select class="dir-handle" id="readdirHandle"></select>
       <button>readdir</button>
     </span>
   </div>
   <div class="function" id="closedir" hidden>
     <span>
       <select class="dir-handle" id="closedirHandle"></select>
       <button>closedir</button>
     </span>
   </div>
   <div class="function" id="mkdir" hidden>
     <span>
       Dirname:
       <input type="text" id="mkdirDirname">
       Mode (in octal):
       <input type="text" id="mkdirMode" value="0644">
       <button>mkdir</button>
     </span>
   </div>
   <div class="function" id="rmdir" hidden>
     <span>
       Dirname:
       <input type="text" id="rmdirDirname">
       <button>rmdir</button>
     </span>
   </div>
   <div class="function" id="chdir" hidden>
     <span>
       Dirname:
       <input type="text" id="chdirDirname">
       <button>chdir</button>
     </span>
   </div>
   <div class="function" id="getcwd" hidden>
     <span>
       <button>getcwd</button>
     </span>
   </div>
   <hr>
   <p><b>Socket Operations:</b></p>
   <div>
     <span>
       <input type="radio" id="radiogethostbyname" name="group">gethostbyname
       <input type="radio" id="radiogetaddrinfo" name="group">getaddrinfo
       <input type="radio" id="radioconnect" name="group">connect
       <input type="radio" id="radiosend" name="group">send
       <input type="radio" id="radiorecv" name="group">recv
       <input type="radio" id="radioclose" name="group">close
     </span>
   </div>
   <div class="function" id="gethostbyname" hidden>
     <span>
       Hostname:
       <input type="text" id="gethostbynameName" value="google.com">
       <button>gethostbyname</button>
     </span>
   </div>
   <div class="function" id="getaddrinfo" hidden>
     <span>
       Hostname:
       <input type="text" id="getaddrinfoName" value="google.com">
       <select id="getaddrinfoFamily">
         <option>AF_INET</option>
         <option>AF_INET6</option>
         <option>AF_UNSPEC</option>
       </select>
       <button>getaddrinfo</button>
     </span>
   </div>
   <div class="function" id="connect" hidden>
     <span>
       Host:
       <input type="text" id="connectHost" value="google.com">
       Port:
       <input type="text" id="connectPort" value="80">
       <button>connect</button>
     </span>
   </div>
   <div class="function" id="send" hidden>
     <span>
       <select class="sock-handle" id="sendHandle"></select>
       Message:
       <input type="text" id="sendMessage" value="Hello!">
       <button>send</button>
     </span>
   </div>
   <div class="function" id="recv" hidden>
     <span>
       <select class="sock-handle" id="recvHandle"></select>
       Buffer Size:
       <input type="text" id="recvBufferSize" value="256">
       <button>recv</button>
     </span>
   </div>
   <div class="function" id="close" hidden>
     <span>
       <select class="sock-handle" id="closeHandle"></select>
       <button>close</button>
     </span>
   </div>
   <hr>
   <p><b>JavaScript Pipe Operations:</b></p>
   <p>Type input while the focus is on this box the send input to the pipe
   device:
   <select id="pipe_name">
     <option>jspipe1</option>
     <option>jspipe2</option>
     <option>jspipe3</option>
   </select>
   <input type="text" id="pipe_input_box"></p>
   <p>Any output from the pipe will be printed below: <textarea id="pipe_output"></textarea></p>
   <hr>
   <p><b>Log:</b></p>
   <pre id="log" style="font-weight: bold"></pre>
   <!-- The NaCl plugin will be embedded inside the element with id "listener".
       See common.js.-->
   <div id="listener"></div>
 </body>
 </html>
	<!DOCTYPE html>
	<html>
	<!--
	Copyright (c) 2012 The Chromium 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>
	<meta http-equiv="Pragma" content="no-cache">
	<meta http-equiv="Expires" content="-1">
	<title>{{title}}</title>
	<script type="text/javascript" src="common.js"></script>
	<script type="text/javascript" src="example.js"></script>
	</head>
	<body data-custom-load="true" {{attrs}}>
	<h1>{{title}}</h1>
	<h2>Status: <code id="statusField">NO-STATUS</code></h2>
	<p>
	This example shows how you can use standard C library file and socket
	operation functions in Native Client using a library called nacl_io.
	</p>
	<p>
	nacl_io provides a virtual filesystem. The filesystem can be "mounted"
	in a given directory tree. When you perform operations on files in those
	directories, the mount determines how those operations should be performed.
	</p>
	<p>
	This example has four mounts by default.
	<ol>
	<li><i>/</i> the root of the filesystem. This is a memory mount, and
	is non-persistent.</li>
	<li><i>/persistent</i> a persistent storage area. Any data written
	here can be read back after Chrome is restarted.</li>
	<li><i>/http</i> a mount that can read from a URL. Try reading from
	/http/index.html.</li>
	<li><i>/dev</i> a mount containing some utility files. /dev/null,
	/dev/zero, etc.</li>
	</ol>
	</p>
	<p>
	nacl_io also provides a (currently incomplete) posix socket api. Like the
	virtual filesystem, it is an abstraction layer on top of ppapi. To use this
	API, an app must be a packaged app with the appropriate socket permissions
	specified in the manifest file.
	<hr>
	<p><b>File Operations:</b></p>
	<div>
	<span>
	<input type="radio" id="radiofopen" name="group" checked="checked">fopen
	<input type="radio" id="radiofclose" name="group">fclose
	<input type="radio" id="radiofread" name="group">fread
	<input type="radio" id="radiofwrite" name="group">fwrite
	<input type="radio" id="radiofseek" name="group">fseek
	<input type="radio" id="radiofflush" name="group">fflush
	<input type="radio" id="radiostat" name="group">stat
	</span>
	</div>
	<div class="function" id="fopen">
	<span>
	Filename:
	<input type="text" id="fopenFilename">
	<select id="fopenMode">
	<option value="r">Read Existing (r)</option>
	<option value="r+">Read/Write Existing (r+)</option>
	<option value="w">Write New File (w)</option>
	<option value="w+">Read/Write New File (w+)</option>
	<option value="a">Append Write (a)</option>
	<option value="w+">Append Read/Write (a+)</option>
	</select>
	<button>fopen</button>
	</span>
	</div>
	<div class="function" id="fclose" hidden>
	<span>
	<select class="file-handle" id="fcloseHandle"></select>
	<button>fclose</button>
	</span>
	</div>
	<div class="function" id="fread" hidden>
	<span>
	<select class="file-handle" id="freadHandle"></select>
	Count:
	<input type="text" id="freadBytes">
	<button>fread</button>
	</span>
	</div>
	<div class="function" id="fwrite" hidden>
	<span>
	<select class="file-handle" id="fwriteHandle"></select>
	Data:
	<input type="text" id="fwriteData">
	<button>fwrite</button>
	</span>
	</div>
	<div class="function" id="fseek" hidden>
	<span>
	<select class="file-handle" id="fseekHandle"></select>
	Offset:
	<input type="text" id="fseekOffset">
	Whence:
	<select id="fseekWhence">
	<option value="0">SEEK_SET</option>
	<option value="1">SEEK_CUR</option>
	<option value="2">SEEK_END</option>
	</select>
	<button>fseek</button>
	</span>
	</div>
	<div class="function" id="fflush" hidden>
	<span>
	<select class="file-handle" id="fflushHandle"></select>
	<button>fflush</button>
	</span>
	</div>
	<div class="function" id="stat" hidden>
	<span>
	Filename:
	<input type="text" id="statFilename">
	<button>stat</button>
	</span>
	</div>
	<hr>
	<p><b>Directory Operations:</b></p>
	<div>
	<span>
	<input type="radio" id="radioopendir" name="group">opendir
	<input type="radio" id="radioreaddir" name="group">readdir
	<input type="radio" id="radioclosedir" name="group">closedir
	<input type="radio" id="radiomkdir" name="group">mkdir
	<input type="radio" id="radiormdir" name="group">rmdir
	<input type="radio" id="radiochdir" name="group">chdir
	<input type="radio" id="radiogetcwd" name="group">getcwd
	</span>
	</div>
	<div class="function" id="opendir" hidden>
	<span>
	Dirname:
	<input type="text" id="opendirDirname">
	<button>opendir</button>
	</span>
	</div>
	<div class="function" id="readdir" hidden>
	<span>
	<select class="dir-handle" id="readdirHandle"></select>
	<button>readdir</button>
	</span>
	</div>
	<div class="function" id="closedir" hidden>
	<span>
	<select class="dir-handle" id="closedirHandle"></select>
	<button>closedir</button>
	</span>
	</div>
	<div class="function" id="mkdir" hidden>
	<span>
	Dirname:
	<input type="text" id="mkdirDirname">
	Mode (in octal):
	<input type="text" id="mkdirMode" value="0644">
	<button>mkdir</button>
	</span>
	</div>
	<div class="function" id="rmdir" hidden>
	<span>
	Dirname:
	<input type="text" id="rmdirDirname">
	<button>rmdir</button>
	</span>
	</div>
	<div class="function" id="chdir" hidden>
	<span>
	Dirname:
	<input type="text" id="chdirDirname">
	<button>chdir</button>
	</span>
	</div>
	<div class="function" id="getcwd" hidden>
	<span>
	<button>getcwd</button>
	</span>
	</div>
	<hr>
	<p><b>Socket Operations:</b></p>
	<div>
	<span>
	<input type="radio" id="radiogethostbyname" name="group">gethostbyname
	<input type="radio" id="radiogetaddrinfo" name="group">getaddrinfo
	<input type="radio" id="radioconnect" name="group">connect
	<input type="radio" id="radiosend" name="group">send
	<input type="radio" id="radiorecv" name="group">recv
	<input type="radio" id="radioclose" name="group">close
	</span>
	</div>
	<div class="function" id="gethostbyname" hidden>
	<span>
	Hostname:
	<input type="text" id="gethostbynameName" value="google.com">
	<button>gethostbyname</button>
	</span>
	</div>
	<div class="function" id="getaddrinfo" hidden>
	<span>
	Hostname:
	<input type="text" id="getaddrinfoName" value="google.com">
	<select id="getaddrinfoFamily">
	<option>AF_INET</option>
	<option>AF_INET6</option>
	<option>AF_UNSPEC</option>
	</select>
	<button>getaddrinfo</button>
	</span>
	</div>
	<div class="function" id="connect" hidden>
	<span>
	Host:
	<input type="text" id="connectHost" value="google.com">
	Port:
	<input type="text" id="connectPort" value="80">
	<button>connect</button>
	</span>
	</div>
	<div class="function" id="send" hidden>
	<span>
	<select class="sock-handle" id="sendHandle"></select>
	Message:
	<input type="text" id="sendMessage" value="Hello!">
	<button>send</button>
	</span>
	</div>
	<div class="function" id="recv" hidden>
	<span>
	<select class="sock-handle" id="recvHandle"></select>
	Buffer Size:
	<input type="text" id="recvBufferSize" value="256">
	<button>recv</button>
	</span>
	</div>
	<div class="function" id="close" hidden>
	<span>
	<select class="sock-handle" id="closeHandle"></select>
	<button>close</button>
	</span>
	</div>
	<hr>
	<p><b>JavaScript Pipe Operations:</b></p>
	<p>Type input while the focus is on this box the send input to the pipe
	device:
	<select id="pipe_name">
	<option>jspipe1</option>
	<option>jspipe2</option>
	<option>jspipe3</option>
	</select>
	<input type="text" id="pipe_input_box"></p>
	<p>Any output from the pipe will be printed below: <textarea id="pipe_output"></textarea></p>
	<hr>
	<p><b>Log:</b></p>
	<pre id="log" style="font-weight: bold"></pre>
	<!-- The NaCl plugin will be embedded inside the element with id "listener".
	See common.js.-->
	<div id="listener"></div>
	</body>
	</html>