[piccolo2d] r1288 committed - add og:image meta tag to website. refs #266

4 views
Skip to first unread message

picc...@googlecode.com

unread,
Mar 22, 2015, 5:14:28 PM3/22/15
to piccol...@googlegroups.com
Revision: 1288
Author: mr0...@mro.name
Date: Sun Mar 22 21:13:32 2015 UTC
Log: add og:image meta tag to website. refs #266
https://code.google.com/p/piccolo2d/source/detail?r=1288

Modified:
/site/README.txt
/site/applications/index.html
/site/community.html
/site/download.html
/site/index.html
/site/learn/about.html
/site/learn/api.html
/site/learn/comparison.html
/site/learn/dev-faq.html
/site/learn/effects.html
/site/learn/fisheye.html
/site/learn/get-started.html
/site/learn/grapheditor.html
/site/learn/graphics.html
/site/learn/index.html
/site/learn/interaction.html
/site/learn/interface.html
/site/learn/out-of-box-dotnet.html
/site/learn/out-of-box-java.html
/site/learn/patterns.html
/site/learn/publications.html
/site/play/index.html
/site/press.html
/site/sponsors.html
/site/tools/inject_navigation.rb

=======================================
--- /site/README.txt Tue Jul 21 12:13:23 2009 UTC
+++ /site/README.txt Sun Mar 22 21:13:32 2015 UTC
@@ -7,12 +7,12 @@
2) edit whatever you want to fix,

3) re-inject the navigation html code into the static html pages:
- $ ruby tools/inject_navigation.rb index.html ...
+ $ ruby ./tools/inject_navigation.rb index.html ...

4) tidy the html as the above script asks you to,

5) ensure proper mime-type settings (svn):
- $ sh tools/svn-mime-types.sh
+ $ sh ./tools/svn-mime-types.sh

6) verify - test your changes locally

=======================================
--- /site/applications/index.html Tue Nov 12 17:12:17 2013 UTC
+++ /site/applications/index.html Sun Mar 22 21:13:32 2015 UTC
@@ -4,13 +4,15 @@
<html lang='en' xml:lang='en' xmlns='http://www.w3.org/1999/xhtml'>
<head>
<meta name='generator' content=
- 'HTML Tidy for Linux/x86 (vers 7 December 2008), see www.w3.org' />
- <meta content='text/html; charset=us-ascii' http-equiv='Content-Type' />
+ 'HTML Tidy for Mac OS X (vers 31 October 2006 - Apple Inc. build 15.12),
see www.w3.org' />
+ <meta content='text/html; charset=utf-8' http-equiv='Content-Type' />
<meta name='description' content='Home Page for the Piccolo2D project.'
/>
<meta name='format' content='text/html' />
<meta name='keywords' content=
'piccolo2d, piccolo2d.net, piccolo, piccolo.net, zoomable, zui, user
interfaces, human-computer interaction, HCI, visualization, education' />
<meta name='relation' content='(contained in)=http://www.piccolo2d.org'
/>
+ <link href='../images/Piccolo2D-Logo.png' rel='image_src' />
+ <meta content='../images/Piccolo2D-Logo.png' name='og:image'
property='og:image' />

<title>Piccolo2D - Applications Built on Piccolo2D</title>
<style type='text/css'>
@@ -270,8 +272,8 @@
</div>

<div class='box'>
- <a href='http://simbrain.net/'><img src='simbrain/simbrain.jpg'
height='154' alt=
- 'todo' width='172' /><br />
+ <a href='http://simbrain.net/'><img src='simbrain/simbrain.jpg'
height='154' alt='todo'
+ width='172' /><br />
Simbrain<br />
simbrain.net</a>
</div>
@@ -379,8 +381,8 @@
</div>

<div class='box'>
- <a href='http://imapping.info'><img src='imapping.png' height='150'
alt=
- 'iMapping screenshot' width='200' /><br />
+ <a href='http://imapping.info'><img src='imapping.png' height='150'
alt='iMapping screenshot'
+ width='200' /><br />
iMapping<br />
imapping.info</a>
</div>
@@ -393,15 +395,15 @@
</div>

<div class='box'>
- <a href='http://nofrillsjava.com/dr/?q=node/5'><img
src='DxfViewerThumbnail.jpg' height='158' alt=
- 'Autocad DXF File Viewer screenshot' width='180' /><br />
+ <a href='http://nofrillsjava.com/dr/?q=node/5'><img
src='DxfViewerThumbnail.jpg' height='158'
+ alt='Autocad DXF File Viewer screenshot' width='180' /><br />
Autocad DXF File Viewer<br />
Robert Kovacs</a>
</div>

<div class='box'>
- <a href='http://www.jmolly.com/heatlamp/'><img src='heatlamp.png'
height='156' alt=
- Heatlamp screenshot' width='250' /><br />
+ <a href='http://www.jmolly.com/heatlamp/'><img src='heatlamp.png'
height='156' alt="Heatlamp"
+ width='250' /><br />
Heatlamp<br />
JMolly</a>
</div>
=======================================
--- /site/community.html Wed Dec 22 17:16:49 2010 UTC
+++ /site/community.html Sun Mar 22 21:13:32 2015 UTC
@@ -4,13 +4,15 @@
<html lang='en' xml:lang='en' xmlns='http://www.w3.org/1999/xhtml'>
<head>
<meta name='generator' content=
- 'HTML Tidy for Linux/x86 (vers 7 December 2008), see www.w3.org' />
- <meta content='text/html; charset=us-ascii' http-equiv='Content-Type' />
+ 'HTML Tidy for Mac OS X (vers 31 October 2006 - Apple Inc. build 15.12),
see www.w3.org' />
+ <meta content='text/html; charset=utf-8' http-equiv='Content-Type' />
<meta name='description' content='Home Page for the Piccolo2D project.'
/>
<meta name='format' content='text/html' />
<meta name='keywords' content=
'piccolo2d, piccolo2d.net, piccolo, piccolo.net, zoomable, zui, user
interfaces, human-computer interaction, HCI, visualization, education' />
<meta name='relation' content='(contained in)=http://www.piccolo2d.org'
/>
+ <link href='images/Piccolo2D-Logo.png' rel='image_src' />
+ <meta content='images/Piccolo2D-Logo.png' name='og:image'
property='og:image' />

<title>Piccolo2D - Community</title>
<link href='piccolo2d.css' rel='stylesheet' type='text/css' />
@@ -86,9 +88,10 @@
<h2 id='maillists'>Mailing Lists / Google Groups</h2>

<dl>
- <dt><a
href='http://groups.google.com/group/piccolo2d-announce'>Piccolo2D Announce
List</a></dt>
+ <dt><a
href='http://groups.google.com/group/piccolo2d-announce'>Piccolo2D Announce
+ List</a></dt>

- <dd>Receive low-volume project announcements.</dt>
+ <dd>Receive low-volume project announcements.</dd>

<dt><a
href='http://groups.google.com/group/piccolo2d-users'>Piccolo2D Users
List</a></dt>

=======================================
--- /site/download.html Mon Jan 27 17:26:43 2014 UTC
+++ /site/download.html Sun Mar 22 21:13:32 2015 UTC
@@ -4,13 +4,15 @@
<html lang='en' xml:lang='en' xmlns='http://www.w3.org/1999/xhtml'>
<head>
<meta name='generator' content=
- 'HTML Tidy for Linux/x86 (vers 7 December 2008), see www.w3.org' />
- <meta content='text/html; charset=us-ascii' http-equiv='Content-Type' />
+ 'HTML Tidy for Mac OS X (vers 31 October 2006 - Apple Inc. build 15.12),
see www.w3.org' />
+ <meta content='text/html; charset=utf-8' http-equiv='Content-Type' />
<meta name='description' content='Home Page for the Piccolo2D project.'
/>
<meta name='format' content='text/html' />
<meta name='keywords' content=
'piccolo2d, piccolo2d.net, piccolo, piccolo.net, zoomable, zui, user
interfaces, human-computer interaction, HCI, visualization, education' />
<meta name='relation' content='(contained in)=http://www.piccolo2d.org'
/>
+ <link href='images/Piccolo2D-Logo.png' rel='image_src' />
+ <meta content='images/Piccolo2D-Logo.png' name='og:image'
property='og:image' />

<title>Piccolo2D - Download</title>
<style type='text/css'>
@@ -109,17 +111,30 @@

<h3>Piccolo2D.Java</h3>

- <p>Google Code hosting no longer allows new downloads to be created,
so all recent Piccolo2D.Java
- versions are available only through the <a
href="http://search.maven.org/#search|ga|1|g%3A%22org.piccolo2d%22">Maven
Central repository</a> or via release tag in the subversion repository.</p>
+ <p>Google Code hosting no longer allows new downloads to be created,
so all recent
+ Piccolo2D.Java versions are available only through the <a href=
+ "http://search.maven.org/#search|ga|1|g%3A%22org.piccolo2d%22">Maven
Central repository</a> or
+ via release tag in the subversion repository.</p>

- <p>The latest version of Piccolo2D.Java compatible with JDK versions
1.6 or newer is <a href="http://search.maven.org/#search|ga|1|
g%3A%22org.piccolo2d%22%20AND%20v%3A%223.0%22">3.0</a>. The svn release
tag is <a
href="http://code.google.com/p/piccolo2d/source/browse#svn%2Fpiccolo2d.java%2Ftags%2Fpiccolo2d-complete-3.0">tags/piccolo2d-complete-3.0</a>.</p>
+ <p>The latest version of Piccolo2D.Java compatible with JDK versions
1.6 or newer is <a href=
+ "http://search.maven.org/#search|ga|1|
g%3A%22org.piccolo2d%22%20AND%20v%3A%223.0%22">3.0</a>.
+ The svn release tag is <a href=
+ "http://code.google.com/p/piccolo2d/source/browse#svn%2Fpiccolo2d.java%2Ftags%2Fpiccolo2d-complete-3.0">
+ tags/piccolo2d-complete-3.0</a>.</p>

- <p>The latest version of Piccolo2D.Java compatible with JDK versions
1.5 or newer is <a href="http://search.maven.org/#search|ga|1|
g%3A%22org.piccolo2d%22%20AND%20v%3A%222.0%22">2.0</a>. The svn release
tag is <a
href="http://code.google.com/p/piccolo2d/source/browse#svn%2Fpiccolo2d.java%2Ftags%2Fpiccolo2d-complete-2.0">tags/piccolo2d-complete-2.0</a>.</p>
+ <p>The latest version of Piccolo2D.Java compatible with JDK versions
1.5 or newer is <a href=
+ "http://search.maven.org/#search|ga|1|
g%3A%22org.piccolo2d%22%20AND%20v%3A%222.0%22">2.0</a>.
+ The svn release tag is <a href=
+ "http://code.google.com/p/piccolo2d/source/browse#svn%2Fpiccolo2d.java%2Ftags%2Fpiccolo2d-complete-2.0">
+ tags/piccolo2d-complete-2.0</a>.</p>

- <p>The latest version of Piccolo2D.Java compatible with JDK versions
1.4 or newer is <a href="http://search.maven.org/#search|ga|1|
g%3A%22org.piccolo2d%22%20AND%20v%3A%221.3.2%22">1.3.2</a>. The svn
release tag is <a
href="http://code.google.com/p/piccolo2d/source/browse#svn%2Fpiccolo2d.java%2Ftags%2Fpiccolo2d-complete-1.3.2">tags/piccolo2d-complete-1.3.2</a>.</p>
-</p>
+ <p>The latest version of Piccolo2D.Java compatible with JDK versions
1.4 or newer is <a href=
+ "http://search.maven.org/#search|ga|1|
g%3A%22org.piccolo2d%22%20AND%20v%3A%221.3.2%22">1.3.2</a>.
+ The svn release tag is <a href=
+ "http://code.google.com/p/piccolo2d/source/browse#svn%2Fpiccolo2d.java%2Ftags%2Fpiccolo2d-complete-1.3.2">
+ tags/piccolo2d-complete-1.3.2</a>.</p>

- <h3>Piccolo2D.NET</h3>
+ <h3>Piccolo2D.NET</h3>

<div class='box'>
<b>Piccolo.NET 1.2</b>
@@ -187,18 +202,25 @@
<li><a
href='http://piccolo2d.googlecode.com/files/piccolo2d-1.3.1-src.zip'>Source
(747KB)</a></li>

- <li><a href=
- 'http://piccolo2d.googlecode.com/files/piccolo2d-1.3.1-bin.zip'>Compiled
Source
+ <li><a
href='http://piccolo2d.googlecode.com/files/piccolo2d-1.3.1-bin.zip'>Compiled
Source
(2.9MB)</a></li>

<li>Java API (Web)
- <ul>
- <li><a
href='./doc/piccolo2d.java/release-1.3.1/core/apidocs/index.html'>core</a></li>
- <li><a
href='./doc/piccolo2d.java/release-1.3.1/extras/apidocs/index.html'>extras</a></li>
- <li><a
href='./doc/piccolo2d.java/release-1.3.1/examples/apidocs/index.html'>examples</a></li>
- <li><a
href='./doc/piccolo2d.java/release-1.3.1/swt/apidocs/index.html'>swt</a></li>
- <li><a
href='./doc/piccolo2d.java/release-1.3.1/swt-examples/apidocs/index.html'>swt-examples</a></li>
- </ul>
+
+ <ul>
+ <li><a
href='./doc/piccolo2d.java/release-1.3.1/core/apidocs/index.html'>core</a></li>
+
+ <li><a href=
+ './doc/piccolo2d.java/release-1.3.1/extras/apidocs/index.html'>extras</a></li>
+
+ <li><a href=
+ './doc/piccolo2d.java/release-1.3.1/examples/apidocs/index.html'>examples</a></li>
+
+ <li><a
href='./doc/piccolo2d.java/release-1.3.1/swt/apidocs/index.html'>swt</a></li>
+
+ <li><a href=
+ './doc/piccolo2d.java/release-1.3.1/swt-examples/apidocs/index.html'>swt-examples</a></li>
+ </ul>
</li>

<li>Issues: <a href=
@@ -224,18 +246,25 @@
<li><a
href='http://piccolo2d.googlecode.com/files/piccolo2d-1.3-src.zip'>Source
(730KB)</a></li>

- <li><a href=
- 'http://piccolo2d.googlecode.com/files/piccolo2d-1.3-bin.zip'>Compiled
Source
+ <li><a
href='http://piccolo2d.googlecode.com/files/piccolo2d-1.3-bin.zip'>Compiled
Source
(2.8MB)</a></li>

<li>Java API (Web)
- <ul>
- <li><a
href='./doc/piccolo2d.java/release-1.3/core/apidocs/index.html'>core</a></li>
- <li><a
href='./doc/piccolo2d.java/release-1.3/extras/apidocs/index.html'>extras</a></li>
- <li><a
href='./doc/piccolo2d.java/release-1.3/examples/apidocs/index.html'>examples</a></li>
- <li><a
href='./doc/piccolo2d.java/release-1.3/swt/apidocs/index.html'>swt</a></li>
- <li><a
href='./doc/piccolo2d.java/release-1.3/swt-examples/apidocs/index.html'>swt-examples</a></li>
- </ul>
+
+ <ul>
+ <li><a
href='./doc/piccolo2d.java/release-1.3/core/apidocs/index.html'>core</a></li>
+
+ <li><a href=
+ './doc/piccolo2d.java/release-1.3/extras/apidocs/index.html'>extras</a></li>
+
+ <li><a href=
+ './doc/piccolo2d.java/release-1.3/examples/apidocs/index.html'>examples</a></li>
+
+ <li><a
href='./doc/piccolo2d.java/release-1.3/swt/apidocs/index.html'>swt</a></li>
+
+ <li><a href=
+ './doc/piccolo2d.java/release-1.3/swt-examples/apidocs/index.html'>swt-examples</a></li>
+ </ul>
</li>

<li>Issues: <a href=
@@ -284,9 +313,8 @@
<li><a
href='http://piccolo2d.googlecode.com/files/Piccolo.Java-1.2.zip'>Source
(1.8MB)</a></li>

- <li><a href=
- 'http://piccolo2d.googlecode.com/files/Piccolo.Java-1.2-compiled.zip'>Compiled
Source
- (4.3MB)</a></li>
+ <li><a
href='http://piccolo2d.googlecode.com/files/Piccolo.Java-1.2-compiled.zip'>Compiled
+ Source (4.3MB)</a></li>
</ul>
</div>

=======================================
--- /site/index.html Mon Mar 22 15:59:31 2010 UTC
+++ /site/index.html Sun Mar 22 21:13:32 2015 UTC
@@ -3,40 +3,44 @@

<html lang='en' xml:lang='en' xmlns='http://www.w3.org/1999/xhtml'>
<head>
- <meta name='generator' content=
- 'HTML Tidy for Linux/x86 (vers 7 December 2008), see www.w3.org' />
- <meta content='text/html; charset=us-ascii' http-equiv='Content-Type' />
- <meta name='description' content='Home Page for the Piccolo2D project.'
/>
- <meta name='format' content='text/html' />
- <meta name='keywords' content=
- 'piccolo2d, piccolo2d.net, piccolo, piccolo.net, zoomable, zui, user
interfaces, human-computer interaction, HCI, visualization, education' />
- <meta name='relation' content='(contained in)=http://www.piccolo2d.org'
/>
+ <meta content=
+ 'HTML Tidy for Mac OS X (vers 31 October 2006 - Apple Inc. build 15.12),
see www.w3.org' name=
+ 'generator' />
+ <meta content='text/html; charset=utf-8' http-equiv='Content-Type' />
+ <meta content='Home Page for the Piccolo2D project.' name='description'
/>
+ <meta content='text/html' name='format' />
+ <meta content=
+ 'piccolo2d, piccolo2d.net, piccolo, piccolo.net, zoomable, zui, user
interfaces, human-computer interaction, HCI, visualization, education'
+ name='keywords' />
+ <meta content='(contained in)=http://www.piccolo2d.org' name='relation'
/>
+ <link href='images/Piccolo2D-Logo.png' rel='image_src' />
+ <meta content='images/Piccolo2D-Logo.png' name='og:image'
property='og:image' />

<title>Piccolo2D - A Structured 2D Graphics Framework</title>
<link href='piccolo2d.css' rel='stylesheet' type='text/css' />
- <link
href='http://groups.google.com/group/piccolo2d-announce/feed/atom_v1_0_msgs.xml'
title=
- 'Announcements (low traffic)' rel='alternate'
type='application/atom+xml' />
- <link
href='http://groups.google.com/group/piccolo2d-users/feed/atom_v1_0_msgs.xml'
title=
- 'User Mailing List (high traffic)' rel='alternate'
type='application/atom+xml' />
- <link
href='http://groups.google.com/group/piccolo2d-dev/feed/atom_v1_0_msgs.xml'
title=
- 'Developers Mailing List' rel='alternate' type='application/atom+xml' />
+ <link
href='http://groups.google.com/group/piccolo2d-announce/feed/atom_v1_0_msgs.xml'
rel=
+ 'alternate' title='Announcements (low traffic)'
type='application/atom+xml' />
+ <link
href='http://groups.google.com/group/piccolo2d-users/feed/atom_v1_0_msgs.xml'
rel=
+ 'alternate' title='User Mailing List (high traffic)'
type='application/atom+xml' />
+ <link
href='http://groups.google.com/group/piccolo2d-dev/feed/atom_v1_0_msgs.xml'
rel='alternate'
+ title='Developers Mailing List' type='application/atom+xml' />
</head>

<body>
<div id='navigation'>
<!--
this navigation node is auto-generated and injected
-by the script tools/inject_navigation.rb
+by the script ./tools/inject_navigation.rb

DO NOT EDIT IT MANUALLY!!!
-->

- <p class='header'><a href='index.html'><img
src='images/Piccolo2D-Logo-small.png' alt=
- 'Piccolo2D Logo' /></a></p>
+ <p class='header'><a href='index.html'><img alt='Piccolo2D Logo' src=
+ 'images/Piccolo2D-Logo-small.png' /></a></p>

<ul>
<li>
- <a href='index.html' class='selected'>Piccolo2D&nbsp;Home</a>
+ <a class='selected' href='index.html'>Piccolo2D&nbsp;Home</a>

<ul>
<li><a href='play/index.html'>Play</a></li>
@@ -64,12 +68,11 @@
'http://code.google.com/p/piccolo2d/issues/entry?template=User%20defect%20report'>Found
a
Typo?</a></p>

- <p class='validators'><a
href='http://validator.w3.org/check/referer'><img src=
- 'http://www.w3.org/Icons/valid-xhtml10-blue' alt='Valid XHTML 1.0!'
style=
+ <p class='validators'><a
href='http://validator.w3.org/check/referer'><img alt=
+ 'Valid XHTML 1.0!' src='http://www.w3.org/Icons/valid-xhtml10-blue'
style=
'border:0;width:88px;height:31px' /></a> <a href=
- 'http://jigsaw.w3.org/css-validator/check/referer'><img src=
- 'http://www.w3.org/Icons/valid-css-blue' alt='Valid CSS1!' style=
- 'border:0;width:88px;height:31px' /></a></p>
+ 'http://jigsaw.w3.org/css-validator/check/referer'><img alt='Valid
CSS1!' src=
+ 'http://www.w3.org/Icons/valid-css-blue'
style='border:0;width:88px;height:31px' /></a></p>
</div>

<div id='main'>
@@ -116,13 +119,13 @@

<table id='impressions' summary='Piccolo2D Impressions'>
<tr>
- <td><img src='images/spacetree.jpg' alt='Spacetree Screenshot'
/></td>
+ <td><img alt='Spacetree Screenshot' src='images/spacetree.jpg'
/></td>

- <td><img src='images/icdl-small.png' alt='ICDL Screenshot' /></td>
+ <td><img alt='ICDL Screenshot' src='images/icdl-small.png' /></td>

- <td><img src='images/photomesa-small.jpg' alt='Photomesa Screenshot'
/></td>
+ <td><img alt='Photomesa Screenshot' src='images/photomesa-small.jpg'
/></td>

- <td><img src='images/kidpad.jpg' alt='KidPad Screenshot' /></td>
+ <td><img alt='KidPad Screenshot' src='images/kidpad.jpg' /></td>
</tr>
</table>
</body>
=======================================
--- /site/learn/about.html Mon Nov 2 23:03:07 2009 UTC
+++ /site/learn/about.html Sun Mar 22 21:13:32 2015 UTC
@@ -3,14 +3,18 @@

