-
Hello World (NEWLIB)
- 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.
Teaching focus: Basic HTML, JavaScript, and module architecture.
-
Hello World (GLIBC)
- 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.
Teaching focus: Basic HTML, JavaScript, Shared Objects, and module
architecture.
-
Interactive Hello World in C++
- 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.
Teaching focus: Basic HTML, JavaScript, C++ PPAPI, and module
architecture; Messaging API.
Common APIs
The following set of examples illustrate various Pepper APIs including
audio, 2D, 3D, input and urls.
- Sine Wave Synthesizer
- 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.
Teaching focus: Audio.
- Input Events
- 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.
Teaching focus: Keyboard and mouse input, view change, and focus events.
- Pi Generator
- 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.
Teaching focus: Thread creation, 2D graphics, view change events.
- Tumbler
- 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.
Teaching focus: 3D graphics
- Get URL
- The Get URL example demonstrates fetching an URL and then displaying
its contents.
Teaching focus: URL loading.
Common Concepts
The following set of examples illustrate various common concepts such as
showing load progress, using Shared Objects (dynamic libraries),
mulithreading...
- Dynamic Library Open (GLIBC)
- 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.
Teaching focus: Using shared objects.
- Load Progress
- 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.
Teaching focus: Progress event handling.
- Pong
- 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.
Teaching focus: File I/O, 2D graphics, input events.
- Multi-threaded
Input Events
- 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.
Teaching focus: Multithreaded event handling.
- Full-screen
Tumbler
- 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.
Teaching focus: Full-screen
- Mouse Lock
- 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.
Teaching focus: Mouse lock, Full-screen
- Websocket
- 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.
Teaching focus: Websockets
- Get URL
- 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.
Teaching focus: VarArrayBuffer, 2D, File input.