diff options
| author | Brad Nelson <bradnelson@google.com> | 2014-11-14 15:58:32 -0800 |
|---|---|---|
| committer | Brad Nelson <bradnelson@google.com> | 2014-11-14 23:59:13 +0000 |
| commit | 3ec1799a199d75eda8bfe2040252df4e05e10735 (patch) | |
| tree | 41d325324071333a653fef824c6d609b6426b148 /native_client_sdk | |
| parent | 5ac9402d1f2354eccb5affd8b5672d8ce84a941e (diff) | |
| download | chromium_src-3ec1799a199d75eda8bfe2040252df4e05e10735.zip chromium_src-3ec1799a199d75eda8bfe2040252df4e05e10735.tar.gz chromium_src-3ec1799a199d75eda8bfe2040252df4e05e10735.tar.bz2 | |
Adding two codelabs for cds2014.
Adding two codelabs:
* PNaCl web devenv used to deploy a pnacl python app.
* devenv chrome app used to learn ppapi graphics 2d.
BUG=None
TEST=local + manual
R=binji@chromium.org
Review URL: https://codereview.chromium.org/731453002
Cr-Commit-Position: refs/heads/master@{#304304}
Diffstat (limited to 'native_client_sdk')
26 files changed, 1407 insertions, 178 deletions
diff --git a/native_client_sdk/doc_generated/_static/pygments.css b/native_client_sdk/doc_generated/_static/pygments.css index 1a14f2a..d79caa1 100644 --- a/native_client_sdk/doc_generated/_static/pygments.css +++ b/native_client_sdk/doc_generated/_static/pygments.css @@ -13,11 +13,11 @@ .highlight .gr { color: #FF0000 } /* Generic.Error */ .highlight .gh { color: #000080; font-weight: bold } /* Generic.Heading */ .highlight .gi { color: #00A000 } /* Generic.Inserted */ -.highlight .go { color: #303030 } /* Generic.Output */ +.highlight .go { color: #333333 } /* Generic.Output */ .highlight .gp { color: #c65d09; font-weight: bold } /* Generic.Prompt */ .highlight .gs { font-weight: bold } /* Generic.Strong */ .highlight .gu { color: #800080; font-weight: bold } /* Generic.Subheading */ -.highlight .gt { color: #0040D0 } /* Generic.Traceback */ +.highlight .gt { color: #0044DD } /* Generic.Traceback */ .highlight .kc { color: #007020; font-weight: bold } /* Keyword.Constant */ .highlight .kd { color: #007020; font-weight: bold } /* Keyword.Declaration */ .highlight .kn { color: #007020; font-weight: bold } /* Keyword.Namespace */ diff --git a/native_client_sdk/doc_generated/cds2014/cpp.html b/native_client_sdk/doc_generated/cds2014/cpp.html new file mode 100644 index 0000000..761972e --- /dev/null +++ b/native_client_sdk/doc_generated/cds2014/cpp.html @@ -0,0 +1,272 @@ +{{+bindTo:partials.standard_nacl_article}} + +<section id="a-saga-of-fire-and-water-codelab"> +<span id="cds2014-cpp"></span><h1 id="a-saga-of-fire-and-water-codelab"><span id="cds2014-cpp"></span>A Saga of Fire and Water - Codelab</h1> +<h2 id="introduction">Introduction</h2> +<p>Learn the basics of using PPAPI to do 2D graphics from +a C++ program running in Native Client. +Modify our sample to turn fire into water. +Develop inside Google Chrome, using our NaCl Development Environment +Chrome App. +While this codelab currently targets conventional Native Client using our +GCC + GlibC based toolchain, the techniques involved are generally +applicable.</p> +<dl class="docutils"> +<dt>Requirements:</dt> +<dd><ul class="first last small-gap"> +<li>An x86 (sorry no arm) Desktop / Laptop +Windows, Mac, Linux, or ChromeOS browser +<br/><span id="cpp_compat" style="color: #cccc00" + >Checking browser compatibility...</span><br/> +<i id="cpp_compat2"></i> +<script> +var tag = document.getElementById('cpp_compat'); +var tag2 = document.getElementById('cpp_compat2'); +if (!('application/x-nacl' in navigator.mimeTypes)) { + tag.innerHTML = + 'This codelab does not appear to be supported by your browser.'; + tag.style.color = '#cc0000'; + tag2.innerHTML = + 'You do not appear to be running a browser such as ' + + 'Google Chrome which supports Native Client ' + + 'or you have disabled Native Client.'; +} else if (navigator.userAgent.search(' arm') >= 0) { + tag.innerHTML = + 'This codelab does not appear to be supported by your browser.'; + tag.style.color = '#cc0000'; + tag2.innerHTML = + 'You appear to be running on an ARM based CPU. ' + + 'While Native Client does support ARM, ' + + "our developer environment's GCC + GlibC based toolchain " + + 'does not, at this time. Sorry.'; +} else { + tag.innerHTML = 'This codelab appears to be supported by your browser.'; + tag.style.color = '#00cc00'; +} +</script></li> +<li>A fast broadband connection (500MB download)</li> +<li>Can read and write C++</li> +</ul> +</dd> +</dl> +<h2 id="setup">Setup</h2> +<p>For this codelab, you will need to install the our +Beta NaCl Dev Environment App in your web browser.</p> +<a href="https://chrome.google.com/webstore/detail/nacl-development-environm/aljpgkjeipgnmdpikaajmnepbcfkglfa" +target="_blank">Click here to install the environment.</a><p>You will need to click “Install” to add the NaCl Dev Environment +to your browser.</p> +<p>NOTE: This environment will leave a substantial (800MB) payload in your +browser. See the cleanup section below to learn how to recover this space.</p> +<p>Once the installation is complete, run the app.</p> +<p>On the first run, it will download several packages. +Once download is complete you should see a bash prompt:</p> +<pre class="prettyprint"> +bash.nmf-4.3$ +</pre> +<h3 id="our-web-based-tools">Our Web-based Tools</h3> +<p>These development tools are a <a class="reference external" href="nacldev">work in progress</a>. +At this point, they are a learning tool and demonstration of NaCl’s +flexibility, but are not the recommended tools for a production application. +In the future, that may change, but for the moment, +to develop a substantial application for Native Client / +Portable Native Client, +we recommend you use the +<a class="reference external" href="/native-client/sdk/download">Native Client SDK</a>.</p> +<b><font color="#880000"> +NOTE: The NaCl Development Environment is not yet stable. +Ideally user data is preserved, but currently it can be lost during updates +or sporadically. We're working to resolve this. +</font></b><h3 id="navigating-in-the-dev-environment">Navigating in the Dev Environment</h3> +<p>The NaCl Dev Environment behaves like a mini-UNIX system. +You start-up in bash command prompt. +Standard UNIX commands like cd, ls, mkdir, rm, rmdir, etc. +can be used to navigate and modify the Dev Environment’s +virtual filesystem.</p> +<p>There are 3 locations mounted by the environment:</p> +<blockquote> +<div><ul class="small-gap"> +<li>/tmp mounts the HTML5 Filesystem temporary storage area.</li> +<li>/mnt/html5 mounts the HTML5 Filesystem persistent storage area.</li> +<li>Your home directory ~/, located in /home/user, +mounts a portion of the HTML5 Filsystem persistent storage area +that corresponds to the /mnt/html5/home directory.</li> +</ul> +</div></blockquote> +<h3 id="clipboard">Clipboard</h3> +<p>Many of the steps in this tutorial will be easier to copy and paste +into the Dev Environment. +To copy and paste in the Dev Environment App, +you will need to use the keyboard.</p> +<p>On your platform use:</p> +<blockquote> +<div><ul class="small-gap"> +<li><span id="copy_key">Loading...</span> +<script> +var tag = document.getElementById('copy_key'); +if (navigator.appVersion.indexOf('Mac') >= 0) { + tag.innerHTML = '⌘-C'; +} else { + tag.innerHTML = 'Ctrl-Shift-C'; +} +</script> to Copy</li> +<li><span id="paste_key">Loading...</span> +<script> +var tag = document.getElementById('paste_key'); +if (navigator.appVersion.indexOf('Mac') >= 0) { + tag.innerHTML = '⌘-V'; +} else { + tag.innerHTML = 'Ctrl-Shift-V'; +} +</script> to Paste</li> +</ul> +</div></blockquote> +<h4 id="editing">Editing</h4> +<p>To follow along in this codelab, you’ll need to use a text editor to modify +various files in our development environment. +There are currently two editor options, nano or vim. +We have an Emacs port, but it is not yet available in the Dev Environment +(coming soon). +If you’re unsure what to pick, nano is simpler to start with and has on-screen +help.</p> +<ul class="small-gap"> +<li><p class="first">You can open <strong>nano</strong> like this:</p> +<pre class="prettyprint"> +$ nano <filename> +</pre> +<p>Here’s an online <a class="reference external" href="http://mintaka.sdsu.edu/reu/nano.html">nano tutorial</a>.</p> +</li> +<li><p class="first">You can open <strong>vim</strong> like this:</p> +<pre class="prettyprint"> +$ vim <filename> +</pre> +<p>Here’s an online <a class="reference external" href="http://www.openvim.com/tutorial.html">vim tutorial</a>.</p> +</li> +</ul> +<h3 id="git-setup">Git Setup</h3> +<p>This tutorial also uses a revision control program called +<a class="reference external" href="http://en.wikipedia.org/wiki/Git_(software)">git</a>. +In order to commit to a git repository, +you need to setup your environment to with your identity.</p> +<p>Run these commands (with your info) to setup your <cite>~/.gitconfig</cite> +for use:</p> +<pre class="prettyprint"> +git config --global user.name "John Doe" +git config --global user.email johndoe@example.com +</pre> +<h2 id="get-the-code">Get the Code!</h2> +<p>Rather than start from nothing, for this codelab we’ve provided +you with a zip file containing a starting point.</p> +<p>Download the codelab:</p> +<pre class="prettyprint"> +curl http://nacltools.storage.googleapis.com/cds2014/cds2014_cpp.zip -O +</pre> +<p>Unzip it:</p> +<pre class="prettyprint"> +unzip cds2014_cpp.zip +</pre> +<p>Go into the codelab directory:</p> +<pre class="prettyprint"> +cd cds2014_cpp +</pre> +<p>Create a new local git repo:</p> +<pre class="prettyprint"> +git init +</pre> +<p>Add everything:</p> +<pre class="prettyprint"> +git add . +</pre> +<p>Commit it:</p> +<pre class="prettyprint"> +git commit -am "initial" +</pre> +<p>While working, you can see what you’ve changed by running:</p> +<pre class="prettyprint"> +git diff +</pre> +<h2 id="fire-is-cool-let-s-burn-some-stuff">Fire is cool, let’s burn some stuff...</h2> +<p>Indulging your inner child, lets make some virtual fire! +Use the following shockingly intuitive incantation:</p> +<pre class="prettyprint"> +make fire +</pre> +<p>You should now see a small popup window, smoldering away. +If you click, you can make more fire! +I think that’s pretty cool, but then I selected +the institution of higher learning I attended based +on the integral role fire played in its campus life.</p> +<h2 id="water">Water</h2> +<p>Remarkably, not everyone enjoys the primal illusion of fire.</p> +<p>Your task in this codelab is to transform the rising fire +effect you see before you, into a beautiful, tranquil waterfall. +This will require digging into some C++ code.</p> +<p>Before you begin, you’ll want to copy our fire program to a new name, +since you might decide later that you like fire better, I know I do:</p> +<pre class="prettyprint"> +cp fire.cc water.cc +</pre> +<p>For this codelab, you’ll only need to change <cite>water.cc</cite>.</p> +<p>The task of turning fire into water involves two key challenges:</p> +<blockquote> +<div><ul class="small-gap"> +<li>Alter the red-yellow palette of fire into a blue-green one.</li> +<li>Reverse upward rising flame into downward falling water.</li> +<li>Seed the waterfall from the top instead of the bottom.</li> +</ul> +</div></blockquote> +<p>At this point you’ll want to open up <cite>water.cc</cite> in the editor you +picked earlier.</p> +<h3 id="i-see-a-red-door-and-i-want-it-painted-blue">I see a red door and I want it painted... blue</h3> +<p>While PPAPI’s 2D graphics API uses multi-component RGB pixels, +our flame effect is actually monochrome. A single intensity +value is used in the flame simulation. This is then converted +to color based on a multi-color gradient. +To alter the color-scheme, locate this palette, and exchange +the red component for blue.</p> +<p>Hint: Focus your energies on the CreatePalette function.</p> +<p>You can test you changes at any time with:</p> +<pre class="prettyprint"> +make water +</pre> +<h3 id="what-goes-up">What goes up...</h3> +<p>Now there’s the small matter of gravity. +While smoke, and well flame, rises, we want our water to go down.</p> +<p>The simulation of fire loops over each pixel, +bottom row to top row, +diffusing “fire stuff” behind the sweep. +You’ll want to reverse this. +Note the simulation buffer is stored in <a href="http://en.wikipedia.org/wiki/Row-major_order" + target="_blank">Row-major order</a> from bottom to top. +Accesses of + width and - width are used to reach rows above and below +the current line.</p> +<p>Hint: You’ll need to change the y loop direction in the UpdateFlames function.</p> +<h3 id="up-high-down-low">Up high, down low</h3> +<p>While you can now use the mouse to inject a trickle of water. +The small line of blue at the bottom isn’t much of a waterfall. +Move it to the top to complete the effect.</p> +<p>Hint: You’ll want to change the area that the UpdateCoals function mutates.</p> +<h2 id="what-you-ve-learned">What you’ve learned</h2> +<p>In addition to learning a new appreciation for fire, you’ve also made water... +And while dusting off your C/C++ image manipulation skills, +you’ve discovered how easy it is to modify, build, +and run a NaCl application that uses PPAPI.</p> +<p>2D graphics is fun, but now you’re ready to check out the wealth of +other +<a class="reference external" href="http://src.chromium.org/viewvc/chrome/trunk/src/ppapi/cpp/">PPAPI interfaces available</a>.</p> +<p>While our in-browser environment is rapidly evolving +to become a complete development solution, +for the broadest range of development options, check out the +<a class="reference external" href="https://developer.chrome.com/native-client/cpp-api">NaCl SDK</a>.</p> +<p>For questions, concerns, and help contact us at +<a class="reference external" href="https://groups.google.com/forum/#!forum/native-client-discuss">native-client-discuss@googlegroups.com</a>.</p> +<p>I hope this codelab has lit a fire in you to go out there, +and bring an awesome C/C++ application to NaCl or PNaCl today!</p> +<h2 id="cleanup">Cleanup</h2> +<p>The Chrome Dev Environment App installs >800MB into +HTML5 Filesystem storage on your device. +To recover this storage, uninstall the app from the +<a href="https://chrome.google.com/webstore" + target="_blank">Chrome Web Store</a>.</p> +</section> + +{{/partials.standard_nacl_article}} diff --git a/native_client_sdk/doc_generated/cds2014/index.html b/native_client_sdk/doc_generated/cds2014/index.html new file mode 100644 index 0000000..97a534f --- /dev/null +++ b/native_client_sdk/doc_generated/cds2014/index.html @@ -0,0 +1,100 @@ +{{+bindTo:partials.standard_nacl_article}} + +<section id="chrome-dev-summit-2014-native-client-codelabs"> +<span id="cds2014"></span><h1 id="chrome-dev-summit-2014-native-client-codelabs"><span id="cds2014"></span>Chrome Dev Summit 2014 - Native Client Codelabs</h1> +<h2 id="a-crossroads">A Crossroads</h2> +<p>For your coding pleasure, we have two codelabs. +Depending on your interests and prior experience, +check out one or both.</p> +<p>Learn how easy it is to edit, build, and run NaCl applications +all in your desktop web browser or on a Chromebook.</p> +<h2 id="codelab-1-what-a-difference-python-makes">Codelab #1 - What a difference Python Makes</h2> +<p>Learn how you can use client-side Python on your webpage. +Use the python <a href="https://docs.python.org/2/library/difflib.html" + target="_blank">difflib</a> module to generate attractive online +textual diffs. +Develop inside Google Chrome, using a hot off the presses version +of our NaCl Dev Environment, running on a webpage, +powered by Portable Native Client. +The techniques in this codelab also apply to other interpreted languages +we’ve ported to PNaCl, including: Python, Lua, Ruby, Tcl, Bash, and Forth.</p> +<dl class="docutils"> +<dt>Requirements:</dt> +<dd><ul class="first last small-gap"> +<li>A Desktop / Laptop Windows, Mac, Linux, or ChromeOS browser +<br/><span id="python_compat" style="color: #cccc00" + >Checking browser compatibility...</span><br/> +<i id="python_compat2"></i> +<script> +var tag = document.getElementById('python_compat'); +var tag2 = document.getElementById('python_compat2'); +if (!('application/x-pnacl' in navigator.mimeTypes)) { + tag.innerHTML = + 'This codelab does not appear to be supported by your browser.'; + tag.style.color = '#cc0000'; + tag2.innerHTML = + 'You do not appear to be running a browser such as ' + + 'Google Chrome which supports Portable Native Client ' + + 'or you have disabled Portable Native Client.'; +} else { + tag.innerHTML = 'This codelab appears to be supported by your browser.'; + tag.style.color = '#00cc00'; +} +</script></li> +<li>A fast broadband connection (500MB download)</li> +<li>Can read and write Python</li> +</ul> +</dd> +</dl> +<p><a class="reference external" href="python">Click here for Codelab #1 - Python on the Web</a></p> +<h2 id="codelab-2-a-saga-of-fire-and-water">Codelab #2 - A Saga of Fire and Water</h2> +<p>Learn the basics of using PPAPI to do 2D graphics from +a C++ program running in Native Client. +Modify our sample to turn fire into water. +Develop inside Google Chrome, using our NaCl Development Environment +Chrome App. +While this codelab currently targets conventional Native Client using our +GCC + GlibC based toolchain, the techniques involved are generally +applicable.</p> +<dl class="docutils"> +<dt>Requirements:</dt> +<dd><ul class="first last small-gap"> +<li>An x86 (sorry no arm) Desktop / Laptop +Windows, Mac, Linux, or ChromeOS browser +<br/><span id="cpp_compat" style="color: #cccc00" + >Checking browser compatibility...</span><br/> +<i id="cpp_compat2"></i> +<script> +var tag = document.getElementById('cpp_compat'); +var tag2 = document.getElementById('cpp_compat2'); +if (!('application/x-nacl' in navigator.mimeTypes)) { + tag.innerHTML = + 'This codelab does not appear to be supported by your browser.'; + tag.style.color = '#cc0000'; + tag2.innerHTML = + 'You do not appear to be running a browser such as ' + + 'Google Chrome which supports Native Client ' + + 'or you have disabled Native Client.'; +} else if (navigator.userAgent.search(' arm') >= 0) { + tag.innerHTML = + 'This codelab does not appear to be supported by your browser.'; + tag.style.color = '#cc0000'; + tag2.innerHTML = + 'You appear to be running on an ARM based CPU. ' + + 'While Native Client does support ARM, ' + + "our developer environment's GCC + GlibC based toolchain " + + 'does not, at this time. Sorry.'; +} else { + tag.innerHTML = 'This codelab appears to be supported by your browser.'; + tag.style.color = '#00cc00'; +} +</script></li> +<li>A fast broadband connection (500MB download)</li> +<li>Can read and write C++</li> +</ul> +</dd> +</dl> +<p><a class="reference external" href="cpp">Click here for Codelab #2 - Compile for Speed</a></p> +</section> + +{{/partials.standard_nacl_article}} diff --git a/native_client_sdk/doc_generated/cds2014/python.html b/native_client_sdk/doc_generated/cds2014/python.html new file mode 100644 index 0000000..bef59c75 --- /dev/null +++ b/native_client_sdk/doc_generated/cds2014/python.html @@ -0,0 +1,240 @@ +{{+bindTo:partials.standard_nacl_article}} + +<section id="what-a-difference-python-makes-codelab"> +<span id="cds2014-python"></span><h1 id="what-a-difference-python-makes-codelab"><span id="cds2014-python"></span>What a difference Python Makes - Codelab</h1> +<h2 id="introduction">Introduction</h2> +<p>Learn how you can use client-side Python on your webpage. +Use the python <a href="https://docs.python.org/2/library/difflib.html" + target="_blank">difflib</a> module to generate attractive online +textual diffs. +Develop inside Google Chrome, using a hot off the presses version +of our NaCl Dev Environment, running on a webpage, +powered by Portable Native Client. +The techniques in this codelab also apply to other interpreted languages +we’ve ported to PNaCl, including: Python, Lua, Ruby, Tcl, Bash, and Forth.</p> +<dl class="docutils"> +<dt>Requirements:</dt> +<dd><ul class="first last small-gap"> +<li>A Desktop / Laptop Windows, Mac, Linux, or ChromeOS browser +<br/><span id="python_compat" style="color: #cccc00" + >Checking browser compatibility...</span><br/> +<i id="python_compat2"></i> +<script> +var tag = document.getElementById('python_compat'); +var tag2 = document.getElementById('python_compat2'); +if (!('application/x-pnacl' in navigator.mimeTypes)) { + tag.innerHTML = + 'This codelab does not appear to be supported by your browser.'; + tag.style.color = '#cc0000'; + tag2.innerHTML = + 'You do not appear to be running a browser such as ' + + 'Google Chrome which supports Portable Native Client ' + + 'or you have disabled Portable Native Client.'; +} else { + tag.innerHTML = 'This codelab appears to be supported by your browser.'; + tag.style.color = '#00cc00'; +} +</script></li> +<li>A fast broadband connection (500MB download)</li> +<li>Can read and write Python</li> +</ul> +</dd> +</dl> +<h2 id="setup">Setup</h2> +<p>For this codelab, you will need to point your web browser at +the Beta preview of our in-browser NaCl Dev Environment.</p> +<a href="https://naclports.storage.googleapis.com/builds/pepper_41/trunk-169-gc77aece/publish/devenv/pnacl/app/bash.html" +target="_blank">Click here to open the environment.</a><p>While no installation is needed, the first load of the page will +require you to agree to allow the page unlimited storage +(Click “Ok” in the bar at the top of your browser window.)</p> +<p>The first run requires a large download. Please be patient. +Also, as PNaCl translates executables to native code on demand, +each program will also have have a noticable load delay on first run. +We’re actively working to improve this.</p> +<p>NOTE: This environment will leave a substantial (800MB) payload in your +browser. See the cleanup section below to learn how to recover this space.</p> +<p>Once the download is complete you should see a bash prompt:</p> +<pre class="prettyprint"> +WARNING: gcc not yet available for your platform (coming soon). +bash.nmf-4.3$ +</pre> +<h3 id="our-web-based-tools">Our Web-based Tools</h3> +<p>These development tools are a <a class="reference external" href="nacldev">work in progress</a>. +At this point, they are a learning tool and demonstration of NaCl’s +flexibility, but are not the recommended tools for a production application. +In the future, that may change, but for the moment, +to develop a substantial application for Native Client / +Portable Native Client, +we recommend you use the +<a class="reference external" href="/native-client/sdk/download">Native Client SDK</a>.</p> +<b><font color="#880000"> +NOTE: The NaCl Development Environment is not yet stable. +Ideally user data is preserved, but currently it can be lost during updates +or sporadically. We're working to resolve this. +</font></b><h3 id="navigating-in-the-dev-environment">Navigating in the Dev Environment</h3> +<p>The NaCl Dev Environment behaves like a mini-UNIX system. +You start-up in bash command prompt. +Standard UNIX commands like cd, ls, mkdir, rm, rmdir, etc. +can be used to navigate and modify the Dev Environment’s +virtual filesystem.</p> +<p>There are 3 locations mounted by the environment:</p> +<blockquote> +<div><ul class="small-gap"> +<li>/tmp mounts the HTML5 Filesystem temporary storage area.</li> +<li>/mnt/html5 mounts the HTML5 Filesystem persistent storage area.</li> +<li>Your home directory ~/, located in /home/user, +mounts a portion of the HTML5 Filsystem persistent storage area +that corresponds to the /mnt/html5/home directory.</li> +</ul> +</div></blockquote> +<h3 id="clipboard">Clipboard</h3> +<p>Many of the steps in this tutorial will be easier to copy and paste +into the Dev Environment. +To copy and paste in the Dev Environment web page, +you can use the keyboard or the menu options under (☰ → Edit).</p> +<p>On your platform use:</p> +<blockquote> +<div><ul class="small-gap"> +<li><span id="copy_key">Loading...</span> +<script> +var tag = document.getElementById('copy_key'); +if (navigator.appVersion.indexOf('Mac') >= 0) { + tag.innerHTML = '⌘-C'; +} else { + tag.innerHTML = 'Ctrl-C'; +} +</script> to Copy</li> +<li><span id="paste_key">Loading...</span> +<script> +var tag = document.getElementById('paste_key'); +if (navigator.appVersion.indexOf('Mac') >= 0) { + tag.innerHTML = '⌘-V'; +} else { + tag.innerHTML = 'Ctrl-V'; +} +</script> to Paste</li> +</ul> +</div></blockquote> +<h4 id="editing">Editing</h4> +<p>To follow along in this codelab, you’ll need to use a text editor to modify +various files in our development environment. +There are currently two editor options, nano or vim. +We have an Emacs port, but it is not yet available in the Dev Environment +(coming soon). +If you’re unsure what to pick, nano is simpler to start with and has on-screen +help.</p> +<ul class="small-gap"> +<li><p class="first">You can open <strong>nano</strong> like this:</p> +<pre class="prettyprint"> +$ nano <filename> +</pre> +<p>Here’s an online <a class="reference external" href="http://mintaka.sdsu.edu/reu/nano.html">nano tutorial</a>.</p> +</li> +<li><p class="first">You can open <strong>vim</strong> like this:</p> +<pre class="prettyprint"> +$ vim <filename> +</pre> +<p>Here’s an online <a class="reference external" href="http://www.openvim.com/tutorial.html">vim tutorial</a>.</p> +</li> +</ul> +<h3 id="git-setup">Git Setup</h3> +<p>This tutorial also uses a revision control program called +<a class="reference external" href="http://en.wikipedia.org/wiki/Git_(software)">git</a>. +In order to commit to a git repository, +you need to setup your environment to with your identity.</p> +<p>Run these commands (with your info) to setup your <cite>~/.gitconfig</cite> +for use:</p> +<pre class="prettyprint"> +git config --global user.name "John Doe" +git config --global user.email johndoe@example.com +</pre> +<h2 id="get-the-code">Get the Code!</h2> +<p>Rather than start from nothing, for this codelab we’ve provided +you with a zip file containing a starting point.</p> +<p>Download the codelab:</p> +<pre class="prettyprint"> +geturl https://nacltools.storage.googleapis.com/cds2014/cds2014_python.zip cds2014_python.zip +</pre> +<p>Unzip it:</p> +<pre class="prettyprint"> +unzip cds2014_python.zip +</pre> +<p>Go into the codelab directory:</p> +<pre class="prettyprint"> +cd cds2014_python +</pre> +<p>Create a new local git repo:</p> +<pre class="prettyprint"> +git init +</pre> +<p>Add everything:</p> +<pre class="prettyprint"> +git add . +</pre> +<p>Commit it:</p> +<pre class="prettyprint"> +git commit -am "initial" +</pre> +<p>While working, you can see what you’ve changed by running:</p> +<pre class="prettyprint"> +git diff +</pre> +<h2 id="your-challenge-should-you-choose-to-accept-it">Your challenge, should you choose to accept it...</h2> +<p>Javascript has many wonderful features out of the box. +Unfortunately, generating textual diffs is not one of them. +Python on the other hand has the <a href="https://docs.python.org/2/library/difflib.html" + target="_blank">difflib</a> module in its standard library.</p> +<p>The starting point you’ve just extracted contains the shell +of a web app using Portable Native Client Python to generate a diff. +Just one thing is missing, that whole diffing thing...</p> +<p>To see where things stand, deploy the sample like this:</p> +<pre class="prettyprint"> +make +</pre> +<p>This will copy the sample to /tmp/differ (clobbering whatever is already +there). It will also attempt to open the sample, but will be blocked by +a popup blocker. Click on the URL to accept the popup.</p> +<p>As you can see, this isn’t quite what we’re going for.</p> +<p>You’ll want to modify diff.py, using the editor you selected earlier. +You’ll probably want to consult the <a href="https://docs.python.org/2/library/difflib.html" + target="_blank">difflib</a> documentation. +I would suggest you check out the HtmlDiff class and make use of +the make_file member function. I would also suggest the splitlines +function may come in handy.</p> +<p>You can test diff.py manually as you would in a normal UNIX environment. +It can be run like this:</p> +<pre class="prettyprint"> +./diff.py before.txt after.txt out.html +</pre> +<p>Once everything is working diff.html will contain an html diff. +Run <cite>make</cite> again to deploy and test the full app.</p> +<p>Now get to it, and good luck!</p> +<h2 id="what-you-ve-learned">What you’ve learned</h2> +<p>While the details of building and packaging Python have been +insulated from you for the purpose of this exercise, the key take-home lesson +is how easy it is to leverage Python using PNaCl. +As you’ve likely experienced, the initial start time is non-trivial. +We’re working on improving this, both by improving PNaCl, +and our Python port.</p> +<p>The same approach to deploying Python apps can be used for the other +interpreted languages that have been ported to PNaCl.</p> +<p>Check out the range of interpreters, libraries, and tools +<a class="reference external" href="https://code.google.com/p/naclports/wiki/PortList">already ported to PNaCl and ready to be integrated with your Web App</a>.</p> +<p>While our in-browser environment is rapidly evolving +to become a complete development solution, +for the broadest range of development options, check out the +<a class="reference external" href="https://developer.chrome.com/native-client/sdk/download">NaCl SDK</a>.</p> +<p>For questions, concerns, and help contact us at +<a class="reference external" href="https://groups.google.com/forum/#!forum/native-client-discuss">native-client-discuss@googlegroups.com</a>.</p> +<p>Bring your interpreted app to PNaCl today!</p> +<h2 id="cleanup">Cleanup</h2> +<p>The Web-based version of the Chrome Dev Environment installs +package data (>800MB) into the HTML5 Filesystem storage associated +with naclports.storage.googleapis.com . +To recover this storage (i.e. uninstall), +enter <strong>chrome://settings/cookies</strong> in the Chrome URL bar. +In the cookies UI, search for “naclports”. +Then click the “x” next to the naclports entry.</p> +</section> + +{{/partials.standard_nacl_article}} diff --git a/native_client_sdk/doc_generated/devguide/distributing.html b/native_client_sdk/doc_generated/devguide/distributing.html index 4b4dcf7..3104160 100644 --- a/native_client_sdk/doc_generated/devguide/distributing.html +++ b/native_client_sdk/doc_generated/devguide/distributing.html @@ -143,25 +143,19 @@ each Native Client architecture with two name/value pairs:</p> <colgroup> </colgroup> <thead valign="bottom"> -<tr class="row-odd"><th class="head"><p class="first last">Name</p> -</th> -<th class="head"><p class="first last">Value</p> -</th> +<tr class="row-odd"><th class="head">Name</th> +<th class="head">Value</th> </tr> </thead> <tbody valign="top"> -<tr class="row-even"><td><p class="first last"><code>nacl_arch</code></p> -</td> -<td><p class="first last"><code>x86-64</code>, <code>x86-32</code>, or <code>arm</code></p> -</td> +<tr class="row-even"><td><code>nacl_arch</code></td> +<td><code>x86-64</code>, <code>x86-32</code>, or <code>arm</code></td> </tr> -<tr class="row-odd"><td><p class="first last"><code>sub_package_path</code></p> -</td> -<td><p class="first last">the path of the directory (starting +<tr class="row-odd"><td><code>sub_package_path</code></td> +<td>the path of the directory (starting with <code>_platform_specific</code>) that contains the files for the designated -NaCl architecture</p> -</td> +NaCl architecture</td> </tr> </tbody> </table> diff --git a/native_client_sdk/doc_generated/io2014.html b/native_client_sdk/doc_generated/io2014.html index 285f7c5..48ea045 100644 --- a/native_client_sdk/doc_generated/io2014.html +++ b/native_client_sdk/doc_generated/io2014.html @@ -9,13 +9,14 @@ Explore our new in-browser development environment and debugger.</p> all in your desktop web browser or on a Chromebook. Work either on-line or off-line!</p> <iframe class="video" width="500" height="281" -src="//www.youtube.com/embed/OzNuzBDEWzk?rel=0" frameborder="0"></iframe><h3 id="work-in-progress">Work in Progress</h3> -<p>These development tools are a work in progress, see <a class="reference internal" href="#feature-status">Feature Status</a>. +src="//www.youtube.com/embed/OzNuzBDEWzk?rel=0" frameborder="0"></iframe><h3 id="our-web-based-tools">Our Web-based Tools</h3> +<p>These development tools are a <a class="reference external" href="nacldev">work in progress</a>. At this point, they are a learning tool and demonstration of NaCl’s flexibility, but are not the recommended tools for a production application. -To develop a substantial application for Native Client / +In the future, that may change, but for the moment, +to develop a substantial application for Native Client / Portable Native Client, -we currently recommend you use the +we recommend you use the <a class="reference external" href="/native-client/sdk/download">Native Client SDK</a>.</p> <b><font color="#880000"> NOTE: The NaCl Development Environment is not yet stable. @@ -58,11 +59,12 @@ Once you’re ready to apply the debugger, follow these steps:</p> temporarily and try again.</li> </ul> </div></blockquote> -<h3 id="editor">Editor</h3> -<p>To follow along in this tutorial, you’ll need to use a text editor to modify +<h4 id="editing">Editing</h4> +<p>To follow along in this codelab, you’ll need to use a text editor to modify various files in our development environment. There are currently two editor options, nano or vim. -Emacs is coming soon... +We have an Emacs port, but it is not yet available in the Dev Environment +(coming soon). If you’re unsure what to pick, nano is simpler to start with and has on-screen help.</p> <ul class="small-gap"> @@ -84,16 +86,12 @@ $ vim <filename> <a class="reference external" href="http://en.wikipedia.org/wiki/Git_(software)">git</a>. In order to commit to a git repository, you need to setup your environment to with your identity.</p> -<p>You’ll need to add these lines to <cite>~/.bashrc</cite> to cause them to be invoked each -time you start the development environment.</p> +<p>Run these commands (with your info) to setup your <cite>~/.gitconfig</cite> +for use:</p> <pre class="prettyprint"> git config --global user.name "John Doe" git config --global user.email johndoe@example.com </pre> -<p>You can reload you <cite>~/.bashrc</cite> by running:</p> -<pre class="prettyprint"> -source ~/.bashrc -</pre> <h3 id="tour-follow-the-video">Tour (follow the video)</h3> <p>Create a working directory and go into it:</p> <pre class="prettyprint"> @@ -213,58 +211,7 @@ $ make serve <p>Thanks for checking out our environment. Things are rapidly changing and in the coming months you can expect to see further improvements and filling out of our platform and library support.</p> -<p>Check back at this page for the latest status.</p> -<h3 id="feature-status">Feature Status</h3> -<p>Here is a summary of feature status. We hope to overcome these limitations -in the near future:</p> -<blockquote> -<div><ul class="small-gap"> -<li><p class="first">NaCl Development Environment</p> -<ul class="small-gap"> -<li><p class="first">General</p> -<ul class="small-gap"> -<li><p class="first">Supported:</p> -<ul class="small-gap"> -<li>Python (built-in)</li> -<li>GCC w/ GLibC (x86-32 and x86-64 only)</li> -<li>Lua (install with: <cite>package -i lua && . setup-environment</cite>)</li> -<li>Ruby (install with: <cite>package -i ruby && . setup-environment</cite>)</li> -<li>Nethack! (install with: <cite>package -i nethack && . setup-environment</cite>)</li> -</ul> -</li> -<li><p class="first">Unsupported:</p> -<ul class="small-gap"> -<li>Targeting Newlib</li> -<li>Targeting PNaCl</li> -<li>Forking in bash</li> -<li>Pipes / Redirection</li> -<li>Symbolic and hard links</li> -</ul> -</li> -</ul> -</li> -<li><p class="first">Missing / broken on ARM:</p> -<ul class="small-gap"> -<li>Git (broken)</li> -<li>GCC (unsupported)</li> -</ul> -</li> -</ul> -</li> -<li><p class="first">Debugger</p> -<ul class="small-gap"> -<li>Runs reliably only on a recent Beta or Dev Channel (M36+) build.</li> -<li><p class="first">Currently unreliable on some platforms:</p> -<ul class="small-gap"> -<li>ChromeOS</li> -<li>Mac OSX</li> -<li>Windows</li> -</ul> -</li> -</ul> -</li> -</ul> -</div></blockquote> +<p>Follow the status of the NaCl Dev Environment at <a class="reference external" href="naclenv">this page</a>.</p> </section> {{/partials.standard_nacl_article}} diff --git a/native_client_sdk/doc_generated/nacldev.html b/native_client_sdk/doc_generated/nacldev.html new file mode 100644 index 0000000..8ca6811 --- /dev/null +++ b/native_client_sdk/doc_generated/nacldev.html @@ -0,0 +1,56 @@ +{{+bindTo:partials.standard_nacl_article}} + +<section id="nacl-dev-environment"> +<span id="nacldev"></span><h1 id="nacl-dev-environment"><span id="nacldev"></span>NaCl Dev Environment</h1> +<h2 id="feature-status">Feature Status</h2> +<p>Here is a summary of feature status. We hope to overcome these limitations +in the near future:</p> +<blockquote> +<div><ul class="small-gap"> +<li><p class="first">NaCl Development Environment</p> +<ul class="small-gap"> +<li><p class="first">General</p> +<ul class="small-gap"> +<li><p class="first">Supported:</p> +<ul class="small-gap"> +<li>Bash (built-in)</li> +<li>Python (built-in)</li> +<li>Git (built-in)</li> +<li>Make (built-in)</li> +<li>Vim (built-in)</li> +<li>Nano (built-in)</li> +<li>Curl (built-in) + geturl for web</li> +<li>GCC w/ GLibC (x86-32 and x86-64 only)</li> +<li>Lua (install with: <cite>package -i lua && . setup-environment</cite>)</li> +<li>Ruby (install with: <cite>package -i ruby && . setup-environment</cite>)</li> +<li>Nethack! (install with: <cite>package -i nethack && . setup-environment</cite>)</li> +</ul> +</li> +<li><p class="first">Unsupported:</p> +<ul class="small-gap"> +<li>Targeting Newlib</li> +<li>Targeting PNaCl (getting close...)</li> +<li>Forking in bash</li> +<li>Pipes / Redirection</li> +<li>Symbolic and hard links</li> +</ul> +</li> +</ul> +</li> +<li><p class="first">Missing / broken on ARM:</p> +<ul class="small-gap"> +<li>GCC (unsupported)</li> +</ul> +</li> +</ul> +</li> +<li><p class="first">Debugger</p> +<ul class="small-gap"> +<li>Open issue causing it to suck CPU cycles (even when not in use).</li> +</ul> +</li> +</ul> +</div></blockquote> +</section> + +{{/partials.standard_nacl_article}} diff --git a/native_client_sdk/doc_generated/sitemap.html b/native_client_sdk/doc_generated/sitemap.html index 786338aa..7a80656 100644 --- a/native_client_sdk/doc_generated/sitemap.html +++ b/native_client_sdk/doc_generated/sitemap.html @@ -219,6 +219,35 @@ <li class="toctree-l2"><a class="reference internal" href="/native-client/io2014.html#in-the-browser">In the browser!</a></li> </ul> </li> +<li class="toctree-l1"><a class="reference internal" href="/native-client/cds2014/index.html">Chrome Dev Summit 2014 - Native Client Codelabs</a><ul class="small-gap"> +<li class="toctree-l2"><a class="reference internal" href="/native-client/cds2014/index.html#a-crossroads">A Crossroads</a></li> +<li class="toctree-l2"><a class="reference internal" href="/native-client/cds2014/index.html#codelab-1-what-a-difference-python-makes">Codelab #1 - What a difference Python Makes</a></li> +<li class="toctree-l2"><a class="reference internal" href="/native-client/cds2014/index.html#codelab-2-a-saga-of-fire-and-water">Codelab #2 - A Saga of Fire and Water</a></li> +</ul> +</li> +<li class="toctree-l1"><a class="reference internal" href="/native-client/cds2014/python.html">What a difference Python Makes - Codelab</a><ul class="small-gap"> +<li class="toctree-l2"><a class="reference internal" href="/native-client/cds2014/python.html#introduction">Introduction</a></li> +<li class="toctree-l2"><a class="reference internal" href="/native-client/cds2014/python.html#setup">Setup</a></li> +<li class="toctree-l2"><a class="reference internal" href="/native-client/cds2014/python.html#get-the-code">Get the Code!</a></li> +<li class="toctree-l2"><a class="reference internal" href="/native-client/cds2014/python.html#your-challenge-should-you-choose-to-accept-it">Your challenge, should you choose to accept it...</a></li> +<li class="toctree-l2"><a class="reference internal" href="/native-client/cds2014/python.html#what-you-ve-learned">What you’ve learned</a></li> +<li class="toctree-l2"><a class="reference internal" href="/native-client/cds2014/python.html#cleanup">Cleanup</a></li> +</ul> +</li> +<li class="toctree-l1"><a class="reference internal" href="/native-client/cds2014/cpp.html">A Saga of Fire and Water - Codelab</a><ul class="small-gap"> +<li class="toctree-l2"><a class="reference internal" href="/native-client/cds2014/cpp.html#introduction">Introduction</a></li> +<li class="toctree-l2"><a class="reference internal" href="/native-client/cds2014/cpp.html#setup">Setup</a></li> +<li class="toctree-l2"><a class="reference internal" href="/native-client/cds2014/cpp.html#get-the-code">Get the Code!</a></li> +<li class="toctree-l2"><a class="reference internal" href="/native-client/cds2014/cpp.html#fire-is-cool-let-s-burn-some-stuff">Fire is cool, let’s burn some stuff...</a></li> +<li class="toctree-l2"><a class="reference internal" href="/native-client/cds2014/cpp.html#water">Water</a></li> +<li class="toctree-l2"><a class="reference internal" href="/native-client/cds2014/cpp.html#what-you-ve-learned">What you’ve learned</a></li> +<li class="toctree-l2"><a class="reference internal" href="/native-client/cds2014/cpp.html#cleanup">Cleanup</a></li> +</ul> +</li> +<li class="toctree-l1"><a class="reference internal" href="/native-client/nacldev.html">NaCl Dev Environment</a><ul class="small-gap"> +<li class="toctree-l2"><a class="reference internal" href="/native-client/nacldev.html#feature-status">Feature Status</a></li> +</ul> +</li> <li class="toctree-l1"><a class="reference internal" href="/native-client/community/index.html">Community</a></li> <li class="toctree-l1"><a class="reference internal" href="/native-client/community/security-contest/index.html">Security Contest Archive</a><ul class="small-gap"> <li class="toctree-l2"><a class="reference internal" href="/native-client/community/security-contest/index.html#contest-overview">Contest overview</a></li> diff --git a/native_client_sdk/src/doc/cds2014/cpp.rst b/native_client_sdk/src/doc/cds2014/cpp.rst new file mode 100644 index 0000000..e217aca --- /dev/null +++ b/native_client_sdk/src/doc/cds2014/cpp.rst @@ -0,0 +1,162 @@ +.. _cds2014_cpp: + +################################## +A Saga of Fire and Water - Codelab +################################## + +Introduction +------------ + +.. include:: cpp_summary.inc + +.. include:: ../nacldev/setup_app.inc + +Get the Code! +------------- + +Rather than start from nothing, for this codelab we've provided +you with a zip file containing a starting point. + +Download the codelab:: + + curl http://nacltools.storage.googleapis.com/cds2014/cds2014_cpp.zip -O + +Unzip it:: + + unzip cds2014_cpp.zip + +Go into the codelab directory:: + + cd cds2014_cpp + +Create a new local git repo:: + + git init + +Add everything:: + + git add . + +Commit it:: + + git commit -am "initial" + +While working, you can see what you've changed by running:: + + git diff + + +Fire is cool, let's burn some stuff... +-------------------------------------- + +Indulging your inner child, lets make some virtual fire! +Use the following shockingly intuitive incantation:: + + make fire + +You should now see a small popup window, smoldering away. +If you click, you can make more fire! +I think that's pretty cool, but then I selected +the institution of higher learning I attended based +on the integral role fire played in its campus life. + +Water +----- + +Remarkably, not everyone enjoys the primal illusion of fire. + +Your task in this codelab is to transform the rising fire +effect you see before you, into a beautiful, tranquil waterfall. +This will require digging into some C++ code. + +Before you begin, you'll want to copy our fire program to a new name, +since you might decide later that you like fire better, I know I do:: + + cp fire.cc water.cc + +For this codelab, you'll only need to change `water.cc`. + +The task of turning fire into water involves two key challenges: + + * Alter the red-yellow palette of fire into a blue-green one. + * Reverse upward rising flame into downward falling water. + * Seed the waterfall from the top instead of the bottom. + +At this point you'll want to open up `water.cc` in the editor you +picked earlier. + +I see a red door and I want it painted... blue +============================================== + +While PPAPI's 2D graphics API uses multi-component RGB pixels, +our flame effect is actually monochrome. A single intensity +value is used in the flame simulation. This is then converted +to color based on a multi-color gradient. +To alter the color-scheme, locate this palette, and exchange +the red component for blue. + +Hint: Focus your energies on the CreatePalette function. + +You can test you changes at any time with:: + + make water + +What goes up... +=============== + +Now there's the small matter of gravity. +While smoke, and well flame, rises, we want our water to go down. + +The simulation of fire loops over each pixel, +bottom row to top row, +diffusing "fire stuff" behind the sweep. +You'll want to reverse this. +Note the simulation buffer is stored in |row_major| from bottom to top. +Accesses of + width and - width are used to reach rows above and below +the current line. + +.. |row_major| raw:: html + + <a href="http://en.wikipedia.org/wiki/Row-major_order" + target="_blank">Row-major order</a> + +Hint: You'll need to change the y loop direction in the UpdateFlames function. + +Up high, down low +================= + +While you can now use the mouse to inject a trickle of water. +The small line of blue at the bottom isn't much of a waterfall. +Move it to the top to complete the effect. + +Hint: You'll want to change the area that the UpdateCoals function mutates. + + +What you've learned +------------------- + +In addition to learning a new appreciation for fire, you've also made water... +And while dusting off your C/C++ image manipulation skills, +you've discovered how easy it is to modify, build, +and run a NaCl application that uses PPAPI. + +2D graphics is fun, but now you're ready to check out the wealth of +other +`PPAPI interfaces available +<http://src.chromium.org/viewvc/chrome/trunk/src/ppapi/cpp/>`_. + +While our in-browser environment is rapidly evolving +to become a complete development solution, +for the broadest range of development options, check out the +`NaCl SDK +<https://developer.chrome.com/native-client/cpp-api>`_. + +For questions, concerns, and help contact us at +`native-client-discuss@googlegroups.com +<https://groups.google.com/forum/#!forum/native-client-discuss>`_. + +I hope this codelab has lit a fire in you to go out there, +and bring an awesome C/C++ application to NaCl or PNaCl today! + + +.. include:: ../nacldev/cleanup_app.inc diff --git a/native_client_sdk/src/doc/cds2014/cpp_summary.inc b/native_client_sdk/src/doc/cds2014/cpp_summary.inc new file mode 100644 index 0000000..0ef3c9f --- /dev/null +++ b/native_client_sdk/src/doc/cds2014/cpp_summary.inc @@ -0,0 +1,46 @@ +Learn the basics of using PPAPI to do 2D graphics from +a C++ program running in Native Client. +Modify our sample to turn fire into water. +Develop inside Google Chrome, using our NaCl Development Environment +Chrome App. +While this codelab currently targets conventional Native Client using our +GCC + GlibC based toolchain, the techniques involved are generally +applicable. + +Requirements: + * An x86 (sorry no arm) Desktop / Laptop + Windows, Mac, Linux, or ChromeOS browser + |cpp_check| + * A fast broadband connection (500MB download) + * Can read and write C++ + +.. |cpp_check| raw:: html + + <br/><span id="cpp_compat" style="color: #cccc00" + >Checking browser compatibility...</span><br/> + <i id="cpp_compat2"></i> + <script> + var tag = document.getElementById('cpp_compat'); + var tag2 = document.getElementById('cpp_compat2'); + if (!('application/x-nacl' in navigator.mimeTypes)) { + tag.innerHTML = + 'This codelab does not appear to be supported by your browser.'; + tag.style.color = '#cc0000'; + tag2.innerHTML = + 'You do not appear to be running a browser such as ' + + 'Google Chrome which supports Native Client ' + + 'or you have disabled Native Client.'; + } else if (navigator.userAgent.search(' arm') >= 0) { + tag.innerHTML = + 'This codelab does not appear to be supported by your browser.'; + tag.style.color = '#cc0000'; + tag2.innerHTML = + 'You appear to be running on an ARM based CPU. ' + + 'While Native Client does support ARM, ' + + "our developer environment's GCC + GlibC based toolchain " + + 'does not, at this time. Sorry.'; + } else { + tag.innerHTML = 'This codelab appears to be supported by your browser.'; + tag.style.color = '#00cc00'; + } + </script> diff --git a/native_client_sdk/src/doc/cds2014/index.rst b/native_client_sdk/src/doc/cds2014/index.rst new file mode 100644 index 0000000..7769633 --- /dev/null +++ b/native_client_sdk/src/doc/cds2014/index.rst @@ -0,0 +1,30 @@ +.. _cds2014: + +############################################### +Chrome Dev Summit 2014 - Native Client Codelabs +############################################### + +A Crossroads +------------- + +For your coding pleasure, we have two codelabs. +Depending on your interests and prior experience, +check out one or both. + +Learn how easy it is to edit, build, and run NaCl applications +all in your desktop web browser or on a Chromebook. + +Codelab #1 - What a difference Python Makes +------------------------------------------- + +.. include:: python_summary.inc + +`Click here for Codelab #1 - Python on the Web <python>`_ + + +Codelab #2 - A Saga of Fire and Water +------------------------------------- + +.. include:: cpp_summary.inc + +`Click here for Codelab #2 - Compile for Speed <cpp>`_ diff --git a/native_client_sdk/src/doc/cds2014/python.rst b/native_client_sdk/src/doc/cds2014/python.rst new file mode 100644 index 0000000..bc4b5d2 --- /dev/null +++ b/native_client_sdk/src/doc/cds2014/python.rst @@ -0,0 +1,117 @@ +.. _cds2014_python: + +######################################## +What a difference Python Makes - Codelab +######################################## + +Introduction +------------ + +.. include:: python_summary.inc + +.. include:: ../nacldev/setup_web.inc + + +Get the Code! +------------- + +Rather than start from nothing, for this codelab we've provided +you with a zip file containing a starting point. + +Download the codelab:: + + geturl https://nacltools.storage.googleapis.com/cds2014/cds2014_python.zip cds2014_python.zip + +Unzip it:: + + unzip cds2014_python.zip + +Go into the codelab directory:: + + cd cds2014_python + +Create a new local git repo:: + + git init + +Add everything:: + + git add . + +Commit it:: + + git commit -am "initial" + +While working, you can see what you've changed by running:: + + git diff + + +Your challenge, should you choose to accept it... +------------------------------------------------- + +Javascript has many wonderful features out of the box. +Unfortunately, generating textual diffs is not one of them. +Python on the other hand has the |difflib| module in its standard library. + +The starting point you've just extracted contains the shell +of a web app using Portable Native Client Python to generate a diff. +Just one thing is missing, that whole diffing thing... + +To see where things stand, deploy the sample like this:: + + make + +This will copy the sample to /tmp/differ (clobbering whatever is already +there). It will also attempt to open the sample, but will be blocked by +a popup blocker. Click on the URL to accept the popup. + +As you can see, this isn't quite what we're going for. + +You'll want to modify diff.py, using the editor you selected earlier. +You'll probably want to consult the |difflib| documentation. +I would suggest you check out the HtmlDiff class and make use of +the make_file member function. I would also suggest the splitlines +function may come in handy. + +You can test diff.py manually as you would in a normal UNIX environment. +It can be run like this:: + + ./diff.py before.txt after.txt out.html + +Once everything is working diff.html will contain an html diff. +Run `make` again to deploy and test the full app. + +Now get to it, and good luck! + + +What you've learned +------------------- + +While the details of building and packaging Python have been +insulated from you for the purpose of this exercise, the key take-home lesson +is how easy it is to leverage Python using PNaCl. +As you've likely experienced, the initial start time is non-trivial. +We're working on improving this, both by improving PNaCl, +and our Python port. + +The same approach to deploying Python apps can be used for the other +interpreted languages that have been ported to PNaCl. + +Check out the range of interpreters, libraries, and tools +`already ported to PNaCl and ready to be integrated with your Web App +<https://code.google.com/p/naclports/wiki/PortList>`_. + +While our in-browser environment is rapidly evolving +to become a complete development solution, +for the broadest range of development options, check out the +`NaCl SDK +<https://developer.chrome.com/native-client/sdk/download>`_. + +For questions, concerns, and help contact us at +`native-client-discuss@googlegroups.com +<https://groups.google.com/forum/#!forum/native-client-discuss>`_. + +Bring your interpreted app to PNaCl today! + +.. include:: ../nacldev/cleanup_web.inc diff --git a/native_client_sdk/src/doc/cds2014/python_summary.inc b/native_client_sdk/src/doc/cds2014/python_summary.inc new file mode 100644 index 0000000..09960ac --- /dev/null +++ b/native_client_sdk/src/doc/cds2014/python_summary.inc @@ -0,0 +1,43 @@ +Learn how you can use client-side Python on your webpage. +Use the python |difflib| module to generate attractive online +textual diffs. +Develop inside Google Chrome, using a hot off the presses version +of our NaCl Dev Environment, running on a webpage, +powered by Portable Native Client. +The techniques in this codelab also apply to other interpreted languages +we've ported to PNaCl, including: Python, Lua, Ruby, Tcl, Bash, and Forth. + +Requirements: + * A Desktop / Laptop Windows, Mac, Linux, or ChromeOS browser + |python_check| + * A fast broadband connection (500MB download) + * Can read and write Python + + +.. |difflib| raw:: html + + <a href="https://docs.python.org/2/library/difflib.html" + target="_blank">difflib</a> + + +.. |python_check| raw:: html + + <br/><span id="python_compat" style="color: #cccc00" + >Checking browser compatibility...</span><br/> + <i id="python_compat2"></i> + <script> + var tag = document.getElementById('python_compat'); + var tag2 = document.getElementById('python_compat2'); + if (!('application/x-pnacl' in navigator.mimeTypes)) { + tag.innerHTML = + 'This codelab does not appear to be supported by your browser.'; + tag.style.color = '#cc0000'; + tag2.innerHTML = + 'You do not appear to be running a browser such as ' + + 'Google Chrome which supports Portable Native Client ' + + 'or you have disabled Portable Native Client.'; + } else { + tag.innerHTML = 'This codelab appears to be supported by your browser.'; + tag.style.color = '#00cc00'; + } + </script> diff --git a/native_client_sdk/src/doc/io2014.rst b/native_client_sdk/src/doc/io2014.rst index d61c50b..68a6ef0 100644 --- a/native_client_sdk/src/doc/io2014.rst +++ b/native_client_sdk/src/doc/io2014.rst @@ -19,24 +19,7 @@ Work either on-line or off-line! <iframe class="video" width="500" height="281" src="//www.youtube.com/embed/OzNuzBDEWzk?rel=0" frameborder="0"></iframe> -Work in Progress -================ - -These development tools are a work in progress, see `Feature Status`_. -At this point, they are a learning tool and demonstration of NaCl's -flexibility, but are not the recommended tools for a production application. -To develop a substantial application for Native Client / -Portable Native Client, -we currently recommend you use the -`Native Client SDK </native-client/sdk/download>`_. - -.. raw:: html - - <b><font color="#880000"> - NOTE: The NaCl Development Environment is not yet stable. - Ideally user data is preserved, but currently it can be lost during updates - or sporadically. We're working to resolve this. - </font></b> +.. include:: nacldev/web_tools_note.inc Installation ============ @@ -74,48 +57,11 @@ Once you're ready to apply the debugger, follow these steps: * NOTE: If you experience unexplained hangs, disable GDB-based debugging temporarily and try again. -Editor -====== - -To follow along in this tutorial, you'll need to use a text editor to modify -various files in our development environment. -There are currently two editor options, nano or vim. -Emacs is coming soon... -If you're unsure what to pick, nano is simpler to start with and has on-screen -help. - -* You can open **nano** like this:: - - $ nano <filename> - - Here's an online `nano tutorial <http://mintaka.sdsu.edu/reu/nano.html>`_. - -* You can open **vim** like this:: - - $ vim <filename> - - Here's an online `vim tutorial <http://www.openvim.com/tutorial.html>`_. - - -Git Setup -========= - -This tutorial also uses a revision control program called -`git <http://en.wikipedia.org/wiki/Git_(software)>`_. -In order to commit to a git repository, -you need to setup your environment to with your identity. -You'll need to add these lines to `~/.bashrc` to cause them to be invoked each -time you start the development environment. -:: +.. include:: nacldev/editing.inc - git config --global user.name "John Doe" - git config --global user.email johndoe@example.com +.. include:: nacldev/git.inc -You can reload you `~/.bashrc` by running: -:: - - source ~/.bashrc Tour (follow the video) ======================= @@ -257,44 +203,4 @@ Thanks for checking out our environment. Things are rapidly changing and in the coming months you can expect to see further improvements and filling out of our platform and library support. -Check back at this page for the latest status. - -Feature Status -============== - -Here is a summary of feature status. We hope to overcome these limitations -in the near future: - - * NaCl Development Environment - - * General - - * Supported: - - * Python (built-in) - * GCC w/ GLibC (x86-32 and x86-64 only) - * Lua (install with: `package -i lua && . setup-environment`) - * Ruby (install with: `package -i ruby && . setup-environment`) - * Nethack! (install with: `package -i nethack && . setup-environment`) - - * Unsupported: - - * Targeting Newlib - * Targeting PNaCl - * Forking in bash - * Pipes / Redirection - * Symbolic and hard links - - * Missing / broken on ARM: - - * Git (broken) - * GCC (unsupported) - - * Debugger - - * Runs reliably only on a recent Beta or Dev Channel (M36+) build. - * Currently unreliable on some platforms: - - * ChromeOS - * Mac OSX - * Windows +Follow the status of the NaCl Dev Environment at `this page <naclenv>`_. diff --git a/native_client_sdk/src/doc/nacldev.rst b/native_client_sdk/src/doc/nacldev.rst new file mode 100644 index 0000000..da23c48 --- /dev/null +++ b/native_client_sdk/src/doc/nacldev.rst @@ -0,0 +1,45 @@ +.. _nacldev: + +#################### +NaCl Dev Environment +#################### + +Feature Status +============== + +Here is a summary of feature status. We hope to overcome these limitations +in the near future: + + * NaCl Development Environment + + * General + + * Supported: + + * Bash (built-in) + * Python (built-in) + * Git (built-in) + * Make (built-in) + * Vim (built-in) + * Nano (built-in) + * Curl (built-in) + geturl for web + * GCC w/ GLibC (x86-32 and x86-64 only) + * Lua (install with: `package -i lua && . setup-environment`) + * Ruby (install with: `package -i ruby && . setup-environment`) + * Nethack! (install with: `package -i nethack && . setup-environment`) + + * Unsupported: + + * Targeting Newlib + * Targeting PNaCl (getting close...) + * Forking in bash + * Pipes / Redirection + * Symbolic and hard links + + * Missing / broken on ARM: + + * GCC (unsupported) + + * Debugger + + * Open issue causing it to suck CPU cycles (even when not in use). diff --git a/native_client_sdk/src/doc/nacldev/cleanup_app.inc b/native_client_sdk/src/doc/nacldev/cleanup_app.inc new file mode 100644 index 0000000..30f625f --- /dev/null +++ b/native_client_sdk/src/doc/nacldev/cleanup_app.inc @@ -0,0 +1,12 @@ +Cleanup +------- + +The Chrome Dev Environment App installs >800MB into +HTML5 Filesystem storage on your device. +To recover this storage, uninstall the app from the +|chrome_webstore|. + +.. |chrome_webstore| raw:: html + + <a href="https://chrome.google.com/webstore" + target="_blank">Chrome Web Store</a> diff --git a/native_client_sdk/src/doc/nacldev/cleanup_web.inc b/native_client_sdk/src/doc/nacldev/cleanup_web.inc new file mode 100644 index 0000000..22b2cd9 --- /dev/null +++ b/native_client_sdk/src/doc/nacldev/cleanup_web.inc @@ -0,0 +1,10 @@ +Cleanup +------- + +The Web-based version of the Chrome Dev Environment installs +package data (>800MB) into the HTML5 Filesystem storage associated +with naclports.storage.googleapis.com . +To recover this storage (i.e. uninstall), +enter **chrome://settings/cookies** in the Chrome URL bar. +In the cookies UI, search for "naclports". +Then click the "x" next to the naclports entry. diff --git a/native_client_sdk/src/doc/nacldev/clipboard_app.inc b/native_client_sdk/src/doc/nacldev/clipboard_app.inc new file mode 100644 index 0000000..e9f4c81 --- /dev/null +++ b/native_client_sdk/src/doc/nacldev/clipboard_app.inc @@ -0,0 +1,36 @@ +Clipboard +========= + +Many of the steps in this tutorial will be easier to copy and paste +into the Dev Environment. +To copy and paste in the Dev Environment App, +you will need to use the keyboard. + +On your platform use: + + * |copy_key| to Copy + * |paste_key| to Paste + +.. |copy_key| raw:: html + + <span id="copy_key">Loading...</span> + <script> + var tag = document.getElementById('copy_key'); + if (navigator.appVersion.indexOf('Mac') >= 0) { + tag.innerHTML = '⌘-C'; + } else { + tag.innerHTML = 'Ctrl-Shift-C'; + } + </script> + +.. |paste_key| raw:: html + + <span id="paste_key">Loading...</span> + <script> + var tag = document.getElementById('paste_key'); + if (navigator.appVersion.indexOf('Mac') >= 0) { + tag.innerHTML = '⌘-V'; + } else { + tag.innerHTML = 'Ctrl-Shift-V'; + } + </script> diff --git a/native_client_sdk/src/doc/nacldev/clipboard_web.inc b/native_client_sdk/src/doc/nacldev/clipboard_web.inc new file mode 100644 index 0000000..e9925c3 --- /dev/null +++ b/native_client_sdk/src/doc/nacldev/clipboard_web.inc @@ -0,0 +1,40 @@ +Clipboard +========= + +Many of the steps in this tutorial will be easier to copy and paste +into the Dev Environment. +To copy and paste in the Dev Environment web page, +you can use the keyboard or the menu options under (|chrome_menu|). + +.. |chrome_menu| raw:: html + + ☰ → Edit + +On your platform use: + + * |copy_key| to Copy + * |paste_key| to Paste + +.. |copy_key| raw:: html + + <span id="copy_key">Loading...</span> + <script> + var tag = document.getElementById('copy_key'); + if (navigator.appVersion.indexOf('Mac') >= 0) { + tag.innerHTML = '⌘-C'; + } else { + tag.innerHTML = 'Ctrl-C'; + } + </script> + +.. |paste_key| raw:: html + + <span id="paste_key">Loading...</span> + <script> + var tag = document.getElementById('paste_key'); + if (navigator.appVersion.indexOf('Mac') >= 0) { + tag.innerHTML = '⌘-V'; + } else { + tag.innerHTML = 'Ctrl-V'; + } + </script> diff --git a/native_client_sdk/src/doc/nacldev/editing.inc b/native_client_sdk/src/doc/nacldev/editing.inc new file mode 100644 index 0000000..2468e0b --- /dev/null +++ b/native_client_sdk/src/doc/nacldev/editing.inc @@ -0,0 +1,22 @@ +Editing +``````` + +To follow along in this codelab, you'll need to use a text editor to modify +various files in our development environment. +There are currently two editor options, nano or vim. +We have an Emacs port, but it is not yet available in the Dev Environment +(coming soon). +If you're unsure what to pick, nano is simpler to start with and has on-screen +help. + +* You can open **nano** like this:: + + $ nano <filename> + + Here's an online `nano tutorial <http://mintaka.sdsu.edu/reu/nano.html>`_. + +* You can open **vim** like this:: + + $ vim <filename> + + Here's an online `vim tutorial <http://www.openvim.com/tutorial.html>`_. diff --git a/native_client_sdk/src/doc/nacldev/git.inc b/native_client_sdk/src/doc/nacldev/git.inc new file mode 100644 index 0000000..d0b4b5f --- /dev/null +++ b/native_client_sdk/src/doc/nacldev/git.inc @@ -0,0 +1,13 @@ +Git Setup +========= + +This tutorial also uses a revision control program called +`git <http://en.wikipedia.org/wiki/Git_(software)>`_. +In order to commit to a git repository, +you need to setup your environment to with your identity. + +Run these commands (with your info) to setup your `~/.gitconfig` +for use:: + + git config --global user.name "John Doe" + git config --global user.email johndoe@example.com diff --git a/native_client_sdk/src/doc/nacldev/navigating.inc b/native_client_sdk/src/doc/nacldev/navigating.inc new file mode 100644 index 0000000..c66b604 --- /dev/null +++ b/native_client_sdk/src/doc/nacldev/navigating.inc @@ -0,0 +1,16 @@ +Navigating in the Dev Environment +================================= + +The NaCl Dev Environment behaves like a mini-UNIX system. +You start-up in bash command prompt. +Standard UNIX commands like cd, ls, mkdir, rm, rmdir, etc. +can be used to navigate and modify the Dev Environment's +virtual filesystem. + +There are 3 locations mounted by the environment: + + * /tmp mounts the HTML5 Filesystem temporary storage area. + * /mnt/html5 mounts the HTML5 Filesystem persistent storage area. + * Your home directory ~/, located in /home/user, + mounts a portion of the HTML5 Filsystem persistent storage area + that corresponds to the /mnt/html5/home directory. diff --git a/native_client_sdk/src/doc/nacldev/setup_app.inc b/native_client_sdk/src/doc/nacldev/setup_app.inc new file mode 100644 index 0000000..e7ffdb1 --- /dev/null +++ b/native_client_sdk/src/doc/nacldev/setup_app.inc @@ -0,0 +1,33 @@ +Setup +----- + +For this codelab, you will need to install the our +Beta NaCl Dev Environment App in your web browser. + +.. raw:: html + + <a href="https://chrome.google.com/webstore/detail/nacl-development-environm/aljpgkjeipgnmdpikaajmnepbcfkglfa" + target="_blank">Click here to install the environment.</a> + +You will need to click "Install" to add the NaCl Dev Environment +to your browser. + +NOTE: This environment will leave a substantial (800MB) payload in your +browser. See the cleanup section below to learn how to recover this space. + +Once the installation is complete, run the app. + +On the first run, it will download several packages. +Once download is complete you should see a bash prompt:: + + bash.nmf-4.3$ + +.. include:: ../nacldev/web_tools_note.inc + +.. include:: ../nacldev/navigating.inc + +.. include:: ../nacldev/clipboard_app.inc + +.. include:: ../nacldev/editing.inc + +.. include:: ../nacldev/git.inc diff --git a/native_client_sdk/src/doc/nacldev/setup_web.inc b/native_client_sdk/src/doc/nacldev/setup_web.inc new file mode 100644 index 0000000..6fd32db --- /dev/null +++ b/native_client_sdk/src/doc/nacldev/setup_web.inc @@ -0,0 +1,37 @@ +Setup +----- + +For this codelab, you will need to point your web browser at +the Beta preview of our in-browser NaCl Dev Environment. + +.. raw:: html + + <a href="https://naclports.storage.googleapis.com/builds/pepper_41/trunk-169-gc77aece/publish/devenv/pnacl/app/bash.html" + target="_blank">Click here to open the environment.</a> + +While no installation is needed, the first load of the page will +require you to agree to allow the page unlimited storage +(Click "Ok" in the bar at the top of your browser window.) + +The first run requires a large download. Please be patient. +Also, as PNaCl translates executables to native code on demand, +each program will also have have a noticable load delay on first run. +We're actively working to improve this. + +NOTE: This environment will leave a substantial (800MB) payload in your +browser. See the cleanup section below to learn how to recover this space. + +Once the download is complete you should see a bash prompt:: + + WARNING: gcc not yet available for your platform (coming soon). + bash.nmf-4.3$ + +.. include:: ../nacldev/web_tools_note.inc + +.. include:: ../nacldev/navigating.inc + +.. include:: ../nacldev/clipboard_web.inc + +.. include:: ../nacldev/editing.inc + +.. include:: ../nacldev/git.inc diff --git a/native_client_sdk/src/doc/nacldev/web_tools_note.inc b/native_client_sdk/src/doc/nacldev/web_tools_note.inc new file mode 100644 index 0000000..4daa543 --- /dev/null +++ b/native_client_sdk/src/doc/nacldev/web_tools_note.inc @@ -0,0 +1,19 @@ +Our Web-based Tools +=================== + +These development tools are a `work in progress <nacldev>`_. +At this point, they are a learning tool and demonstration of NaCl's +flexibility, but are not the recommended tools for a production application. +In the future, that may change, but for the moment, +to develop a substantial application for Native Client / +Portable Native Client, +we recommend you use the +`Native Client SDK </native-client/sdk/download>`_. + +.. raw:: html + + <b><font color="#880000"> + NOTE: The NaCl Development Environment is not yet stable. + Ideally user data is preserved, but currently it can be lost during updates + or sporadically. We're working to resolve this. + </font></b> diff --git a/native_client_sdk/src/doc/sitemap.rst b/native_client_sdk/src/doc/sitemap.rst index 83bb42f..9691c34 100644 --- a/native_client_sdk/src/doc/sitemap.rst +++ b/native_client_sdk/src/doc/sitemap.rst @@ -38,6 +38,10 @@ Contents: devguide/coding/view-focus-input-events.rst devguide/distributing.rst io2014.rst + cds2014/index.rst + cds2014/python.rst + cds2014/cpp.rst + nacldev.rst community/index.rst community/security-contest/index.rst community/security-contest/contest-announcement.rst |