[piccolo2d] r1288 committed - add og:image meta tag to website. refs #266
4 views
Skip to first unread message
picc...@googlecode.com
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 Home</a>
+ <a class='selected' href='index.html'>Piccolo2D 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 Piccolo2D</a></li>
+ <li><a class='selected'
href='../learn/about.html'>About Piccolo2D</a></li>
<li><a
href='../learn/patterns.html'>Piccolo2D 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 Documentation</a></li>
<li>
- <a href='../learn/comparison.html' class=
- 'selected'>Piccolo2D in Comparison</a>
+ <a class='selected' href=
+ '../learn/comparison.html'>Piccolo2D in Comparison</a>
<ul>
<li><a href='#versions'>Piccolo2D 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 FAQ</a></li>
+ <li><a class='selected'
href='../learn/dev-faq.html'>Developer FAQ</a></li>
<li><a
href='../learn/graphics.html'>Graphics 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. 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. That means if you modify a
node's transform, it will
affect that node and all of its children. 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 Interaction</a></li>
- <li><a href='../learn/effects.html' class=
- 'selected'>Special Effects</a></li>
+ <li><a class='selected' href=
+ '../learn/effects.html'>Special Effects</a></li>
<li><a
href='../learn/fisheye.html'>Fisheye 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('csharp', 'java', 'clink',
'jlink');'>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('java', 'csharp', 'jlink',
'clink');'>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. 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('csharp', 'java', 'clink',
'jlink');'>Java</a>
- | <a href='javascript:void(0);' name='clink1' id='clink1'
onmousedown=
+ | <a href='javascript:void(0);' id='clink1' name='clink1'
onmousedown=
'swapSections('java', 'csharp', 'jlink',
'clink');'>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. 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('csharp', 'java', 'clink',
'jlink');'>Java</a>
- | <a href='javascript:void(0);' name='clink2' id='clink2'
onmousedown=
+ | <a href='javascript:void(0);' id='clink2' name='clink2'
onmousedown=
'swapSections('java', 'csharp', 'jlink',
'clink');'>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. 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('csharp', 'java', 'clink',
'jlink');'>Java</a>
- | <a href='javascript:void(0);' name='clink3' id='clink3'
onmousedown=
+ | <a href='javascript:void(0);' id='clink3' name='clink3'
onmousedown=
'swapSections('java', 'csharp', 'jlink',
'clink');'>C#</a></p>
<div class='snippet' id='snippet3'>
@@ -263,10 +266,10 @@
<code>PActivity</code>, the base activity type. 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('csharp', 'java', 'clink',
'jlink');'>Java</a>
- | <a href='javascript:void(0);' name='clink4' id='clink4'
onmousedown=
+ | <a href='javascript:void(0);' id='clink4' name='clink4'
onmousedown=
'swapSections('java', 'csharp', 'jlink',
'clink');'>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. 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('csharp', 'java', 'clink',
'jlink');'>Java</a>
- | <a href='javascript:void(0);' name='clink5' id='clink5'
onmousedown=
+ | <a href='javascript:void(0);' id='clink5' name='clink5'
onmousedown=
'swapSections('java', 'csharp', 'jlink',
'clink');'>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. 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('csharp', 'java', 'clink',
'jlink');'>Java</a>
- | <a href='javascript:void(0);' name='clink6' id='clink6'
onmousedown=
+ | <a href='javascript:void(0);' id='clink6' name='clink6'
onmousedown=
'swapSections('java', 'csharp', 'jlink',
'clink');'>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. 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('csharp', 'java', 'clink',
'jlink');'>Java</a>
- | <a href='javascript:void(0);' name='clink7' id='clink7'
onmousedown=
+ | <a href='javascript:void(0);' id='clink7' name='clink7'
onmousedown=
'swapSections('java', 'csharp', 'jlink',
'clink');'>C#</a></p>
<div class='snippet' id='snippet7'>
@@ -524,10 +527,10 @@
directly to the <code>initialize</code> method. 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('csharp', 'java', 'clink',
'jlink');'>Java</a>
- | <a href='javascript:void(0);' name='clink8' id='clink8'
onmousedown=
+ | <a href='javascript:void(0);' id='clink8' name='clink8'
onmousedown=
'swapSections('java', 'csharp', 'jlink',
'clink');'>C#</a></p>
<div class='snippet' id='snippet8'>
@@ -575,10 +578,10 @@
the activity. 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('csharp', 'java', 'clink',
'jlink');'>Java</a>
- | <a href='javascript:void(0);' name='clink9' id='clink9'
onmousedown=
+ | <a href='javascript:void(0);' id='clink9' name='clink9'
onmousedown=
'swapSections('java', 'csharp', 'jlink',
'clink');'>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 Effects</a></li>
- <li><a href='../learn/fisheye.html' class=
- 'selected'>Fisheye Calendar</a></li>
+ <li><a class='selected' href=
+ '../learn/fisheye.html'>Fisheye Calendar</a></li>
<li><a
href='../learn/grapheditor.html'>Graph 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('csharp', 'java', 'clink',
'jlink');'>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('java', 'csharp', 'jlink',
'clink');'>C#</a></p>
<h1>Fisheye Calendar</h1>
@@ -134,7 +137,7 @@
while shrinking the surrounding cells. 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. 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('csharp', 'java', 'clink',
'jlink');'>Java</a>
- | <a href='javascript:void(0);' name='clink1' id='clink1'
onmousedown=
+ | <a href='javascript:void(0);' id='clink1' name='clink1'
onmousedown=
'swapSections('java', 'csharp', 'jlink',
'clink');'>C#</a></p>
<div class='snippet' id='snippet1'>
@@ -341,10 +344,10 @@
<p>Here, we will create the calendar node. 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('csharp', 'java', 'clink',
'jlink');'>Java</a>
- | <a href='javascript:void(0);' name='clink2' id='clink2'
onmousedown=
+ | <a href='javascript:void(0);' id='clink2' name='clink2'
onmousedown=
'swapSections('java', 'csharp', 'jlink',
'clink');'>C#</a></p>
<div class='snippet' id='snippet2'>
@@ -518,10 +521,10 @@
<code>CalendarNode</code> defined above. 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('csharp', 'java', 'clink',
'jlink');'>Java</a>
- | <a href='javascript:void(0);' name='clink3' id='clink3'
onmousedown=
+ | <a href='javascript:void(0);' id='clink3' name='clink3'
onmousedown=
'swapSections('java', 'csharp', 'jlink',
'clink');'>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('csharp', 'java', 'clink',
'jlink');'>Java</a>
- | <a href='javascript:void(0);' name='clink4' id='clink4'
onmousedown=
+ | <a href='javascript:void(0);' id='clink4' name='clink4'
onmousedown=
'swapSections('java', 'csharp', 'jlink',
'clink');'>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. 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('csharp', 'java', 'clink',
'jlink');'>Java</a>
- | <a href='javascript:void(0);' name='clink5' id='clink5'
onmousedown=
+ | <a href='javascript:void(0);' id='clink5' name='clink5'
onmousedown=
'swapSections('java', 'csharp', 'jlink',
'clink');'>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 Patterns</a></li>
<li>
- <a href='../learn/get-started.html'
class='selected'>Getting Started</a>
+ <a class='selected'
href='../learn/get-started.html'>Getting 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 Calendar</a></li>
- <li><a href='../learn/grapheditor.html' class=
- 'selected'>Graph Editor</a></li>
+ <li><a class='selected' href=
+ '../learn/grapheditor.html'>Graph 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('csharp', 'java', 'clink',
'jlink');'>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('java', 'csharp', 'jlink',
'clink');'>C#</a></p>
<h1>Graph Editor</h1>
@@ -133,7 +136,7 @@
using Piccolo2D. Moving the mouse over a node will highlight
that node. 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.
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('csharp', 'java', 'clink',
'jlink');'>Java</a>
- | <a href='javascript:void(0);' name='clink1' id='clink1'
onmousedown=
+ | <a href='javascript:void(0);' id='clink1' name='clink1'
onmousedown=
'swapSections('java', 'csharp', 'jlink',
'clink');'>C#</a></p>
<div class='snippet' id='snippet1'>
@@ -345,10 +348,10 @@
project. 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('csharp', 'java', 'clink',
'jlink');'>Java</a>
- | <a href='javascript:void(0);' name='clink2' id='clink2'
onmousedown=
+ | <a href='javascript:void(0);' id='clink2' name='clink2'
onmousedown=
'swapSections('java', 'csharp', 'jlink',
'clink');'>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('csharp', 'java', 'clink',
'jlink');'>Java</a>
- | <a href='javascript:void(0);' name='clink3' id='clink3'
onmousedown=
+ | <a href='javascript:void(0);' id='clink3' name='clink3'
onmousedown=
'swapSections('java', 'csharp', 'jlink',
'clink');'>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 FAQ</a></li>
<li>
- <a href='../learn/graphics.html'
class='selected'>Graphics Primer</a>
+ <a class='selected'
href='../learn/graphics.html'>Graphics 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. 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' /> <img src='images/line2.png'
height='200' alt='Aliased, large'
+ <td><img alt='Aliased, small' height='100'
src='images/line1.png' width=
+ '100' /> <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' /> <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' /> <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. Examples are
RGB, HSV, and CMYK. 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> ×
- 2<sup>8</sup> × 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′ = Ax + By<br />
- y′ = 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. So,
the three transformations above can actually be represented as a
single matrix. 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'
/> </td>
- <td>x′ = x × S<sub>x</sub><br />
- y′ = y × 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′ = S ∙ 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
- θ.</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'
/> </td>
- <td>x′ = x × cos(θ) - y ×
sin(θ)<br />
- y′ = x × sin(θ) + y × cos(θ)</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′ = R ∙ 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'
/> </td>
- <td>x′ = x + T<sub>x</sub><br />
- y′ = 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′ = 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! 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′ = T ∙ P or,</p>
+ <p>P′ = 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′ = S ∙ P or,</p>
+ <p>P′ = 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′ = R ∙ P or,</p>
+ <p>P′ = 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′ = ( T ∙ (R ∙ (S ∙ P)))</p>
+ <p>P′ = ( T ∙ (R ∙ (S ∙ P)))</p>
<p>We can then separate out our matrix.</p>
- <p>P′ = ( T ∙ R ∙ S) ∙ 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> ∙ M<sub>2</sub> != M<sub>2</sub> ∙
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′ = M<sub>new</sub> ∙ 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′ = M<sub>current</sub> ∙ 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. 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. 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 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 Interface</a></li>
- <li><a href='../learn/interaction.html' class=
- 'selected'>User Interaction</a></li>
+ <li><a class='selected' href=
+ '../learn/interaction.html'>User Interaction</a></li>
<li><a
href='../learn/effects.html'>Special 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('csharp', 'java', 'clink',
'jlink');'>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('java', 'csharp', 'jlink',
'clink');'>C#</a></p>
<h1>Defining User Interaction</h1>
@@ -133,7 +136,7 @@
will define the user experience. 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. 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('csharp', 'java', 'clink',
'jlink');'>Java</a>
- | <a href='javascript:void(0);' name='clink1' id='clink1'
onmousedown=
+ | <a href='javascript:void(0);' id='clink1' name='clink1'
onmousedown=
'swapSections('java', 'csharp', 'jlink',
'clink');'>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>. 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>.
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. 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('csharp', 'java', 'clink',
'jlink');'>Java</a>
- | <a href='javascript:void(0);' name='clink2' id='clink2'
onmousedown=
+ | <a href='javascript:void(0);' id='clink2' name='clink2'
onmousedown=
'swapSections('java', 'csharp', 'jlink',
'clink');'>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.
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('csharp', 'java', 'clink',
'jlink');'>Java</a>
- | <a href='javascript:void(0);' name='clink3' id='clink3'
onmousedown=
+ | <a href='javascript:void(0);' id='clink3' name='clink3'
onmousedown=
'swapSections('java', 'csharp', 'jlink',
'clink');'>C#</a></p>
<div class='snippet' id='snippet3'>
@@ -398,10 +401,10 @@
camera node. 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('csharp', 'java', 'clink',
'jlink');'>Java</a>
- | <a href='javascript:void(0);' name='clink4' id='clink4'
onmousedown=
+ | <a href='javascript:void(0);' id='clink4' name='clink4'
onmousedown=
'swapSections('java', 'csharp', 'jlink',
'clink');'>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. 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('csharp', 'java', 'clink',
'jlink');'>Java</a>
- | <a href='javascript:void(0);' name='clink5' id='clink5'
onmousedown=
+ | <a href='javascript:void(0);' id='clink5' name='clink5'
onmousedown=
'swapSections('java', 'csharp', 'jlink',
'clink');'>C#</a></p>
<div class='snippet' id='snippet5'>
@@ -490,10 +493,10 @@
<code>initialize</code> method. 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('csharp', 'java', 'clink',
'jlink');'>Java</a>
- | <a href='javascript:void(0);' name='clink6' id='clink6'
onmousedown=
+ | <a href='javascript:void(0);' id='clink6' name='clink6'
onmousedown=
'swapSections('java', 'csharp', 'jlink',
'clink');'>C#</a></p>
<div class='snippet' id='snippet6'>
@@ -616,10 +619,10 @@
<p>Finally, we will register the node event handler with our
node. 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('csharp', 'java', 'clink',
'jlink');'>Java</a>
- | <a href='javascript:void(0);' name='clink7' id='clink7'
onmousedown=
+ | <a href='javascript:void(0);' id='clink7' name='clink7'
onmousedown=
'swapSections('java', 'csharp', 'jlink',
'clink');'>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: Out of the Box</a></li>
- <li><a href='../learn/interface.html' class=
- 'selected'>The Interface</a></li>
+ <li><a class='selected' href=
+ '../learn/interface.html'>The Interface</a></li>
<li><a
href='../learn/interaction.html'>User 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('csharp', 'java', 'clink',
'jlink');'>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('java', 'csharp', 'jlink',
'clink');'>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. 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('csharp', 'java', 'clink',
'jlink');'>Java</a>
- | <a href='javascript:void(0);' name='clink1' id='clink1'
onmousedown=
+ | <a href='javascript:void(0);' id='clink1' name='clink1'
onmousedown=
'swapSections('java', 'csharp', 'jlink',
'clink');'>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. 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('csharp', 'java', 'clink',
'jlink');'>Java</a>
- | <a href='javascript:void(0);' name='clink2' id='clink2'
onmousedown=
+ | <a href='javascript:void(0);' id='clink2' name='clink2'
onmousedown=
'swapSections('java', 'csharp', 'jlink',
'clink');'>C#</a></p>
<div class='snippet' id='snippet2'>
@@ -223,10 +226,10 @@
dragged around. 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('csharp', 'java', 'clink',
'jlink');'>Java</a>
- | <a href='javascript:void(0);' name='clink3' id='clink3'
onmousedown=
+ | <a href='javascript:void(0);' id='clink3' name='clink3'
onmousedown=
'swapSections('java', 'csharp', 'jlink',
'clink');'>C#</a></p>
<div class='snippet' id='snippet3'>
@@ -258,10 +261,10 @@
the scene. By default, a PNode will just fill its bounds
with its paint. 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('csharp', 'java', 'clink',
'jlink');'>Java</a>
- | <a href='javascript:void(0);' name='clink4' id='clink4'
onmousedown=
+ | <a href='javascript:void(0);' id='clink4' name='clink4'
onmousedown=
'swapSections('java', 'csharp', 'jlink',
'clink');'>C#</a></p>
<div class='snippet' id='snippet4'>
@@ -337,10 +340,10 @@
<p>PNode itself is not very interesting. So, lets try some
more advanced nodes.
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('csharp', 'java', 'clink',
'jlink');'>Java</a>
- | <a href='javascript:void(0);' name='clink5' id='clink5'
onmousedown=
+ | <a href='javascript:void(0);' id='clink5' name='clink5'
onmousedown=
'swapSections('java', 'csharp', 'jlink',
'clink');'>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. 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('csharp', 'java', 'clink',
'jlink');'>Java</a>
- | <a href='javascript:void(0);' name='clink6' id='clink6'
onmousedown=
+ | <a href='javascript:void(0);' id='clink6' name='clink6'
onmousedown=
'swapSections('java', 'csharp', 'jlink',
'clink');'>C#</a></p>
<div class='snippet' id='snippet6'>
@@ -498,10 +501,10 @@
'patterns.html#Creating_Nodes'>Creating Nodes Pattern</a>.
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('csharp', 'java', 'clink',
'jlink');'>Java</a>
- | <a href='javascript:void(0);' name='clink7' id='clink7'
onmousedown=
+ | <a href='javascript:void(0);' id='clink7' name='clink7'
onmousedown=
'swapSections('java', 'csharp', 'jlink',
'clink');'>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. We store
the isPressed field to indicate whether or not the mouse is
currently down over the
- node. Notice that the on mouse up and on mouse down methods
set the value and then call
- <code>InvalidatePaint()</code>. This method notifies the
framework that the node
+ node. Notice that the on mouse up and on mouse down methods
set the value and then
+ call <code>InvalidatePaint()</code>. This method notifies
the framework that the node
needs to be repainted. Piccolo2D will then invalidate the
child paint of all the
ancestors of this node. 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. 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. 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. 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. 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('csharp', 'java', 'clink',
'jlink');'>Java</a>
- | <a href='javascript:void(0);' name='clink8' id='clink8'
onmousedown=
+ | <a href='javascript:void(0);' id='clink8' name='clink8'
onmousedown=
'swapSections('java', 'csharp', 'jlink',
'clink');'>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: Out of the Box</a></li>
- <li><a href='../learn/out-of-box-dotnet.html' class=
- 'selected'>.Net: Out of the Box</a></li>
+ <li><a class='selected' href=
+ '../learn/out-of-box-dotnet.html'>.Net: Out of the Box</a></li>
<li><a
href='../learn/interface.html'>The 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. 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. 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 Started</a>
<ul>
- <li><a href='../learn/out-of-box-java.html' class=
- 'selected'>Java: Out of the Box</a></li>
+ <li><a class='selected' href=
+ '../learn/out-of-box-java.html'>Java: Out of the Box</a></li>
<li><a href=
'../learn/out-of-box-dotnet.html'>.Net: Out of the 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 installed on your
- machine. 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. 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 Piccolo2D</a></li>
<li>
- <a href='../learn/patterns.html'
class='selected'>Piccolo2D Patterns</a>
+ <a class='selected'
href='../learn/patterns.html'>Piccolo2D 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('csharp', 'java', 'clink',
'jlink');'>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('java', 'csharp', 'jlink',
'clink');'>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('csharp', 'java', 'clink',
'jlink');'>Java</a> |
- <a href='javascript:void(0);' name='clink0' id='clink0' onmousedown=
+ <a href='javascript:void(0);' id='clink0' name='clink0' onmousedown=
'swapSections('java', 'csharp', 'jlink',
'clink');'>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 ‘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
‘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. </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. </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('csharp', 'java', 'clink',
'jlink');'>Java</a> |
- <a href='javascript:void(0)' name='clink1' id='clink1' onmousedown=
+ <a href='javascript:void(0)' id='clink1' name='clink1' onmousedown=
'swapSections('java', 'csharp', 'jlink',
'clink');'>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('csharp', 'java', 'clink',
'jlink');'>Java</a> |
- <a href='javascript:void(0)' name='clink2' id='clink2' onmousedown=
+ <a href='javascript:void(0)' id='clink2' name='clink2' onmousedown=
'swapSections('java', 'csharp', 'jlink',
'clink');'>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('csharp', 'java', 'clink',
'jlink');'>Java</a> |
- <a href='javascript:void(0)' name='clink3' id='clink3' onmousedown=
+ <a href='javascript:void(0)' id='clink3' name='clink3' onmousedown=
'swapSections('java', 'csharp', 'jlink',
'clink');'>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('csharp', 'java', 'clink',
'jlink');'>Java</a> |
- <a href='javascript:void(0)' name='clink4' id='clink4' onmousedown=
+ <a href='javascript:void(0)' id='clink4' name='clink4' onmousedown=
'swapSections('java', 'csharp', 'jlink',
'clink');'>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('csharp', 'java', 'clink',
'jlink');'>Java</a> |
- <a href='javascript:void(0);' name='clink5' id='clink5' onmousedown=
+ <a href='javascript:void(0);' id='clink5' name='clink5' onmousedown=
'swapSections('java', 'csharp', 'jlink',
'clink');'>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('csharp', 'java', 'clink',
'jlink');'>Java</a> |
- <a href='javascript:void(0);' name='clink6' id='clink6' onmousedown=
+ <a href='javascript:void(0);' id='clink6' name='clink6' onmousedown=
'swapSections('java', 'csharp', 'jlink',
'clink');'>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('csharp', 'java', 'clink',
'jlink');'>Java</a> |
- <a href='javascript:void(0);' name='clink7' id='clink7' onmousedown=
+ <a href='javascript:void(0);' id='clink7' name='clink7' onmousedown=
'swapSections('java', 'csharp', 'jlink',
'clink');'>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('csharp', 'java', 'clink',
'jlink');'>Java</a> |
- <a href='javascript:void(0);' name='clink8' id='clink8' onmousedown=
+ <a href='javascript:void(0);' id='clink8' name='clink8' onmousedown=
'swapSections('java', 'csharp', 'jlink',
'clink');'>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('csharp', 'java', 'clink',
'jlink');'>Java</a> |
- <a href='javascript:void(0);' name='clink9' id='clink9' onmousedown=
+ <a href='javascript:void(0);' id='clink9' name='clink9' onmousedown=
'swapSections('java', 'csharp', 'jlink',
'clink');'>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('csharp', 'java', 'clink',
'jlink');'>Java</a> |
- <a href='javascript:void(0);' name='clink10' id='clink10' onmousedown=
+ <a href='javascript:void(0);' id='clink10' name='clink10' onmousedown=
'swapSections('java', 'csharp', 'jlink',
'clink');'>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('csharp', 'java', 'clink',
'jlink');'>Java</a> |
- <a href='javascript:void(0);' name='clink11' id='clink11' onmousedown=
+ <a href='javascript:void(0);' id='clink11' name='clink11' onmousedown=
'swapSections('java', 'csharp', 'jlink',
'clink');'>C#</a></p>
<div class='snippet' id='snippet11'>
@@ -1500,10 +1503,10 @@
sticky node. A standard rectangle is then added to the main
layer. 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('csharp', 'java', 'clink',
'jlink');'>Java</a> |
- <a href='javascript:void(0);' name='clink12' id='clink12' onmousedown=
+ <a href='javascript:void(0);' id='clink12' name='clink12' onmousedown=
'swapSections('java', 'csharp', 'jlink',
'clink');'>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 in 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 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()' />
- 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' /> 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('abs')' /> search abstract</label></li>
+ <li><label><input id='searchabs'
onclick='toggleQSetting('abs')' type=
+ 'checkbox' /> search abstract</label></li>
- <li><label><input id='searchrev' type='checkbox' onclick=
- 'toggleQSetting('rev')' /> search review</label></li>
+ <li><label><input id='searchrev'
onclick='toggleQSetting('rev')' 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æk, K., Bederson, B. B. & Plaisant, C.</td>
+ <td>Hornbæk, K., Bederson, B. B. & 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æ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 @@
'
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 Home</a>
+ <a class='selected' href='index.html'>Piccolo2D 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 Piccolo2D</a></li>
+ <li><a class='selected'
href='../learn/about.html'>About Piccolo2D</a></li>
<li><a
href='../learn/patterns.html'>Piccolo2D 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 Documentation</a></li>
<li>
- <a href='../learn/comparison.html' class=
- 'selected'>Piccolo2D in Comparison</a>
+ <a class='selected' href=
+ '../learn/comparison.html'>Piccolo2D in Comparison</a>
<ul>
<li><a href='#versions'>Piccolo2D 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 FAQ</a></li>
+ <li><a class='selected'
href='../learn/dev-faq.html'>Developer FAQ</a></li>
<li><a
href='../learn/graphics.html'>Graphics 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. 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. That means if you modify a
node's transform, it will
affect that node and all of its children. 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 Interaction</a></li>
- <li><a href='../learn/effects.html' class=
- 'selected'>Special Effects</a></li>
+ <li><a class='selected' href=
+ '../learn/effects.html'>Special Effects</a></li>
<li><a
href='../learn/fisheye.html'>Fisheye 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('csharp', 'java', 'clink',
'jlink');'>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('java', 'csharp', 'jlink',
'clink');'>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. 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('csharp', 'java', 'clink',
'jlink');'>Java</a>
- | <a href='javascript:void(0);' name='clink1' id='clink1'
onmousedown=
+ | <a href='javascript:void(0);' id='clink1' name='clink1'
onmousedown=
'swapSections('java', 'csharp', 'jlink',
'clink');'>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. 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('csharp', 'java', 'clink',
'jlink');'>Java</a>
- | <a href='javascript:void(0);' name='clink2' id='clink2'
onmousedown=
+ | <a href='javascript:void(0);' id='clink2' name='clink2'
onmousedown=
'swapSections('java', 'csharp', 'jlink',
'clink');'>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. 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('csharp', 'java', 'clink',
'jlink');'>Java</a>
- | <a href='javascript:void(0);' name='clink3' id='clink3'
onmousedown=
+ | <a href='javascript:void(0);' id='clink3' name='clink3'
onmousedown=
'swapSections('java', 'csharp', 'jlink',
'clink');'>C#</a></p>
<div class='snippet' id='snippet3'>
@@ -263,10 +266,10 @@
<code>PActivity</code>, the base activity type. 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('csharp', 'java', 'clink',
'jlink');'>Java</a>
- | <a href='javascript:void(0);' name='clink4' id='clink4'
onmousedown=
+ | <a href='javascript:void(0);' id='clink4' name='clink4'
onmousedown=
'swapSections('java', 'csharp', 'jlink',
'clink');'>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. 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('csharp', 'java', 'clink',
'jlink');'>Java</a>
- | <a href='javascript:void(0);' name='clink5' id='clink5'
onmousedown=
+ | <a href='javascript:void(0);' id='clink5' name='clink5'
onmousedown=
'swapSections('java', 'csharp', 'jlink',
'clink');'>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. 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('csharp', 'java', 'clink',
'jlink');'>Java</a>
- | <a href='javascript:void(0);' name='clink6' id='clink6'
onmousedown=
+ | <a href='javascript:void(0);' id='clink6' name='clink6'
onmousedown=
'swapSections('java', 'csharp', 'jlink',
'clink');'>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. 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('csharp', 'java', 'clink',
'jlink');'>Java</a>
- | <a href='javascript:void(0);' name='clink7' id='clink7'
onmousedown=
+ | <a href='javascript:void(0);' id='clink7' name='clink7'
onmousedown=
'swapSections('java', 'csharp', 'jlink',
'clink');'>C#</a></p>
<div class='snippet' id='snippet7'>
@@ -524,10 +527,10 @@
directly to the <code>initialize</code> method. 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('csharp', 'java', 'clink',
'jlink');'>Java</a>
- | <a href='javascript:void(0);' name='clink8' id='clink8'
onmousedown=
+ | <a href='javascript:void(0);' id='clink8' name='clink8'
onmousedown=
'swapSections('java', 'csharp', 'jlink',
'clink');'>C#</a></p>
<div class='snippet' id='snippet8'>
@@ -575,10 +578,10 @@
the activity. 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('csharp', 'java', 'clink',
'jlink');'>Java</a>
- | <a href='javascript:void(0);' name='clink9' id='clink9'
onmousedown=
+ | <a href='javascript:void(0);' id='clink9' name='clink9'
onmousedown=
'swapSections('java', 'csharp', 'jlink',
'clink');'>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 Effects</a></li>
- <li><a href='../learn/fisheye.html' class=
- 'selected'>Fisheye Calendar</a></li>
+ <li><a class='selected' href=
+ '../learn/fisheye.html'>Fisheye Calendar</a></li>
<li><a
href='../learn/grapheditor.html'>Graph 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('csharp', 'java', 'clink',
'jlink');'>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('java', 'csharp', 'jlink',
'clink');'>C#</a></p>
<h1>Fisheye Calendar</h1>
@@ -134,7 +137,7 @@
while shrinking the surrounding cells. 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. 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('csharp', 'java', 'clink',
'jlink');'>Java</a>
- | <a href='javascript:void(0);' name='clink1' id='clink1'
onmousedown=
+ | <a href='javascript:void(0);' id='clink1' name='clink1'
onmousedown=
'swapSections('java', 'csharp', 'jlink',
'clink');'>C#</a></p>
<div class='snippet' id='snippet1'>
@@ -341,10 +344,10 @@
<p>Here, we will create the calendar node. 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('csharp', 'java', 'clink',
'jlink');'>Java</a>
- | <a href='javascript:void(0);' name='clink2' id='clink2'
onmousedown=
+ | <a href='javascript:void(0);' id='clink2' name='clink2'
onmousedown=
'swapSections('java', 'csharp', 'jlink',
'clink');'>C#</a></p>
<div class='snippet' id='snippet2'>
@@ -518,10 +521,10 @@
<code>CalendarNode</code> defined above. 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('csharp', 'java', 'clink',
'jlink');'>Java</a>
- | <a href='javascript:void(0);' name='clink3' id='clink3'
onmousedown=
+ | <a href='javascript:void(0);' id='clink3' name='clink3'
onmousedown=
'swapSections('java', 'csharp', 'jlink',
'clink');'>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('csharp', 'java', 'clink',
'jlink');'>Java</a>
- | <a href='javascript:void(0);' name='clink4' id='clink4'
onmousedown=
+ | <a href='javascript:void(0);' id='clink4' name='clink4'
onmousedown=
'swapSections('java', 'csharp', 'jlink',
'clink');'>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. 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('csharp', 'java', 'clink',
'jlink');'>Java</a>
- | <a href='javascript:void(0);' name='clink5' id='clink5'
onmousedown=
+ | <a href='javascript:void(0);' id='clink5' name='clink5'
onmousedown=
'swapSections('java', 'csharp', 'jlink',
'clink');'>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 Patterns</a></li>
<li>
- <a href='../learn/get-started.html'
class='selected'>Getting Started</a>
+ <a class='selected'
href='../learn/get-started.html'>Getting 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 Calendar</a></li>
- <li><a href='../learn/grapheditor.html' class=
- 'selected'>Graph Editor</a></li>
+ <li><a class='selected' href=
+ '../learn/grapheditor.html'>Graph 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('csharp', 'java', 'clink',
'jlink');'>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('java', 'csharp', 'jlink',
'clink');'>C#</a></p>
<h1>Graph Editor</h1>
@@ -133,7 +136,7 @@
using Piccolo2D. Moving the mouse over a node will highlight
that node. 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.
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('csharp', 'java', 'clink',
'jlink');'>Java</a>
- | <a href='javascript:void(0);' name='clink1' id='clink1'
onmousedown=
+ | <a href='javascript:void(0);' id='clink1' name='clink1'
onmousedown=
'swapSections('java', 'csharp', 'jlink',
'clink');'>C#</a></p>
<div class='snippet' id='snippet1'>
@@ -345,10 +348,10 @@
project. 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('csharp', 'java', 'clink',
'jlink');'>Java</a>
- | <a href='javascript:void(0);' name='clink2' id='clink2'
onmousedown=
+ | <a href='javascript:void(0);' id='clink2' name='clink2'
onmousedown=
'swapSections('java', 'csharp', 'jlink',
'clink');'>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('csharp', 'java', 'clink',
'jlink');'>Java</a>
- | <a href='javascript:void(0);' name='clink3' id='clink3'
onmousedown=
+ | <a href='javascript:void(0);' id='clink3' name='clink3'
onmousedown=
'swapSections('java', 'csharp', 'jlink',
'clink');'>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 FAQ</a></li>
<li>
- <a href='../learn/graphics.html'
class='selected'>Graphics Primer</a>
+ <a class='selected'
href='../learn/graphics.html'>Graphics 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. 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' /> <img src='images/line2.png'
height='200' alt='Aliased, large'
+ <td><img alt='Aliased, small' height='100'
src='images/line1.png' width=
+ '100' /> <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' /> <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' /> <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. Examples are
RGB, HSV, and CMYK. 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> ×
- 2<sup>8</sup> × 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′ = Ax + By<br />
- y′ = 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. So,
the three transformations above can actually be represented as a
single matrix. 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'
/> </td>
- <td>x′ = x × S<sub>x</sub><br />
- y′ = y × 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′ = S ∙ 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
- θ.</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'
/> </td>
- <td>x′ = x × cos(θ) - y ×
sin(θ)<br />
- y′ = x × sin(θ) + y × cos(θ)</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′ = R ∙ 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'
/> </td>
- <td>x′ = x + T<sub>x</sub><br />
- y′ = 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′ = 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! 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′ = T ∙ P or,</p>
+ <p>P′ = 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′ = S ∙ P or,</p>
+ <p>P′ = 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′ = R ∙ P or,</p>
+ <p>P′ = 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′ = ( T ∙ (R ∙ (S ∙ P)))</p>
+ <p>P′ = ( T ∙ (R ∙ (S ∙ P)))</p>
<p>We can then separate out our matrix.</p>
- <p>P′ = ( T ∙ R ∙ S) ∙ 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> ∙ M<sub>2</sub> != M<sub>2</sub> ∙
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′ = M<sub>new</sub> ∙ 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′ = M<sub>current</sub> ∙ 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. 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. 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 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 Interface</a></li>
- <li><a href='../learn/interaction.html' class=
- 'selected'>User Interaction</a></li>
+ <li><a class='selected' href=
+ '../learn/interaction.html'>User Interaction</a></li>
<li><a
href='../learn/effects.html'>Special 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('csharp', 'java', 'clink',
'jlink');'>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('java', 'csharp', 'jlink',
'clink');'>C#</a></p>
<h1>Defining User Interaction</h1>
@@ -133,7 +136,7 @@
will define the user experience. 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. 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('csharp', 'java', 'clink',
'jlink');'>Java</a>
- | <a href='javascript:void(0);' name='clink1' id='clink1'
onmousedown=
+ | <a href='javascript:void(0);' id='clink1' name='clink1'
onmousedown=
'swapSections('java', 'csharp', 'jlink',
'clink');'>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>. 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>.
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. 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('csharp', 'java', 'clink',
'jlink');'>Java</a>
- | <a href='javascript:void(0);' name='clink2' id='clink2'
onmousedown=
+ | <a href='javascript:void(0);' id='clink2' name='clink2'
onmousedown=
'swapSections('java', 'csharp', 'jlink',
'clink');'>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.
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('csharp', 'java', 'clink',
'jlink');'>Java</a>
- | <a href='javascript:void(0);' name='clink3' id='clink3'
onmousedown=
+ | <a href='javascript:void(0);' id='clink3' name='clink3'
onmousedown=
'swapSections('java', 'csharp', 'jlink',
'clink');'>C#</a></p>
<div class='snippet' id='snippet3'>
@@ -398,10 +401,10 @@
camera node. 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('csharp', 'java', 'clink',
'jlink');'>Java</a>
- | <a href='javascript:void(0);' name='clink4' id='clink4'
onmousedown=
+ | <a href='javascript:void(0);' id='clink4' name='clink4'
onmousedown=
'swapSections('java', 'csharp', 'jlink',
'clink');'>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. 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('csharp', 'java', 'clink',
'jlink');'>Java</a>
- | <a href='javascript:void(0);' name='clink5' id='clink5'
onmousedown=
+ | <a href='javascript:void(0);' id='clink5' name='clink5'
onmousedown=
'swapSections('java', 'csharp', 'jlink',
'clink');'>C#</a></p>
<div class='snippet' id='snippet5'>
@@ -490,10 +493,10 @@
<code>initialize</code> method. 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('csharp', 'java', 'clink',
'jlink');'>Java</a>
- | <a href='javascript:void(0);' name='clink6' id='clink6'
onmousedown=
+ | <a href='javascript:void(0);' id='clink6' name='clink6'
onmousedown=
'swapSections('java', 'csharp', 'jlink',
'clink');'>C#</a></p>
<div class='snippet' id='snippet6'>
@@ -616,10 +619,10 @@
<p>Finally, we will register the node event handler with our
node. 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('csharp', 'java', 'clink',
'jlink');'>Java</a>
- | <a href='javascript:void(0);' name='clink7' id='clink7'
onmousedown=
+ | <a href='javascript:void(0);' id='clink7' name='clink7'
onmousedown=
'swapSections('java', 'csharp', 'jlink',
'clink');'>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: Out of the Box</a></li>
- <li><a href='../learn/interface.html' class=
- 'selected'>The Interface</a></li>
+ <li><a class='selected' href=
+ '../learn/interface.html'>The Interface</a></li>
<li><a
href='../learn/interaction.html'>User 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('csharp', 'java', 'clink',
'jlink');'>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('java', 'csharp', 'jlink',
'clink');'>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. 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('csharp', 'java', 'clink',
'jlink');'>Java</a>
- | <a href='javascript:void(0);' name='clink1' id='clink1'
onmousedown=
+ | <a href='javascript:void(0);' id='clink1' name='clink1'
onmousedown=
'swapSections('java', 'csharp', 'jlink',
'clink');'>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. 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('csharp', 'java', 'clink',
'jlink');'>Java</a>
- | <a href='javascript:void(0);' name='clink2' id='clink2'
onmousedown=
+ | <a href='javascript:void(0);' id='clink2' name='clink2'
onmousedown=
'swapSections('java', 'csharp', 'jlink',
'clink');'>C#</a></p>
<div class='snippet' id='snippet2'>
@@ -223,10 +226,10 @@
dragged around. 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('csharp', 'java', 'clink',
'jlink');'>Java</a>
- | <a href='javascript:void(0);' name='clink3' id='clink3'
onmousedown=
+ | <a href='javascript:void(0);' id='clink3' name='clink3'
onmousedown=
'swapSections('java', 'csharp', 'jlink',
'clink');'>C#</a></p>
<div class='snippet' id='snippet3'>
@@ -258,10 +261,10 @@
the scene. By default, a PNode will just fill its bounds
with its paint. 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('csharp', 'java', 'clink',
'jlink');'>Java</a>
- | <a href='javascript:void(0);' name='clink4' id='clink4'
onmousedown=
+ | <a href='javascript:void(0);' id='clink4' name='clink4'
onmousedown=
'swapSections('java', 'csharp', 'jlink',
'clink');'>C#</a></p>
<div class='snippet' id='snippet4'>
@@ -337,10 +340,10 @@
<p>PNode itself is not very interesting. So, lets try some
more advanced nodes.
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('csharp', 'java', 'clink',
'jlink');'>Java</a>
- | <a href='javascript:void(0);' name='clink5' id='clink5'
onmousedown=
+ | <a href='javascript:void(0);' id='clink5' name='clink5'
onmousedown=
'swapSections('java', 'csharp', 'jlink',
'clink');'>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. 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('csharp', 'java', 'clink',
'jlink');'>Java</a>
- | <a href='javascript:void(0);' name='clink6' id='clink6'
onmousedown=
+ | <a href='javascript:void(0);' id='clink6' name='clink6'
onmousedown=
'swapSections('java', 'csharp', 'jlink',
'clink');'>C#</a></p>
<div class='snippet' id='snippet6'>
@@ -498,10 +501,10 @@
'patterns.html#Creating_Nodes'>Creating Nodes Pattern</a>.
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('csharp', 'java', 'clink',
'jlink');'>Java</a>
- | <a href='javascript:void(0);' name='clink7' id='clink7'
onmousedown=
+ | <a href='javascript:void(0);' id='clink7' name='clink7'
onmousedown=
'swapSections('java', 'csharp', 'jlink',
'clink');'>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. We store
the isPressed field to indicate whether or not the mouse is
currently down over the
- node. Notice that the on mouse up and on mouse down methods
set the value and then call
- <code>InvalidatePaint()</code>. This method notifies the
framework that the node
+ node. Notice that the on mouse up and on mouse down methods
set the value and then
+ call <code>InvalidatePaint()</code>. This method notifies
the framework that the node
needs to be repainted. Piccolo2D will then invalidate the
child paint of all the
ancestors of this node. 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. 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. 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. 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. 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('csharp', 'java', 'clink',
'jlink');'>Java</a>
- | <a href='javascript:void(0);' name='clink8' id='clink8'
onmousedown=
+ | <a href='javascript:void(0);' id='clink8' name='clink8'
onmousedown=
'swapSections('java', 'csharp', 'jlink',
'clink');'>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: Out of the Box</a></li>
- <li><a href='../learn/out-of-box-dotnet.html' class=
- 'selected'>.Net: Out of the Box</a></li>
+ <li><a class='selected' href=
+ '../learn/out-of-box-dotnet.html'>.Net: Out of the Box</a></li>
<li><a
href='../learn/interface.html'>The 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. 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. 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 Started</a>
<ul>
- <li><a href='../learn/out-of-box-java.html' class=
- 'selected'>Java: Out of the Box</a></li>
+ <li><a class='selected' href=
+ '../learn/out-of-box-java.html'>Java: Out of the Box</a></li>
<li><a href=
'../learn/out-of-box-dotnet.html'>.Net: Out of the 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 installed on your
- machine. 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. 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 Piccolo2D</a></li>
<li>
- <a href='../learn/patterns.html'
class='selected'>Piccolo2D Patterns</a>
+ <a class='selected'
href='../learn/patterns.html'>Piccolo2D 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('csharp', 'java', 'clink',
'jlink');'>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('java', 'csharp', 'jlink',
'clink');'>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('csharp', 'java', 'clink',
'jlink');'>Java</a> |
- <a href='javascript:void(0);' name='clink0' id='clink0' onmousedown=
+ <a href='javascript:void(0);' id='clink0' name='clink0' onmousedown=
'swapSections('java', 'csharp', 'jlink',
'clink');'>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 ‘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
‘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. </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. </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('csharp', 'java', 'clink',
'jlink');'>Java</a> |
- <a href='javascript:void(0)' name='clink1' id='clink1' onmousedown=
+ <a href='javascript:void(0)' id='clink1' name='clink1' onmousedown=
'swapSections('java', 'csharp', 'jlink',
'clink');'>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('csharp', 'java', 'clink',
'jlink');'>Java</a> |
- <a href='javascript:void(0)' name='clink2' id='clink2' onmousedown=
+ <a href='javascript:void(0)' id='clink2' name='clink2' onmousedown=
'swapSections('java', 'csharp', 'jlink',
'clink');'>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('csharp', 'java', 'clink',
'jlink');'>Java</a> |
- <a href='javascript:void(0)' name='clink3' id='clink3' onmousedown=
+ <a href='javascript:void(0)' id='clink3' name='clink3' onmousedown=
'swapSections('java', 'csharp', 'jlink',
'clink');'>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('csharp', 'java', 'clink',
'jlink');'>Java</a> |
- <a href='javascript:void(0)' name='clink4' id='clink4' onmousedown=
+ <a href='javascript:void(0)' id='clink4' name='clink4' onmousedown=
'swapSections('java', 'csharp', 'jlink',
'clink');'>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('csharp', 'java', 'clink',
'jlink');'>Java</a> |
- <a href='javascript:void(0);' name='clink5' id='clink5' onmousedown=
+ <a href='javascript:void(0);' id='clink5' name='clink5' onmousedown=
'swapSections('java', 'csharp', 'jlink',
'clink');'>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('csharp', 'java', 'clink',
'jlink');'>Java</a> |
- <a href='javascript:void(0);' name='clink6' id='clink6' onmousedown=
+ <a href='javascript:void(0);' id='clink6' name='clink6' onmousedown=
'swapSections('java', 'csharp', 'jlink',
'clink');'>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('csharp', 'java', 'clink',
'jlink');'>Java</a> |
- <a href='javascript:void(0);' name='clink7' id='clink7' onmousedown=
+ <a href='javascript:void(0);' id='clink7' name='clink7' onmousedown=
'swapSections('java', 'csharp', 'jlink',
'clink');'>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('csharp', 'java', 'clink',
'jlink');'>Java</a> |
- <a href='javascript:void(0);' name='clink8' id='clink8' onmousedown=
+ <a href='javascript:void(0);' id='clink8' name='clink8' onmousedown=
'swapSections('java', 'csharp', 'jlink',
'clink');'>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('csharp', 'java', 'clink',
'jlink');'>Java</a> |
- <a href='javascript:void(0);' name='clink9' id='clink9' onmousedown=
+ <a href='javascript:void(0);' id='clink9' name='clink9' onmousedown=
'swapSections('java', 'csharp', 'jlink',
'clink');'>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('csharp', 'java', 'clink',
'jlink');'>Java</a> |
- <a href='javascript:void(0);' name='clink10' id='clink10' onmousedown=
+ <a href='javascript:void(0);' id='clink10' name='clink10' onmousedown=
'swapSections('java', 'csharp', 'jlink',
'clink');'>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('csharp', 'java', 'clink',
'jlink');'>Java</a> |
- <a href='javascript:void(0);' name='clink11' id='clink11' onmousedown=
+ <a href='javascript:void(0);' id='clink11' name='clink11' onmousedown=
'swapSections('java', 'csharp', 'jlink',
'clink');'>C#</a></p>
<div class='snippet' id='snippet11'>
@@ -1500,10 +1503,10 @@
sticky node. A standard rectangle is then added to the main
layer. 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('csharp', 'java', 'clink',
'jlink');'>Java</a> |
- <a href='javascript:void(0);' name='clink12' id='clink12' onmousedown=
+ <a href='javascript:void(0);' id='clink12' name='clink12' onmousedown=
'swapSections('java', 'csharp', 'jlink',
'clink');'>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 in 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 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()' />
- 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' /> 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('abs')' /> search abstract</label></li>
+ <li><label><input id='searchabs'
onclick='toggleQSetting('abs')' type=
+ 'checkbox' /> search abstract</label></li>
- <li><label><input id='searchrev' type='checkbox' onclick=
- 'toggleQSetting('rev')' /> search review</label></li>
+ <li><label><input id='searchrev'
onclick='toggleQSetting('rev')' 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æk, K., Bederson, B. B. & Plaisant, C.</td>
+ <td>Hornbæk, K., Bederson, B. B. & 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æ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 @@
'