<html lang='en' xml:lang='en' xmlns='http://www.w3.org/1999/xhtml'>
<head>
- <meta name='generator' content=
- 'HTML Tidy for Linux/x86 (vers 7 December 2008), see www.w3.org' />
- <meta content='text/html; charset=us-ascii' http-equiv='Content-Type' />
- <meta name='description' content='Home Page for the Piccolo2D project.'
/>
- <meta name='format' content='text/html' />
- <meta name='keywords' content=
- 'piccolo2d, piccolo2d.net, piccolo, piccolo.net, zoomable, zui, user
interfaces, human-computer interaction, HCI, visualization, education' />
- <meta name='relation' content='(contained in)=http://www.piccolo2d.org'
/>
+ <meta content=
+ 'HTML Tidy for Mac OS X (vers 31 October 2006 - Apple Inc. build 15.12),
see www.w3.org' name=
+ 'generator' />
+ <meta content='text/html; charset=utf-8' http-equiv='Content-Type' />
+ <meta content='Home Page for the Piccolo2D project.' name='description'
/>
+ <meta content='text/html' name='format' />
+ <meta content=
+ 'piccolo2d, piccolo2d.net, piccolo, piccolo.net, zoomable, zui, user
interfaces, human-computer interaction, HCI, visualization, education'
+ name='keywords' />
+ <meta content='(contained in)=http://www.piccolo2d.org' name='relation'
/>
+ <link href='../images/Piccolo2D-Logo.png' rel='image_src' />
+ <meta content='../images/Piccolo2D-Logo.png' name='og:image'
property='og:image' />

<title>Piccolo2D - About</title>
<link href='../piccolo2d.css' rel='stylesheet' type='text/css' />
@@ -20,13 +24,13 @@
<div id='navigation'>
<!--
this navigation node is auto-generated and injected
-by the script tools/inject_navigation.rb
+by the script ./tools/inject_navigation.rb

DO NOT EDIT IT MANUALLY!!!
-->

- <p class='header'><a href='../index.html'><img
src='../images/Piccolo2D-Logo-small.png' alt=
- 'Piccolo2D Logo' /></a></p>
+ <p class='header'><a href='../index.html'><img alt='Piccolo2D Logo'
src=
+ '../images/Piccolo2D-Logo-small.png' /></a></p>

<ul>
<li>
@@ -39,7 +43,7 @@
<a href='../learn/index.html'>Learn</a>

<ul>
- <li><a href='../learn/about.html'
class='selected'>About&nbsp;Piccolo2D</a></li>
+ <li><a class='selected'
href='../learn/about.html'>About&nbsp;Piccolo2D</a></li>

<li><a
href='../learn/patterns.html'>Piccolo2D&nbsp;Patterns</a></li>

@@ -78,12 +82,11 @@
'http://code.google.com/p/piccolo2d/issues/entry?template=User%20defect%20report'>Found
a
Typo?</a></p>

- <p class='validators'><a
href='http://validator.w3.org/check/referer'><img src=
- 'http://www.w3.org/Icons/valid-xhtml10-blue' alt='Valid XHTML 1.0!'
style=
+ <p class='validators'><a
href='http://validator.w3.org/check/referer'><img alt=
+ 'Valid XHTML 1.0!' src='http://www.w3.org/Icons/valid-xhtml10-blue'
style=
'border:0;width:88px;height:31px' /></a> <a href=
- 'http://jigsaw.w3.org/css-validator/check/referer'><img src=
- 'http://www.w3.org/Icons/valid-css-blue' alt='Valid CSS1!' style=
- 'border:0;width:88px;height:31px' /></a></p>
+ 'http://jigsaw.w3.org/css-validator/check/referer'><img alt='Valid
CSS1!' src=
+ 'http://www.w3.org/Icons/valid-css-blue'
style='border:0;width:88px;height:31px' /></a></p>
</div>

<div id='main'>
@@ -160,7 +163,7 @@
affine transform which allows every object to be arbitrarily
translated, scaled, rotated, and
sheared. In addition, the cameras have affine transforms that specify
their view into the
scene.</p>
-
+
<p>This simple approach is very powerful because it enables a very
decoupled object oriented
approach to graphical applications. Piccolo2D defines several visual
components, and
applications can readily extend them or define their own. Piccolo2D
supports dynamic and
=======================================
--- /site/learn/api.html Mon Jan 27 17:26:43 2014 UTC
+++ /site/learn/api.html Sun Mar 22 21:13:32 2015 UTC
@@ -4,13 +4,15 @@
<html lang='en' xml:lang='en' xmlns='http://www.w3.org/1999/xhtml'>
<head>
<meta name='generator' content=
- 'HTML Tidy for Linux/x86 (vers 7 December 2008), see www.w3.org' />
- <meta content='text/html; charset=us-ascii' http-equiv='Content-Type' />
+ 'HTML Tidy for Mac OS X (vers 31 October 2006 - Apple Inc. build 15.12),
see www.w3.org' />
+ <meta content='text/html; charset=utf-8' http-equiv='Content-Type' />
<meta name='description' content='Home Page for the Piccolo2D project.'
/>
<meta name='format' content='text/html' />
<meta name='keywords' content=
'piccolo2d, piccolo2d.net, piccolo, piccolo.net, zoomable, zui, user
interfaces, human-computer interaction, HCI, visualization, education' />
<meta name='relation' content='(contained in)=http://www.piccolo2d.org'
/>
+ <link href='../images/Piccolo2D-Logo.png' rel='image_src' />
+ <meta content='../images/Piccolo2D-Logo.png' name='og:image'
property='og:image' />

<title>Piccolo2D - API Documentation</title>
<link href='../piccolo2d.css' rel='stylesheet' type='text/css' />
@@ -102,13 +104,18 @@
of the code, which includes the documentation.</p>

<ul>
- <li>Piccolo2D.Java API</a></li>
- <ul>
- <li><a
href='../doc/piccolo2d.java/release-3.0/core/index.html'>core</a></li>
- <li><a
href='../doc/piccolo2d.java/release-3.0/extras/index.html'>extras</a></li>
- <li><a
href='../doc/piccolo2d.java/release-3.0/swt/index.html'>swt</a></li>
- </ul>
- <br/>
+ <li>Piccolo2D.Java API</li>
+
+ <li style="list-style: none">
+ <ul>
+ <li><a
href='../doc/piccolo2d.java/release-3.0/core/index.html'>core</a></li>
+
+ <li><a
href='../doc/piccolo2d.java/release-3.0/extras/index.html'>extras</a></li>
+
+ <li><a
href='../doc/piccolo2d.java/release-3.0/swt/index.html'>swt</a></li>
+ </ul><br />
+ </li>
+
<li><a
href='../doc/piccolo.net/release-1.2/apidocs/index.html'>Piccolo2D.NET
API</a></li>
</ul>

=======================================
--- /site/learn/comparison.html Tue Dec 21 17:12:11 2010 UTC
+++ /site/learn/comparison.html Sun Mar 22 21:13:32 2015 UTC
@@ -3,14 +3,18 @@

<html lang='en' xml:lang='en' xmlns='http://www.w3.org/1999/xhtml'>
<head>
- <meta name='generator' content=
- 'HTML Tidy for Linux/x86 (vers 7 December 2008), see www.w3.org' />
- <meta content='text/html; charset=us-ascii' http-equiv='Content-Type' />
- <meta name='description' content='Home Page for the Piccolo2D project.'
/>
- <meta name='format' content='text/html' />
- <meta name='keywords' content=
- 'piccolo2d, piccolo2d.net, piccolo, piccolo.net, zoomable, zui, user
interfaces, human-computer interaction, HCI, visualization, education' />
- <meta name='relation' content='(contained in)=http://www.piccolo2d.org'
/>
+ <meta content=
+ 'HTML Tidy for Mac OS X (vers 31 October 2006 - Apple Inc. build 15.12),
see www.w3.org' name=
+ 'generator' />
+ <meta content='text/html; charset=utf-8' http-equiv='Content-Type' />
+ <meta content='Home Page for the Piccolo2D project.' name='description'
/>
+ <meta content='text/html' name='format' />
+ <meta content=
+ 'piccolo2d, piccolo2d.net, piccolo, piccolo.net, zoomable, zui, user
interfaces, human-computer interaction, HCI, visualization, education'
+ name='keywords' />
+ <meta content='(contained in)=http://www.piccolo2d.org' name='relation'
/>
+ <link href='../images/Piccolo2D-Logo.png' rel='image_src' />
+ <meta content='../images/Piccolo2D-Logo.png' name='og:image'
property='og:image' />

<title>Piccolo2D - Piccolo2D in Comparison</title>
<link href='../piccolo2d.css' rel='stylesheet' type='text/css' />
@@ -20,13 +24,13 @@
<div id='navigation'>
<!--
this navigation node is auto-generated and injected
-by the script tools/inject_navigation.rb
+by the script ./tools/inject_navigation.rb

DO NOT EDIT IT MANUALLY!!!
-->

- <p class='header'><a href='../index.html'><img
src='../images/Piccolo2D-Logo-small.png' alt=
- 'Piccolo2D Logo' /></a></p>
+ <p class='header'><a href='../index.html'><img alt='Piccolo2D Logo'
src=
+ '../images/Piccolo2D-Logo-small.png' /></a></p>

<ul>
<li>
@@ -48,8 +52,8 @@
<li><a
href='../learn/api.html'>API&nbsp;Documentation</a></li>

<li>
- <a href='../learn/comparison.html' class=
- 'selected'>Piccolo2D&nbsp;in&nbsp;Comparison</a>
+ <a class='selected' href=
+ '../learn/comparison.html'>Piccolo2D&nbsp;in&nbsp;Comparison</a>

<ul>
<li><a href='#versions'>Piccolo2D&nbsp;Version</a></li>
@@ -89,12 +93,11 @@
'http://code.google.com/p/piccolo2d/issues/entry?template=User%20defect%20report'>Found
a
Typo?</a></p>

- <p class='validators'><a
href='http://validator.w3.org/check/referer'><img src=
- 'http://www.w3.org/Icons/valid-xhtml10-blue' alt='Valid XHTML 1.0!'
style=
+ <p class='validators'><a
href='http://validator.w3.org/check/referer'><img alt=
+ 'Valid XHTML 1.0!' src='http://www.w3.org/Icons/valid-xhtml10-blue'
style=
'border:0;width:88px;height:31px' /></a> <a href=
- 'http://jigsaw.w3.org/css-validator/check/referer'><img src=
- 'http://www.w3.org/Icons/valid-css-blue' alt='Valid CSS1!' style=
- 'border:0;width:88px;height:31px' /></a></p>
+ 'http://jigsaw.w3.org/css-validator/check/referer'><img alt='Valid
CSS1!' src=
+ 'http://www.w3.org/Icons/valid-css-blue'
style='border:0;width:88px;height:31px' /></a></p>
</div>

<div id='main'>
@@ -411,9 +414,9 @@
</dl>

<p>Since the Piccolo2D is a complete rewrite, and a smaller code base
we also put a lot of time
- into making the Piccolo2D source code as readable and straightforward
as possible. It's our hope
- that this should make it much easier to add your own new features to
Piccolo2D then it was to
- do with Jazz.</p>
+ into making the Piccolo2D source code as readable and straightforward
as possible. It's our
+ hope that this should make it much easier to add your own new features
to Piccolo2D then it was
+ to do with Jazz.</p>

<h3>Speed/Memory</h3>

=======================================
--- /site/learn/dev-faq.html Wed Oct 21 16:20:42 2009 UTC
+++ /site/learn/dev-faq.html Sun Mar 22 21:13:32 2015 UTC
@@ -3,14 +3,18 @@

<html lang='en' xml:lang='en' xmlns='http://www.w3.org/1999/xhtml'>
<head>
- <meta name='generator' content=
- 'HTML Tidy for Linux/x86 (vers 7 December 2008), see www.w3.org' />
- <meta content='text/html; charset=us-ascii' http-equiv='Content-Type' />
- <meta name='description' content='Home Page for the Piccolo2D project.'
/>
- <meta name='format' content='text/html' />
- <meta name='keywords' content=
- 'piccolo2d, piccolo2d.net, piccolo, piccolo.net, zoomable, zui, user
interfaces, human-computer interaction, HCI, visualization, education' />
- <meta name='relation' content='(contained in)=http://www.piccolo2d.org'
/>
+ <meta content=
+ 'HTML Tidy for Mac OS X (vers 31 October 2006 - Apple Inc. build 15.12),
see www.w3.org' name=
+ 'generator' />
+ <meta content='text/html; charset=utf-8' http-equiv='Content-Type' />
+ <meta content='Home Page for the Piccolo2D project.' name='description'
/>
+ <meta content='text/html' name='format' />
+ <meta content=
+ 'piccolo2d, piccolo2d.net, piccolo, piccolo.net, zoomable, zui, user
interfaces, human-computer interaction, HCI, visualization, education'
+ name='keywords' />
+ <meta content='(contained in)=http://www.piccolo2d.org' name='relation'
/>
+ <link href='../images/Piccolo2D-Logo.png' rel='image_src' />
+ <meta content='../images/Piccolo2D-Logo.png' name='og:image'
property='og:image' />

<title>Piccolo2D - Developer's FAQ</title>
<link href='../piccolo2d.css' rel='stylesheet' type='text/css' />
@@ -20,13 +24,13 @@
<div id='navigation'>
<!--
this navigation node is auto-generated and injected
-by the script tools/inject_navigation.rb
+by the script ./tools/inject_navigation.rb

DO NOT EDIT IT MANUALLY!!!
-->

- <p class='header'><a href='../index.html'><img
src='../images/Piccolo2D-Logo-small.png' alt=
- 'Piccolo2D Logo' /></a></p>
+ <p class='header'><a href='../index.html'><img alt='Piccolo2D Logo'
src=
+ '../images/Piccolo2D-Logo-small.png' /></a></p>

<ul>
<li>
@@ -51,7 +55,7 @@

<li><a
href='../learn/publications.html'>Publications</a></li>

- <li><a href='../learn/dev-faq.html'
class='selected'>Developer&nbsp;FAQ</a></li>
+ <li><a class='selected'
href='../learn/dev-faq.html'>Developer&nbsp;FAQ</a></li>

<li><a
href='../learn/graphics.html'>Graphics&nbsp;Primer</a></li>
</ul>
@@ -78,12 +82,11 @@
'http://code.google.com/p/piccolo2d/issues/entry?template=User%20defect%20report'>Found
a
Typo?</a></p>

- <p class='validators'><a
href='http://validator.w3.org/check/referer'><img src=
- 'http://www.w3.org/Icons/valid-xhtml10-blue' alt='Valid XHTML 1.0!'
style=
+ <p class='validators'><a
href='http://validator.w3.org/check/referer'><img alt=
+ 'Valid XHTML 1.0!' src='http://www.w3.org/Icons/valid-xhtml10-blue'
style=
'border:0;width:88px;height:31px' /></a> <a href=
- 'http://jigsaw.w3.org/css-validator/check/referer'><img src=
- 'http://www.w3.org/Icons/valid-css-blue' alt='Valid CSS1!' style=
- 'border:0;width:88px;height:31px' /></a></p>
+ 'http://jigsaw.w3.org/css-validator/check/referer'><img alt='Valid
CSS1!' src=
+ 'http://www.w3.org/Icons/valid-css-blue'
style='border:0;width:88px;height:31px' /></a></p>
</div>

<div id='main'>
@@ -173,7 +176,7 @@
because they are stored in the local coordinate system of the
node.&nbsp; That is (0, 0) now
refers to the new origin at (10, 10) in global coordinates.</p>

- <p class='image'><img src='images/faq-coord1.png' alt='Local versus
global coodinates.' /></p>
+ <p class='image'><img alt='Local versus global coodinates.'
src='images/faq-coord1.png' /></p>

<p>Transforms are also hierarchical.&nbsp; That means if you modify a
node's transform, it will
affect that node and all of its children.&nbsp; Let's suppose you add
a child to the node
=======================================
--- /site/learn/effects.html Wed Oct 21 16:20:42 2009 UTC
+++ /site/learn/effects.html Sun Mar 22 21:13:32 2015 UTC
@@ -3,14 +3,18 @@

<html lang='en' xml:lang='en' xmlns='http://www.w3.org/1999/xhtml'>
<head>
- <meta name='generator' content=
- 'HTML Tidy for Linux/x86 (vers 7 December 2008), see www.w3.org' />
- <meta content='text/html; charset=us-ascii' http-equiv='Content-Type' />
- <meta name='description' content='Home Page for the Piccolo2D project.'
/>
- <meta name='format' content='text/html' />
- <meta name='keywords' content=
- 'piccolo2d, piccolo2d.net, piccolo, piccolo.net, zoomable, zui, user
interfaces, human-computer interaction, HCI, visualization, education' />
- <meta name='relation' content='(contained in)=http://www.piccolo2d.org'
/>
+ <meta content=
+ 'HTML Tidy for Mac OS X (vers 31 October 2006 - Apple Inc. build 15.12),
see www.w3.org' name=
+ 'generator' />
+ <meta content='text/html; charset=utf-8' http-equiv='Content-Type' />
+ <meta content='Home Page for the Piccolo2D project.' name='description'
/>
+ <meta content='text/html' name='format' />
+ <meta content=
+ 'piccolo2d, piccolo2d.net, piccolo, piccolo.net, zoomable, zui, user
interfaces, human-computer interaction, HCI, visualization, education'
+ name='keywords' />
+ <meta content='(contained in)=http://www.piccolo2d.org' name='relation'
/>
+ <link href='../images/Piccolo2D-Logo.png' rel='image_src' />
+ <meta content='../images/Piccolo2D-Logo.png' name='og:image'
property='og:image' />

<title>Piccolo2D.Java - Adding Special Effects</title>
<link href='../piccolo2d.css' rel='stylesheet' type='text/css' />
@@ -20,13 +24,13 @@
<div id='navigation'>
<!--
this navigation node is auto-generated and injected
-by the script tools/inject_navigation.rb
+by the script ./tools/inject_navigation.rb

DO NOT EDIT IT MANUALLY!!!
-->

- <p class='header'><a href='../index.html'><img
src='../images/Piccolo2D-Logo-small.png' alt=
- 'Piccolo2D Logo' /></a></p>
+ <p class='header'><a href='../index.html'><img alt='Piccolo2D Logo'
src=
+ '../images/Piccolo2D-Logo-small.png' /></a></p>

<ul>
<li>
@@ -57,8 +61,8 @@

<li><a
href='../learn/interaction.html'>User&nbsp;Interaction</a></li>

- <li><a href='../learn/effects.html' class=
- 'selected'>Special&nbsp;Effects</a></li>
+ <li><a class='selected' href=
+ '../learn/effects.html'>Special&nbsp;Effects</a></li>

<li><a
href='../learn/fisheye.html'>Fisheye&nbsp;Calendar</a></li>

@@ -99,12 +103,11 @@
'http://code.google.com/p/piccolo2d/issues/entry?template=User%20defect%20report'>Found
a
Typo?</a></p>

- <p class='validators'><a
href='http://validator.w3.org/check/referer'><img src=
- 'http://www.w3.org/Icons/valid-xhtml10-blue' alt='Valid XHTML 1.0!'
style=
+ <p class='validators'><a
href='http://validator.w3.org/check/referer'><img alt=
+ 'Valid XHTML 1.0!' src='http://www.w3.org/Icons/valid-xhtml10-blue'
style=
'border:0;width:88px;height:31px' /></a> <a href=
- 'http://jigsaw.w3.org/css-validator/check/referer'><img src=
- 'http://www.w3.org/Icons/valid-css-blue' alt='Valid CSS1!' style=
- 'border:0;width:88px;height:31px' /></a></p>
+ 'http://jigsaw.w3.org/css-validator/check/referer'><img alt='Valid
CSS1!' src=
+ 'http://www.w3.org/Icons/valid-css-blue'
style='border:0;width:88px;height:31px' /></a></p>
</div>

<div id='main'>
@@ -117,14 +120,14 @@

<p class='toggle' id='language' style=
'float: right; width: 8.5em; height: 8ex; border:thin solid
blue;'>Show examples in<br />
- <img src='images/check.png' id='java0' alt='Checkmark' style=
- 'border:0;width:1.0em;height:2ex' /> <a href='javascript:void(0);'
name='jlink0' class=
- 'toggle selected' id='jlink0' onmousedown=
+ <img alt='Checkmark' id='java0' src='images/check.png' style=
+ 'border:0;width:1.0em;height:2ex' /> <a class='toggle selected'
href='javascript:void(0);' id=
+ 'jlink0' name='jlink0' onmousedown=
'swapSections(&#39;csharp&#39;, &#39;java&#39;, &#39;clink&#39;,
&#39;jlink&#39;);'>Java</a><br />

- <img src='images/check.png' id='csharp0' alt='Checkmark' style=
- 'visibility: hidden;border:0;width:1.0em;height:2ex' /> <a
href='javascript:void(0);' name=
- 'clink0' id='clink0' onmousedown=
+ <img alt='Checkmark' id='csharp0' src='images/check.png' style=
+ 'visibility: hidden;border:0;width:1.0em;height:2ex' /> <a
href='javascript:void(0);' id=
+ 'clink0' name='clink0' onmousedown=
'swapSections(&#39;java&#39;, &#39;csharp&#39;, &#39;jlink&#39;,
&#39;clink&#39;);'>C#</a></p>

<h1>Adding Special Effects</h1>
@@ -134,7 +137,7 @@
PNode's animation methods, how to set an activity's delegate, and how
to schedule activities to
occur in a specific sequence.</p>

- <p class='image'><img src='images/effects.png' alt='Special effects'
/><br />
+ <p class='image'><img alt='Special effects' src='images/effects.png'
/><br />
Download the complete code sample in <a href=
'http://piccolo2d.googlecode.com/files/codesample.java-1.2-specialeffects.zip'>Java</a>
or
<a href=
@@ -150,10 +153,10 @@
<p>First you will need to reference the appropriate
packages/namespaces.&nbsp; Add the
following lines to the top of your code file:</p>

