-
Notifications
You must be signed in to change notification settings - Fork 1
/
Copy pathindex.html
132 lines (106 loc) · 6.03 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html lang='en' xml:lang='en' xmlns='http://www.w3.org/1999/xhtml'>
<head>
<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)=https://piccolo2d.github.io' 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='//groups.google.com/group/piccolo2d-announce/feed/atom_v1_0_msgs.xml' rel=
'alternate' title='Announcements (low traffic)' type='application/atom+xml' />
<link href='//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='//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
DO NOT EDIT IT MANUALLY!!!
-->
<p class='header'><a href='index.html'><img alt='Piccolo2D Logo' src=
'images/Piccolo2D-Logo.svg' /></a></p>
<ul>
<li>
<a class='selected' href='index.html'>Piccolo2D Home</a>
<ul>
<li><a href='play/index.html'>Play</a></li>
<li><a href='learn/index.html'>Learn</a></li>
<li><a href='download.html'>Download</a></li>
<li><a href='community.html'>Community</a></li>
<li><a href='applications/index.html'>Applications</a></li>
<li><a href='press.html'>Press</a></li>
<li><a href='sponsors.html'>Sponsors</a></li>
</ul>
</li>
</ul><!--
<p>
<img src='images/giny-small.png' alt='a nice graph' />
</p>
-->
<p class='bugreport'><a href=
'https://github.com/piccolo2d/piccolo2d.github.io/issues/new?title=Website%20Bug'>Found a
Typo?</a><br /></p>
<p class='validators'><a href='//validator.w3.org/check/referer'><img alt=
'Valid XHTML 1.0!' src='//www.w3.org/Icons/valid-xhtml10-blue' style=
'border:0;width:88px;height:31px' /></a> <a href=
'//jigsaw.w3.org/css-validator/check/referer'><img alt='Valid CSS1!' src=
'//www.w3.org/Icons/valid-css-blue' style='border:0;width:88px;height:31px' /></a></p>
</div>
<div id='main'>
<div id='main-head'>
<h1>A Structured 2D Graphics Framework</h1>
<p><em>Welcome to Piccolo2D!</em> A revolutionary way to create robust, full-featured
<em>graphical applications</em> in Java and C#, with striking visual effects such as
<em>zooming, animation</em> and <em>multiple representations</em>.</p>
<p>Piccolo2D is a toolkit that supports the development of 2D structured graphics programs,
in general, and <a href='//en.wikipedia.org/wiki/Zooming_User_Interface'>Zoomable User
Interfaces (ZUIs)</a>, in particular. A ZUI is a new kind of interface that presents a huge
canvas of information on a traditional computer display by letting the user smoothly zoom in,
to get more detailed information, and zoom out for an overview. We use a "<a href=
'//en.wikipedia.org/wiki/Scene_graph'>scene graph</a>" model that is common to 3D
environments. Basically, this means that Piccolo2D maintains a hierarchal structure of
objects and cameras, allowing the application developer to orient, group and manipulate
objects in meaningful ways.</p>
<p>Why use Piccolo2D? It will allow you to build structured graphical applications without
worrying so much about the low level details. The infrastructure provides efficient
repainting of the screen, bounds management, event handling and dispatch, picking
(determining which visual object the mouse is over), animation, layout, and more. Normally,
you would have to write all of this code from scratch. Additionally, if you want to build an
application with zooming, that's built right into the framework too.</p>
<p>What exactly is it? Piccolo2D is a layer built on top of a lower level graphics API. There
are currently three versions of the toolkit: Piccolo2D.Java, Piccolo2D.NET and
PocketPiccolo2D.NET (for the .NET Compact Framework). The java version is built on Java 2 and
relies on the Java2D API to do its graphics rendering. The .NET version is built on the .NET
Framework and relies on the GDI+ API to do its graphics rendering. This makes it easy for
Java and C# programmers, even those targeting PDAs, to build their own animated graphical
applications. And best of all, Piccolo2D is <em>free</em> and <em>open source!</em></p>
</div>
<h2>References</h2>
<p>The primary paper describing and analyzing the Piccolo2D architecture: Bederson, B. B.,
Grosjean, J., & Meyer, J. (2004). <a href=
'//www.cs.umd.edu/hcil/jazz/learn/Toolkit_Design_2004.pdf'>Toolkit Design for Interactive
Structured Graphics</a>, IEEE Transactions on Software Engineering, 30 (8), pp. 535-546.</p>
</div>
<table id='impressions' summary='Piccolo2D Impressions'>
<tr>
<td><img alt='Spacetree Screenshot' src='images/spacetree.jpg' /></td>
<td><img alt='ICDL Screenshot' src='images/icdl-small.png' /></td>
<td><img alt='Photomesa Screenshot' src='images/photomesa-small.jpg' /></td>
<td><img alt='KidPad Screenshot' src='images/kidpad.jpg' /></td>
</tr>
</table>
</body>
</html>