1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
|
<!--
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>
</dl>
</body>
</html>
|