- <p class='toggle'><a href='javascript:void(0);' name='jlink1'
class='toggle selected' id=
+ <p class='toggle'><a class='toggle selected'
href='javascript:void(0);' id='jlink1' name=
'jlink1' onmousedown=
'swapSections(&#39;csharp&#39;, &#39;java&#39;, &#39;clink&#39;,
&#39;jlink&#39;);'>Java</a>
- | <a href='javascript:void(0);' name='clink1' id='clink1'
onmousedown=
+ | <a href='javascript:void(0);' id='clink1' name='clink1'
onmousedown=
'swapSections(&#39;java&#39;, &#39;csharp&#39;, &#39;jlink&#39;,
&#39;clink&#39;);'>C#</a></p>

<div class='snippet' id='snippet1'>
@@ -187,10 +190,10 @@
Instead, you should override the <code>initialize</code> method
and add all of your
Piccolo2D code there.&nbsp; See the <a href='dev-faq.html'>FAQ</a>
for more details.</p>

- <p class='toggle'><a href='javascript:void(0);' name='jlink2'
class='toggle selected' id=
+ <p class='toggle'><a class='toggle selected'
href='javascript:void(0);' id='jlink2' name=
'jlink2' onmousedown=
'swapSections(&#39;csharp&#39;, &#39;java&#39;, &#39;clink&#39;,
&#39;jlink&#39;);'>Java</a>
- | <a href='javascript:void(0);' name='clink2' id='clink2'
onmousedown=
+ | <a href='javascript:void(0);' id='clink2' name='clink2'
onmousedown=
'swapSections(&#39;java&#39;, &#39;csharp&#39;, &#39;jlink&#39;,
&#39;clink&#39;);'>C#</a></p>

<div class='snippet' id='snippet2'>
@@ -224,10 +227,10 @@
<p>We will create a new node and position it at the bottom right
corner of the
screen.&nbsp; Add the following lines of code to the
<code>initialize</code> method.</p>

- <p class='toggle'><a href='javascript:void(0);' name='jlink3'
class='toggle selected' id=
+ <p class='toggle'><a class='toggle selected'
href='javascript:void(0);' id='jlink3' name=
'jlink3' onmousedown=
'swapSections(&#39;csharp&#39;, &#39;java&#39;, &#39;clink&#39;,
&#39;jlink&#39;);'>Java</a>
- | <a href='javascript:void(0);' name='clink3' id='clink3'
onmousedown=
+ | <a href='javascript:void(0);' id='clink3' name='clink3'
onmousedown=
'swapSections(&#39;java&#39;, &#39;csharp&#39;, &#39;jlink&#39;,
&#39;clink&#39;);'>C#</a></p>

<div class='snippet' id='snippet3'>
@@ -263,10 +266,10 @@
<code>PActivity</code>, the base activity type.&nbsp; Add the
following internal class
beneath the <code>initialize</code> method.</p>

- <p class='toggle'><a href='javascript:void(0);' name='jlink4'
class='toggle selected' id=
+ <p class='toggle'><a class='toggle selected'
href='javascript:void(0);' id='jlink4' name=
'jlink4' onmousedown=
'swapSections(&#39;csharp&#39;, &#39;java&#39;, &#39;clink&#39;,
&#39;jlink&#39;);'>Java</a>
- | <a href='javascript:void(0);' name='clink4' id='clink4'
onmousedown=
+ | <a href='javascript:void(0);' id='clink4' name='clink4'
onmousedown=
'swapSections(&#39;java&#39;, &#39;csharp&#39;, &#39;jlink&#39;,
&#39;clink&#39;);'>C#</a></p>

<div class='snippet' id='snippet4'>
@@ -344,10 +347,10 @@
<p>Next, we will create a new flash activity and schedule it with
the root.&nbsp; Add the
following lines of code to the <code>initialize</code> method.</p>

- <p class='toggle'><a href='javascript:void(0);' name='jlink5'
class='toggle selected' id=
+ <p class='toggle'><a class='toggle selected'
href='javascript:void(0);' id='jlink5' name=
'jlink5' onmousedown=
'swapSections(&#39;csharp&#39;, &#39;java&#39;, &#39;clink&#39;,
&#39;jlink&#39;);'>Java</a>
- | <a href='javascript:void(0);' name='clink5' id='clink5'
onmousedown=
+ | <a href='javascript:void(0);' id='clink5' name='clink5'
onmousedown=
'swapSections(&#39;java&#39;, &#39;csharp&#39;, &#39;jlink&#39;,
&#39;clink&#39;);'>C#</a></p>

<div class='snippet' id='snippet5'>
@@ -418,10 +421,10 @@
move the node across the screen, rotating it and scaling it along
the way.&nbsp; Add the
following lines of code to the <code>initialize</code> method.</p>

- <p class='toggle'><a href='javascript:void(0);' name='jlink6'
class='toggle selected' id=
+ <p class='toggle'><a class='toggle selected'
href='javascript:void(0);' id='jlink6' name=
'jlink6' onmousedown=
'swapSections(&#39;csharp&#39;, &#39;java&#39;, &#39;clink&#39;,
&#39;jlink&#39;);'>Java</a>
- | <a href='javascript:void(0);' name='clink6' id='clink6'
onmousedown=
+ | <a href='javascript:void(0);' id='clink6' name='clink6'
onmousedown=
'swapSections(&#39;java&#39;, &#39;csharp&#39;, &#39;jlink&#39;,
&#39;clink&#39;);'>C#</a></p>

<div class='snippet' id='snippet6'>
@@ -467,10 +470,10 @@
<p>Now, we need to specify the order in which these animations
will occur.&nbsp; Add the
following lines of code to the <code>initialize</code> method.</p>

- <p class='toggle'><a href='javascript:void(0);' name='jlink7'
class='toggle selected' id=
+ <p class='toggle'><a class='toggle selected'
href='javascript:void(0);' id='jlink7' name=
'jlink7' onmousedown=
'swapSections(&#39;csharp&#39;, &#39;java&#39;, &#39;clink&#39;,
&#39;jlink&#39;);'>Java</a>
- | <a href='javascript:void(0);' name='clink7' id='clink7'
onmousedown=
+ | <a href='javascript:void(0);' id='clink7' name='clink7'
onmousedown=
'swapSections(&#39;java&#39;, &#39;csharp&#39;, &#39;jlink&#39;,
&#39;clink&#39;);'>C#</a></p>

<div class='snippet' id='snippet7'>
@@ -524,10 +527,10 @@
directly to the <code>initialize</code> method.&nbsp; The .NET
snippet should be added
beneath <code>initialize</code>.</p>

- <p class='toggle'><a href='javascript:void(0);' name='jlink8'
class='toggle selected' id=
+ <p class='toggle'><a class='toggle selected'
href='javascript:void(0);' id='jlink8' name=
'jlink8' onmousedown=
'swapSections(&#39;csharp&#39;, &#39;java&#39;, &#39;clink&#39;,
&#39;jlink&#39;);'>Java</a>
- | <a href='javascript:void(0);' name='clink8' id='clink8'
onmousedown=
+ | <a href='javascript:void(0);' id='clink8' name='clink8'
onmousedown=
'swapSections(&#39;java&#39;, &#39;csharp&#39;, &#39;jlink&#39;,
&#39;clink&#39;);'>C#</a></p>

<div class='snippet' id='snippet8'>
@@ -575,10 +578,10 @@
the activity.&nbsp; Add the following lines of code to the
<code>initialize</code>
method.</p>

- <p class='toggle'><a href='javascript:void(0);' name='jlink9'
class='toggle selected' id=
+ <p class='toggle'><a class='toggle selected'
href='javascript:void(0);' id='jlink9' name=
'jlink9' onmousedown=
'swapSections(&#39;csharp&#39;, &#39;java&#39;, &#39;clink&#39;,
&#39;jlink&#39;);'>Java</a>
- | <a href='javascript:void(0);' name='clink9' id='clink9'
onmousedown=
+ | <a href='javascript:void(0);' id='clink9' name='clink9'
onmousedown=
'swapSections(&#39;java&#39;, &#39;csharp&#39;, &#39;jlink&#39;,
&#39;clink&#39;);'>C#</a></p>

<div class='snippet' id='snippet9'>
=======================================
--- /site/learn/fisheye.html Wed Oct 21 16:20:42 2009 UTC
+++ /site/learn/fisheye.html Sun Mar 22 21:13:32 2015 UTC
@@ -3,14 +3,18 @@

<html lang='en' xml:lang='en' xmlns='http://www.w3.org/1999/xhtml'>
<head>
- <meta name='generator' content=
- 'HTML Tidy for Linux/x86 (vers 7 December 2008), see www.w3.org' />
- <meta content='text/html; charset=us-ascii' http-equiv='Content-Type' />
- <meta name='description' content='Home Page for the Piccolo2D project.'
/>
- <meta name='format' content='text/html' />
- <meta name='keywords' content=
- 'piccolo2d, piccolo2d.net, piccolo, piccolo.net, zoomable, zui, user
interfaces, human-computer interaction, HCI, visualization, education' />
- <meta name='relation' content='(contained in)=http://www.piccolo2d.org'
/>
+ <meta content=
+ 'HTML Tidy for Mac OS X (vers 31 October 2006 - Apple Inc. build 15.12),
see www.w3.org' name=
+ 'generator' />
+ <meta content='text/html; charset=utf-8' http-equiv='Content-Type' />
+ <meta content='Home Page for the Piccolo2D project.' name='description'
/>
+ <meta content='text/html' name='format' />
+ <meta content=
+ 'piccolo2d, piccolo2d.net, piccolo, piccolo.net, zoomable, zui, user
interfaces, human-computer interaction, HCI, visualization, education'
+ name='keywords' />
+ <meta content='(contained in)=http://www.piccolo2d.org' name='relation'
/>
+ <link href='../images/Piccolo2D-Logo.png' rel='image_src' />
+ <meta content='../images/Piccolo2D-Logo.png' name='og:image'
property='og:image' />

<title>Piccolo2D.Java - Fisheye Calendar</title>
<link href='../piccolo2d.css' rel='stylesheet' type='text/css' />
@@ -20,13 +24,13 @@
<div id='navigation'>
<!--
this navigation node is auto-generated and injected
-by the script tools/inject_navigation.rb
+by the script ./tools/inject_navigation.rb

DO NOT EDIT IT MANUALLY!!!
-->

- <p class='header'><a href='../index.html'><img
src='../images/Piccolo2D-Logo-small.png' alt=
- 'Piccolo2D Logo' /></a></p>
+ <p class='header'><a href='../index.html'><img alt='Piccolo2D Logo'
src=
+ '../images/Piccolo2D-Logo-small.png' /></a></p>

<ul>
<li>
@@ -59,8 +63,8 @@

<li><a
href='../learn/effects.html'>Special&nbsp;Effects</a></li>

- <li><a href='../learn/fisheye.html' class=
- 'selected'>Fisheye&nbsp;Calendar</a></li>
+ <li><a class='selected' href=
+ '../learn/fisheye.html'>Fisheye&nbsp;Calendar</a></li>

<li><a
href='../learn/grapheditor.html'>Graph&nbsp;Editor</a></li>
</ul>
@@ -99,12 +103,11 @@
'http://code.google.com/p/piccolo2d/issues/entry?template=User%20defect%20report'>Found
a
Typo?</a></p>

- <p class='validators'><a
href='http://validator.w3.org/check/referer'><img src=
- 'http://www.w3.org/Icons/valid-xhtml10-blue' alt='Valid XHTML 1.0!'
style=
+ <p class='validators'><a
href='http://validator.w3.org/check/referer'><img alt=
+ 'Valid XHTML 1.0!' src='http://www.w3.org/Icons/valid-xhtml10-blue'
style=
'border:0;width:88px;height:31px' /></a> <a href=
- 'http://jigsaw.w3.org/css-validator/check/referer'><img src=
- 'http://www.w3.org/Icons/valid-css-blue' alt='Valid CSS1!' style=
- 'border:0;width:88px;height:31px' /></a></p>
+ 'http://jigsaw.w3.org/css-validator/check/referer'><img alt='Valid
CSS1!' src=
+ 'http://www.w3.org/Icons/valid-css-blue'
style='border:0;width:88px;height:31px' /></a></p>
</div>

<div id='main'>
@@ -117,14 +120,14 @@

<p class='toggle' id='language' style=
'float: right; width: 8.5em; height: 8ex; border:thin solid
blue;'>Show examples in<br />
- <img src='images/check.png' id='java0' alt='Checkmark' style=
- 'border:0;width:1.0em;height:2ex' /> <a href='javascript:void(0);'
name='jlink0' class=
- 'toggle selected' id='jlink0' onmousedown=
+ <img alt='Checkmark' id='java0' src='images/check.png' style=
+ 'border:0;width:1.0em;height:2ex' /> <a class='toggle selected'
href='javascript:void(0);' id=
+ 'jlink0' name='jlink0' onmousedown=
'swapSections(&#39;csharp&#39;, &#39;java&#39;, &#39;clink&#39;,
&#39;jlink&#39;);'>Java</a><br />

- <img src='images/check.png' id='csharp0' alt='Checkmark' style=
- 'visibility: hidden;border:0;width:1.0em;height:2ex' /> <a
href='javascript:void(0);' name=
- 'clink0' id='clink0' onmousedown=
+ <img alt='Checkmark' id='csharp0' src='images/check.png' style=
+ 'visibility: hidden;border:0;width:1.0em;height:2ex' /> <a
href='javascript:void(0);' id=
+ 'clink0' name='clink0' onmousedown=
'swapSections(&#39;java&#39;, &#39;csharp&#39;, &#39;jlink&#39;,
&#39;clink&#39;);'>C#</a></p>

<h1>Fisheye Calendar</h1>
@@ -134,7 +137,7 @@
while shrinking the surrounding cells.&nbsp; Such an interface might
be useful when you don't
have much screen real estate to deal with.</p>

- <p class='image'><img src='images/fisheye.jpg' alt='Fisheye Calendar'
/><br />
+ <p class='image'><img alt='Fisheye Calendar' src='images/fisheye.jpg'
/><br />
Download the complete code sample in <a href=
'http://piccolo2d.googlecode.com/files/codesample.java-1.2-tabularfisheye.zip'>Java</a>
or
<a href=
@@ -171,10 +174,10 @@
<li>
<p>Here, we will create the day node.&nbsp; Add the following
class to your project.</p>

- <p class='toggle'><a href='javascript:void(0);' name='jlink1'
class='toggle selected' id=
+ <p class='toggle'><a class='toggle selected'
href='javascript:void(0);' id='jlink1' name=
'jlink1' onmousedown=
'swapSections(&#39;csharp&#39;, &#39;java&#39;, &#39;clink&#39;,
&#39;jlink&#39;);'>Java</a>
- | <a href='javascript:void(0);' name='clink1' id='clink1'
onmousedown=
+ | <a href='javascript:void(0);' id='clink1' name='clink1'
onmousedown=
'swapSections(&#39;java&#39;, &#39;csharp&#39;, &#39;jlink&#39;,
&#39;clink&#39;);'>C#</a></p>

<div class='snippet' id='snippet1'>
@@ -341,10 +344,10 @@
<p>Here, we will create the calendar node.&nbsp; Add the following
class to your
project.</p>

- <p class='toggle'><a href='javascript:void(0);' name='jlink2'
class='toggle selected' id=
+ <p class='toggle'><a class='toggle selected'
href='javascript:void(0);' id='jlink2' name=
'jlink2' onmousedown=
'swapSections(&#39;csharp&#39;, &#39;java&#39;, &#39;clink&#39;,
&#39;jlink&#39;);'>Java</a>
- | <a href='javascript:void(0);' name='clink2' id='clink2'
onmousedown=
+ | <a href='javascript:void(0);' id='clink2' name='clink2'
onmousedown=
'swapSections(&#39;java&#39;, &#39;csharp&#39;, &#39;jlink&#39;,
&#39;clink&#39;);'>C#</a></p>

<div class='snippet' id='snippet2'>
@@ -518,10 +521,10 @@
<code>CalendarNode</code> defined above.&nbsp; For the Java
version, you should add the
anonymous event listener class to the constructor.</p>

- <p class='toggle'><a href='javascript:void(0);' name='jlink3'
class='toggle selected' id=
+ <p class='toggle'><a class='toggle selected'
href='javascript:void(0);' id='jlink3' name=
'jlink3' onmousedown=
'swapSections(&#39;csharp&#39;, &#39;java&#39;, &#39;clink&#39;,
&#39;jlink&#39;);'>Java</a>
- | <a href='javascript:void(0);' name='clink3' id='clink3'
onmousedown=
+ | <a href='javascript:void(0);' id='clink3' name='clink3'
onmousedown=
'swapSections(&#39;java&#39;, &#39;csharp&#39;, &#39;jlink&#39;,
&#39;clink&#39;);'>C#</a></p>

<div class='snippet' id='snippet3'>
@@ -622,10 +625,10 @@
<li>We extend PCanvas and add the calendar node to the
scene-graph.<br />
<br />

- <p class='toggle'><a href='javascript:void(0);' name='jlink4'
class='toggle selected' id=
+ <p class='toggle'><a class='toggle selected'
href='javascript:void(0);' id='jlink4' name=
'jlink4' onmousedown=
'swapSections(&#39;csharp&#39;, &#39;java&#39;, &#39;clink&#39;,
&#39;jlink&#39;);'>Java</a>
- | <a href='javascript:void(0);' name='clink4' id='clink4'
onmousedown=
+ | <a href='javascript:void(0);' id='clink4' name='clink4'
onmousedown=
'swapSections(&#39;java&#39;, &#39;csharp&#39;, &#39;jlink&#39;,
&#39;clink&#39;);'>C#</a></p>

<div class='snippet' id='snippet4'>
@@ -687,10 +690,10 @@
<p>We create a <code>JFrame</code> in Java or a <code>Form</code>
in .NET as a wrapper for
our component.&nbsp; Add the following class to your project.</p>

- <p class='toggle'><a href='javascript:void(0);' name='jlink5'
class='toggle selected' id=
+ <p class='toggle'><a class='toggle selected'
href='javascript:void(0);' id='jlink5' name=
'jlink5' onmousedown=
'swapSections(&#39;csharp&#39;, &#39;java&#39;, &#39;clink&#39;,
&#39;jlink&#39;);'>Java</a>
- | <a href='javascript:void(0);' name='clink5' id='clink5'
onmousedown=
+ | <a href='javascript:void(0);' id='clink5' name='clink5'
onmousedown=
'swapSections(&#39;java&#39;, &#39;csharp&#39;, &#39;jlink&#39;,
&#39;clink&#39;);'>C#</a></p>

<div class='snippet' id='snippet5'>
=======================================
--- /site/learn/get-started.html Wed Oct 21 16:20:42 2009 UTC
+++ /site/learn/get-started.html Sun Mar 22 21:13:32 2015 UTC
@@ -3,14 +3,18 @@

<html lang='en' xml:lang='en' xmlns='http://www.w3.org/1999/xhtml'>
<head>
- <meta name='generator' content=
- 'HTML Tidy for Linux/x86 (vers 7 December 2008), see www.w3.org' />
- <meta content='text/html; charset=us-ascii' http-equiv='Content-Type' />
- <meta name='description' content='Home Page for the Piccolo2D project.'
/>
- <meta name='format' content='text/html' />
- <meta name='keywords' content=
- 'piccolo2d, piccolo2d.net, piccolo, piccolo.net, zoomable, zui, user
interfaces, human-computer interaction, HCI, visualization, education' />
- <meta name='relation' content='(contained in)=http://www.piccolo2d.org'
/>
+ <meta content=
+ 'HTML Tidy for Mac OS X (vers 31 October 2006 - Apple Inc. build 15.12),
see www.w3.org' name=
+ 'generator' />
+ <meta content='text/html; charset=utf-8' http-equiv='Content-Type' />
+ <meta content='Home Page for the Piccolo2D project.' name='description'
/>
+ <meta content='text/html' name='format' />
+ <meta content=
+ 'piccolo2d, piccolo2d.net, piccolo, piccolo.net, zoomable, zui, user
interfaces, human-computer interaction, HCI, visualization, education'
+ name='keywords' />
+ <meta content='(contained in)=http://www.piccolo2d.org' name='relation'
/>
+ <link href='../images/Piccolo2D-Logo.png' rel='image_src' />
+ <meta content='../images/Piccolo2D-Logo.png' name='og:image'
property='og:image' />

<title>Piccolo2D - Getting Started</title>
<link href='../piccolo2d.css' rel='stylesheet' type='text/css' />
@@ -20,13 +24,13 @@
<div id='navigation'>
<!--
this navigation node is auto-generated and injected
-by the script tools/inject_navigation.rb
+by the script ./tools/inject_navigation.rb

DO NOT EDIT IT MANUALLY!!!
-->

- <p class='header'><a href='../index.html'><img
src='../images/Piccolo2D-Logo-small.png' alt=
- 'Piccolo2D Logo' /></a></p>
+ <p class='header'><a href='../index.html'><img alt='Piccolo2D Logo'
src=
+ '../images/Piccolo2D-Logo-small.png' /></a></p>

<ul>
<li>
@@ -44,7 +48,7 @@
<li><a
href='../learn/patterns.html'>Piccolo2D&nbsp;Patterns</a></li>

<li>
- <a href='../learn/get-started.html'
class='selected'>Getting&nbsp;Started</a>
+ <a class='selected'
href='../learn/get-started.html'>Getting&nbsp;Started</a>

<ul>
<li><a href=
@@ -98,12 +102,11 @@
'http://code.google.com/p/piccolo2d/issues/entry?template=User%20defect%20report'>Found
a
Typo?</a></p>

- <p class='validators'><a
href='http://validator.w3.org/check/referer'><img src=
- 'http://www.w3.org/Icons/valid-xhtml10-blue' alt='Valid XHTML 1.0!'
style=
+ <p class='validators'><a
href='http://validator.w3.org/check/referer'><img alt=
+ 'Valid XHTML 1.0!' src='http://www.w3.org/Icons/valid-xhtml10-blue'
style=
'border:0;width:88px;height:31px' /></a> <a href=
- 'http://jigsaw.w3.org/css-validator/check/referer'><img src=
- 'http://www.w3.org/Icons/valid-css-blue' alt='Valid CSS1!' style=
- 'border:0;width:88px;height:31px' /></a></p>
+ 'http://jigsaw.w3.org/css-validator/check/referer'><img alt='Valid
CSS1!' src=
+ 'http://www.w3.org/Icons/valid-css-blue'
style='border:0;width:88px;height:31px' /></a></p>
</div>

