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

 <!--
   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.
 -->

 <!DOCTYPE html PUBLIC
     "-//W3C//DTD XHTML 1.0 Transitional//EN"
     "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 <html xmlns="http://www.w3.org/1999/xhtml">
 <head>
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 <style type="text/css">
 dt {
   font-weight: bold;
 }
 dd {
   margin-bottom: 12pt;
   width: 800px;
 }
 </style>
 <link href="http://code.google.com/css/codesite.css" rel="stylesheet"
  type="text/css" />
 <title>Native Client Examples</title>
 </head>
 <body>
 <h1>Native Client Examples</h1>
 <dd><p>This page lists all of the examples available in the most recent Native
  Client SDK bundle. Each example is designed to teach a few specific Native
  Client programming concepts.  You will need to setup the build environment
  including a path to 'make' which can be found in the 'tools' directory for
  Windows, and the variable NACL_SDK_ROOT which points to one of the pepper
  bundles found under the SDK install location.  Calling make from the examples
  directory will build all the projects, while calling make from and individual
  example directory will build only that example.
  </p>
 </dd>
 <h3>Using the Tools</h3>
 <dd><p>The following "hello_world" examples, show the basic outline of a Native
 Client application.  The make files in each of the examples bellow show a
 simple way to build a NaCl application using
 <a href="http://www.gnu.org/software/make/manual/make.html">GNU Make</a>.
 See the link for further information.
 </p></dd>
 <dl>
   <dt><a href="hello_world_newlib/hello_world.html">
   Hello World (NEWLIB)</a></dt>
   <dd>The Hello World In C example demonstrates the basic structure of all
   Native Client applications. This example loads a Native Client module.  The
   page tracks the status of the module as it load.  On a successful load, the
   module will post a message containing the string "Hello World" back to
   JavaScript which will display it as an alert.
     <p>Teaching focus: Basic HTML, JavaScript, and module architecture.</p>
   </dd>
   <dt><a href="hello_world_glibc/hello_world.html">
   Hello World (GLIBC)</a></dt>
   <dd>The Hello World (GLIBC) example is identical to the one above, with the
   exception that it used the GLIBC toolchain which uses Shared Objects. The use
   of Shared Objects means a more complicated manifest file (NMF) which is needed
   to allow the application to find the libraries.  The NMF is automatically
   generated as part of the build process, by scanning the application for
   dependencies.
     <p>Teaching focus: Basic HTML, JavaScript, Shared Objects, and module
     architecture.</p>
   </dd>
   <dt><a href="hello_world_interactive/hello_world.html">
   Interactive Hello World in C++</a></dt>
   <dd>The Interactive Hello World C++ example demonstrates the basic structure
   of all Native Client applications. This example loads a Native Client module
   which uses two way interaction with JavaScript whenever a button is clicked.
   The NaCl module will respond with the number 42 or the reversed version of the
   string in the text box when the appropriate button is clicked.
   <p>Teaching focus: Basic HTML, JavaScript, C++ PPAPI, and module
     architecture; Messaging API.</p>
   </dd>

 <h3>Common APIs</h3>
 <dd><p>The following set of examples illustrate various Pepper APIs including
 audio, 2D, 3D, input and urls.</p></dd>
 <dt><a href="sine_synth/sine_synth.html">Sine Wave Synthesizer</a></dt>
   <dd>  The Sine Wave Synthesizer example demonstrates playing sound (a sine
   wave).  Enter the desired frequency and hit play to start, stop to end. The
   frequency box will display "Loading, please wait." while the module loads.
     <p>Teaching focus: Audio.</p>
   </dd>
 <dt><a href="input_events/input_events.html">Input Events</a></dt>
   <dd>  The Input Events example demonstrates how to handle events triggered by
   the user. This example allows a user to interact with a square representing a
   module instance. Events are displayed on the screen as the user clicks,
   scrolls, types, inside or outside of the square.

     <p>Teaching focus: Keyboard and mouse input, view change, and focus events.</p>
   </dd>
  <dt><a href="pi_generator/pi_generator.html">Pi Generator</a></dt>
   <dd>	The Pi Generator example demonstrates creating a helper thread that
   estimate pi using the Monte Carlo method while randomly putting 1,000,000,000
   points inside a 2D square that shares two sides with a quarter circle.

 		<p>Teaching focus: Thread creation, 2D graphics, view change events.</p>
   </dd>
   <dt><a href="tumbler/tumbler.html">Tumbler</a></dt>
   <dd>  The Tumbler example demonstrates how to create a 3D cube that you can
   rotate with your mouse while pressing the left mouse button. This example
   creates a 3D context and draws to it using OpenGL ES. The JavaScript
   implements a virtual trackball interface to map mouse movements into 3D
   rotations using simple 3D vector math and quaternions.

     <p>Teaching focus: 3D graphics</p>
   </dd>
   <dt><a href="geturl/geturl.html">Get URL</a></dt>
   <dd>  The Get URL example demonstrates fetching an URL and then displaying
   its contents.

     <p>Teaching focus: URL loading.</p>
   </dd>

 <h3>Common Concepts</h3>
 <dd><p>The following set of examples illustrate various common concepts such as
 showing load progress, using Shared Objects (dynamic libraries),
 mulithreading...</p></dd>
 <dt><a href="dlopen/dlopen.html">Dynamic Library Open (GLIBC)</a></dt>
   <dd>  The dlopen example demonstrates how build dynamic libraries and then
   open and use them at runtime.  When the page loads, type in a question and
   hit enter or click the ASK! button.  The question and answer will be
   displayed in the page under the text entry box.
     <p>Teaching focus: Using shared objects.</p>
   </dd>
 <dt><a href="load_progress/load_progress.html">Load Progress</a></dt>
   <dd>  The Load Progress example demonstrates how to listen for and handle
   events that occur while a NaCl module loads.  This example listens for
   different load event types and dispatches different events to their
   respective handler. This example also checks for valid browser version and
   shows how to calculate and display loading progress.

     <p>Teaching focus: Progress event handling.</p>
   </dd>
 <dt><a href="pong/pong.html">Pong</a></dt>
   <dd>	The Pong example demonstrates how to create a basic 2D video game and
   how to store application information in a local persistent file. This game
   uses up and down arrow keyboard input events to move the paddle.

     <p>Teaching focus: File I/O, 2D graphics, input events.</p>
   </dd>
   <dt><a href="multithreaded_input_events/mt_input_events.html">Multi-threaded
   Input Events</a></dt>
   <dd>The Multithreaded Input Events example combines HTML, Javascript,
     and C++ (the C++ is compiled to create a .nexe file).
     The C++ shows how to handle input events in a multi-threaded application.
     The main thread converts input events to non-pepper events and puts them on
     a queue. The worker thread pulls them off of the queue, converts them to a
     string, and then uses CallOnMainThread so that PostMessage can be send the
     result of the worker thread to the browser.
     <p>Teaching focus: Multithreaded event handling.</p>
   </dd>
   <dt><a href="fullscreen_tumbler/fullscreen_tumbler.html">Full-screen
   Tumbler</a></dt>
   <dd>This is a modified version of the Tumbler example above that supports
       full-screen display. It is in every way identical to Tumbler in
       functionality, except that it adds the ability to switch to/from
       full-screen display by pressing the Enter key.
    <p>Teaching focus: Full-screen</p>
   </dd>
   <dt><a href="mouselock/mouselock.html">Mouse Lock</a></dt>
   <dd>	The Mouselock example demonstrates how to use the MouseLock API to hide
   the mouse cursor.  Mouse lock is only available in full-screen mode.  You can
   lock and unlock the mouse while in full-screen mode by pressing the Enter key.

     <p>Teaching focus: Mouse lock, Full-screen</p>
   </dd>
   <dt><a href="websocket/websocket.html">Websocket</a></dt>
   <dd>  The Websocket example demonstrates how to use the Websocket API.  The
   user first connects to the test server: ws://html5rocks.websocket.org/echo by
   clicking on the 'Connect'' button.  Then hitting Send' will cause the app to
   send the message to the server and retrieve the reply.
     <p>Teaching focus: Websockets</p>
   </dd>
   <dt><a href="file_histogram/file_histogram.html">Get URL</a></dt>
   <dd>  The File Histogram example demonstrates prompting the user for a file,
   passing the file contents to NativeClient as a VarArrayBuffer, then drawing a
   histogram representing the contents of the file to a 2D square.
     <p>Teaching focus: VarArrayBuffer, 2D, File input.</p>
   </dd>
 </dl>
 </body>
 </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.
	-->

	<!DOCTYPE html PUBLIC
	"-//W3C//DTD XHTML 1.0 Transitional//EN"
	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
	<html xmlns="http://www.w3.org/1999/xhtml">
	<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<style type="text/css">
	dt {
	font-weight: bold;
	}
	dd {
	margin-bottom: 12pt;
	width: 800px;
	}
	</style>
	<link href="http://code.google.com/css/codesite.css" rel="stylesheet"
	type="text/css" />
	<title>Native Client Examples</title>
	</head>
	<body>
	<h1>Native Client Examples</h1>
	<dd><p>This page lists all of the examples available in the most recent Native
	Client SDK bundle. Each example is designed to teach a few specific Native
	Client programming concepts. You will need to setup the build environment
	including a path to 'make' which can be found in the 'tools' directory for
	Windows, and the variable NACL_SDK_ROOT which points to one of the pepper
	bundles found under the SDK install location. Calling make from the examples
	directory will build all the projects, while calling make from and individual
	example directory will build only that example.
	</p>
	</dd>
	<h3>Using the Tools</h3>
	<dd><p>The following "hello_world" examples, show the basic outline of a Native
	Client application. The make files in each of the examples bellow show a
	simple way to build a NaCl application using
	<a href="http://www.gnu.org/software/make/manual/make.html">GNU Make</a>.
	See the link for further information.
	</p></dd>
	<dl>
	<dt><a href="hello_world_newlib/hello_world.html">
	Hello World (NEWLIB)</a></dt>
	<dd>The Hello World In C example demonstrates the basic structure of all
	Native Client applications. This example loads a Native Client module. The
	page tracks the status of the module as it load. On a successful load, the
	module will post a message containing the string "Hello World" back to
	JavaScript which will display it as an alert.
	<p>Teaching focus: Basic HTML, JavaScript, and module architecture.</p>
	</dd>
	<dt><a href="hello_world_glibc/hello_world.html">
	Hello World (GLIBC)</a></dt>
	<dd>The Hello World (GLIBC) example is identical to the one above, with the
	exception that it used the GLIBC toolchain which uses Shared Objects. The use
	of Shared Objects means a more complicated manifest file (NMF) which is needed
	to allow the application to find the libraries. The NMF is automatically
	generated as part of the build process, by scanning the application for
	dependencies.
	<p>Teaching focus: Basic HTML, JavaScript, Shared Objects, and module
	architecture.</p>
	</dd>
	<dt><a href="hello_world_interactive/hello_world.html">
	Interactive Hello World in C++</a></dt>
	<dd>The Interactive Hello World C++ example demonstrates the basic structure
	of all Native Client applications. This example loads a Native Client module
	which uses two way interaction with JavaScript whenever a button is clicked.
	The NaCl module will respond with the number 42 or the reversed version of the
	string in the text box when the appropriate button is clicked.
	<p>Teaching focus: Basic HTML, JavaScript, C++ PPAPI, and module
	architecture; Messaging API.</p>
	</dd>

	<h3>Common APIs</h3>
	<dd><p>The following set of examples illustrate various Pepper APIs including
	audio, 2D, 3D, input and urls.</p></dd>
	<dt><a href="sine_synth/sine_synth.html">Sine Wave Synthesizer</a></dt>
	<dd> The Sine Wave Synthesizer example demonstrates playing sound (a sine
	wave). Enter the desired frequency and hit play to start, stop to end. The
	frequency box will display "Loading, please wait." while the module loads.
	<p>Teaching focus: Audio.</p>
	</dd>
	<dt><a href="input_events/input_events.html">Input Events</a></dt>
	<dd> The Input Events example demonstrates how to handle events triggered by
	the user. This example allows a user to interact with a square representing a
	module instance. Events are displayed on the screen as the user clicks,
	scrolls, types, inside or outside of the square.

	<p>Teaching focus: Keyboard and mouse input, view change, and focus events.</p>
	</dd>
	<dt><a href="pi_generator/pi_generator.html">Pi Generator</a></dt>
	<dd> The Pi Generator example demonstrates creating a helper thread that
	estimate pi using the Monte Carlo method while randomly putting 1,000,000,000
	points inside a 2D square that shares two sides with a quarter circle.

	<p>Teaching focus: Thread creation, 2D graphics, view change events.</p>
	</dd>
	<dt><a href="tumbler/tumbler.html">Tumbler</a></dt>
	<dd> The Tumbler example demonstrates how to create a 3D cube that you can
	rotate with your mouse while pressing the left mouse button. This example
	creates a 3D context and draws to it using OpenGL ES. The JavaScript
	implements a virtual trackball interface to map mouse movements into 3D
	rotations using simple 3D vector math and quaternions.

	<p>Teaching focus: 3D graphics</p>
	</dd>
	<dt><a href="geturl/geturl.html">Get URL</a></dt>
	<dd> The Get URL example demonstrates fetching an URL and then displaying
	its contents.

	<p>Teaching focus: URL loading.</p>
	</dd>

	<h3>Common Concepts</h3>
	<dd><p>The following set of examples illustrate various common concepts such as
	showing load progress, using Shared Objects (dynamic libraries),
	mulithreading...</p></dd>
	<dt><a href="dlopen/dlopen.html">Dynamic Library Open (GLIBC)</a></dt>
	<dd> The dlopen example demonstrates how build dynamic libraries and then
	open and use them at runtime. When the page loads, type in a question and
	hit enter or click the ASK! button. The question and answer will be
	displayed in the page under the text entry box.
	<p>Teaching focus: Using shared objects.</p>
	</dd>
	<dt><a href="load_progress/load_progress.html">Load Progress</a></dt>
	<dd> The Load Progress example demonstrates how to listen for and handle
	events that occur while a NaCl module loads. This example listens for
	different load event types and dispatches different events to their
	respective handler. This example also checks for valid browser version and
	shows how to calculate and display loading progress.

	<p>Teaching focus: Progress event handling.</p>
	</dd>
	<dt><a href="pong/pong.html">Pong</a></dt>
	<dd> The Pong example demonstrates how to create a basic 2D video game and
	how to store application information in a local persistent file. This game
	uses up and down arrow keyboard input events to move the paddle.

	<p>Teaching focus: File I/O, 2D graphics, input events.</p>
	</dd>
	<dt><a href="multithreaded_input_events/mt_input_events.html">Multi-threaded
	Input Events</a></dt>
	<dd>The Multithreaded Input Events example combines HTML, Javascript,
	and C++ (the C++ is compiled to create a .nexe file).
	The C++ shows how to handle input events in a multi-threaded application.
	The main thread converts input events to non-pepper events and puts them on
	a queue. The worker thread pulls them off of the queue, converts them to a
	string, and then uses CallOnMainThread so that PostMessage can be send the
	result of the worker thread to the browser.
	<p>Teaching focus: Multithreaded event handling.</p>
	</dd>
	<dt><a href="fullscreen_tumbler/fullscreen_tumbler.html">Full-screen
	Tumbler</a></dt>
	<dd>This is a modified version of the Tumbler example above that supports
	full-screen display. It is in every way identical to Tumbler in
	functionality, except that it adds the ability to switch to/from
	full-screen display by pressing the Enter key.
	<p>Teaching focus: Full-screen</p>
	</dd>
	<dt><a href="mouselock/mouselock.html">Mouse Lock</a></dt>
	<dd> The Mouselock example demonstrates how to use the MouseLock API to hide
	the mouse cursor. Mouse lock is only available in full-screen mode. You can
	lock and unlock the mouse while in full-screen mode by pressing the Enter key.

	<p>Teaching focus: Mouse lock, Full-screen</p>
	</dd>
	<dt><a href="websocket/websocket.html">Websocket</a></dt>
	<dd> The Websocket example demonstrates how to use the Websocket API. The
	user first connects to the test server: ws://html5rocks.websocket.org/echo by
	clicking on the 'Connect'' button. Then hitting Send' will cause the app to
	send the message to the server and retrieve the reply.
	<p>Teaching focus: Websockets</p>
	</dd>
	<dt><a href="file_histogram/file_histogram.html">Get URL</a></dt>
	<dd> The File Histogram example demonstrates prompting the user for a file,
	passing the file contents to NativeClient as a VarArrayBuffer, then drawing a
	histogram representing the contents of the file to a 2D square.
	<p>Teaching focus: VarArrayBuffer, 2D, File input.</p>
	</dd>
	</dl>
	</body>
	</html>