Documentation/4.0/SlicerApplication/MainApplicationGUI

2011-11-25T06:07:19Z

Wjp: /* Overview */

{{documentation/{{documentation/version}}/slicerapplication-header}}


=Overview=

Slicer4's main desktop interface provides top-level access to most commonly-used features, and organizes them into logical groupings. These groups of features are presented in a number of interface panels on the GUI, as is illustrated in the basic layout below. The interface is designed to be easy to learn and remember, to ease navigation of Slicer's large (and growing) functionality, and to easily collapse and hide when you don't need to see it.

The main components of Slicer's application GUI are

* Application '''Menu'''
* Application '''Toolbar'''
* '''Module''' Panel
* Interactive '''Data Probe'''
* Viewer Panel
** One Main '''3D Viewer''' (by default)
** Three Main '''Slice Viewers''' (by default)
* Application '''Message''' Bar

These components are indicated in the figure below and are described in more detail in the following sections.

[[image: Slicer4ApplicationGUIMap.jpg ]]

==Application Menu==

Slicer's Application Menu contains many useful features. A brief overview of some of these is given below.

=== File Menu===
The File Menu contains options for loading a MRML scene, for downloading sample datasets from the internet, or individual datasets of various types. An option for saving scenes and data is also provided here.

===Customize Slicer from the Edit Menu===
The Edit menu contains an option to raise the Application Settings Interface. This interface allows users to customize their installation of Slicer. '''Edit->Application Settings'' can be used to include or suppress various Slicer modules, to customize the appearance of your Python Interactor, to select a custom font, to specify a temporary directory, and to accomplish other customizations as well.

===View Menu===
This menu contains options to raise the Python Interactor and the Error Log, both useful developer tools. Menu options to switch layouts, and to toggle the display of individual toolbars and the module GUI panels are also provided under the View Menu.

[[image: Slicer4AppMenu.jpg | center]]

==Application Toolbar==

The Application Toolbar provides shortcuts to many useful sets of functionality. The following toolbars appear here by default, and this set of toolbars may be customized from Slicer's View Menu.

===Load & Save Options===

The '''Load Scene''' option will raise a browser to select and load a collection of data as a MRML scene. This option clears the existing scene and resets the application state. The '''Save''' option will raise the "Save Data" Interface which offers a variety of options for saving MRML scenes and individual datasets.

===Module Selection & Navigation ===

The Module Selection & Navigation toolbar provides options for searching for module names, selecting from a module menu, and moving backward and forward through the module selection history for convenience.

===Core Modules ===

The Core Module Toolbar provides shortcuts to your "Home" module, and some of Slicer's core modules including
* Models
* Transforms
* Data
* Volumes
* Annotations
* Interactive Editor

===Layouts ===

The Layout Toolbar provides a drop-down menu of layouts useful for many types of studies. When Slicer is exited normally, the selected layout is saved and restored as part of the Application state.

[[image:Slicer4Layouts.jpg | center]]

===Mouse Modes ===

[[image:Slicer4MouseModeToolbar.jpg | center]]

Slicer has two mouse modes: '''Transform''' (which allows interactive rotate, translate and zoom
operations), and '''Place''' (which permits objects to be interactively placed in 3D or 2D). The toolbar icons
that switch between these mouse modes are shown from left to right above, respectively. '''Place Fiducial'''
is the default place option as shown above; options to place both '''Ruler''' and '''Region of Interest''' Widgets
are also available from the drop-down Place Mode menu.

'''Hint: Transform''' mode is the default interaction mode. By default, '''Place''' mode persists for one "place"
operation after the Place Mode icon is selected, and then the mode switches back to Transform. Place mode
can be made persistent (useful for creating multiple fiducial points, rulers, etc.) by checking the
'''Persistent''' checkbox shown rightmost in the Mouse Mode Toolbar.

===Screenshots & Scene Views ===

This toolbar presents options for capturing screenshots and '''Scene Views'''. A Scene View is a description of the state of the MRML scene at the time of its capture that can be restored at any time. This mechanism is useful for preparing and viewing multiple interesting presentations of a complicated dataset.

===Crosshair Options ===

The Crosshair Toolbar provides a set of options for customizing the appearance and behavior of the crosshairs across all Slice Viewers.

[[ image:Slicer4CrosshairOptions.jpg | center]]

==Module Panel==

Any selected module in Slicer will display its user interface in the '''Module Panel'''. The panel may be undocked (by left-clicking & dragging the panel chrome or by selecting its undock icon; hidden by selecting the hide (X) icon, or have its display toggled by selecting View->Module Panel. The panel can be re-docked by double-clicking on its chrome.

==Data Probe==

The Data Probe interactively reports data values at voxels indexed by the current mouse position in all layers (Label, Foreground and Background).

== 3D Viewer ==

Access the 3D Viewer Controller by mousing over the '''push-pin''' icon in the top left corner of any 3D Viewer. The panel may be opened persistently by clicking the push-pin icon which effectively "pins" it open. Clicking again "unpins" the panel. Next to the push-pin, a unique ID may be found that distinguishes this 3D viewer from other 3D viewers that may have been created when other layouts were selected. The panel contains options for setting the viewpoint direction, and configuring the appearance and behavior of any 3D Viewer.

[[image:Slicer43DViewController.jpg | center ]]

== Slice Viewers ==

Access any Slice Viewer's Controller by mousing over its '''push-pin''' icon in the top left corner of any slice viewer. The panel may also be opened persistently by clicking the push-pin icon. Next to the push-pin a unique ID may be found that distinguishes the particular Slice Viewer from other Slice Viewers that may have been created when other layouts were selected. A '''Slice Scrollbar''' is provided for manually sweeping through slices and a slice number entry widget is also provided at the top right of the display for manually indexing a particular slice. Each Slice Viewer contains options for displaying each of the layers (Foreground, Background and Label) including their visibility in the 3D viewer.

Some Slice Viewer configuration options may be applied to '''one or all''' Slice Viewers by using the '''Link''' option. When viewers are unlinked, an option applies only to the viewer being adjusted. When viewers are linked, the option will apply to '''all''' Slice Viewers. Link and Unlink are persistent settings, and the additional '''Hot-Link''' option available from the pull-down menu applies only for one mouse operation.

[[image:Slicer4SliceViewController.jpg | center]]

== Mouse & Keyboard Across Platforms ==

Below is basic information about how to use the three-, two-, and one-button mouse (or trackpad) on
Windows, Mac, and Linux platforms to perform basic interaction operations in Slicer.

===Adjusting Window & Level on All Platforms===

Left-clicking and dragging the mouse in any Slice viewer is a quick way to adjust Window and Level. Adjust the middle value (level) of the greyscale window by moving the mouse up (increase level) or down (decrease level), and adjust the greyscale window size by moving the mouse to the left (decrease window size) or right (increase window size). Slicer's '''Volumes Module''' provides a "Display" interface panel for making more precise adjustments.

===Selecting & Manipulating on All Platforms ===

Mousing over any "pickable" object in any of Slicer's viewers will cause the cursor to change from a "pointer"
into a "picking hand". When the cursor shows a picking hand, left-clicking and dragging the mouse will pick and
manipulate the object. Releasing the mouse button will deselect the object.

===Viewer Cross-Reference on All Platforms ===

Holding down the '''Shift-Key''' while moving the mouse in any Slice Viewer will cause other
Slice Viewers to interactively scroll to the same RAS position indexed by the mouse. This feature
is useful when inspecting multiple registered studies.

===Zoom In & Out in Slice & 3D Viewers ===

* '''Windows, Mac & Linux''' with
** '''3-Button Mouse:''' Right-click & drag down & up
** '''2-Button Mouse:''' Right-click & drag down & up
** '''1-Button Mouse:''' Ctrl+Left-click & drag down & up
* '''Mac with trackpad''': two-finger click & drag

===Pan (Translate) in Slicer & 3D Viewers ===

* '''Windows, Mac & Linux''' with
** '''3-Button Mouse:''' Middle-click & drag
** '''2-Button Mouse:''' Shift+Left-click & drag
** '''1-Button Mouse:''' Shift+Left-click & drag

===Rotate in 3D Viewers ===

* '''Windows, Mac & Linux''' with
** '''3-Button Mouse:''' Left-click & drag
** '''2-Button Mouse:''' Left-click & drag
** '''1-Button Mouse:''' Left-click & drag


{{documentation/{{documentation/version}}/slicerapplication-footer}}

Documentation/4.0/SlicerApplication/KeyboardShortcuts

2011-11-25T06:05:29Z

2011-11-25T05:25:22Z

Wjp:

{{documentation/{{documentation/version}}/slicerapplication-header}}


=Overview=

Slicer4's main desktop interface provides top-level access to most commonly-used features, and organizes them into logical groupings. These groups of features are presented in a number of interface panels on the GUI, as is illustrated in the basic layout below. The interface is designed to be easy to learn and remember, to ease navigation of Slicer's large (and growing) functionality, and to easily collapse and hide when you don't need to see it. Figures A through I in the "Individual frames" gallery a little further down on this page provide richer detail and will be described in the following sections.

The main components of Slicer's application GUI are

* Application '''Menu'''
* Application '''Toolbar'''
* '''Module GUI''' Panel
* Interactive '''Data Probe'''
* Viewer Panel
** One Main '''3D Viewer''' (by default)
** Three Main '''Slice Viewers''' (by default)
* Application '''Message''' Bar

These components are indicated in the figure below and are described in more detail in the following sections.

[[image: Slicer4ApplicationGUIMap.jpg ]]

==Application Menu==

Slicer's Application Menu contains many useful features. A brief overview of some of these is given below.

=== File Menu===
The File Menu contains options for loading a MRML scene, for downloading sample datasets from the internet, or individual datasets of various types. An option for saving scenes and data is also provided here.

===Customize Slicer from the Edit Menu===
The Edit menu contains an option to raise the Application Settings Interface. This interface allows users to customize their installation of Slicer. '''Edit->Application Settings'' can be used to include or suppress various Slicer modules, to customize the appearance of your Python Interactor, to select a custom font, to specify a temporary directory, and to accomplish other customizations as well.

