Piccolo.NET: A Scalable
Structured Graphics Toolkit
Ben Bederson
University of Maryland
Human-Computer Interaction Lab
Computer Science Department
Piccolo.NET: What is it?
 Toolkit that supports:
 structured canvas of graphical objects
 hierarchical scenegraph model
 creation of “controls” for use within Windows Forms
 Supports 2D object-oriented graphics
 hierarchies (transformation, transparency, etc.)
 animation, event handling
 cameras, layers, views
 efficiency mechanisms
 Missing structure that relies on underlying renderer
 GDI+, Direct3D, OpenGL, Java2D, etc.
=> Open, Extensible and Efficient
University of Maryland
Piccolo.NET
Human-Computer Interaction Lab
What Is It Good For?
 => Structured graphics
 Custom interaction
 Zoomable User Interfaces
Gentleware.com - Poseidon
Demo
PaperLens – Microsoft Research
University of Maryland
Piccolo.NET
Human-Computer Interaction Lab
What Is It Good For?
 Structured graphics
 => Custom interaction
 Zoomable User Interfaces
Demo
International Children’s Digital Library
www.icdlbooks.org
This Presentation Tool
University of Maryland
Range Slider
Piccolo.NET
Human-Computer Interaction Lab
What Is It Good For?
 Structured graphics
 Custom interaction
 => Zoomable User Interfaces
U. Victoria – Ontology Visualization
Demo
PhotoMesa
www.photomesa.com
University of Maryland
Piccolo.NET
Human-Computer Interaction Lab
Where Does It Run?
 Almost everywhere

Piccolo.NET


PocketPiccolo.NET