<div id='main'>
@@ -120,19 +123,19 @@
nodes, add event handlers and schedule activities.</p>

<ol>
- <li><a href='out-of-box-java.html' name='out_of_java'
id='out_of_java'>Piccolo2D.Java: Out of
+ <li><a href='out-of-box-java.html' id='out_of_java'
name='out_of_java'>Piccolo2D.Java: Out of
the Box</a> - Provides step by step instructions setting up
Piccolo2D.Java.</li>

- <li><a href='out-of-box-dotnet.html' name='out_of_dotnet'
id='out_of_dotnet'>Piccolo2D.NET:
+ <li><a href='out-of-box-dotnet.html' id='out_of_dotnet'
name='out_of_dotnet'>Piccolo2D.NET:
Out of the Box</a> - Provides step by step instructions for setting
up Piccolo2D.NET.</li>

- <li><a href='interface.html' name='interface'
id='interface'>Creating the Interface</a> -
+ <li><a href='interface.html' id='interface'
name='interface'>Creating the Interface</a> -
Demonstrates how to create new nodes and add them to the
interface.</li>

- <li><a href='interaction.html' name='interaction'
id='interaction'>Defining User
+ <li><a href='interaction.html' id='interaction'
name='interaction'>Defining User
Interaction</a> - Demonstrates how to add event handlers.</li>

- <li><a href='effects.html' name='effects' id='effects'>Adding
Special Effects</a> -
+ <li><a href='effects.html' id='effects' name='effects'>Adding
Special Effects</a> -
Demonstrates how to define and schedule activities.</li>
</ol>

@@ -143,10 +146,10 @@
applications.</p>

<ol>
- <li><a href='fisheye.html' name='fisheye' id='fisheye'>Fisheye
Calendar</a> - Demonstrates
+ <li><a href='fisheye.html' id='fisheye' name='fisheye'>Fisheye
Calendar</a> - Demonstrates
how to build a simple fisheye calendar application.</li>

- <li><a href='grapheditor.html' name='grapheditor'
id='grapheditor'>Graph Editor</a> -
+ <li><a href='grapheditor.html' id='grapheditor'
name='grapheditor'>Graph Editor</a> -
Demonstrates how to build a zoomable graph application</li>
</ol>
</div><script src='../scrollsidebar.js' type='text/javascript'>
=======================================
--- /site/learn/grapheditor.html Wed Oct 21 16:20:42 2009 UTC
+++ /site/learn/grapheditor.html Sun Mar 22 21:13:32 2015 UTC
@@ -3,14 +3,18 @@

<html lang='en' xml:lang='en' xmlns='http://www.w3.org/1999/xhtml'>
<head>
- <meta name='generator' content=
- 'HTML Tidy for Linux/x86 (vers 7 December 2008), see www.w3.org' />
- <meta content='text/html; charset=us-ascii' http-equiv='Content-Type' />
- <meta name='description' content='Home Page for the Piccolo2D project.'
/>
- <meta name='format' content='text/html' />
- <meta name='keywords' content=
- 'piccolo2d, piccolo2d.net, piccolo, piccolo.net, zoomable, zui, user
interfaces, human-computer interaction, HCI, visualization, education' />
- <meta name='relation' content='(contained in)=http://www.piccolo2d.org'
/>
+ <meta content=
+ 'HTML Tidy for Mac OS X (vers 31 October 2006 - Apple Inc. build 15.12),
see www.w3.org' name=
+ 'generator' />
+ <meta content='text/html; charset=utf-8' http-equiv='Content-Type' />
+ <meta content='Home Page for the Piccolo2D project.' name='description'
/>
+ <meta content='text/html' name='format' />
+ <meta content=
+ 'piccolo2d, piccolo2d.net, piccolo, piccolo.net, zoomable, zui, user
interfaces, human-computer interaction, HCI, visualization, education'
+ name='keywords' />
+ <meta content='(contained in)=http://www.piccolo2d.org' name='relation'
/>
+ <link href='../images/Piccolo2D-Logo.png' rel='image_src' />
+ <meta content='../images/Piccolo2D-Logo.png' name='og:image'
property='og:image' />

<title>Piccolo2D.Java - Graph Editor</title>
<link href='../piccolo2d.css' rel='stylesheet' type='text/css' />
@@ -20,13 +24,13 @@
<div id='navigation'>
<!--
this navigation node is auto-generated and injected
-by the script tools/inject_navigation.rb
+by the script ./tools/inject_navigation.rb

DO NOT EDIT IT MANUALLY!!!
-->

- <p class='header'><a href='../index.html'><img
src='../images/Piccolo2D-Logo-small.png' alt=
- 'Piccolo2D Logo' /></a></p>
+ <p class='header'><a href='../index.html'><img alt='Piccolo2D Logo'
src=
+ '../images/Piccolo2D-Logo-small.png' /></a></p>

<ul>
<li>
@@ -61,8 +65,8 @@

<li><a
href='../learn/fisheye.html'>Fisheye&nbsp;Calendar</a></li>

- <li><a href='../learn/grapheditor.html' class=
- 'selected'>Graph&nbsp;Editor</a></li>
+ <li><a class='selected' href=
+ '../learn/grapheditor.html'>Graph&nbsp;Editor</a></li>
</ul>
</li>

@@ -99,12 +103,11 @@
'http://code.google.com/p/piccolo2d/issues/entry?template=User%20defect%20report'>Found
a
Typo?</a></p>

- <p class='validators'><a
href='http://validator.w3.org/check/referer'><img src=
- 'http://www.w3.org/Icons/valid-xhtml10-blue' alt='Valid XHTML 1.0!'
style=
+ <p class='validators'><a
href='http://validator.w3.org/check/referer'><img alt=
+ 'Valid XHTML 1.0!' src='http://www.w3.org/Icons/valid-xhtml10-blue'
style=
'border:0;width:88px;height:31px' /></a> <a href=
- 'http://jigsaw.w3.org/css-validator/check/referer'><img src=
- 'http://www.w3.org/Icons/valid-css-blue' alt='Valid CSS1!' style=
- 'border:0;width:88px;height:31px' /></a></p>
+ 'http://jigsaw.w3.org/css-validator/check/referer'><img alt='Valid
CSS1!' src=
+ 'http://www.w3.org/Icons/valid-css-blue'
style='border:0;width:88px;height:31px' /></a></p>
</div>

<div id='main'>
@@ -117,14 +120,14 @@

<p class='toggle' id='language' style=
'float: right; width: 8.5em; height: 8ex; border:thin solid
blue;'>Show examples in<br />
- <img src='images/check.png' id='java0' alt='Checkmark' style=
- 'border:0;width:1.0em;height:2ex' /> <a href='javascript:void(0);'
name='jlink0' class=
- 'toggle selected' id='jlink0' onmousedown=
+ <img alt='Checkmark' id='java0' src='images/check.png' style=
+ 'border:0;width:1.0em;height:2ex' /> <a class='toggle selected'
href='javascript:void(0);' id=
+ 'jlink0' name='jlink0' onmousedown=
'swapSections(&#39;csharp&#39;, &#39;java&#39;, &#39;clink&#39;,
&#39;jlink&#39;);'>Java</a><br />

- <img src='images/check.png' id='csharp0' alt='Checkmark' style=
- 'visibility: hidden;border:0;width:1.0em;height:2ex' /> <a
href='javascript:void(0);' name=
- 'clink0' id='clink0' onmousedown=
+ <img alt='Checkmark' id='csharp0' src='images/check.png' style=
+ 'visibility: hidden;border:0;width:1.0em;height:2ex' /> <a
href='javascript:void(0);' id=
+ 'clink0' name='clink0' onmousedown=
'swapSections(&#39;java&#39;, &#39;csharp&#39;, &#39;jlink&#39;,
&#39;clink&#39;);'>C#</a></p>

<h1>Graph Editor</h1>
@@ -133,7 +136,7 @@
using Piccolo2D.&nbsp; Moving the mouse over a node will highlight
that node.&nbsp; And,
dragging a node will move that node around, keeping the edges
connected.</p>

- <p class='image'><img src='images/grapheditor.jpg' alt='graph editor'
/><br />
+ <p class='image'><img alt='graph editor' src='images/grapheditor.jpg'
/><br />
Download the complete code sample in <a href=
'http://piccolo2d.googlecode.com/files/codesample.java-1.2-grapheditor.zip'>Java</a>
or
<a
href='http://piccolo2d.googlecode.com/files/codesample.net-1.2-grapheditor.zip'>C#</a>.<br
/>
@@ -165,10 +168,10 @@
<p>We extend PCanvas and add some random nodes and edges.&nbsp;
Add the following class to
your project.</p>

- <p class='toggle'><a href='javascript:void(0);' name='jlink1'
class='toggle selected' id=
+ <p class='toggle'><a class='toggle selected'
href='javascript:void(0);' id='jlink1' name=
'jlink1' onmousedown=
'swapSections(&#39;csharp&#39;, &#39;java&#39;, &#39;clink&#39;,
&#39;jlink&#39;);'>Java</a>
- | <a href='javascript:void(0);' name='clink1' id='clink1'
onmousedown=
+ | <a href='javascript:void(0);' id='clink1' name='clink1'
onmousedown=
'swapSections(&#39;java&#39;, &#39;csharp&#39;, &#39;jlink&#39;,
&#39;clink&#39;);'>C#</a></p>

<div class='snippet' id='snippet1'>
@@ -345,10 +348,10 @@
project.&nbsp; For the Java version, you should add the anonymous
event listener class to
the constructor.</p>

- <p class='toggle'><a href='javascript:void(0);' name='jlink2'
class='toggle selected' id=
+ <p class='toggle'><a class='toggle selected'
href='javascript:void(0);' id='jlink2' name=
'jlink2' onmousedown=
'swapSections(&#39;csharp&#39;, &#39;java&#39;, &#39;clink&#39;,
&#39;jlink&#39;);'>Java</a>
- | <a href='javascript:void(0);' name='clink2' id='clink2'
onmousedown=
+ | <a href='javascript:void(0);' id='clink2' name='clink2'
onmousedown=
'swapSections(&#39;java&#39;, &#39;csharp&#39;, &#39;jlink&#39;,
&#39;clink&#39;);'>C#</a></p>

<div class='snippet' id='snippet2'>
@@ -452,10 +455,10 @@
<p>We create a <code>JFrame</code> in Java or a <code>Form</code>
in .NET as a wrapper for
our component. Add the following class to your project.</p>

- <p class='toggle'><a href='javascript:void(0);' name='jlink3'
class='toggle selected' id=
+ <p class='toggle'><a class='toggle selected'
href='javascript:void(0);' id='jlink3' name=
'jlink3' onmousedown=
'swapSections(&#39;csharp&#39;, &#39;java&#39;, &#39;clink&#39;,
&#39;jlink&#39;);'>Java</a>
- | <a href='javascript:void(0);' name='clink3' id='clink3'
onmousedown=
+ | <a href='javascript:void(0);' id='clink3' name='clink3'
onmousedown=
'swapSections(&#39;java&#39;, &#39;csharp&#39;, &#39;jlink&#39;,
&#39;clink&#39;);'>C#</a></p>

<div class='snippet' id='snippet3'>
=======================================
--- /site/learn/graphics.html Wed Oct 21 16:20:42 2009 UTC
+++ /site/learn/graphics.html Sun Mar 22 21:13:32 2015 UTC
@@ -3,14 +3,18 @@

<html lang='en' xml:lang='en' xmlns='http://www.w3.org/1999/xhtml'>
<head>
- <meta name='generator' content=
- 'HTML Tidy for Linux/x86 (vers 7 December 2008), see www.w3.org' />
- <meta content='text/html; charset=us-ascii' http-equiv='Content-Type' />
- <meta name='description' content='Home Page for the Piccolo2D project.'
/>
- <meta name='format' content='text/html' />
- <meta name='keywords' content=
- 'piccolo2d, piccolo2d.net, piccolo, piccolo.net, zoomable, zui, user
interfaces, human-computer interaction, HCI, visualization, education' />
- <meta name='relation' content='(contained in)=http://www.piccolo2d.org'
/>
+ <meta content=
+ 'HTML Tidy for Mac OS X (vers 31 October 2006 - Apple Inc. build 15.12),
see www.w3.org' name=
+ 'generator' />
+ <meta content='text/html; charset=utf-8' http-equiv='Content-Type' />
+ <meta content='Home Page for the Piccolo2D project.' name='description'
/>
+ <meta content='text/html' name='format' />
+ <meta content=
+ 'piccolo2d, piccolo2d.net, piccolo, piccolo.net, zoomable, zui, user
interfaces, human-computer interaction, HCI, visualization, education'
+ name='keywords' />
+ <meta content='(contained in)=http://www.piccolo2d.org' name='relation'
/>
+ <link href='../images/Piccolo2D-Logo.png' rel='image_src' />
+ <meta content='../images/Piccolo2D-Logo.png' name='og:image'
property='og:image' />

<title>Piccolo2D - 2D Graphics Primer</title>
<link href='../piccolo2d.css' rel='stylesheet' type='text/css' />
@@ -37,13 +41,13 @@
<div id='navigation'>
<!--
this navigation node is auto-generated and injected
-by the script tools/inject_navigation.rb
+by the script ./tools/inject_navigation.rb

DO NOT EDIT IT MANUALLY!!!
-->

- <p class='header'><a href='../index.html'><img
src='../images/Piccolo2D-Logo-small.png' alt=
- 'Piccolo2D Logo' /></a></p>
+ <p class='header'><a href='../index.html'><img alt='Piccolo2D Logo'
src=
+ '../images/Piccolo2D-Logo-small.png' /></a></p>

<ul>
<li>
@@ -71,7 +75,7 @@
<li><a
href='../learn/dev-faq.html'>Developer&nbsp;FAQ</a></li>

<li>
- <a href='../learn/graphics.html'
class='selected'>Graphics&nbsp;Primer</a>
+ <a class='selected'
href='../learn/graphics.html'>Graphics&nbsp;Primer</a>

<ul>
<li>
@@ -161,12 +165,11 @@
'http://code.google.com/p/piccolo2d/issues/entry?template=User%20defect%20report'>Found
a
Typo?</a></p>

- <p class='validators'><a
href='http://validator.w3.org/check/referer'><img src=
- 'http://www.w3.org/Icons/valid-xhtml10-blue' alt='Valid XHTML 1.0!'
style=
+ <p class='validators'><a
href='http://validator.w3.org/check/referer'><img alt=
+ 'Valid XHTML 1.0!' src='http://www.w3.org/Icons/valid-xhtml10-blue'
style=
'border:0;width:88px;height:31px' /></a> <a href=
- 'http://jigsaw.w3.org/css-validator/check/referer'><img src=
- 'http://www.w3.org/Icons/valid-css-blue' alt='Valid CSS1!' style=
- 'border:0;width:88px;height:31px' /></a></p>
+ 'http://jigsaw.w3.org/css-validator/check/referer'><img alt='Valid
CSS1!' src=
+ 'http://www.w3.org/Icons/valid-css-blue'
style='border:0;width:88px;height:31px' /></a></p>
</div>

<div id='main'>
@@ -187,12 +190,12 @@
buttons, that you can add to your GUI.&nbsp; But, if you want to
create a custom component, you
have to do your own drawing!</p>

- <p class='image'><img src='images/button1.png' height='31' alt='Solid
lines, small' width=
- '63' /> <img src='images/button2.png' height='155' alt='Solid lines,
large' width=
+ <p class='image'><img alt='Solid lines, small' height='31'
src='images/button1.png' width=
+ '63' /> <img alt='Solid lines, large' height='155'
src='images/button2.png' width=
'315' /><br />
<br />
- <img src='images/button3.png' height='29' alt='Dotted lines, small'
width='61' /> <img src=
- 'images/button4.png' height='145' alt='Dotted lines, large'
width='305' /></p>
+ <img alt='Dotted lines, small' height='29' src='images/button3.png'
width='61' /> <img alt=
+ 'Dotted lines, large' height='145' src='images/button4.png'
width='305' /></p>

<h3 id='Drawing'>Drawing Abstraction</h3>

@@ -305,10 +308,10 @@
<div class='center' style='width:450px'>
<table summary='Stroke Styles'>
<tr>
- <td><img src='images/line-dashes.png' alt='Dash Styles'
/><br />
+ <td><img alt='Dash Styles' src='images/line-dashes.png'
/><br />
Dash Styles</td>

- <td><img src='images/line-caps.png' alt='End Cap Styles'
/><br />
+ <td><img alt='End Cap Styles' src='images/line-caps.png'
/><br />
End Cap Styles</td>
</tr>
</table>
@@ -317,13 +320,13 @@
<div class='center' style='width:600px'>
<table summary='Join Styles'>
<tr>
- <td><img src='images/line-join-miter.png' alt='Miter Join'
/><br />
+ <td><img alt='Miter Join' src='images/line-join-miter.png'
/><br />
Miter Join</td>

- <td><img src='images/line-join-round.png' alt='Round Join'
/><br />
+ <td><img alt='Round Join' src='images/line-join-round.png'
/><br />
Round Join</td>

- <td><img src='images/line-join-bevel.png' alt='Bevel Join'
/><br />
+ <td><img alt='Bevel Join' src='images/line-join-bevel.png'
/><br />
Bevel Join</td>
</tr>
</table>
@@ -332,14 +335,14 @@
<div class='center' style='width:700px'>
<table summary='Antialiasing images'>
<tr>
- <td><img src='images/line1.png' height='100' alt='Aliased,
small' width=
- '100' />&nbsp;&nbsp; <img src='images/line2.png'
height='200' alt='Aliased, large'
+ <td><img alt='Aliased, small' height='100'
src='images/line1.png' width=
+ '100' />&nbsp;&nbsp; <img alt='Aliased, large' height='200'
src='images/line2.png'
width='200' /><br />
Unantialiased Line</td>

- <td><img src='images/line3.png' height='100'
alt='Antialiased, small' width=
- '100' />&nbsp;&nbsp; <img src='images/line4.png'
height='200' alt=
- 'Antialiased, large' width='200' /><br />
+ <td><img alt='Antialiased, small' height='100'
src='images/line3.png' width=
+ '100' />&nbsp;&nbsp; <img alt='Antialiased, large'
height='200' src=
+ 'images/line4.png' width='200' /><br />
Antialiased Line</td>
</tr>
</table>
@@ -361,11 +364,11 @@
<div class='center' style='width:400px'>
<table summary='Fill Styles'>
<tr>
- <td><img src='images/fill-solid.png' height='100' alt='Solid
Fill' width=
+ <td><img alt='Solid Fill' height='100'
src='images/fill-solid.png' width=
'100' /><br />
Solid Fill</td>

- <td><img src='images/fill-gradient.jpg' height='100'
alt='Gradient Fill' width=
+ <td><img alt='Gradient Fill' height='100'
src='images/fill-gradient.jpg' width=
'100' /><br />
Gradient Fill</td>
</tr>
@@ -379,7 +382,7 @@
<p>describes images as a discrete number of pixels. Each pixel is
specified by a color from
one of several possible color models.</p>

- <p class='image'><img src='images/pixel-model.png' height='202'
alt='Pixel Model' width=
+ <p class='image'><img alt='Pixel Model' height='202'
src='images/pixel-model.png' width=
'202' /></p>
</dd>
</dl>
@@ -443,8 +446,8 @@

<p>Models that can represent a large number of colors are called true
color.&nbsp; Examples are
RGB, HSV, and CMYK.&nbsp; The common 8-bit RGB model assigns a 3 byte
value to each pixel, one
- byte per channel (red, green and blue). This model can represent up to
2<sup>8</sup> &times;
- 2<sup>8</sup> &times; 2<sup>8</sup> or 16,777,216 colors.</p>
+ byte per channel (red, green and blue). This model can represent up to
2<sup>8</sup> ×
+ 2<sup>8</sup> × 2<sup>8</sup> or 16,777,216 colors.</p>

<h3 id='Clipping'>Clipping</h3>

@@ -457,7 +460,7 @@
include algebra for adding/subtracting, manipulating shape and there
are various types
(rectangular, rectilinear, rectilinear with holes).</p>

- <p class='image'><img src='images/clip.png' alt='Clipping' /></p>
+ <p class='image'><img alt='Clipping' src='images/clip.png' /></p>

<p>Java has the Area class (made of Shapes) and C# has the Region
class.</p>

@@ -519,10 +522,10 @@
<div class='center' style='width:400px'>
<table summary='Bezier Curves'>
<tr>
- <td><img src='images/graphi1.png' alt='Cubic Bezier Curve' /><br
/>
+ <td><img alt='Cubic Bezier Curve' src='images/graphi1.png' /><br
/>
Cubic Bezier Curve</td>

- <td><img src='images/graphi2.png' alt='Quad Bezier Curve' /><br
/>
+ <td><img alt='Quad Bezier Curve' src='images/graphi2.png' /><br
/>
Quad Bezier Curve</td>
</tr>
</table>
@@ -545,19 +548,19 @@

<p>We can represent some transformations as 2x2 matrices of the
following form.</p>

- <p class='image'><img src='images/matrix.png' alt='Matrix' /></p>
+ <p class='image'><img alt='Matrix' src='images/matrix.png' /></p>

<p>We can then multiply the matrix by a column vector to apply the
transformation to a
point.</p>

- <p class='image'><img src='images/matrix-mult.png' alt='Matrix
Multiplication' /></p>
+ <p class='image'><img alt='Matrix Multiplication'
src='images/matrix-mult.png' /></p>

- <p class='image'>x&prime; = Ax + By<br />
- y&prime; = Cx + Dy</p>
+ <p class='image'>x′ = Ax + By<br />
+ y′ = Cx + Dy</p>

<p>Matrices also allow as to represent a sequence of
transformations.</p>

- <p class='image'><img src='images/matrix-comb.png' alt='Matrix
Combination' /></p>
+ <p class='image'><img alt='Matrix Combination'
src='images/matrix-comb.png' /></p>

<p>Multiplying two matrices of the same size yields another matrix of
the same size.&nbsp; So,
the three transformations above can actually be represented as a
single matrix.&nbsp; As long
@@ -573,11 +576,11 @@
<div class='center' style='width:350px'>
<table summary='Scaling'>
<tr>
- <td><img src='images/scale.png' alt='Scaling' style=
+ <td><img alt='Scaling' src='images/scale.png' style=
'background-color: white'
/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</td>

