![Page 1: Interaction Jing Li CPSC 533C March 3, 2003. Overview Toolglass and Magic Lenses: The See- Through Interface (1993) by Eric A. Bier, Maureen C. Stone,](https://reader038.vdocument.in/reader038/viewer/2022103023/56649dd95503460f94acf266/html5/thumbnails/1.jpg)
InteractionInteraction
Jing LiJing Li
CPSC 533CCPSC 533C
March 3, 2003March 3, 2003
![Page 2: Interaction Jing Li CPSC 533C March 3, 2003. Overview Toolglass and Magic Lenses: The See- Through Interface (1993) by Eric A. Bier, Maureen C. Stone,](https://reader038.vdocument.in/reader038/viewer/2022103023/56649dd95503460f94acf266/html5/thumbnails/2.jpg)
OverviewOverview
Toolglass and Magic Lenses: The See-Toolglass and Magic Lenses: The See-Through Interface Through Interface (1993)(1993)
by by Eric A. Bier, Maureen C. Stone, Ken Eric A. Bier, Maureen C. Stone, Ken Pier, William Buxton, Tony D. DeRosePier, William Buxton, Tony D. DeRose
SDM: Selective Dynamic Manipulation of SDM: Selective Dynamic Manipulation of VisualizationsVisualizations (1995) (1995)
by by Mei C. Chuah, Steven F. Roth, Joe Mattis, John Kolojejchick
![Page 3: Interaction Jing Li CPSC 533C March 3, 2003. Overview Toolglass and Magic Lenses: The See- Through Interface (1993) by Eric A. Bier, Maureen C. Stone,](https://reader038.vdocument.in/reader038/viewer/2022103023/56649dd95503460f94acf266/html5/thumbnails/3.jpg)
Toolglass and Magic LensesToolglass and Magic Lenses
The see-through interface that can appear The see-through interface that can appear as though on a transparent sheet of glass as though on a transparent sheet of glass between the application and the traditional between the application and the traditional cursor.cursor.
These tools create spatial modes that can These tools create spatial modes that can replace temporal modes in user interface replace temporal modes in user interface systems. systems.
![Page 4: Interaction Jing Li CPSC 533C March 3, 2003. Overview Toolglass and Magic Lenses: The See- Through Interface (1993) by Eric A. Bier, Maureen C. Stone,](https://reader038.vdocument.in/reader038/viewer/2022103023/56649dd95503460f94acf266/html5/thumbnails/4.jpg)
IntroductionIntroductionToolglass widgetsToolglass widgets: semi-transparent interactive tools that : semi-transparent interactive tools that are used in an application work area, and appear on a are used in an application work area, and appear on a virtual sheet of transparent glass called a Toolglass virtual sheet of transparent glass called a Toolglass sheet.sheet.The user can line up a widget, a cursor and an The user can line up a widget, a cursor and an application object in a single two-handed gesture.application object in a single two-handed gesture.A widget that has been stretched across the entire work A widget that has been stretched across the entire work area creates a command mode.area creates a command mode.User can move sheet over application object or move the User can move sheet over application object or move the object to a widget (trackball can control both sheet and object to a widget (trackball can control both sheet and scrolling).scrolling).
Figure 1. Click-through buttons. (a) Six wedge objects. (b) Clicking through a green Figure 1. Click-through buttons. (a) Six wedge objects. (b) Clicking through a green fill-color button. (c) Clicking through a cyan outline-color button fill-color button. (c) Clicking through a cyan outline-color button
![Page 5: Interaction Jing Li CPSC 533C March 3, 2003. Overview Toolglass and Magic Lenses: The See- Through Interface (1993) by Eric A. Bier, Maureen C. Stone,](https://reader038.vdocument.in/reader038/viewer/2022103023/56649dd95503460f94acf266/html5/thumbnails/5.jpg)
Introduction (Cont.)Introduction (Cont.)Many widgets can be placed on a single sheet Many widgets can be placed on a single sheet Widgets and lenses can be composed to create Widgets and lenses can be composed to create a number of specialized tools from a basic seta number of specialized tools from a basic set(e.g. an outline color palette over a magnifying (e.g. an outline color palette over a magnifying lens, to point to individual edges)lens, to point to individual edges)
Figure 2. A sheet of widgets. Clockwise from Figure 2. A sheet of widgets. Clockwise from upper left: color palette, shape palette, upper left: color palette, shape palette, clipboard, grid, delete button, and buttons clipboard, grid, delete button, and buttons that navigate to additional widgets that navigate to additional widgets
Figure 3. An outline color palette Figure 3. An outline color palette over a magnifying lens over a magnifying lens
![Page 6: Interaction Jing Li CPSC 533C March 3, 2003. Overview Toolglass and Magic Lenses: The See- Through Interface (1993) by Eric A. Bier, Maureen C. Stone,](https://reader038.vdocument.in/reader038/viewer/2022103023/56649dd95503460f94acf266/html5/thumbnails/6.jpg)
Related WorkRelated WorkMulti-Handed InterfacesMulti-Handed Interfaces
Movable ToolsMovable Tools– Menus that pop up at the cursor positionMenus that pop up at the cursor position– Toolglass sheets can be moved without tying up the Toolglass sheets can be moved without tying up the
cursorcursor
Transparent ToolsTransparent Tools– Make menus over the work area transparentMake menus over the work area transparent
Viewing FiltersViewing Filters– Magic lenses are visual filters that may be used to Magic lenses are visual filters that may be used to
change type of views or reveal hidden information.change type of views or reveal hidden information.
![Page 7: Interaction Jing Li CPSC 533C March 3, 2003. Overview Toolglass and Magic Lenses: The See- Through Interface (1993) by Eric A. Bier, Maureen C. Stone,](https://reader038.vdocument.in/reader038/viewer/2022103023/56649dd95503460f94acf266/html5/thumbnails/7.jpg)
ExamplesExamples
Shape and Property PalettesShape and Property Palettes
Figure 4. Shape palette. (a) Choosing a shape. (b) Placing the shape.
Figure 5. Font face palette. The word "directly" Figure 5. Font face palette. The word "directly" is being selected and changed to bold face. is being selected and changed to bold face.
![Page 8: Interaction Jing Li CPSC 533C March 3, 2003. Overview Toolglass and Magic Lenses: The See- Through Interface (1993) by Eric A. Bier, Maureen C. Stone,](https://reader038.vdocument.in/reader038/viewer/2022103023/56649dd95503460f94acf266/html5/thumbnails/8.jpg)
Examples (Cont.)Examples (Cont.)
ClipboardsClipboards
Figure 6. Symmetry clipboard. Figure 6. Symmetry clipboard. (a) Picking up an object. (a) Picking up an object. (b) Rotated copies appear. (b) Rotated copies appear. (c) The copies are moved and pasted. (c) The copies are moved and pasted.
Figure 7. Fill-color rubbings.Figure 7. Fill-color rubbings. (a) Lifting a color. (a) Lifting a color. (b) Moving the clipboard. (b) Moving the clipboard. (c) Applying the color. (c) Applying the color.
![Page 9: Interaction Jing Li CPSC 533C March 3, 2003. Overview Toolglass and Magic Lenses: The See- Through Interface (1993) by Eric A. Bier, Maureen C. Stone,](https://reader038.vdocument.in/reader038/viewer/2022103023/56649dd95503460f94acf266/html5/thumbnails/9.jpg)
Examples (Cont.)Examples (Cont.)
Previewing LensesPreviewing Lenses
Figure 8. An achromatic lens over a drop shadow lens over a Figure 8. An achromatic lens over a drop shadow lens over a knotwork. (Knotwork by Andrew Glassner) knotwork. (Knotwork by Andrew Glassner)
![Page 10: Interaction Jing Li CPSC 533C March 3, 2003. Overview Toolglass and Magic Lenses: The See- Through Interface (1993) by Eric A. Bier, Maureen C. Stone,](https://reader038.vdocument.in/reader038/viewer/2022103023/56649dd95503460f94acf266/html5/thumbnails/10.jpg)
Examples (Cont.)Examples (Cont.)
Selection ToolsSelection Tools
Figure 9. Vertex selection widget. Figure 9. Vertex selection widget. (a) Shapes. (a) Shapes. (b) The widget is placed. (b) The widget is placed. (c) A selected vertex. (c) A selected vertex.
Figure 10. The local scaling lens that Figure 10. The local scaling lens that shrinks each object around its own shrinks each object around its own centroid (Tiling by Doug Wyatt) centroid (Tiling by Doug Wyatt)
![Page 11: Interaction Jing Li CPSC 533C March 3, 2003. Overview Toolglass and Magic Lenses: The See- Through Interface (1993) by Eric A. Bier, Maureen C. Stone,](https://reader038.vdocument.in/reader038/viewer/2022103023/56649dd95503460f94acf266/html5/thumbnails/11.jpg)
Examples (Cont.)Examples (Cont.)
GridsGrids
Figure 11. Three grid tools Figure 11. Three grid tools
![Page 12: Interaction Jing Li CPSC 533C March 3, 2003. Overview Toolglass and Magic Lenses: The See- Through Interface (1993) by Eric A. Bier, Maureen C. Stone,](https://reader038.vdocument.in/reader038/viewer/2022103023/56649dd95503460f94acf266/html5/thumbnails/12.jpg)
Examples (Cont.)Examples (Cont.)
VisualizationVisualization
Figure 12. Gaussian curvature pseudo-color lens with overlaid Figure 12. Gaussian curvature pseudo-color lens with overlaid tool to read the numeric value of the curvature. (Original tool to read the numeric value of the curvature. (Original images courtesy of Steve Mann) images courtesy of Steve Mann)
![Page 13: Interaction Jing Li CPSC 533C March 3, 2003. Overview Toolglass and Magic Lenses: The See- Through Interface (1993) by Eric A. Bier, Maureen C. Stone,](https://reader038.vdocument.in/reader038/viewer/2022103023/56649dd95503460f94acf266/html5/thumbnails/13.jpg)
Implementation of Implementation of Toolglass SheetsToolglass Sheets
Multi-Device Input and Screen RefreshMulti-Device Input and Screen Refresh– Handles simultaneous input from two pointing devices Handles simultaneous input from two pointing devices
and updates the screen after multiple simultaneous and updates the screen after multiple simultaneous changeschanges
Filtering Input Through Lenses and WidgetsFiltering Input Through Lenses and Widgets– Modifies pointing events as they pass through widgetsModifies pointing events as they pass through widgets
Filtering Output Through Lenses and WidgetsFiltering Output Through Lenses and Widgets– Modifies graphical output as it passes up through Modifies graphical output as it passes up through
each widgeteach widget
![Page 14: Interaction Jing Li CPSC 533C March 3, 2003. Overview Toolglass and Magic Lenses: The See- Through Interface (1993) by Eric A. Bier, Maureen C. Stone,](https://reader038.vdocument.in/reader038/viewer/2022103023/56649dd95503460f94acf266/html5/thumbnails/14.jpg)
Implementation of Implementation of Magic Lens FiltersMagic Lens Filters
Recursive AmbushRecursive Ambush– catch the low level drawing callscatch the low level drawing calls
typically a wrapper around the graphics contexttypically a wrapper around the graphics context
– and modify them, and then call the original and modify them, and then call the original graphics primitive graphics primitive
e.g. modify “DrawLine” to set the color to “red”e.g. modify “DrawLine” to set the color to “red”
– works transparently across all applicationsworks transparently across all applications– but complicated to make a new lens and but complicated to make a new lens and
debugdebug
![Page 15: Interaction Jing Li CPSC 533C March 3, 2003. Overview Toolglass and Magic Lenses: The See- Through Interface (1993) by Eric A. Bier, Maureen C. Stone,](https://reader038.vdocument.in/reader038/viewer/2022103023/56649dd95503460f94acf266/html5/thumbnails/15.jpg)
Model-In Model-OutModel-In Model-Out– create new objects and transform themcreate new objects and transform them
can be saved and used by any lenses over itcan be saved and used by any lenses over it
– very powerful, butvery powerful, butmust allocate storagemust allocate storage
cross application is an issuecross application is an issue
Implementation of Implementation of Magic Lens Filters (Cont.)Magic Lens Filters (Cont.)
![Page 16: Interaction Jing Li CPSC 533C March 3, 2003. Overview Toolglass and Magic Lenses: The See- Through Interface (1993) by Eric A. Bier, Maureen C. Stone,](https://reader038.vdocument.in/reader038/viewer/2022103023/56649dd95503460f94acf266/html5/thumbnails/16.jpg)
Implementation of Implementation of Magic Lens Filters (Cont.)Magic Lens Filters (Cont.)
Reparameterize & clipReparameterize & clip– Modify global parameters to drawingModify global parameters to drawing– Redraw the model, but clipped to the Redraw the model, but clipped to the
boundary shape of the lensboundary shape of the lens– Best example: scalingBest example: scaling
![Page 17: Interaction Jing Li CPSC 533C March 3, 2003. Overview Toolglass and Magic Lenses: The See- Through Interface (1993) by Eric A. Bier, Maureen C. Stone,](https://reader038.vdocument.in/reader038/viewer/2022103023/56649dd95503460f94acf266/html5/thumbnails/17.jpg)
Implementation of Implementation of Magic Lens Filters (Cont.)Magic Lens Filters (Cont.)
Multiple model types need to be supported Multiple model types need to be supported for cross-application functionality. for cross-application functionality. Achieved by:Achieved by:– Type conversion: convert the model to be of Type conversion: convert the model to be of
the type requiredthe type required– Type tolerance: unchanged if does not Type tolerance: unchanged if does not
understand a modelunderstand a model
![Page 18: Interaction Jing Li CPSC 533C March 3, 2003. Overview Toolglass and Magic Lenses: The See- Through Interface (1993) by Eric A. Bier, Maureen C. Stone,](https://reader038.vdocument.in/reader038/viewer/2022103023/56649dd95503460f94acf266/html5/thumbnails/18.jpg)
Toolglass & Magic Lens Toolglass & Magic Lens ConclusionsConclusions
See-through interface based on spatial modesSee-through interface based on spatial modes
Structured well for two-handed interactionStructured well for two-handed interaction
May be integrated into any screen-based May be integrated into any screen-based applications and toolsapplications and tools
![Page 19: Interaction Jing Li CPSC 533C March 3, 2003. Overview Toolglass and Magic Lenses: The See- Through Interface (1993) by Eric A. Bier, Maureen C. Stone,](https://reader038.vdocument.in/reader038/viewer/2022103023/56649dd95503460f94acf266/html5/thumbnails/19.jpg)
SDM: Selective Dynamic Manipulation of Visualizations
SDM: Selective Dynamic Manipulation of Visualizations
Mei C. Chuah, Steven F. Roth,
Joe Mattis, John Kolojejchick
(Carnegie Mellon University)
Mei C. Chuah, Steven F. Roth,
Joe Mattis, John Kolojejchick
(Carnegie Mellon University)
![Page 20: Interaction Jing Li CPSC 533C March 3, 2003. Overview Toolglass and Magic Lenses: The See- Through Interface (1993) by Eric A. Bier, Maureen C. Stone,](https://reader038.vdocument.in/reader038/viewer/2022103023/56649dd95503460f94acf266/html5/thumbnails/20.jpg)
MotivationMotivation
• Need new interactive techniques for 2D and 3D visualizations. We want:– Selective: a high degree of user control– Dynamic: interactions all occur in real time,
and interactive animation– Manipulation: Users can directly move and
transform objects to perform different tasks• This set of techniques is called SDM
![Page 21: Interaction Jing Li CPSC 533C March 3, 2003. Overview Toolglass and Magic Lenses: The See- Through Interface (1993) by Eric A. Bier, Maureen C. Stone,](https://reader038.vdocument.in/reader038/viewer/2022103023/56649dd95503460f94acf266/html5/thumbnails/21.jpg)
Current Static VisualizationCurrent Static Visualization
• Users cannot focus on specific object sets in detail while keeping them in the larger context
• Clutter and occlusion (hidden data) in dense information space
• Difficult to give a sense of scale: some objects may be dwarfed in the scale used for the entire data set (green objects in [Figure 1])
• No tools provided to classify data sets and save those classifications
• Difficult to compare quantities when objects are not spatially contiguous (e.g. when objects are at different distances from the user)
![Page 22: Interaction Jing Li CPSC 533C March 3, 2003. Overview Toolglass and Magic Lenses: The See- Through Interface (1993) by Eric A. Bier, Maureen C. Stone,](https://reader038.vdocument.in/reader038/viewer/2022103023/56649dd95503460f94acf266/html5/thumbnails/22.jpg)
SDM SampleSDM Sample• SDM deals with these issues• Selection and control methods rely on objects
rather than spaces.
![Page 23: Interaction Jing Li CPSC 533C March 3, 2003. Overview Toolglass and Magic Lenses: The See- Through Interface (1993) by Eric A. Bier, Maureen C. Stone,](https://reader038.vdocument.in/reader038/viewer/2022103023/56649dd95503460f94acf266/html5/thumbnails/23.jpg)
Sample: Supply Distribution NetworkSample: Supply Distribution Network
• Cylinders (red) : supply centres • Rectangular bars (purple) : shelters • Lines (black) on the floor plane : major routes • Heights of cylinders and bars : quantities available at supply centres
and needed by shelters• Selected objects : green
![Page 24: Interaction Jing Li CPSC 533C March 3, 2003. Overview Toolglass and Magic Lenses: The See- Through Interface (1993) by Eric A. Bier, Maureen C. Stone,](https://reader038.vdocument.in/reader038/viewer/2022103023/56649dd95503460f94acf266/html5/thumbnails/24.jpg)
SDM ComponentsSDM Components
• Object Centered Selection– Select objects by clicking or using sliders to
place data constraints– Object sets may be named, saved and used
later from a scrollable menu– Object sets need not be made up of
homogeneous types (e.g. a set may contain supply centers, shelters, and routes)
![Page 25: Interaction Jing Li CPSC 533C March 3, 2003. Overview Toolglass and Magic Lenses: The See- Through Interface (1993) by Eric A. Bier, Maureen C. Stone,](https://reader038.vdocument.in/reader038/viewer/2022103023/56649dd95503460f94acf266/html5/thumbnails/25.jpg)
SDM Components (Cont.)SDM Components (Cont.)• Dynamic and
Flexible Operations– Directly manipulate
through object handles– Attach a handle to an
object, and push or pull on it: causes the object to expand, shrink or move continuously
– Objects change with motion of handles (A) controls the radius of cylinder object (B) controls object height(C) controls bar width
– Arrow handles: shift
![Page 26: Interaction Jing Li CPSC 533C March 3, 2003. Overview Toolglass and Magic Lenses: The See- Through Interface (1993) by Eric A. Bier, Maureen C. Stone,](https://reader038.vdocument.in/reader038/viewer/2022103023/56649dd95503460f94acf266/html5/thumbnails/26.jpg)
SDM Components (Cont.)SDM Components (Cont.)
• Object Constraints
Context persistence– SDM maintains some relationship between the
focus objects set and its environment.
Set-wide operations– If you can move or scale one object in a focus
set, you can move or scale any other object in this set.
![Page 27: Interaction Jing Li CPSC 533C March 3, 2003. Overview Toolglass and Magic Lenses: The See- Through Interface (1993) by Eric A. Bier, Maureen C. Stone,](https://reader038.vdocument.in/reader038/viewer/2022103023/56649dd95503460f94acf266/html5/thumbnails/27.jpg)
SDM Feedback MechanismsSDM Feedback Mechanisms• Clearly Identify the
Selected Set – The selected set is painted
differently (green)– A white grid may be drawn
beneath all selected objects to indicate positions and spread
• Maintain Scene Context – Used to maintain context
when objects are displaced– Object ‘body’ (green) and
object ‘shell’ (white)
![Page 28: Interaction Jing Li CPSC 533C March 3, 2003. Overview Toolglass and Magic Lenses: The See- Through Interface (1993) by Eric A. Bier, Maureen C. Stone,](https://reader038.vdocument.in/reader038/viewer/2022103023/56649dd95503460f94acf266/html5/thumbnails/28.jpg)
Feedback Mechanisms (Cont.)Feedback Mechanisms (Cont.)
• Maintain Temporal Continuity– Use animation to help users to perceive
changes to the scene
• Maintain Relationships Between the Selected Set and the Environment– Keep a scale of the differences on screen, for
example, the ratio axes technique (next slide)
• Allow Objects to be Easily Returned to Their Home Positions
![Page 29: Interaction Jing Li CPSC 533C March 3, 2003. Overview Toolglass and Magic Lenses: The See- Through Interface (1993) by Eric A. Bier, Maureen C. Stone,](https://reader038.vdocument.in/reader038/viewer/2022103023/56649dd95503460f94acf266/html5/thumbnails/29.jpg)
Ratio Axes TechniqueRatio Axes Technique
Scale of the environment (black) & the selected set (red)Scale of the environment (black) & the selected set (red)The left is 1:1; the right is 1:8The left is 1:1; the right is 1:8
![Page 30: Interaction Jing Li CPSC 533C March 3, 2003. Overview Toolglass and Magic Lenses: The See- Through Interface (1993) by Eric A. Bier, Maureen C. Stone,](https://reader038.vdocument.in/reader038/viewer/2022103023/56649dd95503460f94acf266/html5/thumbnails/30.jpg)
SDM SolutionsSDM Solutions
• Focusing on a Select Set of Objects while Keeping Scene Context– Objects can be painted distinctly and the width can be increased– Users may shift all focus objects to the front of the scene
![Page 31: Interaction Jing Li CPSC 533C March 3, 2003. Overview Toolglass and Magic Lenses: The See- Through Interface (1993) by Eric A. Bier, Maureen C. Stone,](https://reader038.vdocument.in/reader038/viewer/2022103023/56649dd95503460f94acf266/html5/thumbnails/31.jpg)
SDM Solutions (Cont.)SDM Solutions (Cont.)
• Viewing and Analyzing Occluded Objects– Selected object set is elevated to solve occlusion
problem
![Page 32: Interaction Jing Li CPSC 533C March 3, 2003. Overview Toolglass and Magic Lenses: The See- Through Interface (1993) by Eric A. Bier, Maureen C. Stone,](https://reader038.vdocument.in/reader038/viewer/2022103023/56649dd95503460f94acf266/html5/thumbnails/32.jpg)
SDM Solutions (Cont.)SDM Solutions (Cont.)
– Reduce the heights of unconcerned objects to zero– Make all unconcerned objects very thin
![Page 33: Interaction Jing Li CPSC 533C March 3, 2003. Overview Toolglass and Magic Lenses: The See- Through Interface (1993) by Eric A. Bier, Maureen C. Stone,](https://reader038.vdocument.in/reader038/viewer/2022103023/56649dd95503460f94acf266/html5/thumbnails/33.jpg)
SDM Solutions (Cont.)SDM Solutions (Cont.)• Viewing Different Sets of Elements Based on Different
Scales– Ratio axes technique (mentioned above)
• Interactively Augmenting the Visualization with New Classification Infomation– Add width and color, save as a set and apply them later (i.e.
identify important shelters)
![Page 34: Interaction Jing Li CPSC 533C March 3, 2003. Overview Toolglass and Magic Lenses: The See- Through Interface (1993) by Eric A. Bier, Maureen C. Stone,](https://reader038.vdocument.in/reader038/viewer/2022103023/56649dd95503460f94acf266/html5/thumbnails/34.jpg)
SDM Solutions (Cont.)SDM Solutions (Cont.)
• Comparing the Patterns, Widths, and Heights of Objects– Draw a line of reference in the scene plane and move any set of
objects to the reference line– Compare data trends among multiple sets
![Page 35: Interaction Jing Li CPSC 533C March 3, 2003. Overview Toolglass and Magic Lenses: The See- Through Interface (1993) by Eric A. Bier, Maureen C. Stone,](https://reader038.vdocument.in/reader038/viewer/2022103023/56649dd95503460f94acf266/html5/thumbnails/35.jpg)
SDM System Architecture SDM System Architecture
![Page 36: Interaction Jing Li CPSC 533C March 3, 2003. Overview Toolglass and Magic Lenses: The See- Through Interface (1993) by Eric A. Bier, Maureen C. Stone,](https://reader038.vdocument.in/reader038/viewer/2022103023/56649dd95503460f94acf266/html5/thumbnails/36.jpg)
SDM ConclusionsSDM Conclusions
• Good interactive techniques deals with the issues from current static visualizations
• Visualization is clear, precise and easy to understand
• The goal of SDM is to provide users with enough tools and flexibility (multiple alternative solutions) that they can solve a wide spectrum of data analysis tasks.