Slicer3:UIDesign:WorkingProblems:SlicerFlexibleLayout:UXP

From Slicer Wiki
Jump to: navigation, search
Home < Slicer3:UIDesign:WorkingProblems:SlicerFlexibleLayout:UXP

User experience design for Slicer flexible layouts

Back to Flexible Layouts Overview

Selecting an intial grid

In a custom layout tool, a user first selects the number of rows and columns they want to begin with by either

  • clicking and dragging on a template or
  • entering parameters into entry widgets

FlexibleLayoutUXPinitialgrid.png

Splitting a "pane" in the grid

Subsequent modifications apply to the layout containing the specified number of rows and columns.

User can modify layout by clicking on

  • individual panes, or
  • pane dividers,

but outer-most edges can not be modified.

FlexibleLayoutUXPsplitpane.png

Expanding a "pane" in the grid

FlexibleLayoutUXPspanpane.png

Assigning content to panes

FlexibleLayoutUXPassignContent.png

Evolving tree-based representation of the layout

FlexibleLayoutRepresentation.png