(C#) .NET for Windows
(C#) Compact Framework for Pocket PC
Piccolo.Java

(Java) for everywhere else
University of Maryland
Piccolo.NET
Human-Computer Interaction Lab
How Does It Work?




“Monolithic” design
Simple class hierarchy
Simple runtime structure
Utilities for easy startup
piccolo
piccolo.nodes
PText
PNode
PRoot
PLayer
PPath
PCamera
1.n
PImage
using UMD.HCIL.Piccolo;
using UMD.HCIL.Piccolo.Nodes;
using UMD.HCIL.PiccoloX;
Class Hierarchy
PRoot
public class PHelloWorld : PForm {
public override void Initialize() {
PText text = new PText("Hello World!");
Canvas.Layer.AddChild(text);
}
static void Main() {
Code
new PHelloWorld();
}
}
University of Maryland
Piccolo.NET
PLayer
PNode
PText
PCamera
PImage
PPath
Typical run-time structure
Human-Computer Interaction Lab
What Does It Do?
 Let’s look at the “Feature” demos:
Demo
University of Maryland
Piccolo.NET
Human-Computer Interaction Lab
Bigger Example: GraphEditor
 Nodes and Edges


Highlightable
Draggable
 Approach:



PRoot
Structure of objects
Relate nodes & edges
Event handlers
Code
University of Maryland
Piccolo.NET
PLayer
PNode
PCamera
PNode
Edges
Nodes
PPath
PPath
PPath
PPath
PPath
PPath
PPath
PPath
PPath
PPath
Human-Computer Interaction Lab
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
University of Maryland
Piccolo.NET
PImage
Human-Computer Interaction Lab
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
University of Maryland
Piccolo.NET
Demo
Human-Computer Interaction Lab
History Lesson – ZUI Toolkits
Spatial Data Management System (SDMS): Donelson, MIT
 1978 – SDMS
 Tour de force



Ubiquitous computing
ZUIs
Novel input devices
 Totally specialized system
University of Maryland
Piccolo.NET
Human-Computer Interaction Lab
History Lesson – ZUI Toolkits
Pad: Perlin, NYU
 1993 – Pad
 Ran on Sun 2
 Written in C
 X Graphics
 Jump-zoom, B&W
 Impressively fast
 Moderately extensible
University of Maryland
Piccolo.NET
Human-Computer Interaction Lab
History Lesson – ZUI Toolkits
Pad++: Bederson, UNM
 1994 – Pad++
 Designed for prototyping
 Used C++ and Tcl/Tk and
X or OpenGL graphics
 Smooth zooming
 Full color
 Bitmaps and vector objects
 Didn’t scale up well
 The API was defined in Tcl and the C++ code was
efficient, but messy…
[Bederson & Meyer - SPE 1998]
University of Maryland
Piccolo.NET
Human-Computer Interaction Lab
History Lesson – ZUI Toolkits
Jazz: Bederson, UMD




1998 – Jazz
Wanted ability to build “serious” applications
Moved to Java and object-oriented design
Inspired by 3D graphics:


We built “polylithic” scenegraph
Different than “monolithic” GUI toolkits
Polylithic
Monolithic
Node
Node
Rectangle
Fade
Rectangle
Polylithic
Monolithic
Root
Root
FadeRectangle
Fade
Rectangle
University of Maryland
Fade
...
Fade
Rectangle ... Rectangle
Piccolo.NET
FadeRectangle
FadeRectangle ... FadeRectangle
Human-Computer Interaction Lab
Polylithic Potential
 Simpler objects, easier to maintain
 Decoupled objects, easier to extend
 More run-time control
 Could better support design environments
 But …
 More objects to manage
 Introduced “editor” to manage object chains
 Still not good enough for app programmers
University of Maryland
Piccolo.NET
Human-Computer Interaction Lab
History Lesson – ZUI Toolkits
Piccolo: Bederson, UMD




2003 – Piccolo
Decided app builder more important than toolkit builder
Added support for C# and Pocket PC
Went back to “monolithic”, but OO design
 Finally happy
 This is our “last” toolkit
 Now have commercial apps being built using Piccolo
University of Maryland
Piccolo.NET
Human-Computer Interaction Lab
How Do Toolkits Compare?
 Tough comparison – many design differences aside from
polylithic / monolithic architectures
 Did case studies and a performance analysis
DateLens
www.datelens.com
DateLens Mockup
 Piccolo.dll [120 kb]
 PiccoloX.dll [68 kb]
University of Maryland
Custom
Scene render time 1.5 msec
Lines of Code
272 lines
Class file size
10.4 kbytes
Memory usage
7.5 k (484k)
our code
(full application)
Piccolo.NET
Piccolo
2.1 msec
171 lines
10.4 kbytes
8.0 k (516k)
Jazz
2.2 msec
219 lines
13.2 kbytes
10.2 k (535k)
Human-Computer Interaction Lab
Performance Analysis
Task
Custom
Scene graph Jazz
Scene graph
Overhead
Overhead
10,000 rectangles 265.0 msec 270.3 msec 2 %
282.8 msec 7 %
1,000 groups of
273.4 msec 3 %
281.2 msec 6 %
10 rectangles
100 groups of
267.2 msec 1 %
281.3 msec 6 %
10 groups of
10 rectangles
Scenegraph
10 groups of
270.4 msec 2 %
278.1 msec 5 %
10 groups of
manipulation speed
10 groups of
10 rectangles
Task
Piccolo
Jazz
10,000
rectangles
Rendering Speed
Build 10,000 nodes
16.0 msec 219.0 msec
Translate 10,000 nodes 0.4 msec 23.5 msec
Remove 10,000 nodes 5.3 msec 5.3 msec
1,000 x 10 rects
Build 10,000 nodes
16.0 msec 218.0 msec
Translate 10,000 nodes 0.4 msec 50.8 msec
Remove 10,000 nodes 5.3 msec 5.3 msec
100 x 10 x 10 rects
Build 10,000 nodes
15.0 msec 226.5 msec
Translate 10,000 nodes 0.4 msec 62.5 msec
[Bederson, Grosjean, Meyer - TSE 2004]
Remove 10,000 nodes 5.0 msec 10.6 msec
10 x 10 x 10 x 10 rects
Build 10,000 nodes
16.0 msec 226.5 msec
Translate 10,000 nodes 0.4 msec 82.3 msec
Remove 10,000 nodes 5.0 msec 10.3 msec
University of Maryland
Piccolo
Piccolo.NET
Human-Computer Interaction Lab
Architectural Reflections
 Toolkits are usually worth their weight
 Polylithic and Monolithic each have merits


Similar performance and code sizes
Base arch. on expected life cycle


More programmer oriented => monolithic
More design program oriented => polylithic
University of Maryland
Piccolo.NET
Human-Computer Interaction Lab
Language Reflections: Java vs. C#
 Languages
C# “usability” advances important for us:
properties, events, indexers, foreach, using, attributes
 Libraries
 Similar, but multiplatform has significant cost
 Platform-specific feature use common
Demo
 Java tortured its APIs with backwards compatibility
 IDEs
 Eclipse: Free, refactoring support, pluggable, rapid changes
 VS.NET: Expensive, but fast, form designer, integrated
device emulator, and cheap for academics
 Platforms
 Multiplatform required for UMD’s required CS courses
 But C# is used in some senior/grad courses

University of Maryland
Piccolo.NET
Human-Computer Interaction Lab
Conclusions / Directions
 Are toolkits beneficial?
=> Clearly yes (sometimes)
 Does zooming work?
 Is animation helpful?
 Good small representations needed
 Animation helps maintain object constancy
 Understand domain and users

 Funded by:


Microsoft
Initially by:
 DARPA
 NSF
 Piccolo’s Future:



Finish website, tutorials, etc.
Hook up to other renderers (Direct3D, OpenGL)
Build more apps!
www.cs.umd.edu/hcil/piccolo
University of Maryland
Piccolo.NET
Human-Computer Interaction Lab