Difference between revisions of "Slicer4:UIDesign"

From Slicer Wiki
Jump to: navigation, search
(Created page with '= Notebook for Slicer4 UI Design work =')
 
 
(61 intermediate revisions by 2 users not shown)
Line 1: Line 1:
 +
[[Slicer4:Developers#Projects|Back to Slicer 4 Developer Projects]]
 +
 +
[[Slicer3:UIDesign | Go to Slicer3 UI Design page]]
 +
 
= Notebook for Slicer4 UI Design work =
 
= Notebook for Slicer4 UI Design work =
 +
 +
==Codes to mark Notebook entries==
 +
 +
These wiki pages can be hard to parse. Here's an experiment for marking feedback to make it easier to parse; (copy, paste and customize from below).
 +
 +
[[Image:Opinion.png]] '''(wjp)''' Add a general comment or opinion.
 +
 +
[[Image:Usability.png]] Flag a usability problem.
 +
 +
[[Image:Idea.png]] Mark an idea.
 +
 +
[[Image:Sketch.png]] [[Slicer3:UIDesign#Codes_to_mark_contributions | Mark a link to related info.]]
 +
 +
[[Image:Bug.png]] Report a bug.
 +
 +
[[Image:Fire.png]] Report a really bad bug that's blocking work progress, or causing a crash.
 +
 +
[[Image:MissingOrStaleDoc.png]] Report missing documentation.
 +
 +
[[Image:MissingOrStaleDocLink.png]] Report bad documentation link.
 +
 +
[[Image:WeakDoc.png]] Report insufficient documentation.
 +
 +
=Application GUI styling experiments =
 +
 +
=Application Icons =
 +
 +
==Icons for Layouts ==
 +
 +
==Icons for Slice Viewers ==
 +
 +
==Icons for 3D Viewers ==
 +
 +
==Toolbar Icons for Slicer Base Modules ==
 +
 +
 +
{| border="1" cellpadding="5"
 +
|- style="background:#ffffff; color:black" align="left"
 +
| style="width:20%" | '''Icon Name'''
 +
| style="width:20%" | '''Vector Large (svg)'''
 +
| style="width:20%" | '''Image 128x128'''
 +
| style="width:20%" | '''Vector Medium (svg)'''
 +
| style="width:18%" | '''Image 64x64'''
 +
| style="width:20%" | '''Vector Small (svg)'''
 +
| style="width:12%" | '''Image 32x32'''
 +
| style="width:20%" | '''Vector Wee (svg)'''
 +
| style="width:10%" | '''Slicer3 21x21'''
 +
| style="width:20%" | '''Where to use'''
 +
|-
 +
| SlicerHome.png
 +
| [[file:SlicerHome-Large.svg | SlicerHome-Large.svg]]
 +
| [[image:SlicerHome-Large.png]]
 +
| [[file:SlicerHome-Medium.svg | SlicerHome-Medium.svg]]
 +
| [[image:SlicerHome-Medium.png]]
 +
| [[file:SlicerHome-Small.svg | SlicerHome-Small.svg]]
 +
| [[image:SlicerHome-Small.png]]
 +
| [[file:SlicerHome-Original.svg | SlicerHome-Original.svg]]
 +
| [[image:SlicerHome-Original.png]]
 +
| Slicer4 Application Toolbar 
 +
|-
 +
| SlicerVolume.png
 +
| [[file:SlicerVolume-Large.svg | SlicerVolume-Large.svg]]
 +
| [[image:SlicerVolume-Large.png]]
 +
| [[file:SlicerVolume-Medium.svg | SlicerVolume-Medium.svg]]
 +
| [[image:SlicerVolume-Medium.png]]
 +
| [[file:SlicerVolume-Small.svg | SlicerVolume-Small.svg]]
 +
| [[image:SlicerVolume-Small.png]]
 +
| [[file:SlicerVolume-Original.svg | SlicerVolume-Original.svg]]
 +
| [[image:SlicerVolume-Original.png]]
 +
| Slicer4 Application Toolbar 
 +
|-
 +
| SlicerModels.png
 +
| [[file:SlicerModels-Large.svg | SlicerModels-Large.svg]]
 +
| [[image:SlicerModels-Large.png]]
 +
| [[file:SlicerModels-Medium.svg | SlicerModels-Medium.svg]]
 +
| [[image:SlicerModels-Medium.png]]
 +
| [[file:SlicerModels-Small.svg | SlicerModels-Small.svg ]]
 +
| [[image:SlicerModels-Small.png]]
 +
| [[file:SlicerModels-Original.svg | SlicerModels-Original.svg]]
 +
| [[image:SlicerModels-Original.png]]
 +
| Slicer4 Application Toolbar 
 +
|-
 +
| SlicerData.png
 +
| [[file:SlicerData-Large.svg | SlicerData-Large.svg]]
 +
| [[image:SlicerData-Large.png]]
 +
| [[file:SlicerData-Medium.svg | SlicerData-Medium.svg]]
 +
| [[image:SlicerData-Medium.png]]
 +
| [[file:SlicerData-Small.svg | SlicerData-Small.svg]]
 +
| [[image:SlicerData-Small.png]]
 +
| [[file:SlicerData-Original.svg | SlicerData-Original.svg]]
 +
| [[image:SlicerData-Original.png]]
 +
| Slicer4 Application Toolbar 
 +
|-
 +
| SlicerFiducials.png
 +
| [[file:SlicerFiducials-Large.svg | SlicerFiducials-Large.svg]]
 +
| [[image:SlicerFiducials-Large.png]]
 +
| [[file:SlicerFiducials-Medium.svg | SlicerFiducials-Medium.svg]]
 +
| [[image:SlicerFiducials-Medium.png]]
 +
| [[file:SlicerFiducials-Small.svg | SlicerFiducials-Small.svg]]
 +
| [[image:SlicerFiducials-Small.png]]
 +
| [[file:SlicerFiducials-Original.svg | SlicerFiducials-Original.svg]]
 +
| [[image:SlicerFiducials-Original.png]]
 +
| Slicer4 Application Toolbar 
 +
|-
 +
| SlicerAnnotationsV2.png
 +
| [[file:SlicerAnnotationsV2-Large.svg | SlicerAnnotationsV2-Large.svg]]
 +
| [[image:SlicerAnnotationsV2-Large.png]]
 +
| [[file:SlicerAnnotationsV2-Medium.svg | SlicerAnnotationsV2-Medium.svg]]
 +
| [[image:SlicerAnnotationsV2-Medium.png]]
 +
| [[file:SlicerAnnotationsV2-Small.svg | SlicerAnnotationsV2-Small.svg]]
 +
| [[image:SlicerAnnotationsV2-Small.png]]
 +
| [[file:SlicerAnnotationsV2-Original.svg | SlicerAnnotationsV2-Original.svg]]
 +
| [[image:SlicerAnnotationsV2-Original.png]]
 +
| Slicer4 Application Toolbar
 +
|-
 +
| SlicerAnnotations.png
 +
| [[file:SlicerAnnotations-Large.svg | SlicerAnnotations-Large.svg]]
 +
| [[image:SlicerAnnotations-Large.png]]
 +
| [[file:SlicerAnnotations-Medium.svg | SlicerAnnotations-Medium.svg]]
 +
| [[image:SlicerAnnotations-Medium.png]]
 +
| [[file:SlicerAnnotations-Small.svg | SlicerAnnotations-Small.svg]]
 +
| [[image:SlicerAnnotations-Small.png]]
 +
| [[file:SlicerAnnotations-Original.svg | SlicerAnnotations-Original.svg]]
 +
| [[image:SlicerAnnotations-Original.png]]
 +
| Slicer4 Application Toolbar 
 +
|-
 +
| SlicerEMSegment.png
 +
| [[file:SlicerEMSegment-Large.svg | SlicerEMSegment-Large.svg]]
 +
| [[image:SlicerEMSegment-Large.png]]
 +
| [[file:SlicerEMSegment-Medium.svg | SlicerEMSegment-Medium.svg]]
 +
| [[image:SlicerEMSegment-Medium.png]]
 +
| [[file:SlicerEMSegment-Small.svg | SlicerEMSegment-Small.svg]]
 +
| [[image:SlicerEMSegment-Small.png]]
 +
| [[file:SlicerEMSegment-Original.svg | SlicerEMSegment-Original.svg]]
 +
| [[image:SlicerEMSegment-Original.png]]
 +
| Slicer4 Application Toolbar 
 +
|-
 +
| SlicerEditor.png (in progress)
 +
| [[file:SlicerEditor-Large.svg | SlicerEditor-Large.svg]]
 +
| [[image:SlicerEditor-Large.png]]
 +
| [[file:SlicerEditor-Medium.svg | SlicerEditor-Medium.svg]]
 +
| [[image:SlicerEditor-Medium.png]]
 +
| [[file:SlicerEditor-Small.svg | SlicerEditor-Small.svg]]
 +
| [[image:SlicerEditor-Small.png]]
 +
| [[file:SlicerEditor-Original.svg | SlicerEditor-Original.svg]]
 +
| [[image:SlicerEditor-Original.png]]
 +
| Slicer4 Application Toolbar 
 +
|-
 +
| SlicerColors.png (in progress)
 +
| [[file:SlicerColors-Large.svg | SlicerColors-Large.svg]]
 +
| [[image:SlicerColors-Large.png]]
 +
| [[file:SlicerColors-Medium.svg | SlicerColors-Medium.svg]]
 +
| [[image:SlicerColors-Medium.png]]
 +
| [[file:SlicerColors-Small.svg | SlicerColors-Small.svg]]
 +
| [[image:SlicerColors-Small.png]]
 +
| [[file:SlicerColors-Original.svg | SlicerColors-Original.svg]]
 +
| [[image:SlicerColors-Original.png]]
 +
| Slicer4 Application Toolbar 
 +
|-
 +
|}
 +
 +
==Slicer Information Icons ==
 +
{| border="1" cellpadding="5"
 +
|- style="background:#ffffff; color:black" align="left"
 +
| style="width:20%" | '''Icon Name'''
 +
| style="width:20%" | '''Vector Large (svg)'''
 +
| style="width:20%" | '''Image 128x128'''
 +
| style="width:20%" | '''Vector Medium (svg)'''
 +
| style="width:18%" | '''Image 64x64'''
 +
| style="width:20%" | '''Vector Small (svg)'''
 +
| style="width:12%" | '''Image 32x32'''
 +
| style="width:20%" | '''Vector Wee (svg)'''
 +
| style="width:10%" | '''Slicer3 21x21'''
 +
| style="width:20%" | '''Where to use'''
 +
|-
 +
| SlicerInfoLeft.png
 +
| [[file:SlicerInfoLeft-Large.svg | SlicerInfoLeft-Large.svg]]
 +
| [[image:SlicerInfoLeft-Large.png]]
 +
| [[file:SlicerInfoLeft-Medium.svg | SlicerInfoLeft-Medium.svg]]
 +
| [[image:SlicerInfoLeft-Medium.png]]
 +
| [[file:SlicerInfoLeft-Small.svg | SlicerInfoLeft-Small.svg]]
 +
| [[image:SlicerInfoLeft-Small.png]]
 +
| [[file:SlicerInfoLeft-Original.svg | SlicerInfoLeft-Original.svg]]
 +
| [[image:SlicerInfoLeft-Original.png]]
 +
| Slicer4 Application (anywhere) 
 +
|-
 +
| SlicerInfoRight.png
 +
| [[file:SlicerInfoRight-Large.svg | SlicerInfoRight-Large.svg]]
 +
| [[image:SlicerInfoRight-Large.png]]
 +
| [[file:SlicerInfoRight-Medium.svg | SlicerInfoRight-Medium.svg]]
 +
| [[image:SlicerInfoRight-Medium.png]]
 +
| [[file:SlicerInfoRight-Small.svg | SlicerInfoRight-Small.svg]]
 +
| [[image:SlicerInfoRight-Small.png]]
 +
| [[file:SlicerInfoRight-Original.svg | SlicerInfoRight-Original.svg]]
 +
| [[image:SlicerInfoRight-Original.png]]
 +
| Slicer4 Application (anywhere) 
 +
|-
 +
| SlicerAdvancedGear.png
 +
| [[file:SlicerAdvancedGear-Large.svg | SlicerAdvancedGear-Large.svg]]
 +
| [[image:SlicerAdvancedGear-Large.png]]
 +
| [[file:SlicerAdvancedGear-Medium.svg | SlicerAdvancedGear-Medium.svg]]
 +
| [[image:SlicerAdvancedGear-Medium.png]]
 +
| [[file:SlicerAdvancedGear-Small.svg | SlicerAdvancedGear-Small.svg]]
 +
| [[image:SlicerAdvancedGear-Small.png]]
 +
| [[file:SlicerAdvancedGear-Original.svg | SlicerAdvancedGear-Original.svg]]
 +
| [[image:SlicerAdvancedGear-Original.png]]
 +
| Slicer4 Application (anywhere) 
 +
|-
 +
| SlicerHierarchy.png
 +
| [[file:SlicerHierarchy-Large.svg | SlicerHierarchy-Large.svg]]
 +
| [[image:SlicerHierarchy-Large.png]]
 +
| [[file:SlicerHierarchy-Medium.svg | SlicerHierarchy-Medium.svg]]
 +
| [[image:SlicerHierarchy-Medium.png]]
 +
| [[file:SlicerHierarchy-Small.svg | SlicerHierarchy-Small.svg]]
 +
| [[image:SlicerHierarchy-Small.png]]
 +
| [[file:SlicerHierarchy-Original.svg | SlicerHierarchy-Original.svg]]
 +
| [[image:SlicerHierarchy-Original.png]]
 +
| Slicer4 Application-wide and Annotation Module 
 +
|-
 +
| SlicerAddHierarchy.png
 +
| [[file:SlicerAddHierarchy-Large.svg | SlicerAddHierarchy-Large.svg]]
 +
| [[image:SlicerAddHierarchy-Large.png]]
 +
| [[file:SlicerAddHierarchy-Medium.svg | SlicerAddHierarchy-Medium.svg]]
 +
| [[image:SlicerAddHierarchy-Medium.png]]
 +
| [[file:SlicerAddHierarchy-Small.svg | SlicerAddHierarchy-Small.svg]]
 +
| [[image:SlicerAddHierarchy-Small.png]]
 +
| [[file:SlicerAddHierarchy-Original.svg | SlicerAddHierarchy-Original.svg]]
 +
| [[image:SlicerAddHierarchy-Original.png]]
 +
| Slicer4 Application-wide and Annotation Module 
 +
|-
 +
| SlicerLock.png
 +
| [[file:SlicerLock-Large.svg | SlicerLock-Large.svg]]
 +
| [[image:SlicerLock-Large.png]]
 +
| [[file:SlicerLock-Medium.svg | SlicerLock-Medium.svg]]
 +
| [[image:SlicerLock-Medium.png]]
 +
| [[file:SlicerLock-Small.svg | SlicerLock-Small.svg]]
 +
| [[image:SlicerLock-Small.png]]
 +
| [[file:SlicerLock-Original.svg | SlicerLock-Original.svg]]
 +
| [[image:SlicerLock-Original.png]]
 +
| Slicer4 Application (anywhere) 
 +
|-
 +
| SlicerUnlock.png
 +
| [[file:SlicerUnlock-Large.svg | SlicerUnlock-Large.svg]]
 +
| [[image:SlicerUnlock-Large.png]]
 +
| [[file:SlicerUnlock-Medium.svg | SlicerUnlock-Medium.svg]]
 +
| [[image:SlicerUnlock-Medium.png]]
 +
| [[file:SlicerUnlock-Small.svg | SlicerUnlock-Small.svg]]
 +
| [[image:SlicerUnlock-Small.png]]
 +
| [[file:SlicerUnlock-Original.svg | SlicerUnlock-Original.svg]]
 +
| [[image:SlicerUnlock-Original.png]]
 +
| Slicer4 Application (anywhere) 
 +
|-
 +
| SlicerLockUnlock.png
 +
| [[file:SlicerLockUnlock-Large.svg | SlicerLockUnlock-Large.svg]]
 +
| [[image:SlicerLockUnlock-Large.png]]
 +
| [[file:SlicerLockUnlock-Medium.svg | SlicerLockUnlock-Medium.svg]]
 +
| [[image:SlicerLockUnlock-Medium.png]]
 +
| [[file:SlicerLockUnlock-Small.svg | SlicerLockUnlock-Small.svg]]
 +
| [[image:SlicerLockUnlock-Small.png]]
 +
| [[file:SlicerLockUnlock-Original.svg | SlicerLockUnlock-Original.svg]]
 +
| [[image:SlicerLockUnlock-Original.png]]
 +
| Slicer4 Application (anywhere) 
 +
|-
 +
| SlicerVisible.png
 +
| [[file:SlicerVisible-Large.svg | SlicerVisible-Large.svg]]
 +
| [[image:SlicerVisible-Large.png]]
 +
| [[file:SlicerVisible-Medium.svg | SlicerVisible-Medium.svg]]
 +
| [[image:SlicerVisible-Medium.png]]
 +
| [[file:SlicerVisible-Small.svg | SlicerVisible-Small.svg]]
 +
| [[image:SlicerVisible-Small.png]]
 +
| [[file:SlicerVisible-Original.svg | SlicerVisible-Original.svg]]
 +
| [[image:SlicerVisible-Original.png]]
 +
| Slicer4 Application (anywhere) 
 +
|-
 +
| SlicerInvisible.png
 +
| [[file:SlicerInvisible-Large.svg | SlicerInvisible-Large.svg]]
 +
| [[image:SlicerInvisible-Large.png]]
 +
| [[file:SlicerInvisible-Medium.svg | SlicerInvisible-Medium.svg]]
 +
| [[image:SlicerInvisible-Medium.png]]
 +
| [[file:SlicerInvisible-Small.svg | SlicerInvisible-Small.svg]]
 +
| [[image:SlicerInvisible-Small.png]]
 +
| [[file:SlicerInvisible-Original.svg | SlicerInvisible-Original.svg]]
 +
| [[image:SlicerInvisible-Original.png]]
 +
| Slicer4 Application (anywhere) 
 +
|-
 +
| SlicerVisibleInvisible.png
 +
| [[file:SlicerVisibleInvisible-Large.svg | SlicerVisibleInvisible-Large.svg]]
 +
| [[image:SlicerVisibleInvisible-Large.png]]
 +
| [[file:SlicerVisibleInvisible-Medium.svg | SlicerVisibleInvisible-Medium.svg]]
 +
| [[image:SlicerVisibleInvisible-Medium.png]]
 +
| [[file:SlicerVisibleInvisible-Small.svg | SlicerVisibleInvisible-Small.svg]]
 +
| [[image:SlicerVisibleInvisible-Small.png]]
 +
| [[file:SlicerVisibleInvisible-Original.svg | SlicerVisibleInvisible-Original.svg]]
 +
| [[image:SlicerVisibleInvisible-Original.png]]
 +
| Slicer4 Application (anywhere) 
 +
|-
 +
|}
 +
 +
=Module-specific Icons =
 +
 +
==Data Module ==
 +
 +
[[image:DataModuleMockup.png]]
 +
 +
{| border="1" cellpadding="5"
 +
|- style="background:#ffffff; color:black" align="left"
 +
| style="width:20%" | '''Icon Name'''
 +
| style="width:20%" | '''Vector Large (svg)'''
 +
| style="width:20%" | '''Image 128x128'''
 +
| style="width:20%" | '''Vector Medium (svg)'''
 +
| style="width:18%" | '''Image 64x64'''
 +
| style="width:20%" | '''Vector Small (svg)'''
 +
| style="width:12%" | '''Image 32x32'''
 +
| style="width:20%" | '''Vector Wee (svg)'''
 +
| style="width:10%" | '''Slicer3 21x21'''
 +
| style="width:20%" | '''Where to use'''
 +
|-
 +
| SlicerLoadScene.png
 +
| [[file:SlicerLoadScene-Large.svg | SlicerLoadScene-Large.svg]]
 +
| [[image:SlicerLoadScene-Large.png]]
 +
| [[file:SlicerLoadScene-Medium.svg | SlicerLoadScene-Medium.svg]]
 +
| [[image:SlicerLoadScene-Medium.png]]
 +
| [[file:SlicerLoadScene-Small.svg | SlicerLoadScene-Small.svg]]
 +
| [[image:SlicerLoadScene-Small.png]]
 +
| [[file:SlicerLoadScene-Original.svg | SlicerLoadScene-Original.svg]]
 +
| [[image:SlicerLoadScene-Original.png]]
 +
| Slicer4 Data Module
 +
|-
 +
| SlicerAddScene.png
 +
| [[file:SlicerAddScene-Large.svg | SlicerAddScene-Large.svg]]
 +
| [[image:SlicerAddScene-Large.png]]
 +
| [[file:SlicerAddScene-Medium.svg | SlicerAddScene-Medium.svg]]
 +
| [[image:SlicerAddScene-Medium.png]]
 +
| [[file:SlicerAddScene-Small.svg | SlicerAddScene-Small.svg]]
 +
| [[image:SlicerAddScene-Small.png]]
 +
| [[file:SlicerAddScene-Original.svg | SlicerAddScene-Original.svg]]
 +
| [[image:SlicerAddScene-Original.png]]
 +
| Slicer4 Data Module
 +
|-
 +
| SlicerAddData.png
 +
| [[file:SlicerAddData-Large.svg | SlicerAddData-Large.svg]]
 +
| [[image:SlicerAddData-Large.png]]
 +
| [[file:SlicerAddData-Medium.svg | SlicerAddData-Medium.svg]]
 +
| [[image:SlicerAddData-Medium.png]]
 +
| [[file:SlicerAddData-Small.svg | SlicerAddData-Small.svg]]
 +
| [[image:SlicerAddData-Small.png]]
 +
| [[file:SlicerAddData-Original.svg | SlicerAddData-Original.svg]]
 +
| [[image:SlicerAddData-Original.png]]
 +
| Slicer4 Data Module
 +
|-
 +
| SlicerAddVolume.png
 +
| [[file:SlicerAddVolume-Large.svg | SlicerAddVolume-Large.svg]]
 +
| [[image:SlicerAddVolume-Large.png]]
 +
| [[file:SlicerAddVolume-Medium.svg | SlicerAddVolume-Medium.svg]]
 +
| [[image:SlicerAddVolume-Medium.png]]
 +
| [[file:SlicerAddVolume-Small.svg | SlicerAddVolume-Small.svg]]
 +
| [[image:SlicerAddVolume-Small.png]]
 +
| [[file:SlicerAddVolume-Original.svg | SlicerAddVolume-Original.svg]]
 +
| [[image:SlicerAddVolume-Original.png]]
 +
| Slicer4 Data Module
 +
|-
 +
| SlicerAddModel.png
 +
| [[file:SlicerAddModel-Large.svg | SlicerAddModel-Large.svg]]
 +
| [[image:SlicerAddModel-Large.png]]
 +
| [[file:SlicerAddModel-Medium.svg | SlicerAddModel-Medium.svg]]
 +
| [[image:SlicerAddModel-Medium.png]]
 +
| [[file:SlicerAddModel-Small.svg | SlicerAddModel-Small.svg]]
 +
| [[image:SlicerAddModel-Small.png]]
 +
| [[file:SlicerAddModel-Original.svg | SlicerAddModel-Original.svg]]
 +
| [[image:SlicerAddModel-Original.png]]
 +
| Slicer4 Data Module
 +
|-
 +
| SlicerAddScalarOverlay.png
 +
| [[file:SlicerAddScalarOverlay-Large.svg | SlicerAddScalarOverlay-Large.svg]]
 +
| [[image:SlicerAddScalarOverlay-Large.png]]
 +
| [[file:SlicerAddScalarOverlay-Medium.svg | SlicerAddScalarOverlay-Medium.svg]]
 +
| [[image:SlicerAddScalarOverlay-Medium.png]]
 +
| [[file:SlicerAddScalarOverlay-Small.svg | SlicerAddScalarOverlay-Small.svg]]
 +
| [[image:SlicerAddScalarOverlay-Small.png]]
 +
| [[file:SlicerAddScalarOverlay-Original.svg | SlicerAddScalarOverlay-Original.svg]]
 +
| [[image:SlicerAddScalarOverlay-Original.png]]
 +
| Slicer4 Data Module
 +
|-
 +
| SlicerAddFiducialList.png
 +
| [[file:SlicerAddFiducialList-Large.svg | SlicerAddFiducialList-Large.svg]]
 +
| [[image:SlicerAddFiducialList-Large.png]]
 +
| [[file:SlicerAddFiducialList-Medium.svg | SlicerAddFiducialList-Medium.svg]]
 +
| [[image:SlicerAddFiducialList-Medium.png]]
 +
| [[SlicerAddFiducialList-Small.svg | SlicerAddFiducialList-Small.svg]]
 +
| [[image:SlicerAddFiducialList-Small.png]]
 +
| [[file:SlicerAddFiducialList-Original.svg | SlicerAddFiducialList-Original.svg]]
 +
| [[image:SlicerAddFiducialList-Original.png]]
 +
| Slicer4 Data Module
 +
|-
 +
| SlicerAddTransform.png
 +
| [[file:SlicerAddTransform-Large.svg | SlicerAddTransform-Large.svg]]
 +
| [[image:SlicerAddTransform-Large.png]]
 +
| [[file:SlicerAddTransform-Large.svg | SlicerAddTransform-Large.svg]]
 +
| [[image:SlicerAddTransform-Medium.png]]
 +
| [[file:SlicerAddTransform-Small.svg | SlicerAddTransform-Small.svg]]
 +
| [[image:SlicerAddTransform-Small.png]]
 +
| [[file:SlicerAddTransform-Original.svg | SlicerAddTransform-Original.svg]]
 +
| [[image:SlicerAddTransform-Original.png]]
 +
| Slicer4 Data Module
 +
|-
 +
| SlicerAddColorLUT.png
 +
| [[file:SlicerAddColorLUT-Large.svg | SlicerAddColorLUT-Large.svg]]
 +
| [[image:SlicerAddColorLUT-Large.png]]
 +
| [[file:SlicerAddColorLUT-Medium.svg | SlicerAddColorLUT-Medium.svg]]
 +
| [[image:SlicerAddColorLUT-Medium.png]]
 +
| [[file:SlicerAddColorLUT-Small.svg | SlicerAddColorLUT-Small.svg]]
 +
| [[image:SlicerAddColorLUT-Small.png]]
 +
| [[file:SlicerAddColorLUT-Original.svg | SlicerAddColorLUT-Original.svg]]
 +
| [[image:SlicerAddColorLUT-Original.png]]
 +
| Slicer4 Data Module
 +
|-
 +
| SlicerAddFiberBundle.png
 +
| [[file:SlicerAddFiberBundle-Large.svg | SlicerAddFiberBundle-Large.svg]]
 +
| [[image:SlicerAddFiberBundle-Large.png]]
 +
| [[file:SlicerAddFiberBundle-Medium.svg | SlicerAddFiberBundle-Medium.svg]]
 +
| [[image:SlicerAddFiberBundle-Medium.png]]
 +
| [[file:SlicerAddFiberBundle-Small.svg | SlicerAddFiberBundle-Small.svg]]
 +
| [[image:SlicerAddFiberBundle-Small.png]]
 +
| [[file:SlicerAddFiberBundle-Original.svg | SlicerAddFiberBundle-Original.svg]]
 +
| [[image:SlicerAddFiberBundle-Original.png]]
 +
| Slicer4 Data Module 
 +
|-
 +
|}
 +
 +
==Annotation Module ==
 +
 +
{| border="1" cellpadding="5"
 +
|- style="background:#ffffff; color:black" align="left"
 +
| style="width:20%" | '''Icon Name'''
 +
| style="width:20%" | '''Vector Large (svg)'''
 +
| style="width:20%" | '''Image 128x128'''
 +
| style="width:20%" | '''Vector Medium (svg)'''
 +
| style="width:18%" | '''Image 64x64'''
 +
| style="width:20%" | '''Vector Small (svg)'''
 +
| style="width:12%" | '''Image 32x32'''
 +
| style="width:20%" | '''Vector Wee (svg)'''
 +
| style="width:10%" | '''Slicer3 21x21'''
 +
| style="width:20%" | '''Where to use'''
 +
|-
 +
| Annotation-AddHierarchy.png
 +
| [[file:Annotation-AddHierarchy-Large.svg | Annotation-AddHierarchy-Large.svg]]
 +
| [[image:Annotation-AddHierarchy-Large.png]]
 +
| [[file:Annotation-AddHierarchy-Large.svg | Annotation-AddHierarchy-Large.svg]]
 +
| [[image:Annotation-AddHierarchy-Medium.png]]
 +
| [[file:Annotation-AddHierarchy-Small.svg | Annotation-AddHierarchy-Small.svg]]
 +
| [[image:Annotation-AddHierarchy-Small.png]]
 +
| [[file:Annotation-AddHierarchy-Original.svg | Annotation-AddHierarchy-Original.svg]]
 +
| [[image:Annotation-AddHierarchy-Original.png]]
 +
| Slicer4 Annotation Module 
 +
|-
 +
| Annotation-BiDirectionalWidget.png
 +
| [[file:Annotation-BiDirectionalWidget-Large.svg | Annotation-BiDirectionalWidget-Large.svg]]
 +
| [[image:Annotation-BiDirectionalWidget-Large.png]]
 +
| [[file:Annotation-BiDirectionalWidget-Large.svg | Annotation-BiDirectionalWidget-Large.svg]]
 +
| [[image:Annotation-BiDirectionalWidget-Medium.png]]
 +
| [[file:Annotation-BiDirectionalWidget-Small.svg | Annotation-BiDirectionalWidget-Small.svg]]
 +
| [[image:Annotation-BiDirectionalWidget-Small.png]]
 +
| [[file:Annotation-BiDirectionalWidget-Original.svg | Annotation-BiDirectionalWidget-Original.svg]]
 +
| [[image:Annotation-BiDirectionalWidget-Original.png]]
 +
| Slicer4 Annotation Module 
 +
|-
 +
| Annotation-EditBiDirectionalWidget.png
 +
| [[file:Annotation-EditBiDirectionalWidget-Large.svg | Annotation-EditBiDirectionalWidget-Large.svg]]
 +
| [[image:Annotation-EditBiDirectionalWidget-Large.png]]
 +
| [[file:Annotation-EditBiDirectionalWidget-Large.svg | Annotation-EditBiDirectionalWidget-Large.svg]]
 +
| [[image:Annotation-EditBiDirectionalWidget-Medium.png]]
 +
| [[file:Annotation-EditBiDirectionalWidget-Small.svg | Annotation-EditBiDirectionalWidget-Small.svg]]
 +
| [[image:Annotation-EditBiDirectionalWidget-Small.png]]
 +
| [[file:Annotation-EditBiDirectionalWidget-Original.svg | Annotation-EditBiDirectionalWidget-Original.svg]]
 +
| [[image:Annotation-EditBiDirectionalWidget-Original.png]]
 +
| Slicer4 Annotation Module 
 +
|-
 +
| Annotation-EditROIWidget.png
 +
| [[file:Annotation-EditROIWidget-Large.svg | Annotation-EditROIWidget-Large.svg]]
 +
| [[image:Annotation-EditROIWidget-Large.png]]
 +
| [[file:Annotation-EditROIWidget-Large.svg | Annotation-EditROIWidget-Large.svg]]
 +
| [[image:Annotation-EditROIWidget-Medium.png]]
 +
| [[file:Annotation-EditROIWidget-Small.svg | Annotation-EditROIWidget-Small.svg]]
 +
| [[image:Annotation-EditROIWidget-Small.png]]
 +
| [[file:Annotation-EditROIWidget-Original.svg | Annotation-EditROIWidget-Original.svg]]
 +
| [[image:Annotation-EditROIWidget-Original.png]]
 +
| Slicer4 Annotation Module 
 +
|-
 +
| Annotation-Hierarchy.png
 +
| [[file:Annotation-Hierarchy-Large.svg | Annotation-Hierarchy-Large.svg]]
 +
| [[image:Annotation-Hierarchy-Large.png]]
 +
| [[file:Annotation-Hierarchy-Large.svg | Annotation-Hierarchy-Large.svg]]
 +
| [[image:Annotation-Hierarchy-Medium.png]]
 +
| [[file:Annotation-Hierarchy-Small.svg | Annotation-Hierarchy-Small.svg]]
 +
| [[image:Annotation-Hierarchy-Small.png]]
 +
| [[file:Annotation-Hierarchy-Original.svg | Annotation-Hierarchy-Original.svg]]
 +
| [[image:Annotation-Hierarchy-Original.png]]
 +
| Slicer4 Annotation Module 
 +
|-
 +
| Annotation-Lock.png
 +
| [[file:Annotation-Lock-Large.svg | Annotation-Lock-Large.svg]]
 +
| [[image:Annotation-Lock-Large.png]]
 +
| [[file:Annotation-Lock-Large.svg | Annotation-Lock-Large.svg]]
 +
| [[image:Annotation-Lock-Medium.png]]
 +
| [[file:Annotation-Lock-Small.svg | Annotation-Lock-Small.svg]]
 +
| [[image:Annotation-Lock-Small.png]]
 +
| [[file:Annotation-Lock-Original.svg | Annotation-Lock-Original.svg]]
 +
| [[image:Annotation-Lock-Original.png]]
 +
| Slicer4 Annotation Module 
 +
|-
 +
| Annotation-ROIWidget.png
 +
| [[file:Annotation-ROIWidget-Large.svg | Annotation-ROIWidget-Large.svg]]
 +
| [[image:Annotation-ROIWidget-Large.png]]
 +
| [[file:Annotation-ROIWidget-Large.svg | Annotation-ROIWidget-Large.svg]]
 +
| [[image:Annotation-ROIWidget-Medium.png]]
 +
| [[file:Annotation-ROIWidget-Small.svg | Annotation-ROIWidget-Small.svg]]
 +
| [[image:Annotation-ROIWidget-Small.png]]
 +
| [[file:Annotation-ROIWidget-Original.svg | Annotation-ROIWidget-Original.svg]]
 +
| [[image:Annotation-ROIWidget-Original.png]]
 +
| Slicer4 Annotation Module 
 +
|-
 +
|}
 +
|

Latest revision as of 21:16, 2 August 2011

Home < Slicer4:UIDesign

Back to Slicer 4 Developer Projects

Go to Slicer3 UI Design page

Notebook for Slicer4 UI Design work

Codes to mark Notebook entries

These wiki pages can be hard to parse. Here's an experiment for marking feedback to make it easier to parse; (copy, paste and customize from below).

Opinion.png (wjp) Add a general comment or opinion.

Usability.png Flag a usability problem.

Idea.png Mark an idea.

Sketch.png Mark a link to related info.

Bug.png Report a bug.

Fire.png Report a really bad bug that's blocking work progress, or causing a crash.

MissingOrStaleDoc.png Report missing documentation.

MissingOrStaleDocLink.png Report bad documentation link.

WeakDoc.png Report insufficient documentation.

Application GUI styling experiments

Application Icons

Icons for Layouts

Icons for Slice Viewers

Icons for 3D Viewers

Toolbar Icons for Slicer Base Modules

Icon Name Vector Large (svg) Image 128x128 Vector Medium (svg) Image 64x64 Vector Small (svg) Image 32x32 Vector Wee (svg) Slicer3 21x21 Where to use
SlicerHome.png SlicerHome-Large.svg SlicerHome-Large.png SlicerHome-Medium.svg SlicerHome-Medium.png SlicerHome-Small.svg SlicerHome-Small.png SlicerHome-Original.svg SlicerHome-Original.png Slicer4 Application Toolbar
SlicerVolume.png SlicerVolume-Large.svg SlicerVolume-Large.png SlicerVolume-Medium.svg SlicerVolume-Medium.png SlicerVolume-Small.svg SlicerVolume-Small.png SlicerVolume-Original.svg SlicerVolume-Original.png Slicer4 Application Toolbar
SlicerModels.png SlicerModels-Large.svg SlicerModels-Large.png SlicerModels-Medium.svg SlicerModels-Medium.png SlicerModels-Small.svg SlicerModels-Small.png SlicerModels-Original.svg SlicerModels-Original.png Slicer4 Application Toolbar
SlicerData.png SlicerData-Large.svg SlicerData-Large.png SlicerData-Medium.svg SlicerData-Medium.png SlicerData-Small.svg SlicerData-Small.png SlicerData-Original.svg SlicerData-Original.png Slicer4 Application Toolbar
SlicerFiducials.png SlicerFiducials-Large.svg SlicerFiducials-Large.png SlicerFiducials-Medium.svg SlicerFiducials-Medium.png SlicerFiducials-Small.svg SlicerFiducials-Small.png SlicerFiducials-Original.svg SlicerFiducials-Original.png Slicer4 Application Toolbar
SlicerAnnotationsV2.png SlicerAnnotationsV2-Large.svg SlicerAnnotationsV2-Large.png SlicerAnnotationsV2-Medium.svg SlicerAnnotationsV2-Medium.png SlicerAnnotationsV2-Small.svg SlicerAnnotationsV2-Small.png SlicerAnnotationsV2-Original.svg SlicerAnnotationsV2-Original.png Slicer4 Application Toolbar
SlicerAnnotations.png SlicerAnnotations-Large.svg SlicerAnnotations-Large.png SlicerAnnotations-Medium.svg SlicerAnnotations-Medium.png SlicerAnnotations-Small.svg SlicerAnnotations-Small.png SlicerAnnotations-Original.svg SlicerAnnotations-Original.png Slicer4 Application Toolbar
SlicerEMSegment.png SlicerEMSegment-Large.svg SlicerEMSegment-Large.png SlicerEMSegment-Medium.svg SlicerEMSegment-Medium.png SlicerEMSegment-Small.svg SlicerEMSegment-Small.png SlicerEMSegment-Original.svg SlicerEMSegment-Original.png Slicer4 Application Toolbar
SlicerEditor.png (in progress) SlicerEditor-Large.svg File:SlicerEditor-Large.png SlicerEditor-Medium.svg File:SlicerEditor-Medium.png SlicerEditor-Small.svg File:SlicerEditor-Small.png SlicerEditor-Original.svg File:SlicerEditor-Original.png Slicer4 Application Toolbar
SlicerColors.png (in progress) SlicerColors-Large.svg File:SlicerColors-Large.png SlicerColors-Medium.svg File:SlicerColors-Medium.png SlicerColors-Small.svg File:SlicerColors-Small.png SlicerColors-Original.svg File:SlicerColors-Original.png Slicer4 Application Toolbar

Slicer Information Icons

Icon Name Vector Large (svg) Image 128x128 Vector Medium (svg) Image 64x64 Vector Small (svg) Image 32x32 Vector Wee (svg) Slicer3 21x21 Where to use
SlicerInfoLeft.png SlicerInfoLeft-Large.svg SlicerInfoLeft-Large.png SlicerInfoLeft-Medium.svg SlicerInfoLeft-Medium.png SlicerInfoLeft-Small.svg SlicerInfoLeft-Small.png SlicerInfoLeft-Original.svg SlicerInfoLeft-Original.png Slicer4 Application (anywhere)
SlicerInfoRight.png SlicerInfoRight-Large.svg SlicerInfoRight-Large.png SlicerInfoRight-Medium.svg SlicerInfoRight-Medium.png SlicerInfoRight-Small.svg SlicerInfoRight-Small.png SlicerInfoRight-Original.svg SlicerInfoRight-Original.png Slicer4 Application (anywhere)
SlicerAdvancedGear.png SlicerAdvancedGear-Large.svg SlicerAdvancedGear-Large.png SlicerAdvancedGear-Medium.svg SlicerAdvancedGear-Medium.png SlicerAdvancedGear-Small.svg SlicerAdvancedGear-Small.png SlicerAdvancedGear-Original.svg SlicerAdvancedGear-Original.png Slicer4 Application (anywhere)
SlicerHierarchy.png SlicerHierarchy-Large.svg SlicerHierarchy-Large.png SlicerHierarchy-Medium.svg SlicerHierarchy-Medium.png SlicerHierarchy-Small.svg SlicerHierarchy-Small.png SlicerHierarchy-Original.svg SlicerHierarchy-Original.png Slicer4 Application-wide and Annotation Module
SlicerAddHierarchy.png SlicerAddHierarchy-Large.svg SlicerAddHierarchy-Large.png SlicerAddHierarchy-Medium.svg SlicerAddHierarchy-Medium.png SlicerAddHierarchy-Small.svg SlicerAddHierarchy-Small.png SlicerAddHierarchy-Original.svg SlicerAddHierarchy-Original.png Slicer4 Application-wide and Annotation Module
SlicerLock.png SlicerLock-Large.svg SlicerLock-Large.png SlicerLock-Medium.svg SlicerLock-Medium.png SlicerLock-Small.svg SlicerLock-Small.png SlicerLock-Original.svg SlicerLock-Original.png Slicer4 Application (anywhere)
SlicerUnlock.png SlicerUnlock-Large.svg SlicerUnlock-Large.png SlicerUnlock-Medium.svg SlicerUnlock-Medium.png SlicerUnlock-Small.svg SlicerUnlock-Small.png SlicerUnlock-Original.svg SlicerUnlock-Original.png Slicer4 Application (anywhere)
SlicerLockUnlock.png SlicerLockUnlock-Large.svg SlicerLockUnlock-Large.png SlicerLockUnlock-Medium.svg SlicerLockUnlock-Medium.png SlicerLockUnlock-Small.svg SlicerLockUnlock-Small.png SlicerLockUnlock-Original.svg SlicerLockUnlock-Original.png Slicer4 Application (anywhere)
SlicerVisible.png SlicerVisible-Large.svg SlicerVisible-Large.png SlicerVisible-Medium.svg SlicerVisible-Medium.png SlicerVisible-Small.svg SlicerVisible-Small.png SlicerVisible-Original.svg SlicerVisible-Original.png Slicer4 Application (anywhere)
SlicerInvisible.png SlicerInvisible-Large.svg SlicerInvisible-Large.png SlicerInvisible-Medium.svg SlicerInvisible-Medium.png SlicerInvisible-Small.svg SlicerInvisible-Small.png SlicerInvisible-Original.svg SlicerInvisible-Original.png Slicer4 Application (anywhere)
SlicerVisibleInvisible.png SlicerVisibleInvisible-Large.svg SlicerVisibleInvisible-Large.png SlicerVisibleInvisible-Medium.svg SlicerVisibleInvisible-Medium.png SlicerVisibleInvisible-Small.svg SlicerVisibleInvisible-Small.png SlicerVisibleInvisible-Original.svg SlicerVisibleInvisible-Original.png Slicer4 Application (anywhere)

Module-specific Icons

Data Module

DataModuleMockup.png

Icon Name Vector Large (svg) Image 128x128 Vector Medium (svg) Image 64x64 Vector Small (svg) Image 32x32 Vector Wee (svg) Slicer3 21x21 Where to use
SlicerLoadScene.png SlicerLoadScene-Large.svg SlicerLoadScene-Large.png SlicerLoadScene-Medium.svg SlicerLoadScene-Medium.png SlicerLoadScene-Small.svg SlicerLoadScene-Small.png SlicerLoadScene-Original.svg SlicerLoadScene-Original.png Slicer4 Data Module
SlicerAddScene.png SlicerAddScene-Large.svg SlicerAddScene-Large.png SlicerAddScene-Medium.svg SlicerAddScene-Medium.png SlicerAddScene-Small.svg SlicerAddScene-Small.png SlicerAddScene-Original.svg SlicerAddScene-Original.png Slicer4 Data Module
SlicerAddData.png SlicerAddData-Large.svg SlicerAddData-Large.png SlicerAddData-Medium.svg SlicerAddData-Medium.png SlicerAddData-Small.svg SlicerAddData-Small.png SlicerAddData-Original.svg SlicerAddData-Original.png Slicer4 Data Module
SlicerAddVolume.png SlicerAddVolume-Large.svg SlicerAddVolume-Large.png SlicerAddVolume-Medium.svg SlicerAddVolume-Medium.png SlicerAddVolume-Small.svg SlicerAddVolume-Small.png SlicerAddVolume-Original.svg SlicerAddVolume-Original.png Slicer4 Data Module
SlicerAddModel.png SlicerAddModel-Large.svg SlicerAddModel-Large.png SlicerAddModel-Medium.svg SlicerAddModel-Medium.png SlicerAddModel-Small.svg SlicerAddModel-Small.png SlicerAddModel-Original.svg SlicerAddModel-Original.png Slicer4 Data Module
SlicerAddScalarOverlay.png SlicerAddScalarOverlay-Large.svg SlicerAddScalarOverlay-Large.png SlicerAddScalarOverlay-Medium.svg SlicerAddScalarOverlay-Medium.png SlicerAddScalarOverlay-Small.svg SlicerAddScalarOverlay-Small.png SlicerAddScalarOverlay-Original.svg SlicerAddScalarOverlay-Original.png Slicer4 Data Module
SlicerAddFiducialList.png SlicerAddFiducialList-Large.svg SlicerAddFiducialList-Large.png SlicerAddFiducialList-Medium.svg SlicerAddFiducialList-Medium.png SlicerAddFiducialList-Small.svg SlicerAddFiducialList-Small.png SlicerAddFiducialList-Original.svg SlicerAddFiducialList-Original.png Slicer4 Data Module
SlicerAddTransform.png SlicerAddTransform-Large.svg SlicerAddTransform-Large.png SlicerAddTransform-Large.svg SlicerAddTransform-Medium.png SlicerAddTransform-Small.svg SlicerAddTransform-Small.png SlicerAddTransform-Original.svg SlicerAddTransform-Original.png Slicer4 Data Module
SlicerAddColorLUT.png SlicerAddColorLUT-Large.svg SlicerAddColorLUT-Large.png SlicerAddColorLUT-Medium.svg SlicerAddColorLUT-Medium.png SlicerAddColorLUT-Small.svg SlicerAddColorLUT-Small.png SlicerAddColorLUT-Original.svg SlicerAddColorLUT-Original.png Slicer4 Data Module
SlicerAddFiberBundle.png SlicerAddFiberBundle-Large.svg SlicerAddFiberBundle-Large.png SlicerAddFiberBundle-Medium.svg SlicerAddFiberBundle-Medium.png SlicerAddFiberBundle-Small.svg SlicerAddFiberBundle-Small.png SlicerAddFiberBundle-Original.svg SlicerAddFiberBundle-Original.png Slicer4 Data Module

Annotation Module

Icon Name Vector Large (svg) Image 128x128 Vector Medium (svg) Image 64x64 Vector Small (svg) Image 32x32 Vector Wee (svg) Slicer3 21x21 Where to use
Annotation-AddHierarchy.png Annotation-AddHierarchy-Large.svg File:Annotation-AddHierarchy-Large.png Annotation-AddHierarchy-Large.svg File:Annotation-AddHierarchy-Medium.png Annotation-AddHierarchy-Small.svg File:Annotation-AddHierarchy-Small.png Annotation-AddHierarchy-Original.svg File:Annotation-AddHierarchy-Original.png Slicer4 Annotation Module
Annotation-BiDirectionalWidget.png Annotation-BiDirectionalWidget-Large.svg File:Annotation-BiDirectionalWidget-Large.png Annotation-BiDirectionalWidget-Large.svg File:Annotation-BiDirectionalWidget-Medium.png Annotation-BiDirectionalWidget-Small.svg File:Annotation-BiDirectionalWidget-Small.png Annotation-BiDirectionalWidget-Original.svg File:Annotation-BiDirectionalWidget-Original.png Slicer4 Annotation Module
Annotation-EditBiDirectionalWidget.png Annotation-EditBiDirectionalWidget-Large.svg File:Annotation-EditBiDirectionalWidget-Large.png Annotation-EditBiDirectionalWidget-Large.svg File:Annotation-EditBiDirectionalWidget-Medium.png Annotation-EditBiDirectionalWidget-Small.svg File:Annotation-EditBiDirectionalWidget-Small.png Annotation-EditBiDirectionalWidget-Original.svg File:Annotation-EditBiDirectionalWidget-Original.png Slicer4 Annotation Module
Annotation-EditROIWidget.png Annotation-EditROIWidget-Large.svg File:Annotation-EditROIWidget-Large.png Annotation-EditROIWidget-Large.svg File:Annotation-EditROIWidget-Medium.png Annotation-EditROIWidget-Small.svg File:Annotation-EditROIWidget-Small.png Annotation-EditROIWidget-Original.svg File:Annotation-EditROIWidget-Original.png Slicer4 Annotation Module
Annotation-Hierarchy.png Annotation-Hierarchy-Large.svg File:Annotation-Hierarchy-Large.png Annotation-Hierarchy-Large.svg File:Annotation-Hierarchy-Medium.png Annotation-Hierarchy-Small.svg File:Annotation-Hierarchy-Small.png Annotation-Hierarchy-Original.svg File:Annotation-Hierarchy-Original.png Slicer4 Annotation Module
Annotation-Lock.png Annotation-Lock-Large.svg File:Annotation-Lock-Large.png Annotation-Lock-Large.svg File:Annotation-Lock-Medium.png Annotation-Lock-Small.svg File:Annotation-Lock-Small.png Annotation-Lock-Original.svg File:Annotation-Lock-Original.png Slicer4 Annotation Module
Annotation-ROIWidget.png Annotation-ROIWidget-Large.svg File:Annotation-ROIWidget-Large.png Annotation-ROIWidget-Large.svg File:Annotation-ROIWidget-Medium.png Annotation-ROIWidget-Small.svg File:Annotation-ROIWidget-Small.png Annotation-ROIWidget-Original.svg File:Annotation-ROIWidget-Original.png Slicer4 Annotation Module

|