Piccolo NET A Scalable Structured Graphics Toolkit Ben

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

Piccolo. NET: What is it? n Toolkit that supports: n structured canvas of graphical objects n hierarchical scenegraph model n creation of “controls” for use within Windows Forms n Supports 2 D object-oriented graphics n hierarchies (transformation, transparency, etc. ) n animation, event handling n cameras, layers, views n efficiency mechanisms n Missing structure that relies on underlying renderer n GDI+, Direct 3 D, Open. GL, Java 2 D, etc. => Open, Extensible and Efficient University of Maryland Piccolo. NET Human-Computer Interaction Lab

What Is It Good For? n => Structured graphics n Custom interaction n Zoomable User Interfaces Gentleware. com - Poseidon Demo Paper. Lens – Microsoft Research University of Maryland Piccolo. NET Human-Computer Interaction Lab

What Is It Good For? n Structured graphics n => Custom interaction n 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? n Structured graphics n Custom interaction n => Zoomable User Interfaces U. Victoria – Ontology Visualization Photo. Mesa www. photomesa. com University of Maryland Demo Piccolo. NET Human-Computer Interaction Lab

Where Does It Run? n Almost everywhere n Piccolo. NET n n Pocket. Piccolo. NET n n (C#). NET for Windows (C#) Compact Framework for Pocket PC Piccolo. Java n (Java) for everywhere else University of Maryland Piccolo. NET Human-Computer Interaction Lab

How Does It Work? n n “Monolithic” design Simple class hierarchy Simple runtime structure Utilities for easy startup Class Hierarchy using UMD. HCIL. Piccolo; using UMD. HCIL. Piccolo. Nodes; using UMD. HCIL. Piccolo. X; public class PHello. World : PForm { public override void Initialize() { PText text = new PText("Hello World!"); Canvas. Layer. Add. Child(text); } static void Main() { Code new PHello. World(); } } University of Maryland Piccolo. NET Typical run-time structure Human-Computer Interaction Lab

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

Bigger Example: Graph. Editor n Nodes and Edges n Highlightable n Draggable n Approach: n Structure of objects n Relate nodes & edges n Event handlers Code University of Maryland Piccolo. NET Human-Computer Interaction Lab

This Presentation Tool n Similar structure to Graph. Editor: n Scenegraph n Event handlers n But this time: n Hierarchical transforms n Animation University of Maryland Piccolo. NET Human-Computer Interaction Lab

Pocket. Piccolo. NET n Same great taste – less filling! n Essentially identical except for: n n Lower quality rendering No graphical paths or transparency No rotation Poorer performance n Still all the cool stuff: n n 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 n 1978 – SDMS n Tour de force n Ubiquitous computing n ZUIs n Novel input devices n Totally specialized system University of Maryland Piccolo. NET Human-Computer Interaction Lab

History Lesson – ZUI Toolkits Pad: Perlin, NYU n 1993 – Pad n Ran on Sun 2 n Written in C n X Graphics n Jump-zoom, B&W n Impressively fast n Moderately extensible University of Maryland Piccolo. NET Human-Computer Interaction Lab

History Lesson – ZUI Toolkits Pad++: Bederson, UNM n 1994 – Pad++ n Designed for prototyping n Used C++ and Tcl/Tk and X or Open. GL graphics n Smooth zooming n Full color n Bitmaps and vector objects n Didn’t scale up well n 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 n n 1998 – Jazz Wanted ability to build “serious” applications Moved to Java and object-oriented design Inspired by 3 D graphics: n n We built “polylithic” scenegraph Different than “monolithic” GUI toolkits University of Maryland Piccolo. NET Human-Computer Interaction Lab

Polylithic Potential n Simpler objects, easier to maintain n Decoupled objects, easier to extend n More run-time control n Could better support design environments n But … n More objects to manage n Introduced “editor” to manage object chains n Still not good enough for app programmers University of Maryland Piccolo. NET Human-Computer Interaction Lab

History Lesson – ZUI Toolkits Piccolo: Bederson, UMD n n 2003 – Piccolo Decided app builder more important than toolkit builder Added support for C# and Pocket PC Went back to “monolithic”, but OO design n Finally happy n This is our “last” toolkit n Now have commercial apps being built using Piccolo University of Maryland Piccolo. NET Human-Computer Interaction Lab

How Do Toolkits Compare? n Tough comparison – many design differences aside from polylithic / monolithic architectures n Did case studies and a performance analysis Date. Lens www. datelens. com Date. Lens Mockup n Piccolo. dll [120 kb] n Piccolo. X. dll [68 kb] University of Maryland Piccolo. NET Human-Computer Interaction Lab

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

Architectural Reflections n Toolkits are usually worth their weight n Polylithic and Monolithic each have merits n Similar performance and code sizes n Base arch. on expected life cycle n n More programmer oriented => monolithic More design program oriented => polylithic University of Maryland Piccolo. NET Human-Computer Interaction Lab

Language Reflections: Java vs. C# n Languages C# “usability” advances important for us: properties, events, indexers, foreach, using, attributes n Libraries n Similar, but multiplatform has significant cost n Platform-specific feature use common Demo n Java tortured its APIs with backwards compatibility n IDEs n Eclipse: Free, refactoring support, pluggable, rapid changes n VS. NET: Expensive, but fast, form designer, integrated device emulator, and cheap for academics n Platforms n Multiplatform required for UMD’s required CS courses n But C# is used in some senior/grad courses n University of Maryland Piccolo. NET Human-Computer Interaction Lab

Conclusions / Directions n Are toolkits beneficial? => Clearly yes (sometimes) n Does zooming work? n Is animation helpful? n Good small representations needed n Animation helps maintain object constancy n Understand domain and users n n Funded by: n n Microsoft Initially by: n DARPA n NSF n Piccolo’s Future: n n n Finish website, tutorials, etc. Hook up to other renderers (Direct 3 D, Open. GL) Build more apps! www. cs. umd. edu/hcil/piccolo University of Maryland Piccolo. NET Human-Computer Interaction Lab