1. Piccolo.NET: A Scalable Structured Graphics Toolkit Ben Bederson University of Maryland Human-Computer Interaction Lab Computer Science Department

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

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 Demo

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 This Presentation Tool 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” design Simple class hierarchy Simple runtime structure Utilities for easy startup Class Hierarchy Typical run-time structure 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

8. Piccolo.NETUniversity of Maryland Human-Computer Interaction Lab What Does It Do? Let’s look at the “Feature” demos: Demo

9. Piccolo.NETUniversity of Maryland Human-Computer Interaction Lab Bigger Example: GraphEditor Nodes and Edges Highlightable Draggable Approach: Structure of objects Relate nodes & edges Event handlers Code

10. Piccolo.NETUniversity of Maryland Human-Computer Interaction Lab This Presentation Tool Similar structure to GraphEditor: Scenegraph Event handlers But this time: Hierarchical transforms Animation

11. Piccolo.NETUniversity of Maryland 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 Demo

12. Piccolo.NETUniversity of Maryland 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

13. Piccolo.NETUniversity of Maryland 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

14. Piccolo.NETUniversity of Maryland 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]

15. Piccolo.NETUniversity of Maryland 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

16. Piccolo.NETUniversity of Maryland 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

17. Piccolo.NETUniversity of Maryland 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

18. Piccolo.NETUniversity of Maryland 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 Mockup Piccolo.dll [120 kb] PiccoloX.dll [68 kb] DateLens www.datelens.com

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

20. Piccolo.NETUniversity of Maryland 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

21. Piccolo.NETUniversity of Maryland 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 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 Demo

22. Piccolo.NETUniversity of Maryland 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 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