===View Menu===
This menu contains options to raise the Python Interactor and the Error Log, both useful developer tools. Menu options to switch layouts, and to toggle the display of individual toolbars and the module GUI panels are also provided under the View Menu.

[[image: Slicer4AppMenu.jpg | center]]

==Application Toolbar==

The Application Toolbar provides shortcuts to many useful sets of functionality. The following toolbars appear here by default, and this set of toolbars may be customized from Slicer's View Menu.

===Load & Save Options===

The '''Load Scene''' option will raise a browser to select and load a collection of data as a MRML scene. This option clears the existing scene and resets the application state. The '''Save''' option will raise the "Save Data" Interface which offers a variety of options for saving MRML scenes and individual datasets.

===Module Selection & Navigation ===

The Module Selection & Navigation toolbar provides options for searching for module names, selecting from a module menu, and moving backward and forward through the module selection history for convenience.

===Core Modules ===

The Core Module Toolbar provides shortcuts to your "Home" module, and some of Slicer's core modules including
* Models
* Transforms
* Data
* Volumes
* Annotations
* Interactive Editor

===Layouts ===

The Layout Toolbar provides a drop-down menu of layouts useful for many types of studies. When Slicer is exited normally, the selected layout is saved and restored as part of the Application state.

[[image:Slicer4Layouts.jpg | center]]

