Piccolo: A Scalable Structured Graphics Toolkit

Aaron Clamage, Jesse GrosjeanBen Bederson

University of MarylandHuman-Computer Interaction LabComputer Science Department

University of Maryland

Human-Computer Interaction LabPiccolo.NET

Piccolo: What is it?

Toolkit that supports: structured canvas of graphical objects hierarchical scene-graph 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

Human-Computer Interaction LabPiccolo.NET

What Is It Good For?

=> Structured graphics Custom interaction Zoomable User Interfaces

Gentleware.com - Poseidon

PaperLens – Microsoft Research University of Maryland

University of Maryland

Human-Computer Interaction LabPiccolo.NET

What Is It Good For?

Structured graphics => Custom interaction Zoomable User Interfaces

Range Slider

International Children’s Digital Librarywww.icdlbooks.org

SpaceTreeDemo

University of Maryland

Human-Computer Interaction LabPiccolo.NET

What Is It Good For?

Structured graphics Custom interaction => Zoomable User Interfaces

PhotoMesawww.photomesa.com

U. Victoria – Ontology Visualization

Demo

University of Maryland

Human-Computer Interaction LabPiccolo.NET

Where Does It Run?

Almost everywhere Piccolo.NET

(C#) .NET for Windows PocketPiccolo.NET

(C#) Compact Framework for Pocket PC

Piccolo.Java (Java) for everywhere else

University of Maryland

Human-Computer Interaction LabPiccolo.NET

How Does It Work?

=> Monolithic scene-graph Simple class hierarchy

Extend PNode to make new nodes

Simple runtime structure Supports Custom Interaction

Efficiency mechanisms Utilities for easy startup

PNode

PRoot PLayer PCamera

PText

PPath

PImage

piccolo piccolo.nodes

1.n

Class Hierarchy

PRoot

PLayer PCamera

PNode PImage

PText PPath

Typical run-time structure

University of Maryland

Human-Computer Interaction LabPiccolo.NET

How Does It Work?

Monolithic scene-graph => Efficiency Mechanisms

Picking Validating bounds and

updating display Damage/repair Driven by UI cycle

Utilities for easy startup

University of Maryland

Human-Computer Interaction LabPiccolo.NET

How Does It Work?

Monolithic scene-graph Efficiency Mechanisms => Utilities for easy startup

Embedded Piccolo canvas Designer enabled

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(); }}

Code

University of Maryland

Human-Computer Interaction LabPiccolo.NET

Task Custom Piccolo Scene graph Overhead

Jazz Scene graph Overhead

10,000 rectangles 265.0 msec 270.3 msec 2 % 282.8 msec 7 % 1,000 groups of 10 rectangles

273.4 msec 3 % 281.2 msec 6 %

100 groups of 10 groups of 10 rectangles

267.2 msec 1 % 281.3 msec 6 %

10 groups of 10 groups of 10 groups of 10 rectangles

270.4 msec 2 %

278.1 msec 5 %

Performance Analysis

Task Piccolo Jazz 10,000 rectangles 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 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

Rendering Speed

Scenegraph manipulation speed

[Bederson, Grosjean, Meyer - TSE 2004]

University of Maryland

Human-Computer Interaction LabPiccolo.NET

Conclusions / Directions Scenegraphs are useful to

Provide efficient picking and rendering Support highly customized interaction

But at a cost… Not always the best way to store the data Harder to plug in new visualizations

Toolkits are usually worth their weight

Piccolo’s Future: Finish website, tutorials, etc. Hook up to other renderers

(Direct3D, OpenGL) Build more apps!

www.cs.umd.edu/hcil/piccolo

Funded by: Microsoft

Initially by: DARPA NSF

University of Maryland

Human-Computer Interaction LabPiccolo.NET

My Interest in this Workshop

I want to better understand Challenges other IV toolkit designers are

facing How Piccolo fits in with other toolkits

I want to explore the feasibility of creating a universally useful infrastructure