Scene Graphs and Piccolo SMD158 Interactive Systems Spring 2005 - PDF document

Scene Graphs and Piccolo SMD158 Interactive Systems Spring 2005 Overview • Zoomable user interfaces (ZUI’s) • Scene graphs • Piccolo Zoomable User Interfaces

User Interface Development • In the early days, user interfaces were based on two paradigms: – Command languages – Graphic systems • WIMP systems introduced in the 80’s – Windows as a means to share the display – Icons representing currently unused windows Problems with Overlapping Windows • Users can spend significant time managing windows • Replacing one window with another causes a disruptive context switch • Scrolling is not efficient if the window is several times larger than the display ZUI an Alternate Paradigm • An infinite canvas that is infinitely stretchable • No icons • Zooming can be done continuously with animation or in discrete steps • Zooming issues: – Easy to get lost when zoomed in, since the overview is lost – Zoom rate • Too high causes navigation problems • Too low is annoying

Scene Graphs What are Scene Graphs? • A hierarchical organization of graphics elements based on a node-link structure • Nodes can be: – Visual elements, lines, points, widgets – Non-visual elements, container nodes • Links are implicit – If a node contains another node then there is an implicit link – Links are implemented as references to objects (pointers) Why Scene Graphs? • Scene graphs allow: – Separation of group behaviour from individual objects – Attaching special behaviors at the node allows building composite, special widgets without building new subclasses of toolkit objects – Uses graphics containment hierarchies instead of inheritance hierarchies – Maintains a hierarchical structure of objects and cameras, allowing the application developer to orient, group and manipulate objects in meaningful ways.

Specific Advantages of Scene Graphs • Scale and handle complexity well • Decouple system components – Increases abstraction and portability • Increase reuse – Of professionally implemented algorithms – Of data in multiple places within a program • Simplify implementing selection, grouping... Piccolo ZUI Tool Kit What is Piccolo? • A toolkit that support graphical 2D applications in Java and C#. • Uses a ”scenegraph” model (i.e. keeps a hierarchical structure of objects and cameras) • Provides many useful effects, such as zooming, animations, multiple representations, etc. • Contains visual components that can be extended, and allows new ones to be created and used in an application. • Piccolo is not thread safe.

Piccolo Applications Zooming in Piccolo Press RIGHT mouse button and drag the IN mouse RIGHT to zoom in and LEFT to zoom out. OUT Panning in Piccolo Press LEFT mouse button and drag the mouse in any direction.

Three Versions • Piccolo.Java – Based on the Java 2D API • Piccolo.NET – Written in C# – Runs on platforms that supports the .NET Framework • PocketPiccolo.NET – For PDA’s • Web page: http://www.cs.umd.edu/hcil/piccolo Setup info: http://www.cs.umd.edu/hcil/piccolo/learn/get-started.shtml Piccolo Runtime Structure Simple ZUI Example public class PiccoloExample extends PFrame { public void initialize() { PNode aNode = new PText("Hello World!"); aNode.translate(100, 100); aNode.rotate(3.14); getCanvas().getLayer().addChild(aNode); } public static void main(String[] args) { new PiccoloExample(); } }

PNode • Central design concept in Piccolo • Anything that is visible and gets events • May have other "child" nodes added to them • Form groups and sub groups • Each node has its own affine transform – Scale, translate, rotate, shear the node – Exists directly above the node, but below the node's parent PNode Coordinates • Coordinate system same as parent’s • New nodes appear in the upper left corner (0, 0) • Two ways to modify a node’s position: – Modify the node’s bounds directly – Modify the affine transform • Makes the coordinate system different from the parent’s coordinate system • Values returned by getBounds() will not be affected Create Nodes • Four ways: – Use existing classes, like PText, PLine, PPath, PImage, etc… – Subclass existing classes – Compose new nodes – Custom PNode

