HackMD
Slicer Slice Viewer Icons
Below is a current snapshot of icons for Slicer's Slice Viewers.
To create NEW icons to add to this set, please follow [this simple workflow NOT YET LINKED]. The workflow will refer icon designers to Slicer's [Icon Design Guildelines] and Slicer's [Color Palette] to ensure new icons are visually compatible with Slicer's icons and that they work well in both Dark and Light Themes.
Icon set symbolics
-
Source (volumes): orthographic cube
-
Image|view|slice: plane with axis & 4 quadrants OR 4 voxels
-
Action/processing: green/amber object color TBD
-
Plane with bar across top: slice|image viewer
-
Segmentations: shows dyadic (2D and 3D) construct
-
Label maps: show 2D (label per sample in image|view)
Refactored Volumes and Models Module Icons
Volumes Module Icon Modified to reflect 3D rather than 2D representation.
Models Module Icon Also, two versions of Models Module Icon are checked into github, one simple with no fill, and the other with fill color consistent with segmentation model symbology. The team can choose which is preferred for use.
- The image was uploaded to a note which you don't have access to
- The note which the image was originally uploaded to has been deleted
Lightbox View Configuration icons
We discussed in developer mtg moving lightbox out slice viewer. Created viewer config icons for lightbox view in R|Y|G viewers, in case this functionality is added to Viewer Configuration Icons, where it seems appropriate to include. These are checked into github.
- The image was uploaded to a note which you don't have access to
- The note which the image was originally uploaded to has been deleted
- The image was uploaded to a note which you don't have access to
- The note which the image was originally uploaded to has been deleted
New Colors (Choose between ActionGreen and ActionAmber)
Slice Viewer Action Green:
- HEX #1FAD42FF
- RGB 31 173 66
SliceViewer Action Amber (LightTheme):
- RGB 237 136 0
- HEX #ED8800FF
SliceViewer Action Amber (DarkTheme):
- RGB 250 159 0
- HEX #FA9F00FF
Slicer Segmentation and Label Grid Green (LightTheme):
- HEX #738C79FF
- RGB 115 140 121
Slicer Segmentation and Label Grid Green (DarkTheme):
- HEX #56695BFF
- RGB 86 105 91
Slicer Segmentation and Label Outline Green:
- HEX #14CC42FF
- RGB 20 204 66
TODO: Final color decisions:
Colors we have for important conceptual coding: Green is easily perceived in both Dark/Light themes. We can also use orange/amber (mixes of primarily green and red) and cyans (mixes of primarily green and blue) for important color codes, but these will likely want to be HSL-tuned a little for best effect on both dark and light background. That means more stroke-fill color swapping when switching themes.
Lock in a color for 'segmenation' (green or cyan?). This choice will actually be a TRIAD of related colors – muted for FILL; saturated for OUTLINE; and darkened muted for "SAMPLING GRID/MODEL WIREFRAME". The pattern is used most heavily in the slice viewers and segment editor module, so pick a color you will like to see a lot of.
Lock in a different color for 'action' (green, amber?). This color will be used application-wide in slicer, including in editor.
Update palette with Color Choice.**
Full Icon set for Slice Viewers Light Theme (both options V2 & V3)
Light Theme V2
- The image was uploaded to a note which you don't have access to
- The note which the image was originally uploaded to has been deleted
Light Theme V3
- The image was uploaded to a note which you don't have access to
- The note which the image was originally uploaded to has been deleted
Full Icon set for Slice Viewers Dark Theme (both options V2 & V3)
Dark Theme V2
- The image was uploaded to a note which you don't have access to
- The note which the image was originally uploaded to has been deleted
Dark Theme V3
- The image was uploaded to a note which you don't have access to
- The note which the image was originally uploaded to has been deleted
Slice Viewer Mockups
Light Theme V2
- The image was uploaded to a note which you don't have access to
- The note which the image was originally uploaded to has been deleted
Dark Theme V2
- The image was uploaded to a note which you don't have access to
- The note which the image was originally uploaded to has been deleted
Light Theme V3
- The image was uploaded to a note which you don't have access to
- The note which the image was originally uploaded to has been deleted
Dark Theme V3
- The image was uploaded to a note which you don't have access to
- The note which the image was originally uploaded to has been deleted
Color-coding consideration:
V2 presents a lot of green, and green is double-coded to mean BOTH Segmentation and Action on an image/slice/view here. The saturated green is distinct enough from segmentation green, but making this distinction clearer would be best for interpretation (and teaching). V3 makes -PRESENTATION OF- and -ACTION ON- a view/object much more distinct at a glance.
Grouped descriptions of icons (only V2 shown)
Slice Viewer R|Y|G Toolbars
Pin|Unpin, Viewer R|G|Y Label, Reset Field of View, Max|Minimize View.
- The image was uploaded to a note which you don't have access to
- The note which the image was originally uploaded to has been deleted
Font chosen is Gill Sans, but do choose what you like.
Main Toolbar Viewer & View UI
Hide|Show UI, Link|Unlink, Visible|Invisible, Axial|Sagittal|Coronal, Lightbox, Hide|Show Reformat Widget, Blend Mode, Slice Spacing, Rotate to Volume Plane, Orientation Markers, Ruler Display, Thick Slab Recon. Compare the current UI with proposed mockup below.
[Again, trying out Axi/Sag/Cor icons - for discussion. I think these are pretty clear about slice plane orientation while being view-direction-agnostic.]
- The image was uploaded to a note which you don't have access to
- The note which the image was originally uploaded to has been deleted
Foreground and Background Layers
Foreground Layer Label, InterpolationON|InterpolationOFF
- The image was uploaded to a note which you don't have access to
- The note which the image was originally uploaded to has been deleted
Background Layer Label, InterpolationON|InterpolationOff
- The image was uploaded to a note which you don't have access to
- The note which the image was originally uploaded to has been deleted
Label Map Layers Icons convey strictly 2D construct.
Label Layer Label, Visible|Invisible, Label Display Options: Fill|Outline|Fill+Outline
- The image was uploaded to a note which you don't have access to
- The note which the image was originally uploaded to has been deleted
Segmentation Layers Icons convey dyadic 2D/3D construct.
Segmentation Layer Label, Visible|Invisible, Segmentation Display Options: Fill|Outline|Fill+Outline, Each Segment Visibility (discussed excluding this element in meeting.)
- The image was uploaded to a note which you don't have access to
- The note which the image was originally uploaded to has been deleted