- <td>x&prime; = x &times; S<sub>x</sub><br />
- y&prime; = y &times; S<sub>y</sub></td>
+ <td>x′ = x × S<sub>x</sub><br />
+ y′ = y × S<sub>y</sub></td>
</tr>
</table>
</div>
@@ -585,37 +588,37 @@
<p>If we define P as a point [x, y], we can combine the equations
above to get the following
representation.</p>

- <p>P&prime; = S &#8729; P or,</p>
+ <p>P′ = S ∙ P or,</p>

- <p class='image'><img src='images/scale-formula.png' alt='Scaling
Formula' /></p>
+ <p class='image'><img alt='Scaling Formula'
src='images/scale-formula.png' /></p>

<p>We can then represent the scale vector as 2x2 matrix.</p>

- <p class='image'><img src='images/scale-matrix.png' alt='Scaling
Matrix' /></p>
+ <p class='image'><img alt='Scaling Matrix'
src='images/scale-matrix.png' /></p>

<h3 id='Rotation'>Rotation</h3>

<p>Another common type of transformation is rotation, where we rotate
the points by some angle
- &theta;.</p>
+ θ.</p>

<div class='center' style='width:500px'>
<table summary='Rotation'>
<tr>
- <td><img src='images/rotate.png' height='185' alt='Rotation'
style=
+ <td><img alt='Rotation' height='185' src='images/rotate.png'
style=
'background-color: white' width=
'225'
/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</td>

- <td>x&prime; = x &times; cos(&theta;) - y &times;
sin(&theta;)<br />
- y&prime; = x &times; sin(&theta;) + y &times; cos(&theta;)</td>
+ <td>x′ = x × cos(θ) - y × sin(θ)<br />
+ y′ = x × sin(θ) + y × cos(θ)</td>
</tr>
</table>
</div>

<p>Again, we can represent rotation as a 2x2 matrix.</p>

- <p>P&prime; = R &#8729; P or,</p>
+ <p>P′ = R ∙ P or,</p>

- <p class='image'><img src='images/rotate-matrix.png' alt='Rotation
Matrix' /></p>
+ <p class='image'><img alt='Rotation Matrix'
src='images/rotate-matrix.png' /></p>

<h3 id='Translation'>Translation</h3>

@@ -626,11 +629,11 @@
<div class='center' style='width:350px'>
<table summary='Translation'>
<tr>
- <td><img src='images/translate.png' alt='Translation' style=
+ <td><img alt='Translation' src='images/translate.png' style=
'background-color: white'
/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</td>

- <td>x&prime; = x + T<sub>x</sub><br />
- y&prime; = y + T<sub>y</sub></td>
+ <td>x′ = x + T<sub>x</sub><br />
+ y′ = y + T<sub>y</sub></td>
</tr>
</table>
</div>
@@ -638,9 +641,9 @@
<p>If we define P as a point [x, y], we can combine the equations
above to get the following
representation:</p>

- <p>P&prime; = P + T or,</p>
+ <p>P′ = P + T or,</p>

- <p class='image'><img src='images/translate-formula.png' height='65'
alt='Translation Formula'
+ <p class='image'><img alt='Translation Formula' height='65'
src='images/translate-formula.png'
width='385' /></p>

<p>But, we cannot represent translation as a 2x2 matrix!&nbsp; This
means we won't be able to
@@ -651,25 +654,25 @@

<p>We can take a 2-dimensional point and represent it as a
3-vector.</p>

- <p class='image'><img src='images/homogeneous.png' alt='Homogenous
Coordinates' /></p>
+ <p class='image'><img alt='Homogenous Coordinates'
src='images/homogeneous.png' /></p>

<p>We add a third coordinate <i>h</i> to every 2D point, where (x, y,
h) represents the point
at location (x/h, y/h). We can now represent translation as a 3x3
matrix of the following
form.</p>

- <p>P&prime; =&nbsp; T &#8729; P or,</p>
+ <p>P′ =&nbsp; T ∙ P or,</p>

- <p class='image'><img src='images/translate-homog.png' alt='Homogenous
Translation' /></p>
+ <p class='image'><img alt='Homogenous Translation'
src='images/translate-homog.png' /></p>

<p>We can then change our scale and rotation matrices into 3x3
matrices as well.</p>

- <p>P&prime; =&nbsp; S &#8729; P or,</p>
+ <p>P′ =&nbsp; S ∙ P or,</p>

- <p class='image'><img src='images/scale-homog.png' alt='Homogenous
Scaling' /></p>
+ <p class='image'><img alt='Homogenous Scaling'
src='images/scale-homog.png' /></p>

- <p>P&prime; =&nbsp; R &#8729; P or,</p>
+ <p>P′ =&nbsp; R ∙ P or,</p>

- <p class='image'><img src='images/rotate-homog.png' alt='Homogenous
Rotation' /></p>
+ <p class='image'><img alt='Homogenous Rotation'
src='images/rotate-homog.png' /></p>

<p>This may not seem intuitive or exciting. But, it is quite useful
for graphics operations
because it allows us to combine translation, scale and rotation
transformations, simply by
@@ -699,25 +702,25 @@
transformation, in order get one general representation. For example,
if we scale, rotate and
then translate, we will have done the following.</p>

