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
• n 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
• r 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 mouse RIGHT to zoom in and LEFT to zoom

• ut.

IN 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; } } }