===Mouse Modes ===

[[image:Slicer4MouseModeToolbar.jpg | center]]

Slicer has two mouse modes: '''Transform''' (which allows interactive rotate, translate and zoom
operations), and '''Place''' (which permits objects to be interactively placed in 3D or 2D). The toolbar icons
that switch between these mouse modes are shown from left to right above, respectively. '''Place Fiducial'''
is the default place option as shown above; options to place both '''Ruler''' and '''Region of Interest''' Widgets
are also available from the drop-down Place Mode menu.

'''Hint: Transform''' mode is the default interaction mode. By default, '''Place''' mode persists for one "place"
operation after the Place Mode icon is selected, and then the mode switches back to Transform. Place mode
can be made persistent (useful for creating multiple fiducial points, rulers, etc.) by checking the
'''Persistent''' checkbox shown rightmost in the Mouse Mode Toolbar.

===Screenshots & Scene Views ===

This toolbar presents options for capturing screenshots and '''Scene Views'''. A Scene View is a description of the state of the MRML scene at the time of its capture that can be restored at any time. This mechanism is useful for preparing and viewing multiple interesting presentations of a complicated dataset.

===Crosshair Options ===

The Crosshair Toolbar provides a set of options for customizing the appearance and behavior of the crosshairs across all Slice Viewers.

