GT CS 7450 - Panning and Zooming

Unformatted text preview:

1Panning and ZoomingCS 4460/7450 - Information VisualizationApril 8, 2010John StaskoSpring 2010 CS 4460/7450 2Fundamental Problem• Scale - Many data sets are too large to visualize on one screen May simply be too many cases May be too many variables May only be able to highlight particular cases or particular variables, but viewer‟s focus may change from time to time2Spring 2010 CS 4460/7450 3Solutions We’ve Seen• Overview and detail views• Focus+Context distortion• How about one view in which changing focus is fast and smooth?Spring 2010 CS 4460/7450 4Panning and Zooming• Panning Smooth movement of camera across scene (or scene moves and camera stays still)• Zooming Increasing or decreasing the magnification of the objects in a scene• Useful for changing focal point3Spring 2010 CS 4460/7450 5Zoominghttp://micro.magnet.fsu.edu/prime r/java/scienceopticsu/powersof10/index.htmlPowers of 10Spring 2010 CS 4460/7450 6NASA Zoomshttp://svs.gsfc.nasa.gov/stories/zooms/index.html4Understanding Zooming• Introduction of idea of “space scale diagram”• Characterizes operations in zooming through this new diagram they introduce• Goals Understand multiscale systems Guide design Authoring toolSpring 2010 CS 4460/7450 7Furnas & BedersonCHI „95Spring 2010 CS 4460/7450 8The Space - Scale DiagramScaleSpace (2D)5Spring 2010 CS 4460/7450 9Space-Scale DiagramTechnique for describing panning and zooming interfacesFurnas and Bederson CHI „95User‟s viewing frame (constant size)PanZoom inZoom outSpring 2010 CS 4460/7450 10Simplification: 1D Space6Spring 2010 CS 4460/7450 11Space-Scale Diagram1. Pan2. Zoom3. Pan and zoom1.2.3.Spring 2010 CS 4460/7450 12Joint Panning and Zooming7Spring 2010 CS 4460/7450 13Optimal Actions• Sometimes, these kinds of UIs can be disorienting to viewer• Example Long pan isn‟t any good Better: Zoom out, pan a little, zoom inExample ApplicationSpring 2010 CS 4460/7450 14http://prezi.com8Spring 2010 CS 4460/7450 15Pad -> Pad++ -> Jazz ->Piccolo• Environments for supporting flexible, smooth zooming and panning on structured graphics world Pad - Perlin & Fox, NYU Pad++ - Bederson & Hollan, Bellcore & New Mexico Jazz - Bederson, Maryland Piccolo, Bederson, MarylandSpring 2010 CS 4460/7450 16Support• Pad ???• Pad++ Tcl and C++, GL and X Windows• Jazz Java, Java 2D & Swing• Piccolo Java & C#/.net, Java 2D, OpenGL & GDI+9Spring 2010 CS 4460/7450 17Interface Physics• Creators of the systems talk about them creating a new form of interface physics• One which works a lot like the physical world You can walk around, look at some things closely, etc• But one that also adds some “magic” of what the computer does wellSpring 2010 CS 4460/7450 18Pad++• Support library for building applications• Infinite plane, panning in x-y, zooming in-out• 2.5-D, not 3-D• Built on top of C++, Tcl/Tk and X Window SystemBederson et alJVLC„9610Spring 2010 CS 4460/7450 19Important Concepts• Portals• Lenses• Sticky objects• Semantic zoomingSpring 2010 CS 4460/7450 20Portals• Views onto another place in the world• Implemented typically as separate rectangular region• Zooming, panning, I/O all work independently in there• Can be used to create overviews or focus regions11Spring 2010 CS 4460/7450 21Lenses• Rectangular regions/objects that can be moved around on display• Objects that alter the appearance and behavior of objects seen through them• Much like Magic Lenses of XeroxSpring 2010 CS 4460/7450 22Sticky Objects• Objects in the world that do not respond to the basic zoom/pan interface physics• Objects are “stuck” to the display They never change position They never change size12Spring 2010 CS 4460/7450 23Semantic Zooming• Zooming that is not simply a change in size or scale like simple magnification• Objects change fundamental appearance/presence at different zoom levels• Zooming is like step function with boundaries where Spring 2010 CS 4460/7450 24Jazz• All the stuff from Pad++• Implemented in java and swing• Utilizes scene graph approach and minilithic design philosophy• HiNote application is simple drawing editor (like PadDraw)13Spring 2010 CS 4460/7450 25UI Operations• Navigation Left mouse button down, drag - Pan Right mouse button down, drag right - Zoom in Right mouse button down, drag left - Zoom out Alternate: Arrow and page keys• Hyperlinks Smoothly move you from one position to anotherSpring 2010 CS 4460/7450 26Challenges• How the heck do they do that?• Must keep rendering speeds up14Spring 2010 CS 4460/7450 27Efficiency Measures• Spatial indexing Hierarchy of objects based on bounding boxes• Clustering Restructure hierarchy to maintain a balanced tree, speed for indexing• Level of detail Render items depending on how large they are on screen, don‟t draw small onesSpring 2010 CS 4460/7450 28Efficiency Measures• Refinement Render fast with low detail while moving, refine image when still• Clipping  Only render portions of objects that are visible• Region management Only update portion of screen that has been changed15Spring 2010 CS 4460/7450 29Efficiency Measures• Adjustable frame rate Keep animation and zoom rate constant independent of environment• Interruption User input takes precedence, moves animations to their end state, gets handled• Optimized image rendering Code to render zoomed images has been worked on a lot!Spring 2010 CS 4460/7450 30Pad++ Applications• PadDraw  Simple graphics editor• File/Directory browser16Spring 2010 CS 4460/7450 31ApplicationsTimeline viewsSpring 2010 CS 4460/7450 32Web HistoryWebtraversalhistoryVideoPadPrintsHightower et alUIST „9817Spring 2010 CS 4460/7450 33Browsing ImagesPhotoMesaUses panning andzooming to browsea photo collectionDemo & Video:www.cs.umd.edu/hcil/photomesaBederson UIST „01Spring 2010 CS 4460/7450 34Presenting TalksCounterPointUses panning andzooming inPowerPointDemo:www.cs.umd.edu/hcil/counterpointGood & Bederson Information Visualization „0218Spring 2010 CS 4460/7450 35Many More Applicationshttp://www.cs.umd.edu/hcil/piccol o/applications/index.shtmlSpring 2010 CS 4460/7450 36Current StatusPiccolo has anactive userbasehttp://www.piccolo2d.org/19Spring 2010 CS 4460/7450 37Other Systems• Let‟s see some other examples…Spring 2010 CS 4460/7450 38Continuous Zoom• Bartram et al, Simon


View Full Document

GT CS 7450 - Panning and Zooming

Documents in this Course
Animation

Animation

23 pages

Load more
Download Panning and Zooming
Our administrator received your request to download this document. We will send you the file to your email shortly.
Loading Unlocking...
Login

Join to view Panning and Zooming and access 3M+ class-specific study document.

or
We will never post anything without your permission.
Don't have an account?
Sign Up

Join to view Panning and Zooming 2 2 and access 3M+ class-specific study document.

or

By creating an account you agree to our Privacy Policy and Terms Of Use

Already a member?