Transcript Slide 1

Piccolo.NET
A Scalable Structured Graphics Toolkit
Benjamin B. Bederson, Aaron Clamage
Computer Science Department
Human-Computer Interaction Lab (HCIL)
University of Maryland
What is Piccolo?

An extensive 2D graphics toolkit

Primarily designed to support





Zoomable information spaces
Structured canvas of graphical objects
Hierarchical scenegraph model
Creation of custom controls
Supports 2D Object Oriented Graphics



Hierarchies (transformation, transparency)
Animation, events
Cameras, layers, views
What is it good for?



Structured graphics
Custom interaction
Zoomable User Interfaces
Demo
Where did it come from?
Pad, Pad++,
Jazz, Morphic
Piccolo. NET
Java Piccolo
Deep Port
PocketPiccolo.NET
Relies On
Java2D
Relies On
GDI+ or
Direct3D
Piccolo.NET vs. Piccolo.Java
Differences
Piccolo.Java
Piccolo.NET
PocketPiccolo.NET
Language
Java
C#
C#
Underlying
Framework
Java
.NET
Framework
.NET Compact
Framework
Graphics
Renderer
Java2D
GDI+, Direct3D Limited GDI
IDE of Choice
Eclipse
Visual
Studio.NET
Visual Studio.NET
Runs On
Multiple
Platforms
Windows
Pocket PCs
Other Piccolo.NET Differences

Similar API, modified to better support .NET
constructs and style guidelines




Capitalized method names
Properties instead of accessor methods
Float instead of double precision
Delegates or static classes instead of anonymous
inner classes
PocketPiccolo.NET


Same great taste – less filling!
Essentially identical except for:





Lower quality rendering
No graphical paths or transparency
No rotation
Poorer performance
Still all the cool stuff:




Hierarchical, transformable objects
Animation
Event handling
Efficiency mechanisms
How does it work?
PRoot
PLayer



Monolithic design
Simple class hierarchy
Simple runtime structure
piccolo
PLayer
PText
PImage
PPath
Typical run-time structure
piccolo.nodes
PText
PNode
PRoot
PNode
PCamera
PPath
1.n
PImage
Class Hierarchy
PCamera
Piccolo Scene
This Presentation Tool

Similar structure to GraphEditor:



Scenegraph
Event handlers
But this time:


Hierarchical transforms
Animation
PRoot
PLayer
PCamera
Slide Bar
PNode
Slides
Current Slide Indicator
PMultiSizeImage
PMultiSizeImage
PMultiSizeImage
PMultiSizeImage
PMultiSizeImage
PImage
Getting Started
(with Piccolo.NET)

Pre-requisites



Visual Studio.NET
.NET Framework
Setting up the Environment




Install integrated help
Add PCanvas to the toolbox
Create new Visual Studio project
Add reference to UMD.HCIL.Piccolo.dll
and UMD.HCIL.PiccoloX.dll
A Simple Example
using UMD.HCIL.Piccolo;
using UMD.HCIL.Piccolo.Nodes;
using UMD.HCIL.PiccoloX;
public class PHelloWorld : PForm {
public override void Initialize() {
PText text = new PText("Hello World");
Canvas.Layer.AddChild(text);
}
static void Main() {
new PHelloWorld();
}
}
Coding Demo
Adding Interaction with Events

Two ways to do it

Classes


Use listener classes directly or extend them
Delegates

Attach event handler methods directly to PNode
Coding Demo
Special Effects with Activities

Three ways to do it

Classes


Delegates


Use activity classes directly or extend them
Attach activity stepped delegates to PActivity
Convenience methods

Call PNode’s animation methods
Coding Demo
Defining Multiple Views

Various ways to do it

Internal cameras



Lenses
Multiple layers
Multiple canvases
Coding Demo
A Bigger Example: Graph Editor

Nodes and Edges



Highlightable
Draggable
Approach:



Structure of objects
Relate nodes & edges
Event handlers
PRoot
PLayer
PNode
PCamera
PNode
Edges
Coding Demo
Nodes
PPath
PPath
PPath
PPath
PPath
PPath
PPath
PPath
PPath
PPath
Where to go from here?

Get Piccolo



Download release version
www.cs.umd.edu/hcil/piccolo/download/index.shtml
Get the latest and greatest from CVS
www.cs.umd.edu/hcil/piccolo/download/cvs.shtml
Use the resources on the website


Learning Center (FAQ, tutorials, mailing lists)
www.cs.umd.edu/hcil/piccolo/learn/index.shtml
API Documentation and Integrated help
www.cs.umd.edu/hcil/piccolo/learn/api.shtml
Thanks


Thanks to Microsoft Research who supports
the creation and maintenance of Piccolo.NET
and PocketPiccolo.NET
Thanks to Jesse Grosjean who is the main
programmer behind the original Java Piccolo
which Piccolo.NET is based on