- <p>P&prime; = ( T &#8729; (R &#8729; (S &#8729; P)))</p>
+ <p>P′ = ( T ∙ (R ∙ (S ∙ P)))</p>

<p>We can then separate out our matrix.</p>

- <p>P&prime; = ( T &#8729; R &#8729; S) &#8729; P</p>
+ <p>P′ = ( T ∙ R ∙ S) ∙ P</p>

<p>M = TRS</p>

<p>However, matrix multiplication is not commutative.</p>

- <p>M<sub>1</sub> &#8729; M<sub>2</sub> != M<sub>2</sub> &#8729;
M<sub>1</sub></p>
+ <p>M<sub>1</sub> ∙ M<sub>2</sub> != M<sub>2</sub> ∙ M<sub>1</sub></p>

<p>To apply a transformation after the current one, we post-multiply
the matrix.</p>

- <p>P&prime; = M<sub>new</sub> &#8729; M<sub>current</sub> P</p>
+ <p>P′ = M<sub>new</sub> ∙ M<sub>current</sub> P</p>

<p>To apply a transformation first, we pre-multiply.</p>

- <p>P&prime; = M<sub>current</sub> &#8729; M<sub>new</sub> P</p>
+ <p>P′ = M<sub>current</sub> ∙ M<sub>new</sub> P</p>

<h3 id='Coordinate'>Coordinate Systems</h3>

@@ -730,7 +733,7 @@
apply a rotation, followed by a translation.&nbsp; We can think of
this as creating a rotated,
translated coordinate system, with a new origin.</p>

- <p class='image'><img src='images/coord1.png' alt='Transformed
Coordinate Systems' /></p>
+ <p class='image'><img alt='Transformed Coordinate Systems'
src='images/coord1.png' /></p>

<p>We can now draw objects as normal using the <i>local</i>
coordinates of this new coordinate
system.&nbsp; So, if we draw an object a (0, 0), it will appear at the
new origin of the new
=======================================
--- /site/learn/index.html Wed Oct 21 16:20:42 2009 UTC
+++ /site/learn/index.html Sun Mar 22 21:13:32 2015 UTC
@@ -3,14 +3,18 @@

<html lang='en' xml:lang='en' xmlns='http://www.w3.org/1999/xhtml'>
<head>
- <meta name='generator' content=
- 'HTML Tidy for Linux/x86 (vers 7 December 2008), see www.w3.org' />
- <meta content='text/html; charset=us-ascii' http-equiv='Content-Type' />
- <meta name='description' content='Home Page for the Piccolo2D project.'
/>
- <meta name='format' content='text/html' />
- <meta name='keywords' content=
- 'piccolo2d, piccolo2d.net, piccolo, piccolo.net, zoomable, zui, user
interfaces, human-computer interaction, HCI, visualization, education' />
- <meta name='relation' content='(contained in)=http://www.piccolo2d.org'
/>
+ <meta content=
+ 'HTML Tidy for Mac OS X (vers 31 October 2006 - Apple Inc. build 15.12),
see www.w3.org' name=
+ 'generator' />
+ <meta content='text/html; charset=utf-8' http-equiv='Content-Type' />
+ <meta content='Home Page for the Piccolo2D project.' name='description'
/>
+ <meta content='text/html' name='format' />
+ <meta content=
+ 'piccolo2d, piccolo2d.net, piccolo, piccolo.net, zoomable, zui, user
interfaces, human-computer interaction, HCI, visualization, education'
+ name='keywords' />
+ <meta content='(contained in)=http://www.piccolo2d.org' name='relation'
/>
+ <link href='../images/Piccolo2D-Logo.png' rel='image_src' />
+ <meta content='../images/Piccolo2D-Logo.png' name='og:image'
property='og:image' />

<title>Piccolo2D - Learning Center</title>
<link href='../piccolo2d.css' rel='stylesheet' type='text/css' />
@@ -20,13 +24,13 @@
<div id='navigation'>
<!--
this navigation node is auto-generated and injected
-by the script tools/inject_navigation.rb
+by the script ./tools/inject_navigation.rb

DO NOT EDIT IT MANUALLY!!!
-->

- <p class='header'><a href='../index.html'><img
src='../images/Piccolo2D-Logo-small.png' alt=
- 'Piccolo2D Logo' /></a></p>
+ <p class='header'><a href='../index.html'><img alt='Piccolo2D Logo'
src=
+ '../images/Piccolo2D-Logo-small.png' /></a></p>

<ul>
<li>
@@ -36,7 +40,7 @@
<li><a href='../play/index.html'>Play</a></li>

<li>
- <a href='../learn/index.html' class='selected'>Learn</a>
+ <a class='selected' href='../learn/index.html'>Learn</a>

<ul>
<li><a
href='../learn/about.html'>About&nbsp;Piccolo2D</a></li>
@@ -78,12 +82,11 @@
'http://code.google.com/p/piccolo2d/issues/entry?template=User%20defect%20report'>Found
a
Typo?</a></p>

- <p class='validators'><a
href='http://validator.w3.org/check/referer'><img src=
- 'http://www.w3.org/Icons/valid-xhtml10-blue' alt='Valid XHTML 1.0!'
style=
+ <p class='validators'><a
href='http://validator.w3.org/check/referer'><img alt=
+ 'Valid XHTML 1.0!' src='http://www.w3.org/Icons/valid-xhtml10-blue'
style=
'border:0;width:88px;height:31px' /></a> <a href=
- 'http://jigsaw.w3.org/css-validator/check/referer'><img src=
- 'http://www.w3.org/Icons/valid-css-blue' alt='Valid CSS1!' style=
- 'border:0;width:88px;height:31px' /></a></p>
+ 'http://jigsaw.w3.org/css-validator/check/referer'><img alt='Valid
CSS1!' src=
+ 'http://www.w3.org/Icons/valid-css-blue'
style='border:0;width:88px;height:31px' /></a></p>
</div>

<div id='main'>
=======================================
--- /site/learn/interaction.html Wed Oct 26 03:34:02 2011 UTC
+++ /site/learn/interaction.html Sun Mar 22 21:13:32 2015 UTC
@@ -3,14 +3,18 @@

<html lang='en' xml:lang='en' xmlns='http://www.w3.org/1999/xhtml'>
<head>
- <meta name='generator' content=
- 'HTML Tidy for Linux/x86 (vers 7 December 2008), see www.w3.org' />
- <meta content='text/html; charset=us-ascii' http-equiv='Content-Type' />
- <meta name='description' content='Home Page for the Piccolo2D project.'
/>
- <meta name='format' content='text/html' />
- <meta name='keywords' content=
- 'piccolo2d, piccolo2d.net, piccolo, piccolo.net, zoomable, zui, user
interfaces, human-computer interaction, HCI, visualization, education' />
- <meta name='relation' content='(contained in)=http://www.piccolo2d.org'
/>
+ <meta content=
+ 'HTML Tidy for Mac OS X (vers 31 October 2006 - Apple Inc. build 15.12),
see www.w3.org' name=
+ 'generator' />
+ <meta content='text/html; charset=utf-8' http-equiv='Content-Type' />
+ <meta content='Home Page for the Piccolo2D project.' name='description'
/>
+ <meta content='text/html' name='format' />
+ <meta content=
+ 'piccolo2d, piccolo2d.net, piccolo, piccolo.net, zoomable, zui, user
interfaces, human-computer interaction, HCI, visualization, education'
+ name='keywords' />
+ <meta content='(contained in)=http://www.piccolo2d.org' name='relation'
/>
+ <link href='../images/Piccolo2D-Logo.png' rel='image_src' />
+ <meta content='../images/Piccolo2D-Logo.png' name='og:image'
property='og:image' />

<title>Piccolo2D.Java - Defining User Interaction</title>
<link href='../piccolo2d.css' rel='stylesheet' type='text/css' />
@@ -20,13 +24,13 @@
<div id='navigation'>
<!--
this navigation node is auto-generated and injected
-by the script tools/inject_navigation.rb
+by the script ./tools/inject_navigation.rb

DO NOT EDIT IT MANUALLY!!!
-->

- <p class='header'><a href='../index.html'><img
src='../images/Piccolo2D-Logo-small.png' alt=
- 'Piccolo2D Logo' /></a></p>
+ <p class='header'><a href='../index.html'><img alt='Piccolo2D Logo'
src=
+ '../images/Piccolo2D-Logo-small.png' /></a></p>

<ul>
<li>
@@ -55,8 +59,8 @@

<li><a
href='../learn/interface.html'>The&nbsp;Interface</a></li>

- <li><a href='../learn/interaction.html' class=
- 'selected'>User&nbsp;Interaction</a></li>
+ <li><a class='selected' href=
+ '../learn/interaction.html'>User&nbsp;Interaction</a></li>

<li><a
href='../learn/effects.html'>Special&nbsp;Effects</a></li>

@@ -99,12 +103,11 @@
'http://code.google.com/p/piccolo2d/issues/entry?template=User%20defect%20report'>Found
a
Typo?</a></p>

- <p class='validators'><a
href='http://validator.w3.org/check/referer'><img src=
- 'http://www.w3.org/Icons/valid-xhtml10-blue' alt='Valid XHTML 1.0!'
style=
+ <p class='validators'><a
href='http://validator.w3.org/check/referer'><img alt=
+ 'Valid XHTML 1.0!' src='http://www.w3.org/Icons/valid-xhtml10-blue'
style=
'border:0;width:88px;height:31px' /></a> <a href=
- 'http://jigsaw.w3.org/css-validator/check/referer'><img src=
- 'http://www.w3.org/Icons/valid-css-blue' alt='Valid CSS1!' style=
- 'border:0;width:88px;height:31px' /></a></p>
+ 'http://jigsaw.w3.org/css-validator/check/referer'><img alt='Valid
CSS1!' src=
+ 'http://www.w3.org/Icons/valid-css-blue'
style='border:0;width:88px;height:31px' /></a></p>
</div>

<div id='main'>
@@ -117,14 +120,14 @@

<p class='toggle' id='language' style=
'float: right; width: 8.5em; height: 8ex; border:thin solid
blue;'>Show examples in<br />
- <img src='images/check.png' id='java0' alt='Checkmark' style=
- 'border:0;width:1.0em;height:2ex' /> <a href='javascript:void(0);'
name='jlink0' class=
- 'toggle selected' id='jlink0' onmousedown=
+ <img alt='Checkmark' id='java0' src='images/check.png' style=
+ 'border:0;width:1.0em;height:2ex' /> <a class='toggle selected'
href='javascript:void(0);' id=
+ 'jlink0' name='jlink0' onmousedown=
'swapSections(&#39;csharp&#39;, &#39;java&#39;, &#39;clink&#39;,
&#39;jlink&#39;);'>Java</a><br />

- <img src='images/check.png' id='csharp0' alt='Checkmark' style=
- 'visibility: hidden;border:0;width:1.0em;height:2ex' /> <a
href='javascript:void(0);' name=
- 'clink0' id='clink0' onmousedown=
+ <img alt='Checkmark' id='csharp0' src='images/check.png' style=
+ 'visibility: hidden;border:0;width:1.0em;height:2ex' /> <a
href='javascript:void(0);' id=
+ 'clink0' name='clink0' onmousedown=
'swapSections(&#39;java&#39;, &#39;csharp&#39;, &#39;jlink&#39;,
&#39;clink&#39;);'>C#</a></p>

<h1>Defining User Interaction</h1>
@@ -133,7 +136,7 @@
will define the user experience.&nbsp; It will cover how to add mouse
and keyboard event
handlers to the main camera and other nodes, as well as how to filter
and consume events.</p>

- <p class='image'><img src='images/interaction.jpg' alt='user
interaction' /><br />
+ <p class='image'><img alt='user interaction'
src='images/interaction.jpg' /><br />
Download the complete code sample in <a href=
'http://piccolo2d.googlecode.com/files/codesample.java-1.2-userinteraction.zip'>Java</a>
or
<a href=
@@ -149,10 +152,10 @@
<p>First you will need to reference the appropriate
packages/namespaces.&nbsp; Add the
following lines to the top of your code file:</p>

- <p class='toggle'><a href='javascript:void(0);' name='jlink1'
class='toggle selected' id=
+ <p class='toggle'><a class='toggle selected'
href='javascript:void(0);' id='jlink1' name=
'jlink1' onmousedown=
'swapSections(&#39;csharp&#39;, &#39;java&#39;, &#39;clink&#39;,
&#39;jlink&#39;);'>Java</a>
- | <a href='javascript:void(0);' name='clink1' id='clink1'
onmousedown=
+ | <a href='javascript:void(0);' id='clink1' name='clink1'
onmousedown=
'swapSections(&#39;java&#39;, &#39;csharp&#39;, &#39;jlink&#39;,
&#39;clink&#39;);'>C#</a></p>

<div class='snippet' id='snippet1'>
@@ -172,11 +175,11 @@
</pre>
</div>

- <p>The first line adds the base Piccolo2D types, such as
<code>PNode</code>. The second line
- includes the basic event types. The third line includes the
default node types that Piccolo2D
- provides, all of which extend <code>PNode</code>.&nbsp; The fourth
line includes several utility
- classes, and the last line includes various "extras," such as
<code>PForm</code> in .NET and
- <code>PFrame</code> in Java, which will be used below.</p>
+ <p>The first line adds the base Piccolo2D types, such as
<code>PNode</code>. The second
+ line includes the basic event types. The third line includes the
default node types that
+ Piccolo2D provides, all of which extend <code>PNode</code>.&nbsp;
The fourth line includes
+ several utility classes, and the last line includes
various "extras," such as
+ <code>PForm</code> in .NET and <code>PFrame</code> in Java, which
will be used below.</p>
</li>

<li>
@@ -186,10 +189,10 @@
Instead, you should override the <code>initialize</code> method
and add all of your
Piccolo2D code there.&nbsp; See the <a href='dev-faq.html'>FAQ</a>
for more details.</p>

- <p class='toggle'><a href='javascript:void(0);' name='jlink2'
class='toggle selected' id=
+ <p class='toggle'><a class='toggle selected'
href='javascript:void(0);' id='jlink2' name=
'jlink2' onmousedown=
'swapSections(&#39;csharp&#39;, &#39;java&#39;, &#39;clink&#39;,
&#39;jlink&#39;);'>Java</a>
- | <a href='javascript:void(0);' name='clink2' id='clink2'
onmousedown=
+ | <a href='javascript:void(0);' id='clink2' name='clink2'
onmousedown=
'swapSections(&#39;java&#39;, &#39;csharp&#39;, &#39;jlink&#39;,
&#39;clink&#39;);'>C#</a></p>

<div class='snippet' id='snippet2'>
@@ -238,10 +241,10 @@
class in Piccolo2D that is used to register for mouse and keyboard
events on a PNode.&nbsp;
Add the following internal class beneath the
<code>initialize</code> method.</p>

- <p class='toggle'><a href='javascript:void(0);' name='jlink3'
class='toggle selected' id=
+ <p class='toggle'><a class='toggle selected'
href='javascript:void(0);' id='jlink3' name=
'jlink3' onmousedown=
'swapSections(&#39;csharp&#39;, &#39;java&#39;, &#39;clink&#39;,
&#39;jlink&#39;);'>Java</a>
- | <a href='javascript:void(0);' name='clink3' id='clink3'
onmousedown=
+ | <a href='javascript:void(0);' id='clink3' name='clink3'
onmousedown=
'swapSections(&#39;java&#39;, &#39;csharp&#39;, &#39;jlink&#39;,
&#39;clink&#39;);'>C#</a></p>

<div class='snippet' id='snippet3'>
@@ -398,10 +401,10 @@
camera node.&nbsp; Add the following lines of code to the
<code>initialize</code>
method.</p>

- <p class='toggle'><a href='javascript:void(0);' name='jlink4'
class='toggle selected' id=
+ <p class='toggle'><a class='toggle selected'
href='javascript:void(0);' id='jlink4' name=
'jlink4' onmousedown=
'swapSections(&#39;csharp&#39;, &#39;java&#39;, &#39;clink&#39;,
&#39;jlink&#39;);'>Java</a>
- | <a href='javascript:void(0);' name='clink4' id='clink4'
onmousedown=
+ | <a href='javascript:void(0);' id='clink4' name='clink4'
onmousedown=
'swapSections(&#39;java&#39;, &#39;csharp&#39;, &#39;jlink&#39;,
&#39;clink&#39;);'>C#</a></p>

<div class='snippet' id='snippet4'>
@@ -457,10 +460,10 @@
<p>First, we will create green rectangle node and add it to the
main layer.&nbsp; Add the
following lines of code to the <code>initialize</code> method.</p>

- <p class='toggle'><a href='javascript:void(0);' name='jlink5'
class='toggle selected' id=
+ <p class='toggle'><a class='toggle selected'
href='javascript:void(0);' id='jlink5' name=
'jlink5' onmousedown=
'swapSections(&#39;csharp&#39;, &#39;java&#39;, &#39;clink&#39;,
&#39;jlink&#39;);'>Java</a>
- | <a href='javascript:void(0);' name='clink5' id='clink5'
onmousedown=
+ | <a href='javascript:void(0);' id='clink5' name='clink5'
onmousedown=
'swapSections(&#39;java&#39;, &#39;csharp&#39;, &#39;jlink&#39;,
&#39;clink&#39;);'>C#</a></p>

<div class='snippet' id='snippet5'>
@@ -490,10 +493,10 @@
<code>initialize</code> method.&nbsp; The .NET snippet should be
added beneath
<code>initialize</code>.</p>

- <p class='toggle'><a href='javascript:void(0);' name='jlink6'
class='toggle selected' id=
+ <p class='toggle'><a class='toggle selected'
href='javascript:void(0);' id='jlink6' name=
'jlink6' onmousedown=
'swapSections(&#39;csharp&#39;, &#39;java&#39;, &#39;clink&#39;,
&#39;jlink&#39;);'>Java</a>
- | <a href='javascript:void(0);' name='clink6' id='clink6'
onmousedown=
+ | <a href='javascript:void(0);' id='clink6' name='clink6'
onmousedown=
'swapSections(&#39;java&#39;, &#39;csharp&#39;, &#39;jlink&#39;,
&#39;clink&#39;);'>C#</a></p>

<div class='snippet' id='snippet6'>
@@ -616,10 +619,10 @@
<p>Finally, we will register the node event handler with our
node.&nbsp; Add the following
lines of code to the <code>initialize</code> method.</p>

- <p class='toggle'><a href='javascript:void(0);' name='jlink7'
class='toggle selected' id=
+ <p class='toggle'><a class='toggle selected'
href='javascript:void(0);' id='jlink7' name=
'jlink7' onmousedown=
'swapSections(&#39;csharp&#39;, &#39;java&#39;, &#39;clink&#39;,
&#39;jlink&#39;);'>Java</a>
- | <a href='javascript:void(0);' name='clink7' id='clink7'
onmousedown=
+ | <a href='javascript:void(0);' id='clink7' name='clink7'
onmousedown=
'swapSections(&#39;java&#39;, &#39;csharp&#39;, &#39;jlink&#39;,
&#39;clink&#39;);'>C#</a></p>

<div class='snippet' id='snippet7'>
=======================================
--- /site/learn/interface.html Wed Mar 2 16:01:28 2011 UTC
+++ /site/learn/interface.html Sun Mar 22 21:13:32 2015 UTC
@@ -3,14 +3,18 @@

<html lang='en' xml:lang='en' xmlns='http://www.w3.org/1999/xhtml'>
<head>
- <meta name='generator' content=
- 'HTML Tidy for Linux/x86 (vers 7 December 2008), see www.w3.org' />
- <meta content='text/html; charset=us-ascii' http-equiv='Content-Type' />
- <meta name='description' content='Home Page for the Piccolo2D project.'
/>
- <meta name='format' content='text/html' />
- <meta name='keywords' content=
- 'piccolo2d, piccolo2d.net, piccolo, piccolo.net, zoomable, zui, user
interfaces, human-computer interaction, HCI, visualization, education' />
- <meta name='relation' content='(contained in)=http://www.piccolo2d.org'
/>
+ <meta content=
+ 'HTML Tidy for Mac OS X (vers 31 October 2006 - Apple Inc. build 15.12),
see www.w3.org' name=
+ 'generator' />
+ <meta content='text/html; charset=utf-8' http-equiv='Content-Type' />
+ <meta content='Home Page for the Piccolo2D project.' name='description'
/>
+ <meta content='text/html' name='format' />
+ <meta content=
+ 'piccolo2d, piccolo2d.net, piccolo, piccolo.net, zoomable, zui, user
interfaces, human-computer interaction, HCI, visualization, education'
+ name='keywords' />
+ <meta content='(contained in)=http://www.piccolo2d.org' name='relation'
/>
+ <link href='../images/Piccolo2D-Logo.png' rel='image_src' />
+ <meta content='../images/Piccolo2D-Logo.png' name='og:image'
property='og:image' />

<title>Piccolo2D.Java - Building the Interface</title>
<link href='../piccolo2d.css' rel='stylesheet' type='text/css' />
@@ -20,13 +24,13 @@
<div id='navigation'>
<!--
this navigation node is auto-generated and injected
-by the script tools/inject_navigation.rb
+by the script ./tools/inject_navigation.rb

DO NOT EDIT IT MANUALLY!!!
-->

- <p class='header'><a href='../index.html'><img
src='../images/Piccolo2D-Logo-small.png' alt=
- 'Piccolo2D Logo' /></a></p>
+ <p class='header'><a href='../index.html'><img alt='Piccolo2D Logo'
src=
+ '../images/Piccolo2D-Logo-small.png' /></a></p>

<ul>
<li>
@@ -53,8 +57,8 @@
<li><a href=
'../learn/out-of-box-dotnet.html'>.Net:&nbsp;Out&nbsp;of&nbsp;the&nbsp;Box</a></li>

- <li><a href='../learn/interface.html' class=
- 'selected'>The&nbsp;Interface</a></li>
+ <li><a class='selected' href=
+ '../learn/interface.html'>The&nbsp;Interface</a></li>

<li><a
href='../learn/interaction.html'>User&nbsp;Interaction</a></li>

@@ -99,12 +103,11 @@
'http://code.google.com/p/piccolo2d/issues/entry?template=User%20defect%20report'>Found
a
Typo?</a></p>

- <p class='validators'><a
href='http://validator.w3.org/check/referer'><img src=
- 'http://www.w3.org/Icons/valid-xhtml10-blue' alt='Valid XHTML 1.0!'
style=
+ <p class='validators'><a
href='http://validator.w3.org/check/referer'><img alt=
+ 'Valid XHTML 1.0!' src='http://www.w3.org/Icons/valid-xhtml10-blue'
style=
'border:0;width:88px;height:31px' /></a> <a href=
- 'http://jigsaw.w3.org/css-validator/check/referer'><img src=
- 'http://www.w3.org/Icons/valid-css-blue' alt='Valid CSS1!' style=
- 'border:0;width:88px;height:31px' /></a></p>
+ 'http://jigsaw.w3.org/css-validator/check/referer'><img alt='Valid
CSS1!' src=
+ 'http://www.w3.org/Icons/valid-css-blue'
style='border:0;width:88px;height:31px' /></a></p>
</div>

<div id='main'>
@@ -117,14 +120,14 @@

<p class='toggle' id='language' style=
'float: right; width: 8.5em; height: 8ex; border:thin solid
blue;'>Show examples in<br />
- <img src='images/check.png' id='java0' alt='Checkmark' style=
- 'border:0;width:1.0em;height:2ex' /> <a href='javascript:void(0);'
name='jlink0' class=
- 'toggle selected' id='jlink0' onmousedown=
+ <img alt='Checkmark' id='java0' src='images/check.png' style=
+ 'border:0;width:1.0em;height:2ex' /> <a class='toggle selected'
href='javascript:void(0);' id=
+ 'jlink0' name='jlink0' onmousedown=
'swapSections(&#39;csharp&#39;, &#39;java&#39;, &#39;clink&#39;,
&#39;jlink&#39;);'>Java</a><br />

- <img src='images/check.png' id='csharp0' alt='Checkmark' style=
- 'visibility: hidden;border:0;width:1.0em;height:2ex' /> <a
href='javascript:void(0);' name=
- 'clink0' id='clink0' onmousedown=
+ <img alt='Checkmark' id='csharp0' src='images/check.png' style=
+ 'visibility: hidden;border:0;width:1.0em;height:2ex' /> <a
href='javascript:void(0);' id=
+ 'clink0' name='clink0' onmousedown=
'swapSections(&#39;java&#39;, &#39;csharp&#39;, &#39;jlink&#39;,
&#39;clink&#39;);'>C#</a></p>

<h1>Building the Interface</h1>
@@ -133,13 +136,13 @@
to use the default nodes, how to create new nodes through composition
and how to create new
nodes using inheritance.</i></p>

- <p class='image'><img src='images/interface.jpg' alt='Interfaces'
/><br />
+ <p class='image'><img alt='Interfaces' src='images/interface.jpg'
/><br />
Download the complete code sample in <a href=
'http://piccolo2d.googlecode.com/files/codesample.java-1.2-buildinginterface.zip'>Java</a>
or
<a href=
'http://piccolo2d.googlecode.com/files/codesample.net-1.2-buildinginterface.zip'>C#</a>.</p>

- <h2><a name='step1' id='step1'>1. Setup</a></h2>
+ <h2><a id='step1' name='step1'>1. Setup</a></h2>

<p class='preamble'>We need to create a window with a Piccolo2D
canvas, so that we can add the
interface components to the canvas.</p>
@@ -149,10 +152,10 @@
<p>First you will need to reference the appropriate
packages/namespaces.&nbsp; Add the
following lines to the top of your code file:</p>

- <p class='toggle'><a href='javascript:void(0);' name='jlink1'
class='toggle selected' id=
+ <p class='toggle'><a class='toggle selected'
href='javascript:void(0);' id='jlink1' name=
'jlink1' onmousedown=
'swapSections(&#39;csharp&#39;, &#39;java&#39;, &#39;clink&#39;,
&#39;jlink&#39;);'>Java</a>
- | <a href='javascript:void(0);' name='clink1' id='clink1'
onmousedown=
+ | <a href='javascript:void(0);' id='clink1' name='clink1'
onmousedown=
'swapSections(&#39;java&#39;, &#39;csharp&#39;, &#39;jlink&#39;,
&#39;clink&#39;);'>C#</a></p>

<div class='snippet' id='snippet1'>
@@ -187,10 +190,10 @@
Instead, you should override the <code>initialize</code> method
and add all of your
Piccolo2D code there.&nbsp; See the <a href='dev-faq.html'>FAQ</a>
for more details.</p>

- <p class='toggle'><a href='javascript:void(0);' name='jlink2'
class='toggle selected' id=
+ <p class='toggle'><a class='toggle selected'
href='javascript:void(0);' id='jlink2' name=
'jlink2' onmousedown=
'swapSections(&#39;csharp&#39;, &#39;java&#39;, &#39;clink&#39;,
&#39;jlink&#39;);'>Java</a>
- | <a href='javascript:void(0);' name='clink2' id='clink2'
onmousedown=
+ | <a href='javascript:void(0);' id='clink2' name='clink2'
onmousedown=
'swapSections(&#39;java&#39;, &#39;csharp&#39;, &#39;jlink&#39;,
&#39;clink&#39;);'>C#</a></p>

<div class='snippet' id='snippet2'>
@@ -223,10 +226,10 @@
dragged around.&nbsp; Add the following lines of code to the
<code>initialize</code>
method.</p>

- <p class='toggle'><a href='javascript:void(0);' name='jlink3'
class='toggle selected' id=
+ <p class='toggle'><a class='toggle selected'
href='javascript:void(0);' id='jlink3' name=
'jlink3' onmousedown=
'swapSections(&#39;csharp&#39;, &#39;java&#39;, &#39;clink&#39;,
&#39;jlink&#39;);'>Java</a>
- | <a href='javascript:void(0);' name='clink3' id='clink3'
onmousedown=
+ | <a href='javascript:void(0);' id='clink3' name='clink3'
onmousedown=
'swapSections(&#39;java&#39;, &#39;csharp&#39;, &#39;jlink&#39;,
&#39;clink&#39;);'>C#</a></p>

<div class='snippet' id='snippet3'>
@@ -258,10 +261,10 @@
the scene.&nbsp; By default, a PNode will just fill its bounds
with its paint.&nbsp; Add
the following lines of code to the <code>initialize</code>
method.</p>

- <p class='toggle'><a href='javascript:void(0);' name='jlink4'
class='toggle selected' id=
+ <p class='toggle'><a class='toggle selected'
href='javascript:void(0);' id='jlink4' name=
'jlink4' onmousedown=
'swapSections(&#39;csharp&#39;, &#39;java&#39;, &#39;clink&#39;,
&#39;jlink&#39;);'>Java</a>
- | <a href='javascript:void(0);' name='clink4' id='clink4'
onmousedown=
+ | <a href='javascript:void(0);' id='clink4' name='clink4'
onmousedown=
'swapSections(&#39;java&#39;, &#39;csharp&#39;, &#39;jlink&#39;,
&#39;clink&#39;);'>C#</a></p>

<div class='snippet' id='snippet4'>
@@ -337,10 +340,10 @@
<p>PNode itself is not very interesting.&nbsp; So, lets try some
more advanced nodes.&nbsp;
Add the following lines of code to the <code>initialize</code>
method.</p>

- <p class='toggle'><a href='javascript:void(0);' name='jlink5'
class='toggle selected' id=
+ <p class='toggle'><a class='toggle selected'
href='javascript:void(0);' id='jlink5' name=
'jlink5' onmousedown=
'swapSections(&#39;csharp&#39;, &#39;java&#39;, &#39;clink&#39;,
&#39;jlink&#39;);'>Java</a>
- | <a href='javascript:void(0);' name='clink5' id='clink5'
onmousedown=
+ | <a href='javascript:void(0);' id='clink5' name='clink5'
onmousedown=
'swapSections(&#39;java&#39;, &#39;csharp&#39;, &#39;jlink&#39;,
&#39;clink&#39;);'>C#</a></p>

<div class='snippet' id='snippet5'>
@@ -396,10 +399,10 @@
<p>We will create a face node by adding the eyes and mouth as the
children of another
node.&nbsp; Add the following lines of code to the
<code>initialize</code> method.</p>

- <p class='toggle'><a href='javascript:void(0);' name='jlink6'
class='toggle selected' id=
+ <p class='toggle'><a class='toggle selected'
href='javascript:void(0);' id='jlink6' name=
'jlink6' onmousedown=
'swapSections(&#39;csharp&#39;, &#39;java&#39;, &#39;clink&#39;,
&#39;jlink&#39;);'>Java</a>
- | <a href='javascript:void(0);' name='clink6' id='clink6'
onmousedown=
+ | <a href='javascript:void(0);' id='clink6' name='clink6'
onmousedown=
'swapSections(&#39;java&#39;, &#39;csharp&#39;, &#39;jlink&#39;,
&#39;clink&#39;);'>C#</a></p>

<div class='snippet' id='snippet6'>
@@ -498,10 +501,10 @@
'patterns.html#Creating_Nodes'>Creating Nodes Pattern</a>.&nbsp;
Add the following internal
class beneath the <code>initialize</code> method.</p>

- <p class='toggle'><a href='javascript:void(0);' name='jlink7'
class='toggle selected' id=
+ <p class='toggle'><a class='toggle selected'
href='javascript:void(0);' id='jlink7' name=
'jlink7' onmousedown=
'swapSections(&#39;csharp&#39;, &#39;java&#39;, &#39;clink&#39;,
&#39;jlink&#39;);'>Java</a>
- | <a href='javascript:void(0);' name='clink7' id='clink7'
onmousedown=
+ | <a href='javascript:void(0);' id='clink7' name='clink7'
onmousedown=
'swapSections(&#39;java&#39;, &#39;csharp&#39;, &#39;jlink&#39;,
&#39;clink&#39;);'>C#</a></p>

<div class='snippet' id='snippet7'>
@@ -573,8 +576,8 @@

<p>In the constructor we use the <code>PPath</code> to create the
ellipse.&nbsp; We store
the isPressed field to indicate whether or not the mouse is
currently down over the
- node.&nbsp; Notice that the on mouse up and on mouse down methods
set the value and then call
- <code>InvalidatePaint()</code>.&nbsp; This method notifies the
framework that the node
+ node.&nbsp; Notice that the on mouse up and on mouse down methods
set the value and then
+ call <code>InvalidatePaint()</code>.&nbsp; This method notifies
the framework that the node
needs to be repainted.&nbsp; Piccolo2D will then invalidate the
child paint of all the
ancestors of this node.&nbsp; Later the screen damage will be
collected for all the nodes
with invalid paint and eventually the <code>Paint()</code> method
of those nodes will get
@@ -583,19 +586,19 @@
bounds of the node.&nbsp; Otherwise, we will just use the base
implementation, which will
only fill the ellipse.</p>

- <p>Finally, we also use event handlers to set isPressed to true
when the mouse is down
- over the node, and back to false, when the mouse is
released.&nbsp; For more about events,
- see the <a href='interaction.html'>Defining User Interaction</a>
tutorial.</p>
+ <p>Finally, we also use event handlers to set isPressed to true
when the mouse is down over
+ the node, and back to false, when the mouse is released.&nbsp; For
more about events, see
+ the <a href='interaction.html'>Defining User Interaction</a>
tutorial.</p>
</li>

<li>
<p>Now that we've created the new type, we have to actually add
the node to the
interface.&nbsp; Add the following lines of code to the
<code>initialize</code> method.</p>

- <p class='toggle'><a href='javascript:void(0);' name='jlink8'
class='toggle selected' id=
+ <p class='toggle'><a class='toggle selected'
href='javascript:void(0);' id='jlink8' name=
'jlink8' onmousedown=
'swapSections(&#39;csharp&#39;, &#39;java&#39;, &#39;clink&#39;,
&#39;jlink&#39;);'>Java</a>
- | <a href='javascript:void(0);' name='clink8' id='clink8'
onmousedown=
+ | <a href='javascript:void(0);' id='clink8' name='clink8'
onmousedown=
'swapSections(&#39;java&#39;, &#39;csharp&#39;, &#39;jlink&#39;,
&#39;clink&#39;);'>C#</a></p>

<div class='snippet' id='snippet8'>
=======================================
--- /site/learn/out-of-box-dotnet.html Wed Oct 21 16:20:42 2009 UTC
+++ /site/learn/out-of-box-dotnet.html Sun Mar 22 21:13:32 2015 UTC
@@ -3,14 +3,18 @@

<html lang='en' xml:lang='en' xmlns='http://www.w3.org/1999/xhtml'>
<head>
- <meta name='generator' content=
- 'HTML Tidy for Linux/x86 (vers 7 December 2008), see www.w3.org' />
- <meta content='text/html; charset=us-ascii' http-equiv='Content-Type' />
- <meta name='description' content='Home Page for the Piccolo2D project.'
/>
- <meta name='format' content='text/html' />
- <meta name='keywords' content=
- 'piccolo2d, piccolo2d.net, piccolo, piccolo.net, zoomable, zui, user
interfaces, human-computer interaction, HCI, visualization, education' />
- <meta name='relation' content='(contained in)=http://www.piccolo2d.org'
/>
+ <meta content=
+ 'HTML Tidy for Mac OS X (vers 31 October 2006 - Apple Inc. build 15.12),
see www.w3.org' name=
+ 'generator' />
+ <meta content='text/html; charset=utf-8' http-equiv='Content-Type' />
+ <meta content='Home Page for the Piccolo2D project.' name='description'
/>
+ <meta content='text/html' name='format' />
+ <meta content=
+ 'piccolo2d, piccolo2d.net, piccolo, piccolo.net, zoomable, zui, user
interfaces, human-computer interaction, HCI, visualization, education'
+ name='keywords' />
+ <meta content='(contained in)=http://www.piccolo2d.org' name='relation'
/>
+ <link href='../images/Piccolo2D-Logo.png' rel='image_src' />
+ <meta content='../images/Piccolo2D-Logo.png' name='og:image'
property='og:image' />

<title>Piccolo2D.Net - Out of the Box</title>
<link href='../piccolo2d.css' rel='stylesheet' type='text/css' />
@@ -20,13 +24,13 @@
<div id='navigation'>
<!--
this navigation node is auto-generated and injected
-by the script tools/inject_navigation.rb
+by the script ./tools/inject_navigation.rb

DO NOT EDIT IT MANUALLY!!!
-->

- <p class='header'><a href='../index.html'><img
src='../images/Piccolo2D-Logo-small.png' alt=
- 'Piccolo2D Logo' /></a></p>
+ <p class='header'><a href='../index.html'><img alt='Piccolo2D Logo'
src=
+ '../images/Piccolo2D-Logo-small.png' /></a></p>

<ul>
<li>
@@ -50,8 +54,8 @@
<li><a href=
'../learn/out-of-box-java.html'>Java:&nbsp;Out&nbsp;of&nbsp;the&nbsp;Box</a></li>

- <li><a href='../learn/out-of-box-dotnet.html' class=
- 'selected'>.Net:&nbsp;Out&nbsp;of&nbsp;the&nbsp;Box</a></li>
+ <li><a class='selected' href=
+ '../learn/out-of-box-dotnet.html'>.Net:&nbsp;Out&nbsp;of&nbsp;the&nbsp;Box</a></li>

<li><a
href='../learn/interface.html'>The&nbsp;Interface</a></li>

@@ -98,12 +102,11 @@
'http://code.google.com/p/piccolo2d/issues/entry?template=User%20defect%20report'>Found
a
Typo?</a></p>

- <p class='validators'><a
href='http://validator.w3.org/check/referer'><img src=
- 'http://www.w3.org/Icons/valid-xhtml10-blue' alt='Valid XHTML 1.0!'
style=
+ <p class='validators'><a
href='http://validator.w3.org/check/referer'><img alt=
+ 'Valid XHTML 1.0!' src='http://www.w3.org/Icons/valid-xhtml10-blue'
style=
'border:0;width:88px;height:31px' /></a> <a href=
- 'http://jigsaw.w3.org/css-validator/check/referer'><img src=
- 'http://www.w3.org/Icons/valid-css-blue' alt='Valid CSS1!' style=
- 'border:0;width:88px;height:31px' /></a></p>
+ 'http://jigsaw.w3.org/css-validator/check/referer'><img alt='Valid
CSS1!' src=
+ 'http://www.w3.org/Icons/valid-css-blue'
style='border:0;width:88px;height:31px' /></a></p>
</div>

<div id='main'>
@@ -197,7 +200,7 @@
enable you to drag the canvas directly to a form using the Visual
Designer, rather than adding
the canvas programmatically.</p>

- <p class='image'><img src='images/toolbox.png' alt='Visual Studio
Toolbox' /></p>
+ <p class='image'><img alt='Visual Studio Toolbox'
src='images/toolbox.png' /></p>

<ol>
<li>Open Visual Studio, if it is not already open</li>
@@ -328,7 +331,7 @@
on the point.&nbsp; Drag to the left to zoom out.</li>
</ol>

- <p class='image'><img src='images/helloworld.png' alt='Hello, world'
/></p>
+ <p class='image'><img alt='Hello, world' src='images/helloworld.png'
/></p>

<p>The reason this works is because the zoom and pan event handlers
are installed by
default.&nbsp; See the <a href='interaction.html'>Defining User
Interaction</a> tutorial for
=======================================
--- /site/learn/out-of-box-java.html Tue Dec 21 17:20:16 2010 UTC
+++ /site/learn/out-of-box-java.html Sun Mar 22 21:13:32 2015 UTC
@@ -3,14 +3,18 @@

<html lang='en' xml:lang='en' xmlns='http://www.w3.org/1999/xhtml'>
<head>
- <meta name='generator' content=
- 'HTML Tidy for Linux/x86 (vers 7 December 2008), see www.w3.org' />
- <meta content='text/html; charset=us-ascii' http-equiv='Content-Type' />
- <meta name='description' content='Home Page for the Piccolo2D project.'
/>
- <meta name='format' content='text/html' />
- <meta name='keywords' content=
- 'piccolo2d, piccolo2d.net, piccolo, piccolo.net, zoomable, zui, user
interfaces, human-computer interaction, HCI, visualization, education' />
- <meta name='relation' content='(contained in)=http://www.piccolo2d.org'
/>
+ <meta content=
+ 'HTML Tidy for Mac OS X (vers 31 October 2006 - Apple Inc. build 15.12),
see www.w3.org' name=
+ 'generator' />
+ <meta content='text/html; charset=utf-8' http-equiv='Content-Type' />
+ <meta content='Home Page for the Piccolo2D project.' name='description'
/>
+ <meta content='text/html' name='format' />
+ <meta content=
+ 'piccolo2d, piccolo2d.net, piccolo, piccolo.net, zoomable, zui, user
interfaces, human-computer interaction, HCI, visualization, education'
+ name='keywords' />
+ <meta content='(contained in)=http://www.piccolo2d.org' name='relation'
/>
+ <link href='../images/Piccolo2D-Logo.png' rel='image_src' />
+ <meta content='../images/Piccolo2D-Logo.png' name='og:image'
property='og:image' />

<title>Piccolo2D.Java - Out of the Box</title>
<link href='../piccolo2d.css' rel='stylesheet' type='text/css' />
@@ -20,13 +24,13 @@
<div id='navigation'>
<!--
this navigation node is auto-generated and injected
-by the script tools/inject_navigation.rb
+by the script ./tools/inject_navigation.rb

DO NOT EDIT IT MANUALLY!!!
-->

- <p class='header'><a href='../index.html'><img
src='../images/Piccolo2D-Logo-small.png' alt=
- 'Piccolo2D Logo' /></a></p>
+ <p class='header'><a href='../index.html'><img alt='Piccolo2D Logo'
src=
+ '../images/Piccolo2D-Logo-small.png' /></a></p>

<ul>
<li>
@@ -47,8 +51,8 @@
<a
href='../learn/get-started.html'>Getting&nbsp;Started</a>

<ul>
- <li><a href='../learn/out-of-box-java.html' class=
- 'selected'>Java:&nbsp;Out&nbsp;of&nbsp;the&nbsp;Box</a></li>
+ <li><a class='selected' href=
+ '../learn/out-of-box-java.html'>Java:&nbsp;Out&nbsp;of&nbsp;the&nbsp;Box</a></li>

<li><a href=
'../learn/out-of-box-dotnet.html'>.Net:&nbsp;Out&nbsp;of&nbsp;the&nbsp;Box</a></li>
@@ -98,12 +102,11 @@
'http://code.google.com/p/piccolo2d/issues/entry?template=User%20defect%20report'>Found
a
Typo?</a></p>

- <p class='validators'><a
href='http://validator.w3.org/check/referer'><img src=
- 'http://www.w3.org/Icons/valid-xhtml10-blue' alt='Valid XHTML 1.0!'
style=
+ <p class='validators'><a
href='http://validator.w3.org/check/referer'><img alt=
+ 'Valid XHTML 1.0!' src='http://www.w3.org/Icons/valid-xhtml10-blue'
style=
'border:0;width:88px;height:31px' /></a> <a href=
- 'http://jigsaw.w3.org/css-validator/check/referer'><img src=
- 'http://www.w3.org/Icons/valid-css-blue' alt='Valid CSS1!' style=
- 'border:0;width:88px;height:31px' /></a></p>
+ 'http://jigsaw.w3.org/css-validator/check/referer'><img alt='Valid
CSS1!' src=
+ 'http://www.w3.org/Icons/valid-css-blue'
style='border:0;width:88px;height:31px' /></a></p>
</div>

<div id='main'>
@@ -128,8 +131,8 @@
<dt>Java 2 Platform, Standard Edition (J2SE)</dt>

<dd>To run any Piccolo2D.Java code, you must have the Java 2
Platform&nbsp; installed on your
- machine.&nbsp;If you do not have the Java 2 Platform, you should
first download the <a href=
- 'http://java.sun.com/downloads/index.html' class='main_pane'>J2SE
installer</a> and install
+ machine.&nbsp;If you do not have the Java 2 Platform, you should
first download the <a class=
+ 'main_pane' href='http://java.sun.com/downloads/index.html'>J2SE
installer</a> and install
the Java 2 Platform.</dd>

<dt>Eclipse IDE</dt>
=======================================
--- /site/learn/patterns.html Wed Mar 2 15:34:39 2011 UTC
+++ /site/learn/patterns.html Sun Mar 22 21:13:32 2015 UTC
@@ -3,14 +3,18 @@

<html lang='en' xml:lang='en' xmlns='http://www.w3.org/1999/xhtml'>
<head>
- <meta name='generator' content=
- 'HTML Tidy for Linux/x86 (vers 7 December 2008), see www.w3.org' />
- <meta content='text/html; charset=us-ascii' http-equiv='Content-Type' />
- <meta name='description' content='Home Page for the Piccolo2D project.'
/>
- <meta name='format' content='text/html' />
- <meta name='keywords' content=
- 'piccolo2d, piccolo2d.net, piccolo, piccolo.net, zoomable, zui, user
interfaces, human-computer interaction, HCI, visualization, education' />
- <meta name='relation' content='(contained in)=http://www.piccolo2d.org'
/>
+ <meta content=
+ 'HTML Tidy for Mac OS X (vers 31 October 2006 - Apple Inc. build 15.12),
see www.w3.org' name=
+ 'generator' />
+ <meta content='text/html; charset=utf-8' http-equiv='Content-Type' />
+ <meta content='Home Page for the Piccolo2D project.' name='description'
/>
+ <meta content='text/html' name='format' />
+ <meta content=
+ 'piccolo2d, piccolo2d.net, piccolo, piccolo.net, zoomable, zui, user
interfaces, human-computer interaction, HCI, visualization, education'
+ name='keywords' />
+ <meta content='(contained in)=http://www.piccolo2d.org' name='relation'
/>
+ <link href='../images/Piccolo2D-Logo.png' rel='image_src' />
+ <meta content='../images/Piccolo2D-Logo.png' name='og:image'
property='og:image' />

<title>Piccolo2D - Pattern</title>
<link href='../piccolo2d.css' rel='stylesheet' type='text/css' />
@@ -20,13 +24,13 @@
<div id='navigation'>
<!--
this navigation node is auto-generated and injected
-by the script tools/inject_navigation.rb
+by the script ./tools/inject_navigation.rb

DO NOT EDIT IT MANUALLY!!!
-->

- <p class='header'><a href='../index.html'><img
src='../images/Piccolo2D-Logo-small.png' alt=
- 'Piccolo2D Logo' /></a></p>
+ <p class='header'><a href='../index.html'><img alt='Piccolo2D Logo'
src=
+ '../images/Piccolo2D-Logo-small.png' /></a></p>

<ul>
<li>
@@ -42,7 +46,7 @@
<li><a
href='../learn/about.html'>About&nbsp;Piccolo2D</a></li>

<li>
- <a href='../learn/patterns.html'
class='selected'>Piccolo2D&nbsp;Patterns</a>
+ <a class='selected'
href='../learn/patterns.html'>Piccolo2D&nbsp;Patterns</a>

<ul>
<li>
@@ -142,12 +146,11 @@
'http://code.google.com/p/piccolo2d/issues/entry?template=User%20defect%20report'>Found
a
Typo?</a></p>

- <p class='validators'><a
href='http://validator.w3.org/check/referer'><img src=
- 'http://www.w3.org/Icons/valid-xhtml10-blue' alt='Valid XHTML 1.0!'
style=
+ <p class='validators'><a
href='http://validator.w3.org/check/referer'><img alt=
+ 'Valid XHTML 1.0!' src='http://www.w3.org/Icons/valid-xhtml10-blue'
style=
'border:0;width:88px;height:31px' /></a> <a href=
- 'http://jigsaw.w3.org/css-validator/check/referer'><img src=
- 'http://www.w3.org/Icons/valid-css-blue' alt='Valid CSS1!' style=
- 'border:0;width:88px;height:31px' /></a></p>
+ 'http://jigsaw.w3.org/css-validator/check/referer'><img alt='Valid
CSS1!' src=
+ 'http://www.w3.org/Icons/valid-css-blue'
style='border:0;width:88px;height:31px' /></a></p>
</div>

<div id='main'>
@@ -164,14 +167,14 @@

<p class='toggle' id='language' style=
'float: right; width: 8.5em; height: 8ex; border:thin solid
blue;'>Show examples in<br />
- <img src='images/check.png' id='java13' alt='Checkmark' style=
- 'border:0;width:1.0em;height:2ex' /> <a href='javascript:void(0);'
name='jlink13' class=
- 'toggle selected' id='jlink13' onmousedown=
+ <img alt='Checkmark' id='java13' src='images/check.png' style=
+ 'border:0;width:1.0em;height:2ex' /> <a class='toggle selected'
href='javascript:void(0);' id=
+ 'jlink13' name='jlink13' onmousedown=
'swapSections(&#39;csharp&#39;, &#39;java&#39;, &#39;clink&#39;,
&#39;jlink&#39;);'>Java</a><br />

- <img src='images/check.png' id='csharp13' alt='Checkmark' style=
- 'visibility: hidden;border:0;width:1.0em;height:2ex' /> <a
href='javascript:void(0);' name=
- 'clink13' id='clink13' onmousedown=
+ <img alt='Checkmark' id='csharp13' src='images/check.png' style=
+ 'visibility: hidden;border:0;width:1.0em;height:2ex' /> <a
href='javascript:void(0);' id=
+ 'clink13' name='clink13' onmousedown=
'swapSections(&#39;java&#39;, &#39;csharp&#39;, &#39;jlink&#39;,
&#39;clink&#39;);'>C#</a></p>

<h2 id='Intro'>Intro</h2>
@@ -183,7 +186,7 @@
viewpoint may also be scaled and panned. Interfaces built with
Piccolo2D can define your entire
application interface, or they can be a small part of a large
system.</p>

- <p class='image'><img src='../images/zoomsequence.jpg' alt='Zoom
Sequence' /></p>
+ <p class='image'><img alt='Zoom Sequence'
src='../images/zoomsequence.jpg' /></p>

<p>Figure 1 shows a sequence of frames from a simple zooming interface
created using Piccolo2D.
This example shows the fundamental aspects of a Piccolo2D application.
In this sequence the
@@ -211,10 +214,10 @@

<p>The interface depicted in figure 1 can be created with the
following code:</p>

- <p class='toggle'><a href='javascript:void(0);' name='jlink0'
class='toggle selected' id=
+ <p class='toggle'><a class='toggle selected'
href='javascript:void(0);' id='jlink0' name=
'jlink0' onmousedown=
'swapSections(&#39;csharp&#39;, &#39;java&#39;, &#39;clink&#39;,
&#39;jlink&#39;);'>Java</a> |
- <a href='javascript:void(0);' name='clink0' id='clink0' onmousedown=
+ <a href='javascript:void(0);' id='clink0' name='clink0' onmousedown=
'swapSections(&#39;java&#39;, &#39;csharp&#39;, &#39;jlink&#39;,
&#39;clink&#39;);'>C#</a></p>

<div class='snippet' id='snippet0'>
@@ -382,19 +385,19 @@
<dt>Use existing classes</dt>

<dd>Piccolo2D is supplied with the default implementations for three
kinds of visual nodes:
- <code>PText</code>, <code>PPath</code>, and <code>PImage</code>.
These may be used &lsquo;as
- is' in a new application, which saves developers the time and effort
required to create such
+ <code>PText</code>, <code>PPath</code>, and <code>PImage</code>.
These may be used ‘as is' in
+ a new application, which saves developers the time and effort
required to create such
elements themselves, but reduces the knowledge they have about how
that figure is
implemented.</dd>

<dt>Subclass existing classes</dt>

- <dd>Often the default implementations of <code>PNodes</code> are
&lsquo;almost but not quite'
- what is required for an interface. In such circumstances, it makes
sense to customize the
- existing node to fit the needs of the interface. This saves time
compared with starting from
- scratch and provides insight into the organization of that node but
subclassing will increase
- the number of classes in the system and carries the responsibility
of ensuring that the
- original intent of that inheritance hierarchy is
maintained.&nbsp;</dd>
+ <dd>Often the default implementations of <code>PNodes</code> are
‘almost but not quite' what
+ is required for an interface. In such circumstances, it makes sense
to customize the existing
+ node to fit the needs of the interface. This saves time compared
with starting from scratch
+ and provides insight into the organization of that node but
subclassing will increase the
+ number of classes in the system and carries the responsibility of
ensuring that the original
+ intent of that inheritance hierarchy is maintained.&nbsp;</dd>

<dt>Composition</dt>

@@ -424,10 +427,10 @@

<p>The following code defines a new simple (without a border) ellipse
node.</p>

- <p class='toggle'><a href='javascript:void(0)' name='jlink1'
class='toggle selected' id=
+ <p class='toggle'><a class='toggle selected' href='javascript:void(0)'
id='jlink1' name=
'jlink1' onmousedown=
'swapSections(&#39;csharp&#39;, &#39;java&#39;, &#39;clink&#39;,
&#39;jlink&#39;);'>Java</a> |
- <a href='javascript:void(0)' name='clink1' id='clink1' onmousedown=
+ <a href='javascript:void(0)' id='clink1' name='clink1' onmousedown=
'swapSections(&#39;java&#39;, &#39;csharp&#39;, &#39;jlink&#39;,
&#39;clink&#39;);'>C#</a></p>

<div class='snippet' id='snippet1'>
@@ -532,10 +535,10 @@
<p>This example class creates an event listener that will create
rectangle nodes on the
canvas's layer when the user presses, drags, and then releases the
mouse.</p>

- <p class='toggle'><a href='javascript:void(0)' name='jlink2'
class='toggle selected' id=
+ <p class='toggle'><a class='toggle selected' href='javascript:void(0)'
id='jlink2' name=
'jlink2' onmousedown=
'swapSections(&#39;csharp&#39;, &#39;java&#39;, &#39;clink&#39;,
&#39;jlink&#39;);'>Java</a> |
- <a href='javascript:void(0)' name='clink2' id='clink2' onmousedown=
+ <a href='javascript:void(0)' id='clink2' name='clink2' onmousedown=
'swapSections(&#39;java&#39;, &#39;csharp&#39;, &#39;jlink&#39;,
&#39;clink&#39;);'>C#</a></p>

<div class='snippet' id='snippet2'>
@@ -672,10 +675,10 @@

<p>The code to register this event listener with the canvas would look
like this:</p>

- <p class='toggle'><a href='javascript:void(0)' name='jlink3'
class='toggle selected' id=
+ <p class='toggle'><a class='toggle selected' href='javascript:void(0)'
id='jlink3' name=
'jlink3' onmousedown=
'swapSections(&#39;csharp&#39;, &#39;java&#39;, &#39;clink&#39;,
&#39;jlink&#39;);'>Java</a> |
- <a href='javascript:void(0)' name='clink3' id='clink3' onmousedown=
+ <a href='javascript:void(0)' id='clink3' name='clink3' onmousedown=
'swapSections(&#39;java&#39;, &#39;csharp&#39;, &#39;jlink&#39;,
&#39;clink&#39;);'>C#</a></p>

<div class='snippet' id='snippet3'>
@@ -692,10 +695,10 @@
Often you will want to remove the default pan and zoom event handlers
associated with the
<code>PCanvas</code>, this can be done as follows:</p>

- <p class='toggle'><a href='javascript:void(0)' name='jlink4'
class='toggle selected' id=
+ <p class='toggle'><a class='toggle selected' href='javascript:void(0)'
id='jlink4' name=
'jlink4' onmousedown=
'swapSections(&#39;csharp&#39;, &#39;java&#39;, &#39;clink&#39;,
&#39;jlink&#39;);'>Java</a> |
- <a href='javascript:void(0)' name='clink4' id='clink4' onmousedown=
+ <a href='javascript:void(0)' id='clink4' name='clink4' onmousedown=
'swapSections(&#39;java&#39;, &#39;csharp&#39;, &#39;jlink&#39;,
&#39;clink&#39;);'>C#</a></p>

<div class='snippet' id='snippet4'>
@@ -766,10 +769,10 @@
process.. The following is a simple layout node that overrides and
lays its children out in a
horizontal row.</p>

- <p class='toggle'><a href='javascript:void(0);' name='jlink5'
class='toggle selected' id=
+ <p class='toggle'><a class='toggle selected'
href='javascript:void(0);' id='jlink5' name=
'jlink5' onmousedown=
'swapSections(&#39;csharp&#39;, &#39;java&#39;, &#39;clink&#39;,
&#39;jlink&#39;);'>Java</a> |
- <a href='javascript:void(0);' name='clink5' id='clink5' onmousedown=
+ <a href='javascript:void(0);' id='clink5' name='clink5' onmousedown=
'swapSections(&#39;java&#39;, &#39;csharp&#39;, &#39;jlink&#39;,
&#39;clink&#39;);'>C#</a></p>

<div class='snippet' id='snippet5'>
@@ -816,8 +819,8 @@

<h3 id='Activities'>Pattern 6: Activities</h3>

- <p class='preamble'>Event handlers let an interface react to a user.
Activities are used to give
- the interface a life of its own through the use of animation and
other "scheduled"
+ <p class='preamble'>Event handlers let an interface react to a user.
Activities are used to
+ give the interface a life of its own through the use of animation and
other "scheduled"
behaviors.</p>

<p>Activities control some time-dependent aspect of the Piccolo2D
system, usually some part of
@@ -828,10 +831,10 @@
<p>This method sets up a flash activity that flashes the given node's
color from red to green
for 5 seconds.</p>

- <p class='toggle'><a href='javascript:void(0);' name='jlink6'
class='toggle selected' id=
+ <p class='toggle'><a class='toggle selected'
href='javascript:void(0);' id='jlink6' name=
'jlink6' onmousedown=
'swapSections(&#39;csharp&#39;, &#39;java&#39;, &#39;clink&#39;,
&#39;jlink&#39;);'>Java</a> |
- <a href='javascript:void(0);' name='clink6' id='clink6' onmousedown=
+ <a href='javascript:void(0);' id='clink6' name='clink6' onmousedown=
'swapSections(&#39;java&#39;, &#39;csharp&#39;, &#39;jlink&#39;,
&#39;clink&#39;);'>C#</a></p>

<div class='snippet' id='snippet6'>
@@ -878,10 +881,10 @@
<p>Activities are scheduled by the <code>PRoot</code> until they have
completed. Note that for
animation activities you can also use the convenience methods in
<code>PNode</code>:</p>

- <p class='toggle'><a href='javascript:void(0);' name='jlink7'
class='toggle selected' id=
+ <p class='toggle'><a class='toggle selected'
href='javascript:void(0);' id='jlink7' name=
'jlink7' onmousedown=
'swapSections(&#39;csharp&#39;, &#39;java&#39;, &#39;clink&#39;,
&#39;jlink&#39;);'>Java</a> |
- <a href='javascript:void(0);' name='clink7' id='clink7' onmousedown=
+ <a href='javascript:void(0);' id='clink7' name='clink7' onmousedown=
'swapSections(&#39;java&#39;, &#39;csharp&#39;, &#39;jlink&#39;,
&#39;clink&#39;);'>C#</a></p>

<div class='snippet' id='snippet7'>
@@ -969,7 +972,7 @@
interfaces. The framework's design borrows heavily from the designs of
both the Jazz and
Morphic interface frameworks.</p>

- <p class='image'><img src='../images/piccolo2d_hierachy.png'
alt='Piccolo2D Class Hierarchy'
+ <p class='image'><img alt='Piccolo2D Class Hierarchy'
src='../images/piccolo2d_hierachy.png'
style='background-color: white' /><br />
Piccolo2D Class Hierarchy</p>

@@ -991,8 +994,8 @@
<code>PCanvas</code>, internal cameras for example are not.)</li>
</ol>

- <p class='image'><img src='../images/piccolo2d_runtime.png' alt=
- 'Piccolo2D Runtime Structure' /><br />
+ <p class='image'><img alt='Piccolo2D Runtime Structure' src=
+ '../images/piccolo2d_runtime.png' /><br />
Piccolo2D Runtime Structure</p>

<p>At runtime these classes form a tree-like structure with the
<code>PRoot</code> situated at
@@ -1024,8 +1027,8 @@

<h3>PLayer</h3>

- <p>Layer nodes are nodes that can be viewed by one or more cameras.
They maintain a list of
- the cameras that are viewing them, and notify these cameras when they
are repainted.</p>
+ <p>Layer nodes are nodes that can be viewed by one or more cameras.
They maintain a list of the
+ cameras that are viewing them, and notify these cameras when they are
repainted.</p>

<h3>PRoot</h3>

@@ -1055,10 +1058,10 @@
traversing the node scene graph to paint or calculate bounds parent
nodes generally call the
"full" methods of their direct child nodes. For example:</p>

- <p class='toggle'><a href='javascript:void(0);' name='jlink8'
class='toggle selected' id=
+ <p class='toggle'><a class='toggle selected'
href='javascript:void(0);' id='jlink8' name=
'jlink8' onmousedown=
'swapSections(&#39;csharp&#39;, &#39;java&#39;, &#39;clink&#39;,
&#39;jlink&#39;);'>Java</a> |
- <a href='javascript:void(0);' name='clink8' id='clink8' onmousedown=
+ <a href='javascript:void(0);' id='clink8' name='clink8' onmousedown=
'swapSections(&#39;java&#39;, &#39;csharp&#39;, &#39;jlink&#39;,
&#39;clink&#39;);'>C#</a></p>

<div class='snippet' id='snippet8'>
@@ -1139,10 +1142,10 @@
<p>Piccolo2D provides methods that let you easily convert between
different coordinate systems.
The <code>PNode</code> class defines the methods:</p>

- <p class='toggle'><a href='javascript:void(0);' name='jlink9'
class='toggle selected' id=
+ <p class='toggle'><a class='toggle selected'
href='javascript:void(0);' id='jlink9' name=
'jlink9' onmousedown=
'swapSections(&#39;csharp&#39;, &#39;java&#39;, &#39;clink&#39;,
&#39;jlink&#39;);'>Java</a> |
- <a href='javascript:void(0);' name='clink9' id='clink9' onmousedown=
+ <a href='javascript:void(0);' id='clink9' name='clink9' onmousedown=
'swapSections(&#39;java&#39;, &#39;csharp&#39;, &#39;jlink&#39;,
&#39;clink&#39;);'>C#</a></p>

<div class='snippet' id='snippet9'>
@@ -1177,10 +1180,10 @@

<p>Here is a typical example of how coordinate systems are used:</p>

- <p class='toggle'><a href='javascript:void(0);' name='jlink10'
class='toggle selected' id=
+ <p class='toggle'><a class='toggle selected'
href='javascript:void(0);' id='jlink10' name=
'jlink10' onmousedown=
'swapSections(&#39;csharp&#39;, &#39;java&#39;, &#39;clink&#39;,
&#39;jlink&#39;);'>Java</a> |
- <a href='javascript:void(0);' name='clink10' id='clink10' onmousedown=
+ <a href='javascript:void(0);' id='clink10' name='clink10' onmousedown=
'swapSections(&#39;java&#39;, &#39;csharp&#39;, &#39;jlink&#39;,
&#39;clink&#39;);'>C#</a></p>

<div class='snippet' id='snippet10'>
@@ -1446,10 +1449,10 @@
color when viewed at a scale that is less than one, and with an orange
color when the scale is
greater than one.</p>

- <p class='toggle'><a href='javascript:void(0);' name='jlink11'
class='toggle selected' id=
+ <p class='toggle'><a class='toggle selected'
href='javascript:void(0);' id='jlink11' name=
'jlink11' onmousedown=
'swapSections(&#39;csharp&#39;, &#39;java&#39;, &#39;clink&#39;,
&#39;jlink&#39;);'>Java</a> |
- <a href='javascript:void(0);' name='clink11' id='clink11' onmousedown=
+ <a href='javascript:void(0);' id='clink11' name='clink11' onmousedown=
'swapSections(&#39;java&#39;, &#39;csharp&#39;, &#39;jlink&#39;,
&#39;clink&#39;);'>C#</a></p>

<div class='snippet' id='snippet11'>
@@ -1500,10 +1503,10 @@
sticky node.&nbsp; A standard rectangle is then added to the main
layer.&nbsp; Zooming in and
out will change the scale of the standard rectangle but not the sticky
one.</p>

- <p class='toggle'><a href='javascript:void(0);' name='jlink12'
class='toggle selected' id=
+ <p class='toggle'><a class='toggle selected'
href='javascript:void(0);' id='jlink12' name=
'jlink12' onmousedown=
'swapSections(&#39;csharp&#39;, &#39;java&#39;, &#39;clink&#39;,
&#39;jlink&#39;);'>Java</a> |
- <a href='javascript:void(0);' name='clink12' id='clink12' onmousedown=
+ <a href='javascript:void(0);' id='clink12' name='clink12' onmousedown=
'swapSections(&#39;java&#39;, &#39;csharp&#39;, &#39;jlink&#39;,
&#39;clink&#39;);'>C#</a></p>

<div class='snippet' id='snippet12'>
=======================================
--- /site/learn/publications.html Wed Oct 21 16:20:42 2009 UTC
+++ /site/learn/publications.html Sun Mar 22 21:13:32 2015 UTC
@@ -3,15 +3,19 @@

<html lang='en' xml:lang='en' xmlns='http://www.w3.org/1999/xhtml'>
<head>
- <meta content='text/html; charset=us-ascii' http-equiv='Content-Type' />
- <meta name='generator' content=
- 'HTML Tidy for Linux/x86 (vers 7 December 2008), see www.w3.org' />
- <meta content='text/html; charset=us-ascii' http-equiv='Content-Type' />
- <meta name='description' content='Home Page for the Piccolo2D project.'
/>
- <meta name='format' content='text/html' />
- <meta name='keywords' content=
- 'piccolo2d, piccolo2d.net, piccolo, piccolo.net, zoomable, zui, user
interfaces, human-computer interaction, HCI, visualization, education' />
- <meta name='relation' content='(contained in)=http://www.piccolo2d.org'
/>
+ <meta content='text/html; charset=utf-8' http-equiv='Content-Type' />
+ <meta content=
+ 'HTML Tidy for Mac OS X (vers 31 October 2006 - Apple Inc. build 15.12),
see www.w3.org' name=
+ 'generator' />
+ <meta content='text/html; charset=utf-8' http-equiv='Content-Type' />
+ <meta content='Home Page for the Piccolo2D project.' name='description'
/>
+ <meta content='text/html' name='format' />
+ <meta content=
+ 'piccolo2d, piccolo2d.net, piccolo, piccolo.net, zoomable, zui, user
interfaces, human-computer interaction, HCI, visualization, education'
+ name='keywords' />
+ <meta content='(contained in)=http://www.piccolo2d.org' name='relation'
/>
+ <link href='../images/Piccolo2D-Logo.png' rel='image_src' />
+ <meta content='../images/Piccolo2D-Logo.png' name='og:image'
property='og:image' />

<title>Piccolo2D - Publications</title>
<link href='jabref.css' rel='stylesheet' type='text/css' />
@@ -22,13 +26,13 @@
<div id='navigation'>
<!--
this navigation node is auto-generated and injected
-by the script tools/inject_navigation.rb
+by the script ./tools/inject_navigation.rb

DO NOT EDIT IT MANUALLY!!!
-->

- <p class='header'><a href='../index.html'><img
src='../images/Piccolo2D-Logo-small.png' alt=
- 'Piccolo2D Logo' /></a></p>
+ <p class='header'><a href='../index.html'><img alt='Piccolo2D Logo'
src=
+ '../images/Piccolo2D-Logo-small.png' /></a></p>

<ul>
<li>
@@ -51,7 +55,7 @@

<li><a
href='../learn/comparison.html'>Piccolo2D&nbsp;in&nbsp;Comparison</a></li>

- <li><a href='../learn/publications.html'
class='selected'>Publications</a></li>
+ <li><a class='selected'
href='../learn/publications.html'>Publications</a></li>

<li><a
href='../learn/dev-faq.html'>Developer&nbsp;FAQ</a></li>

@@ -80,12 +84,11 @@
'http://code.google.com/p/piccolo2d/issues/entry?template=User%20defect%20report'>Found
a
Typo?</a></p>

- <p class='validators'><a
href='http://validator.w3.org/check/referer'><img src=
- 'http://www.w3.org/Icons/valid-xhtml10-blue' alt='Valid XHTML 1.0!'
style=
+ <p class='validators'><a
href='http://validator.w3.org/check/referer'><img alt=
+ 'Valid XHTML 1.0!' src='http://www.w3.org/Icons/valid-xhtml10-blue'
style=
'border:0;width:88px;height:31px' /></a> <a href=
- 'http://jigsaw.w3.org/css-validator/check/referer'><img src=
- 'http://www.w3.org/Icons/valid-css-blue' alt='Valid CSS1!' style=
- 'border:0;width:88px;height:31px' /></a></p>
+ 'http://jigsaw.w3.org/css-validator/check/referer'><img alt='Valid
CSS1!' src=
+ 'http://www.w3.org/Icons/valid-css-blue'
style='border:0;width:88px;height:31px' /></a></p>
</div>

<div id='main'>
@@ -97,25 +100,26 @@

<div id='qs'>
<form action=''>
- <p>QuickSearch: <input name='qsfield' title='Allows plain text as
well as RegExp searches'
- id='qsfield' type='text' /><input type='button' value='clear'
onclick='clearQS()' />&nbsp;
- Number of matching entries: <span id='stat'>0</span>.</p>
+ <p>QuickSearch: <input id='qsfield' name='qsfield' title=
+ 'Allows plain text as well as RegExp searches' type='text'
/><input onclick='clearQS()'
+ type='button' value='clear' />&nbsp; Number of matching entries:
<span id=
+ 'stat'>0</span>.</p>

<div id='qssettings'>
<p onclick='toggleQSettingsDialog()'>Search Settings</p>

<ul>
- <li><label><input id='searchabs' type='checkbox' onclick=
- 'toggleQSetting(&#39;abs&#39;)' /> search abstract</label></li>
+ <li><label><input id='searchabs'
onclick='toggleQSetting(&#39;abs&#39;)' type=
+ 'checkbox' /> search abstract</label></li>

- <li><label><input id='searchrev' type='checkbox' onclick=
- 'toggleQSetting(&#39;rev&#39;)' /> search review</label></li>
+ <li><label><input id='searchrev'
onclick='toggleQSetting(&#39;rev&#39;)' type=
+ 'checkbox' /> search review</label></li>
</ul>
</div>
</form>
</div>

- <table id='qstable' border='1'>
+ <table border='1' id='qstable'>
<thead>
<tr>
<th width='20%'>Author</th>
@@ -1032,7 +1036,7 @@
</tr>

<tr class='entry' id='Hornbaek2002'>
- <td>Hornb&aelig;k, K., Bederson, B. B. &amp; Plaisant, C.</td>
+ <td>Hornbæk, K., Bederson, B. B. &amp; Plaisant, C.</td>

<td>
Navigation patterns and usability of zoomable user interfaces
with and without an
@@ -1077,7 +1081,7 @@
<b>BibTeX</b>:
<pre>
@article{Hornbaek2002,
- author = {Kasper Hornb&aelig;k and Benjamin B. Bederson and Catherine
Plaisant},
+ author = {Kasper Hornbæk and Benjamin B. Bederson and Catherine
Plaisant},
title = {Navigation patterns and usability of zoomable user interfaces
with and without an overview},
journal = {ACM Trans. Comput.-Hum. Interact.},
publisher = {ACM},
=======================================
--- /site/play/index.html Wed Oct 21 19:19:01 2009 UTC
+++ /site/play/index.html Sun Mar 22 21:13:32 2015 UTC
@@ -3,14 +3,18 @@

<html lang='en' xml:lang='en' xmlns='http://www.w3.org/1999/xhtml'>
<head>
- <meta name='generator' content=
- 'HTML Tidy for Linux/x86 (vers 7 December 2008), see www.w3.org' />
- <meta content='text/html; charset=us-ascii' http-equiv='Content-Type' />
- <meta name='description' content='Home Page for the Piccolo2D project.'
/>
- <meta name='format' content='text/html' />
- <meta name='keywords' content=
- 'piccolo2d, piccolo2d.net, piccolo, piccolo.net, zoomable, zui, user
interfaces, human-computer interaction, HCI, visualization, education' />
- <meta name='relation' content='(contained in)=http://www.piccolo2d.org'
/>
+ <meta content=
+ 'HTML Tidy for Mac OS X (vers 31 October 2006 - Apple Inc. build 15.12),
see www.w3.org' name=
+ 'generator' />
+ <meta content='text/html; charset=utf-8' http-equiv='Content-Type' />
+ <meta content='Home Page for the Piccolo2D project.' name='description'
/>
+ <meta content='text/html' name='format' />
+ <meta content=
+ 'piccolo2d, piccolo2d.net, piccolo, piccolo.net, zoomable, zui, user
interfaces, human-computer interaction, HCI, visualization, education'
+ name='keywords' />
+ <meta content='(contained in)=http://www.piccolo2d.org' name='relation'
/>
+ <link href='../images/Piccolo2D-Logo.png' rel='image_src' />
+ <meta content='../images/Piccolo2D-Logo.png' name='og:image'
property='og:image' />

<title>Piccolo2D - Play with Piccolo2D</title>
<link href='../piccolo2d.css' rel='stylesheet' type='text/css' />
@@ -20,13 +24,13 @@
<div id='navigation'>
<!--
this navigation node is auto-generated and injected
-by the script tools/inject_navigation.rb
+by the script ./tools/inject_navigation.rb

DO NOT EDIT IT MANUALLY!!!
-->

- <p class='header'><a href='../index.html'><img
src='../images/Piccolo2D-Logo-small.png' alt=
- 'Piccolo2D Logo' /></a></p>
+ <p class='header'><a href='../index.html'><img alt='Piccolo2D Logo'
src=
+ '../images/Piccolo2D-Logo-small.png' /></a></p>

<ul>
<li>
@@ -34,7 +38,7 @@

<ul>
<li>
- <a href='../play/index.html' class='selected'>Play</a>
+ <a class='selected' href='../play/index.html'>Play</a>

<ul>
<li><a href=
@@ -73,12 +77,11 @@
'http://code.google.com/p/piccolo2d/issues/entry?template=User%20defect%20report'>Found
a
Typo?</a></p>

- <p class='validators'><a
href='http://validator.w3.org/check/referer'><img src=
- 'http://www.w3.org/Icons/valid-xhtml10-blue' alt='Valid XHTML 1.0!'
style=
+ <p class='validators'><a
href='http://validator.w3.org/check/referer'><img alt=
+ 'Valid XHTML 1.0!' src='http://www.w3.org/Icons/valid-xhtml10-blue'
style=
'border:0;width:88px;height:31px' /></a> <a href=
- 'http://jigsaw.w3.org/css-validator/check/referer'><img src=
- 'http://www.w3.org/Icons/valid-css-blue' alt='Valid CSS1!' style=
- 'border:0;width:88px;height:31px' /></a></p>
+ 'http://jigsaw.w3.org/css-validator/check/referer'><img alt='Valid
CSS1!' src=
+ 'http://www.w3.org/Icons/valid-css-blue'
style='border:0;width:88px;height:31px' /></a></p>
</div>

<div id='main'>
@@ -90,12 +93,11 @@
</div>

<h2>Java Applets</h2>
-
+
<ul>
<li><a href='java/fisheyecalendar.html'>Fisheye Calendar</a> - A
simple tabular fisheye
application.</li>
</ul>
-

<h2>.Net Applets</h2>

=======================================
--- /site/press.html Wed Oct 21 16:20:42 2009 UTC
+++ /site/press.html Sun Mar 22 21:13:32 2015 UTC
@@ -3,14 +3,18 @@

<html lang='en' xml:lang='en' xmlns='http://www.w3.org/1999/xhtml'>
<head>
- <meta name='generator' content=
- 'HTML Tidy for Linux/x86 (vers 7 December 2008), see www.w3.org' />
- <meta content='text/html; charset=us-ascii' http-equiv='Content-Type' />
- <meta name='description' content='Home Page for the Piccolo2D project.'
/>
- <meta name='format' content='text/html' />
- <meta name='keywords' content=
- 'piccolo2d, piccolo2d.net, piccolo, piccolo.net, zoomable, zui, user
interfaces, human-computer interaction, HCI, visualization, education' />
- <meta name='relation' content='(contained in)=http://www.piccolo2d.org'
/>
+ <meta content=
+ 'HTML Tidy for Mac OS X (vers 31 October 2006 - Apple Inc. build 15.12),
see www.w3.org' name=
+ 'generator' />
+ <meta content='text/html; charset=utf-8' http-equiv='Content-Type' />
+ <meta content='Home Page for the Piccolo2D project.' name='description'
/>
+ <meta content='text/html' name='format' />
+ <meta content=
+ 'piccolo2d, piccolo2d.net, piccolo, piccolo.net, zoomable, zui, user
interfaces, human-computer interaction, HCI, visualization, education'
+ name='keywords' />
+ <meta content='(contained in)=http://www.piccolo2d.org' name='relation'
/>
+ <link href='images/Piccolo2D-Logo.png' rel='image_src' />
+ <meta content='images/Piccolo2D-Logo.png' name='og:image'
property='og:image' />

<title>Piccolo2D - In the Press</title>
<link href='piccolo2d.css' rel='stylesheet' type='text/css' />
@@ -20,13 +24,13 @@
<div id='navigation'>
<!--
this navigation node is auto-generated and injected
-by the script tools/inject_navigation.rb
+by the script ./tools/inject_navigation.rb

DO NOT EDIT IT MANUALLY!!!
-->

- <p class='header'><a href='index.html'><img
src='images/Piccolo2D-Logo-small.png' alt=
- 'Piccolo2D Logo' /></a></p>
+ <p class='header'><a href='index.html'><img alt='Piccolo2D Logo' src=
+ 'images/Piccolo2D-Logo-small.png' /></a></p>

<ul>
<li>
@@ -43,7 +47,7 @@

<li><a href='applications/index.html'>Applications</a></li>

- <li><a href='press.html' class='selected'>Press</a></li>
+ <li><a class='selected' href='press.html'>Press</a></li>

<li><a href='sponsors.html'>Sponsors</a></li>
</ul>
@@ -58,12 +62,11 @@
'http://code.google.com/p/piccolo2d/issues/entry?template=User%20defect%20report'>Found
a
Typo?</a></p>

- <p class='validators'><a
href='http://validator.w3.org/check/referer'><img src=
- 'http://www.w3.org/Icons/valid-xhtml10-blue' alt='Valid XHTML 1.0!'
style=
+ <p class='validators'><a
href='http://validator.w3.org/check/referer'><img alt=
+ 'Valid XHTML 1.0!' src='http://www.w3.org/Icons/valid-xhtml10-blue'
style=
'border:0;width:88px;height:31px' /></a> <a href=
- 'http://jigsaw.w3.org/css-validator/check/referer'><img src=
- 'http://www.w3.org/Icons/valid-css-blue' alt='Valid CSS1!' style=
- 'border:0;width:88px;height:31px' /></a></p>
+ 'http://jigsaw.w3.org/css-validator/check/referer'><img alt='Valid
CSS1!' src=
+ 'http://www.w3.org/Icons/valid-css-blue'
style='border:0;width:88px;height:31px' /></a></p>
</div>

<div id='main'>
=======================================
--- /site/sponsors.html Wed Oct 21 16:20:42 2009 UTC
+++ /site/sponsors.html Sun Mar 22 21:13:32 2015 UTC
@@ -3,14 +3,18 @@

<html lang='en' xml:lang='en' xmlns='http://www.w3.org/1999/xhtml'>
<head>
- <meta name='generator' content=
- 'HTML Tidy for Linux/x86 (vers 7 December 2008), see www.w3.org' />
- <meta content='text/html; charset=us-ascii' http-equiv='Content-Type' />
- <meta name='description' content='Home Page for the Piccolo2D project.'
/>
- <meta name='format' content='text/html' />
- <meta name='keywords' content=
- 'piccolo2d, piccolo2d.net, piccolo, piccolo.net, zoomable, zui, user
interfaces, human-computer interaction, HCI, visualization, education' />
- <meta name='relation' content='(contained in)=http://www.piccolo2d.org'
/>
+ <meta content=
+ 'HTML Tidy for Mac OS X (vers 31 October 2006 - Apple Inc. build 15.12),
see www.w3.org' name=
+ 'generator' />
+ <meta content='text/html; charset=utf-8' http-equiv='Content-Type' />
+ <meta content='Home Page for the Piccolo2D project.' name='description'
/>
+ <meta content='text/html' name='format' />
+ <meta content=
+ 'piccolo2d, piccolo2d.net, piccolo, piccolo.net, zoomable, zui, user
interfaces, human-computer interaction, HCI, visualization, education'
+ name='keywords' />
+ <meta content='(contained in)=http://www.piccolo2d.org' name='relation'
/>
+ <link href='images/Piccolo2D-Logo.png' rel='image_src' />
+ <meta content='images/Piccolo2D-Logo.png' name='og:image'
property='og:image' />

<title>Piccolo2D - Sponsors of the Piccolo2D Project</title>
<link href='piccolo2d.css' rel='stylesheet' type='text/css' />
@@ -20,13 +24,13 @@
<div id='navigation'>
<!--
this navigation node is auto-generated and injected
-by the script tools/inject_navigation.rb
+by the script ./tools/inject_navigation.rb

DO NOT EDIT IT MANUALLY!!!
-->

- <p class='header'><a href='index.html'><img
src='images/Piccolo2D-Logo-small.png' alt=
- 'Piccolo2D Logo' /></a></p>
+ <p class='header'><a href='index.html'><img alt='Piccolo2D Logo' src=
+ 'images/Piccolo2D-Logo-small.png' /></a></p>

<ul>
<li>
@@ -45,7 +49,7 @@

<li><a href='press.html'>Press</a></li>

- <li><a href='sponsors.html' class='selected'>Sponsors</a></li>
+ <li><a class='selected' href='sponsors.html'>Sponsors</a></li>
</ul>
</li>
</ul><!--
@@ -58,12 +62,11 @@
'http://code.google.com/p/piccolo2d/issues/entry?template=User%20defect%20report'>Found
a
Typo?</a></p>

- <p class='validators'><a
href='http://validator.w3.org/check/referer'><img src=
- 'http://www.w3.org/Icons/valid-xhtml10-blue' alt='Valid XHTML 1.0!'
style=
+ <p class='validators'><a
href='http://validator.w3.org/check/referer'><img alt=
+ 'Valid XHTML 1.0!' src='http://www.w3.org/Icons/valid-xhtml10-blue'
style=
'border:0;width:88px;height:31px' /></a> <a href=
- 'http://jigsaw.w3.org/css-validator/check/referer'><img src=
- 'http://www.w3.org/Icons/valid-css-blue' alt='Valid CSS1!' style=
- 'border:0;width:88px;height:31px' /></a></p>
+ 'http://jigsaw.w3.org/css-validator/check/referer'><img alt='Valid
CSS1!' src=
+ 'http://www.w3.org/Icons/valid-css-blue'
style='border:0;width:88px;height:31px' /></a></p>
</div>

<div id='main'>
=======================================
--- /site/tools/inject_navigation.rb Tue Oct 20 20:11:42 2009 UTC
+++ /site/tools/inject_navigation.rb Sun Mar 22 21:13:32 2015 UTC
@@ -3,7 +3,7 @@
# Call with parameter --help to get help.
#
# http://www.ruby-doc.org/docs/ProgrammingRuby/
-require File.dirname(__FILE__) + '/xhtml.rb'
+require File.join(File.dirname(__FILE__), 'xhtml.rb')

# Helper to inject navigation into html pages,
# TODO link-check and
Reply all
Reply to author
Forward
0 new messages