Visage Attachments a design note Bill Lucas, Phil Oye, David Bishop VISNOTE-98009 32 March 1998

Background & Motivation Attachments: Provide a mechanism to add controls to frames (control frames and contents) A modular system; users can easily add and remove attachments Move away from the canonical "WIMP" design (windows have decorations) Users immediately see Visage as a dramatically different visualization environment.

Components vs. Attachments Works on any frame Removal doesn’t change frame’s operation Easy to remove and re-attach Components Intrinsic to a frame Mechanism Script Need Viper to add/ remove/ modify

Components vs. Attachments (Examples) DQ Slider Yellow Sticky Note Generic Frame Controls Visage Link Components A button on a frame A piece of script with behavior for that button Mechanism that moves elements based on lat/lon

Anatomy of an Attachment Summary Tack Component Icon Control or Description

Anatomy of an Attachment Tack – for manipulating an attachment Icons – to identify controls and to allow use when attachment is partially visible Summary – to allow display of control settings or information when attachment is partially visible Controls – to interact with components

Behavior of Attachments Moving Attachments Attachments are glued to the frame, moving a frame, moves its attachments. Dragging an attachment does not drag the parent frame, it moves the attachment within the frame or it tears the attachment off of the frame.

Behavior of Attachments Magnification Attachments magnify along with their parent frame. Attachments have a minimum and maximum magnification.

Behavior of Attachments Corners vs. Sides vs. Face An attachment can be placed on: Any corner of the frame The face of the frame. Any edge of the frame

Behavior of Attachments States of Attachments Face: Minimized or Full Size. Edge: Minimized, Summary, or Full Size. Corner: Minimized or Summary.

Behavior of Attachments States of Attachments: Face Face attachments can be minimized to show only the tack.

Behavior of Attachments States of Attachments: Edge Edge attachments snap to three positions: exposed, icons exposed, or hidden.

Behavior of Attachments States of Attachments: Corner Corner attachments snap to two positions: icons exposed or hidden.

Behavior of Attachments Flipping When moving an attachment within a frame, the arrangement of the components of the attachment will shift. They will flip vertically or horizontally.

Behavior of Attachments Flipping behavior for edge attachments

Behavior of Attachments Gravity Attachments snap to a frame. They want to glue to an edge or a corner. The attachment “lags” behind the cursor for a few pixels when it snaps. Example shows attachment removal Dragging an attachment to the right by its handle: 1 2 3

Behavior of Attachments Cursor Direction Gravity: Attaching Attachments snap when attaching them (like removing them) 1 2 3

Behavior of Attachments Popup controls When attachments are in Summary state, hovering or clicking on an icon pops open its control or label. This allows the use of attachments when they are only partially exposed.

The Attachments General Controls DQ Slider Yellow Sticky Visage Link

General Controls Controls attachment contains common controls for manipulating frames Summary contains meta information about the frame (typically not the title)

DQ Slider The dynamic query slider is the familiar Visage “annotation,” properly implemented as an attachment The summary contains the attribute and the value range for the query

Yellow Sticky The “Yellow Sticky” attachment contains a text area for a note The summary shows the date the note was created

Visage Link The Visage-Link attachment shows icons and names for each user sharing the frame New users can be added by dragging them onto the attachment

Attachment Palette The attachments palette mimics a pegboard

The Basic Frame A frame with no decorations except for a title To move the frame, drag on the title. Control clicking or double clicking on the label will give an editable text field. The letter height of the title is determined by the formula: height = frame size (measured diagonally) times a constant (~.04)

Basic Frame (Picture)

In Situ Example

In Situ Example