Piccolo.NET

1
Piccolo.NET
A Scalable Structured Graphics Toolkit

• Benjamin B. Bederson, Aaron Clamage
• Computer Science Department
• Human-Computer Interaction Lab (HCIL)
• University of Maryland

2
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

3
What is it good for?

• Structured graphics
• Custom interaction
• Zoomable User Interfaces

Demo
4
Where did it come from?
Pad, Pad, Jazz, Morphic
Piccolo. NET
Java Piccolo
Deep Port
PocketPiccolo.NET
Relies On
Relies On
Java2D
GDI orDirect3D
5
Piccolo.NET vs. Piccolo.Java
6
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

7
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

8
How does it work?

• Monolithic design
• Simple class hierarchy
• Simple runtime structure

9
This Presentation Tool

• Similar structure to GraphEditor
• Scenegraph
• Event handlers
• But this time
• Hierarchical transforms
• Animation

10
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

11
A Simple Example
using UMD.HCIL.Piccolo using UMD.HCIL.Piccolo.Nod
es using UMD.HCIL.PiccoloX public class
PHelloWorld PForm public override void
Initialize() PText text new
PText("Hello World") Canvas.Layer.AddChil
d(text) static void Main()
new PHelloWorld()
Coding Demo
12
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
13
Special Effects with Activities

• Three ways to do it
• Classes
• Use activity classes directly or extend them
• Delegates
• Attach activity stepped delegates to PActivity
• Convenience methods
• Call PNodes animation methods

Coding Demo
14
Defining Multiple Views

• Various ways to do it
• Internal cameras
• Lenses
• Multiple layers
• Multiple canvases

Coding Demo
15
A Bigger Example Graph Editor

• Nodes and Edges
• Highlightable
• Draggable
• Approach
• Structure of objects
• Relate nodes edges
• Event handlers

Coding Demo
16
Where to go from here?

• Get Piccolo
• Download release version www.cs.umd.edu/hcil/picco
  lo/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

17
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