PCamera • Normally linked with at least one PLayer (it ”looks at” other layer nodes) • An affine transform specifies the view into the scene • Translating and scaling that camera's view transform is how panning and zooming are accomplished PLayer • Nodes that can be viewed by a one or more cameras. • Maintain a list of the cameras that are viewing them, and notify these cameras when they are repainted. PRoot • Serves as the topmost node in the Piccolo runtime structure; all other nodes are its direct children or descendents of its children • The PCanvas communicates with the root node to manage screen updates and to dispatch events to its children

PCanvas • JComponent • Associated with a PCamera • Used to view a Piccolo scene graph in Java Swing • Forwards input events to the camera, and uses that camera to draw itself PFrame • Extends javax.swing.JFrame • Meant to be subclassed by applications that just need a PCanvas in a JFrame • Includes full screen mode functionality when run in JDK 1.4 • Subclasses should override the initialize() method and code should be added there Piccolo Events • Follow the Java model. – Listeners attached to nodes in scene graph. – Multiple listeners allowed. • PCanvas by default already has event listeners for zooming and panning.

Event Handlers • PZoomEventHandler and PPanEventHandler – PCanvas has one of each by default – PCanvas methods: • getZoomEventHandler(); • setZoomEventHandler(<some handler>); • PBasicInputEventHandler – Appropriate node listener • PDragEventHandler • PDragSequenceEventHandler Coordinate Systems • Three categories: – Local (specific to a single node) – Global – Canvas • There are methods for transforming between these categories Full Terminology • Some methods affect only one single node: aNode.getBounds(); • Other methods affect the node and all its children, for instance: aNode.getFullBounds();

Layout Node public class LayoutNode extends PNode { public void layoutChildren() { double xOffset = 0; double yOffset = 0; Iterator i = getChildrenIterator(); while (i.hasNext()) { PNode each = (PNode) i.next(); each.setOffset(xOffset - each.getX(), yOffset); xOffset += each.getFullBoundsReference().getWidth(); } } } Example: Bulletin Board Basic Piccolo Code Example public class NodeListenerExample extends PFrame { public void initialize() { // Create first rectangle node PNode node1 = PPath.createRectangle(0, 0, 100, 100); PNode text1 = new PText("Text"); PNode text2 = new PText("More text"); text1.translate(5, 0); text2.translate(5, 20); node1.addChild(text1); node1.addChild(text2); node1.setChildrenPickable(false);

// Create 3 more identical nodes PNode node2 = (PNode) node1.clone(); PNode node3 = (PNode) node1.clone(); PNode node4 = (PNode) node1.clone(); // Attach event handlers directly to the nodes node1.addInputEventListener(new Handler(Color.BLUE)); node2.addInputEventListener(new Handler(Color.GREEN)); node3.addInputEventListener(new Handler(Color.YELLOW)); node4.addInputEventListener(new Handler(Color.RED)); // Give the nodes positions on the canvas node1.translate(50, 50); node2.translate(200,50); node3.translate(50, 200); node4.translate(200, 200); // Add the nodes to the canvas getCanvas().getLayer().addChild(node1); getCanvas().getLayer().addChild(node2); getCanvas().getLayer().addChild(node3); getCanvas().getLayer().addChild(node4); } public static void main(String[] args) { new NodeListenerExample(); } } class Handler extends PBasicInputEventHandler { Color color; public Handler(Color c) { color = c; } public void mousePressed(PInputEvent event) { event.getPickedNode().setPaint(color); event.getInputManager().setKeyboardFocus(event.getPath()); event.setHandled(true); }

public void mouseDragged(PInputEvent event) { PNode aNode = event.getPickedNode(); PDimension delta = event.getDeltaRelativeTo(aNode); aNode.translate(delta.width, delta.height); event.setHandled(true); } public void mouseReleased(PInputEvent event) { event.getPickedNode().setPaint(Color.WHITE); event.setHandled(true); } public void keyPressed(PInputEvent event) { PNode node = event.getPickedNode(); switch (event.getKeyCode()) { case KeyEvent.VK_UP: node.translate(0, -10f); break; case KeyEvent.VK_DOWN: node.translate(0, 10f); break; case KeyEvent.VK_LEFT: node.translate(-10f, 0); break; case KeyEvent.VK_RIGHT: node.translate(10f, 0); break; } } }