[[ image:Slicer4CrosshairOptions.jpg | center]]

==Module Panel==

Any selected module in Slicer will display its user interface in the '''Module Panel'''. The panel may be undocked (by left-clicking & dragging the panel chrome or by selecting its undock icon; hidden by selecting the hide (X) icon, or have its display toggled by selecting View->Module Panel. The panel can be re-docked by double-clicking on its chrome.

==Data Probe==

The Data Probe interactively reports data values at voxels indexed by the current mouse position in all layers (Label, Foreground and Background).

== 3D Viewer ==

Access the 3D Viewer Controller by mousing over the '''push-pin''' icon in the top left corner of any 3D Viewer. The panel may be opened persistently by clicking the push-pin icon which effectively "pins" it open. Clicking again "unpins" the panel. Next to the push-pin, a unique ID may be found that distinguishes this 3D viewer from other 3D viewers that may have been created when other layouts were selected. The panel contains options for setting the viewpoint direction, and configuring the appearance and behavior of any 3D Viewer.

[[image:Slicer43DViewController.jpg | center ]]

== Slice Viewers ==

Access any Slice Viewer's Controller by mousing over its '''push-pin''' icon in the top left corner of any slice viewer. The panel may also be opened persistently by clicking the push-pin icon. Next to the push-pin a unique ID may be found that distinguishes the particular Slice Viewer from other Slice Viewers that may have been created when other layouts were selected. A '''Slice Scrollbar''' is provided for manually sweeping through slices and a slice number entry widget is also provided at the top right of the display for manually indexing a particular slice. Each Slice Viewer contains options for displaying each of the layers (Foreground, Background and Label) including their visibility in the 3D viewer.

Some Slice Viewer configuration options may be applied to '''one or all''' Slice Viewers by using the '''Link''' option. When viewers are unlinked, an option applies only to the viewer being adjusted. When viewers are linked, the option will apply to '''all''' Slice Viewers. Link and Unlink are persistent settings, and the additional '''Hot-Link''' option available from the pull-down menu applies only for one mouse operation.

[[image:Slicer4SliceViewController.jpg | center]]

== Mouse & Keyboard Across Platforms ==

Below is basic information about how to use the three-, two-, and one-button mouse (or trackpad) on
Windows, Mac, and Linux platforms to perform basic interaction operations in Slicer.

===Adjusting Window & Level on All Platforms===

Left-clicking and dragging the mouse in any Slice viewer is a quick way to adjust Window and Level. Adjust the middle value (level) of the greyscale window by moving the mouse up (increase level) or down (decrease level), and adjust the greyscale window size by moving the mouse to the left (decrease window size) or right (increase window size). Slicer's '''Volumes Module''' provides a "Display" interface panel for making more precise adjustments.

===Selecting & Manipulating on All Platforms ===

Mousing over any "pickable" object in any of Slicer's viewers will cause the cursor to change from a "pointer"
into a "picking hand". When the cursor shows a picking hand, left-clicking and dragging the mouse will pick and
manipulate the object. Releasing the mouse button will deselect the object.

===Viewer Cross-Reference on All Platforms ===

Holding down the '''Shift-Key''' while moving the mouse in any Slice Viewer will cause other
Slice Viewers to interactively scroll to the same RAS position indexed by the mouse. This feature
is useful when inspecting multiple registered studies.

===Zoom In & Out in Slice & 3D Viewers ===

* '''Windows, Mac & Linux''' with
** '''3-Button Mouse:''' Right-click & drag down & up
** '''2-Button Mouse:''' Right-click & drag down & up
** '''1-Button Mouse:''' Ctrl+Left-click & drag down & up
* '''Mac with trackpad''': two-finger click & drag

===Pan (Translate) in Slicer & 3D Viewers ===

* '''Windows, Mac & Linux''' with
** '''3-Button Mouse:''' Middle-click & drag
** '''2-Button Mouse:''' Shift+Left-click & drag
** '''1-Button Mouse:''' Shift+Left-click & drag

===Rotate in 3D Viewers ===

* '''Windows, Mac & Linux''' with
** '''3-Button Mouse:''' Left-click & drag
** '''2-Button Mouse:''' Left-click & drag
** '''1-Button Mouse:''' Left-click & drag


{{documentation/{{documentation/version}}/slicerapplication-footer}}

2011-09-11T18:24:17Z

Wjp: uploaded a new version of "File:SlicerViewerColors.png"

File:SlicerViewerColors.png

2011-09-11T18:22:15Z

Wjp: uploaded a new version of "File:SlicerViewerColors.png"

2011-09-11T18:02:11Z

Wjp: /* Slicer Reserved Colors and Viewer Colors Registry */

[[Slicer4:Developers#Projects|Back to Slicer 4 Developer Projects]]

= Project Description =
Ron would like to see a scalable architecture for the visual appearance of Slicer viewers as we add more types of elements and more of them. This architecture will also need to be able to accommodate new types of viewers such as graphs and tables.

We would also like to prepare a guide for developers of new types of viewers:
* that ensures that all viewers have a consistent visual and interaction design,
* and that makes it simpler for a developer to implement their viewer.

=Proposed Look-Up Table (this is under development)=
* see [http://www.w3.org/TR/SVG/types.html#ColorKeywords ColorKeywords] for names of colors
* see also the [[Slicer3:Human_Interface_and_Style_Guide_for_Developers#Colors:_application_palettes|Slicer 3 Colors]]

{|border="1"
|-
|width="20%" style="background:black;color:white"|Background: black
|width="5%" style="background:black"|
|width="20%" style="background:orangered;color:white"| Axial Viewer: orangered
|width="5%" style="background:orangered"|
|width="20%" style="background:gold;color:white"|Sagittal Viewer: gold
|width="5%" style="background:gold"|
|width="20%" style="background:yellowgreen;color:white"|Coronal Viewer yellowgreen
|width="5%" style="background:yellowgreen"|
|-
|style="background:darkorange;color:white"|CompareViewer darkorange
|style="background:darkorange"|
|style="background:rgb(162,160,224);color:white"|3D Viewer rgb(162,160,224)
|style="background:rgb(162,160,224)"|
|style="background:lightsteelblue;color:white"|test: lightsteelblue
|style="background:lightsteelblue"|
|style="background:gold;color:white"|Sagittal Viewer: gold
|style="background:gold"|
|-
|style="background:gold;color:white"|Sagittal Viewer: gold
|style="background:gold"|
|style="background:gold;color:white"|Sagittal Viewer: gold
|style="background:gold"|
|style="background:gold;color:white"|Sagittal Viewer: gold
|style="background:gold"|
|style="background:gold;color:white"|Sagittal Viewer: gold
|style="background:gold"|
|-
|style="background:gold;color:white"|Sagittal Viewer: gold
|style="background:gold"|
|style="background:gold;color:white"|Sagittal Viewer: gold
|style="background:gold"|
|style="background:gold;color:white"|Sagittal Viewer: gold
|style="background:gold"|
|style="background:gold;color:white"|Sagittal Viewer: gold
|style="background:gold"|
|-
|style="background:gold;color:white"|Sagittal Viewer: gold
|style="background:gold"|
|style="background:gold;color:white"|Sagittal Viewer: gold
|style="background:gold"|
|style="background:gold;color:white"|Sagittal Viewer: gold
|style="background:gold"|
|style="background:gold;color:white"|Sagittal Viewer: gold
|style="background:gold"|
|-
|}

==Slicer Reserved Colors and Viewer Colors Registry==

{|border="1"
|-
|width="5%" style="background:grey;color:black"| '''Color'''
|width="10%" style="background:grey;color:black"|'''Name'''
|width="40%" style="background:grey;color:black"|'''Use'''
|width="25%" style="background:grey;color:black"|'''Developer(s)'''
|width="10%" style="background:grey;color:black"|'''HEX'''
|width="10%" style="background:grey;color:black"|'''RGB'''
|-
|width="5%" style="background:white;color:black"|
|width="10%" style="background:white;color:black"|White
|width="40%" style="background:white;color:black"|Indicates active slice/frame in a multi-slice/frame viewer.
|width="25%" style="background:white;color:black"|Core
|width="10%" style="background:white;color:black"|#ffffff
|width="10%" style="background:white;color:black"|255 255 255
|-
|width="5%" style="background:#c0c0c0;color:black"|
|width="10%" style="background:white;color:black"|Grey1
|width="40%" style="background:white;color:black"|Unused
|width="25%" style="background:white;color:black"|
|width="10%" style="background:white;color:black"|#c0c0c0
|width="10%" style="background:white;color:black"|192 192 192
|-
|width="5%" style="background:#676767;color:black"|
|width="10%" style="background:white;color:black"|Grey2
|width="40%" style="background:white;color:black"|Unused
|width="25%" style="background:white;color:black"|
|width="10%" style="background:white;color:black"|#676767
|width="10%" style="background:white;color:black"|103 103 103
|-
|width="5%" style="background:#4f4f4f;color:black"|
|width="10%" style="background:white;color:black"|Grey3
|width="40%" style="background:white;color:black"|Unused
|width="25%" style="background:white;color:black"|
|width="10%" style="background:white;color:black"|#4f4f4f
|width="10%" style="background:white;color:black"|79 79 79
|-
|width="5%" style="background:#383838;color:black"|
|width="10%" style="background:white;color:black"|Grey4
|width="40%" style="background:white;color:black"|Unused
|width="25%" style="background:white;color:black"|
|width="10%" style="background:white;color:black"|#383838
|width="10%" style="background:white;color:black"|38 38 38
|-
|width="5%" style="background:#000000;color:black"|
|width="10%" style="background:white;color:black"|Black
|width="40%" style="background:white;color:black"|3D Viewer Background & Default Widget Text
|width="25%" style="background:white;color:black"|
|width="10%" style="background:white;color:black"|#000000
|width="10%" style="background:white;color:black"|0 0 0
|-
|width="5%" style="background:#e6cf49;color:black"|
|width="10%" style="background:white;color:black"|Yellow
|width="40%" style="background:white;color:black"|Saggital Slice Viewer
|width="25%" style="background:white;color:black"|Core
|width="10%" style="background:white;color:black"|#e6cf49
|width="10%" style="background:white;color:black"|230 207 73
|-
|width="5%" style="background:#f6f2c2;color:black"|
|width="10%" style="background:white;color:black"|Light Yellow
|width="40%" style="background:white;color:black"|Unused
|width="25%" style="background:white;color:black"|Core
|width="10%" style="background:white;color:black"|#f6f2c2
|width="10%" style="background:white;color:black"|246 242 194
|-
|width="5%" style="background:#ded6a5;color:black"|
|width="10%" style="background:white;color:black"|Wheat
|width="40%" style="background:white;color:black"|Unused
|width="25%" style="background:white;color:black"|Core
|width="10%" style="background:white;color:black"|#ded6a5
|width="10%" style="background:white;color:black"|222 214 165
|-
|width="5%" style="background:#d5d86f;color:black"|
|width="10%" style="background:white;color:black"|Buff Yellow
|width="40%" style="background:white;color:black"|Unused
|width="25%" style="background:white;color:black"|Core
|width="10%" style="background:white;color:black"|#d5d86f
|width="10%" style="background:white;color:black"|213 216 111
|-
|width="5%" style="background:#c19a1c;color:black"|
|width="10%" style="background:white;color:black"|Yellow Ochre
|width="40%" style="background:white;color:black"|Unused
|width="25%" style="background:white;color:black"|Core
|width="10%" style="background:white;color:black"|#c19a1c
|width="10%" style="background:white;color:black"|193 154 28
|-
|width="5%" style="background:#765d10;color:black"|
|width="10%" style="background:white;color:black"|Camel
|width="40%" style="background:white;color:black"|Unused
|width="25%" style="background:white;color:black"|Core
|width="10%" style="background:white;color:black"|#765d10
|width="10%" style="background:white;color:black"|118 93 16
|-
|width="5%" style="background:#ef4832;color:black"|
|width="10%" style="background:white;color:black"|Red
|width="40%" style="background:white;color:black"|Axial Slice Viewer
|width="25%" style="background:white;color:black"|Core
|width="10%" style="background:white;color:black"|#ef4832
|width="10%" style="background:white;color:black"|239 72 50
|-
|width="5%" style="background:#6cad49;color:black"|
|width="10%" style="background:white;color:black"|Green
|width="40%" style="background:white;color:black"|Coronal Slice Viewer
|width="25%" style="background:white;color:black"|Core
|width="10%" style="background:white;color:black"|#6cad49
|width="10%" style="background:white;color:black"|108 173 73
|-
|width="5%" style="background:#707ee2;color:black"|
|width="10%" style="background:white;color:black"|Blue
|width="40%" style="background:white;color:black"|3D Viewers
|width="25%" style="background:white;color:black"|Core
|width="10%" style="background:white;color:black"|#707ee2
|width="10%" style="background:white;color:black"|112 126 226
|-
|width="5%" style="background:#a2a0e0;color:black"|
|width="10%" style="background:white;color:black"|Slicer Blue
|width="40%" style="background:white;color:black"|Default background on 3D Viewers
|width="25%" style="background:white;color:black"|Core
|width="10%" style="background:white;color:black"|#a2a0e0
|width="10%" style="background:white;color:black"|162 160 224
|-
|width="5%" style="background:#8c8c8c;color:black"|
|width="10%" style="background:white;color:black"|Grey
|width="40%" style="background:white;color:black"|Generic Slice Viewers
|width="25%" style="background:white;color:black"|Core
|width="10%" style="background:white;color:black"|#8c8c8c
|width="10%" style="background:white;color:black"|140 140 140
|-
|width="5%" style="background:#de6e11;color:black"|
|width="10%" style="background:white;color:black"|Orange
|width="40%" style="background:white;color:black"|Compare Viewers
|width="25%" style="background:white;color:black"|Core
|width="10%" style="background:white;color:black"|#de6e11
|width="10%" style="background:white;color:black"|222 110 17
|-
|}

= Notebook for Slicer 4 Presentation Layer Design =

== Notes & Sketches (Chronologically listed) ==

=== '''On Color-coding viewers & Qt Colors''' ===
[[image:Slicer-MainGui-2011-08-03-Win.PNG |thumb|px400| Slicer default appearance as of 7-32: Slim-line color bars with sliders and pop up]]

* (from Jim) Many of the viewers we are using colors from the Qt palette. The viewer "name" is color alias that is recognized by Qt. But it doesn't need to be this way. We could always go through a lookup to map viewers with nonstandard color names as the viewer name to a RGB triple. We'll just need to slip in that mapping in the appropriate places. Qt accepts "named colors" from the SVG color keywords. See http://www.w3.org/TR/SVG/types.html#ColorKeywords. Qt can also take ANY color specified as RGB, HSV, etc. components.

* (from Julien) There are 2 kinds of palettes:
** a general "Qt application GUI" palette (color of the background, buttons, text, shadings, highlight color). This is QPalette.
** a Slicer/MRML specific palette: color of the slice views, renderer background color of the 3D view, highlight of current view (slice or 3D). For now there is no placeholder for such a palette. I somewhat started to gather them in qMRMLColors.h/cxx. However, I believe it should be a VTK/MRML palette. Where MRML could provide a default palette, that can be extended/replaced by a Slicer palette.

* (from Julien) I've noticed there has been some work done in the past to allow such kind of feature: Slicer4\Modules\Meshing\BuildingBlock\vtkSlicerColor.h/cxx. I'm not sure in what extend we could reuse/generalize that work. For information, vtkMRMLViewNode already hardcodes the light blue background color.

* (question from Julien) Shall we make such a palette a singleton in MRML, or should it be a vtkMRMLScene member, other ideas ?

* (from Jim) The colors for the various viewers feels more like "application settings" or "look and feel" than MRML. I don't feel strongly about this but I wonder if the colors just need to be accessible from the Application object. I guess since we store things like the layout in MRML, it would make sense for the available colors to decorate the UI also be established in MRML.

* (from Wen) A first suggestion for how to color-code and ID viewers -- straw man for discussion:
[[image:SlicerViewers0.png |thumb|px400| Mock-up from 8/02: Viewer type color coding and ID (need to revise this with new roll-over color bar)]]

** Keep Slicer Axi/Sag/Cor color coding, and all other individual slice viewers are grey
** Keep Compare Viewers Orange
** Make 3D viewers blue (better shade than in mockup!)
** darken down the hairline frame around all viewers so "active" viewer is more apparent.
** Multiple viewers of same viewer-type get a numerical ID
** Create list of colors that developers register new viewer types to...
** Helper code to create a viewer frame with same appearance & behavior

[[image:SlicerViewers-Hi1.png |thumb|px400| Mock-up from 8/02: Active Viewer Color = White for all viewer types (need to revise this with new roll-over color bar)]]

** Question: Will we have more than one active viewer?
***what would be a use case scenario?
***what does active mean?

[[image:SlicerViewers-Hi2.png |thumb|px400| Mock-up from 8/02: Active Viewer Color = White for all viewer types (need to revise this with new roll-over color bar)]]

** Lighten display up: if GUI panels are collapsed by default, and only expose on rollover, then we don't need to tie the image viewer to the color bar with a hairline of the same color. We can just use a just-noticeable grey divider which turns white on highlight. This may clean up the overall appearance a bit.
[[image:SlicerViewers-Hi3.png |thumb|px400| Mock-up from 8/02: Cleaner viewer appearance (need to revise this with new roll-over color bar)]]

** Mockup with new rollover design. Larger area for rollover activation of controls and clicking to pin them open (easier to hit a larger target.) Gap between the hot area and the slice scroller to minimize mistakes. Slice numbers always visible and editable. Active window shown with a symbol and white outline.
[[image:SlicerViewers1.png | thumb | px400 | Mock-up from 8/12. Cleaner viewer appearance and modified interaction -- for discussion.]]

** Mockup with extra gap to minimize inter-viewer clicking mistakes.
[[image:SlicerViewers2.png | thumb | px400 | Mock-up from 8/12 incorporating Ron's comments. Minimizing selection errors among viewers.]]

** Mockup with link status displayed AND with recenter button exposed on 3D viewers as per Ron's suggestion. Suggestion to make controls hug the widget boundary on right viewer side (if controls exceed some minimum width requirement) to make it clearer that they belong to a viewer, rather than that they are an independent window full of widgets...
[[image:SlicerViewers3.png | thumb | px400 | Mock-up from 8/15 incorporating Ron's comments. Expose link status and control to re-center 3D views. Non-orange highlights on compare view. (Does this require more problem-solving?)]]

** Draft palette for viewer colors against which developers register

[[image:SlicerViewerColors.png | Draft Palette ]]

=== '''Slice Controller scetches''' ===

[[SliceControllerSketches | Link to sketches for controllers]]

=== '''Summary from tcon discussion 8/2/2011:''' Three types of "colors" in Slicer4 ===

'''1.''' Qt application "skin" which can be selected through an Application Settings interface. This includes background, buttons, text, shadings ''etc.''
* This is implemented as a QPalette.

'''2.''' Slicer reserved colors that should-not be adjusted by the user.
* Colors of the roll-over bar on specific viewer types (Slice Red, Yellow, Green for example) should not change. This permits all Slicer users to discuss presentation of data in a consistent way, independent of how Slicer's presentation layer is styled.

'''3.''' MRML-specific colors that are restored with the scene. This includes 3D view background color, Fiducial color, etc.
* The set of color options are currently being collected in qMRMLColors.h/cxx.

'''QUESTIONS'''

* A question remains on which category color-styling of vtk widgets falls under (e.g. colors of widget handles and highlights). Importantly, widget handle and highlight colors form a visual language that a user understands (grab here, this grabbed guy is active, etc.) Changing these color codes is effectively breaking the rules of that language. A user has to experiment to verify that they understand the interactive behavior of the widget. For this reason, wjp recommends we categorize widget handle colors as color type "2" above -- Slicer-reserved that are not adjustable.
**being able to change the color of a fiducial is important. E.g. I have two fiducial lists and I would like to make one bone colored and one vein colored. Is the color of the fiducial a handle?
* How to implement Color type 2 -- also as part of qMRMLColors.h/cxx?

'''SKINS'''

Alternative appropriate skins should be exposed as options under an Application Settings Interface. Skins that are tailored to different use cases (radiology reading room, or in the OR e.g.) are of interest. Skins may or may not be specified in the MRML scene, but if a scene is loaded, a user's skin should not change automatically -- maybe a viewer is prompted for whether they want to switch to the application interface appearance described in the scene file, or whether they want to preserve their own.

Julien has sent Wen instructions for how to create skins in Qt.

= Guidelines for Developers of New Viewers =