1. Piccolo: A Scalable Structured Graphics Toolkit Aaron Clamage, Jesse Grosjean Ben Bederson University of Maryland Human-Computer Interaction Lab Computer Science Department

2. Piccolo.NETUniversity of Maryland Human-Computer Interaction Lab 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

3. Piccolo.NETUniversity of Maryland Human-Computer Interaction Lab What Is It Good For? => Structured graphics Custom interaction Zoomable User Interfaces Gentleware.com - Poseidon PaperLens – Microsoft Research University of Maryland

4. Piccolo.NETUniversity of Maryland Human-Computer Interaction Lab What Is It Good For? Structured graphics => Custom interaction Zoomable User Interfaces Range Slider International Children’s Digital Library www.icdlbooks.org SpaceTree Demo

5. Piccolo.NETUniversity of Maryland Human-Computer Interaction Lab What Is It Good For? Structured graphics Custom interaction => Zoomable User Interfaces PhotoMesa www.photomesa.com U. Victoria – Ontology Visualization Demo

6. Piccolo.NETUniversity of Maryland Human-Computer Interaction Lab 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

7. Piccolo.NETUniversity of Maryland Human-Computer Interaction Lab 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 Class Hierarchy Typical run-time structure

8. Piccolo.NETUniversity of Maryland Human-Computer Interaction Lab 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

9. Piccolo.NETUniversity of Maryland Human-Computer Interaction Lab 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

10. Piccolo.NETUniversity of Maryland Human-Computer Interaction Lab Performance Analysis Rendering Speed Scenegraph manipulation speed [Bederson, Grosjean, Meyer - TSE 2004]

11. Piccolo.NETUniversity of Maryland Human-Computer Interaction Lab 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

12. Piccolo.NETUniversity of Maryland Human-Computer Interaction Lab 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