View Issue Details

IDProjectCategoryView StatusLast Update
0001337Slicer4Core: GUIpublic2011-10-05 12:37
ReporterkikinisAssigned Tofinetjul 
PrioritynormalSeverityfeatureReproducibilityN/A
Status closedResolutionfixed 
Product Version 
Target VersionSlicer 4.0.0Fixed in VersionSlicer 4.0.0 
Summary0001337: View controller bar look&feel
Description

See mock-up for the new GUI of the slice/3d view controller bars.

TagsNo tags attached.

Relationships

related to 0001317 closedpieper Main GUI modificiations 
related to 0001412 feedbackpieper need dicom offset in DataProbe 
related to 0001321 closedfinetjul anchor for pop up menu in 3D viewer is not visible on the mac nightly. E.g. mac 8-7 
related to 0001320 closedfinetjul label map transparency pop up is behind the slice controller pop up 

Activities

2011-08-16 07:16

 

SlicerViewers2.png (367,801 bytes)
SlicerViewers2.png (367,801 bytes)

2011-08-16 07:19

 

SlicerViewers3.png (205,720 bytes)
SlicerViewers3.png (205,720 bytes)
kikinis

kikinis

2011-08-16 09:46

developer   ~0002714

We need to remember to move the icons from the "Manipulate Slice Views" panel into the pop up: The first three icons from the left of that panel are already in the popup.
A: no, will be integrated into slice annotation infrastructure
Crosshairs: yes
mix slider: yes, modify to properly work with link function
coordinates:no, will be integrated into slice annotation infrastructure
set field of view: should be merged with the slice spacing icon

lassoan

lassoan

2011-08-16 14:45

developer   ~0002718

It is essential to show the DICOM slice number as well (an integer number, corresponding to the current slice, almost the same as the IJK coordinate, just starting with 1 - as defined in DICOM). It is already implemented in Slicer 3.6.

The DICOM slice number serves as a reference when clinicians review images simultaneously in Slicer and their regular review workstation.

2011-08-25 05:09

 

SliceControllerV13.png (23,604 bytes)
SliceControllerV13.png (23,604 bytes)
kikinis

kikinis

2011-08-25 05:10

developer   ~0002785

Mockup for Sliceviewer pop up added

kikinis

kikinis

2011-08-25 05:11

developer   ~0002786

See also:
http://wiki.slicer.org/slicerWiki/index.php/SliceControllerSketches#Sketch_8

2011-08-25 10:39

 

kikinis

kikinis

2011-08-25 10:41

developer   ~0002796

Please remove the colored lines on three sides of the slice viewers to achieve same appearance as 3D viewers. Grey separators only in layouts that need them because there is no other separator. E.g. one line between the two 3d viewers, or two grey lines in the topmost image for the conventional layout.

finetjul

finetjul

2011-08-26 11:10

administrator   ~0002820

Slice views with no lightbox is under the hood a 1x1 lightbox, this is why it shows the lightbox color shall we have a special case to hide the lightbox border when being in 1x1 ?

What would then be the color of the lightbox border ?

As a general rule, you ask for a 1px gray spacing between each view, is this correct ?

wjp

wjp

2011-08-26 17:59

administrator   ~0002822

Last edited: 2011-08-26 18:01

If we have

  • "selected frame" be white across all viewers,
  • grey borders separate all frames (lightbox or other) in any viewer, and
  • colored frame above each viewer,
  • an "active/inactive" viewer icon in all colored frames above viewers

I don't see why we need to visually designate the lightbox border.

This seems to be a visually quieter language for communicating what's active and where boundaries are. We want to minimize the info as much as possible in the image display.

Of course, I could be missing something -- please let me know if the issue is more complicated that I am seeing!

finetjul

finetjul

2011-08-27 12:04

administrator   ~0002823

If we are in a 3x3 lightbox mode, what color should be the border around the active "slice" at (0,0) in the lightbox ?

In a 1x1 lightbox mode, what color should be the border of the active slice ( -> the only slice)

wjp

wjp

2011-08-27 17:22

administrator   ~0002826

Here's what I'm thinking:

active slice gets a white border, whether in a 1x1 or 3x3 lightbox, etc.
active viewer (in which active slice would be shown in a slice viewer) gets a blue dot in colorbar as in: SliceViewers3.png above.

  • if slice viewr in lightbox mode is NOT active, then grey borders are shown all around in that viewer. We keep in state which was the active slice when user last exited that viewer, and make that slice's border change from grey to white when the viewer is selected on the color bar.
  • if user selects a specific slice in an inactive lightbox, instead of a colorbar, then that slice border turns white.

wdyt?

kikinis

kikinis

2011-08-27 19:21

developer   ~0002827

yes

finetjul

finetjul

2011-09-09 04:43

administrator   ~0002953

Last edited: 2011-09-12 15:06

To recap, we have then 2 notions:

  • active viewer (new feature)
  • active slice (existing feature)

An active slice in an active viewer is white
An active slice in an inactive viewer is grey
An inactive slice has no border.

Target RSNA:

  • change slice border color to white
  • Add 1px spacing between views
    Target Post-RSNA:
  • add the notion of active viewer (big change and I anticipate a lot of issues).

Deal?

kikinis

kikinis

2011-09-11 05:14

developer   ~0002975

Deal. The borders around viewers should be one pixel only on left, right, and bottom.

wjp

wjp

2011-09-11 08:10

administrator   ~0002976

I think this sounds good. With the RSNA-target, we will have an "implicit" display of active viewer for Slice Viewers.

So, we may find that "active viewer" is not necessary. Tho using current mouse position and hot-keys, it is possible for a user to expect an action to occur in a different viewer than the one they last clicked-in.

I think this will become a bigger problem once we have many viewers of different types. But at present, it may not be a big deal!

2011-09-12 18:46

 

SlicerWhite.png (77,092 bytes)
SlicerWhite.png (77,092 bytes)

2011-09-12 18:50

 

SlicerWhite-Lightbox.png (511,794 bytes)
SlicerWhite-Lightbox.png (511,794 bytes)
finetjul

finetjul

2011-09-12 18:53

administrator   ~0002989

r18033 implements:

  • 1px spacing between views
  • 1px white border in slice view

I don't know if I need to get used to it, but I feel uneasy with the new look, it looks "flat".
Any suggestion ?

Bonus question, where should go the "DICOM slice number" mentioned by Andras ?

lassoan

lassoan

2011-09-12 19:06

developer   ~0002990

Could you add a screenshot of the current GUI to see where the DICOM slice number could fit?

thanks!

lassoan

lassoan

2011-09-12 19:12

developer   ~0002991

Sorry, I see now that the new screenshots are already attached.

The slice numbers could be displayed next to the offset values. If there is enough space then you could display: "Slice: X" (or just display "X" and describe in a tooltip that the number is the DICOM slice number).

kikinis

kikinis

2011-09-13 01:45

developer   ~0002993

I would wait until the data probe widget has been fully populated. This would be the proper place for such information.

2011-09-13 02:21

 

AdditionalBlackLines.PNG (505,353 bytes)
AdditionalBlackLines.PNG (505,353 bytes)
kikinis

kikinis

2011-09-13 02:23

developer   ~0002994

The white lines are not in the outside of the viewer. There is one line of pixels beyond the white line on the left and bottom.

finetjul

finetjul

2011-09-13 05:38

administrator   ~0002996

aouch, this is what I feared, it seems that the line plotting is graphic card related. I'll try to get a custom fix then.

wjp

wjp

2011-09-13 09:18

administrator   ~0003001

Only thing I'd like to see is a grey border around inactive slice, instead of no border, just to be sure which works better.

I would also like to see grey 1px border around all viewers instead of white. This reserves white for "active slice/frame" in a multi-slice/frame viewer and underscores that information at a glance.

Are these experiments a possibility?

finetjul

finetjul

2011-09-13 09:39

administrator   ~0003003

It would probably be faster to experiment with photoshop.

wjp

wjp

2011-09-13 10:16

administrator   ~0003005

See SliceViewers3.png in the above attachments. I think this mockup in photoshop showed those cases... I don't feel so strongly about it, but think it does look a little less flat than white borders around all viewers and no borders around lightbox. And it clarifies the idea of "active" a bit.

Just my 2cts!

lassoan

lassoan

2011-09-13 13:53

developer   ~0003011

I would wait until the data probe widget has been fully populated. This would be the proper place for such information.

Can you see the slice number continuously in the probe widget when you are moving the slice selection slider? (if I had to move the mouse over the image to see the slice number then the slice selection would be a pain)

2011-09-14 03:43

 

kikinis

kikinis

2011-09-14 03:45

developer   ~0003024

Last edited: 2011-09-14 12:11

experimental build mac 9-14: vertical line between two viewers is 3px, not 2 and white not gray. See screen capture

finetjul

finetjul

2011-09-14 15:53

administrator   ~0003031

r18057 implements:

It looks much better with grey spacing! On the minus side (always a minus side :-P) but it kind of breaks Slicer's look&feel.

kikinis

kikinis

2011-09-14 15:54

developer   ~0003032

Can't wait to see it

2011-09-15 03:31

 

Verticaldouble.PNG (29,429 bytes)
Verticaldouble.PNG (29,429 bytes)
kikinis

kikinis

2011-09-15 03:35

developer   ~0003039

Win 64 9-15: vertical double line, the horizontal separator is almost black.

finetjul

finetjul

2011-09-15 05:00

administrator   ~0003042

The horizontal separator has the same color than the spacing for consistency, I could change it to back to white but I doubt it won't be consistent with the other spacings.
Let me try with a lighter grey anyway, it might fix both issues.

finetjul

finetjul

2011-09-15 05:16

administrator   ~0003043

I tweaked a bit the greys, I might need some help from Wendy at that point though.

2011-09-15 05:17

 

SlicerGrey.png (236,476 bytes)
SlicerGrey.png (236,476 bytes)
wjp

wjp

2011-09-15 08:47

administrator   ~0003047

Since i don't see a nightly or experimental build for mac that i can grab, I'll update and build on win32. Once the build is successful, I'll have a look, but I bet it looks great.

Regarding Look/Feel -- ah, rules are made to be broken by those who know better! Unless it's a user-confusing or visually-jarring deviation from baseline, I think it'll be fine.

finetjul

finetjul

2011-09-15 09:18

administrator   ~0003048

Note that I uploaded the screenshots in the issue. Also note that I haven't committed the new greys (screenshots). I'm just waiting to get your feedbacks before doing so.

wjp

wjp

2011-09-15 09:39

administrator   ~0003049

Noted -- thanks! This is looking good -- I am working on a few suggestions. will add them in a bit.

kikinis

kikinis

2011-09-15 10:49

developer   ~0003051

How does it look like when the module panel is floating?

2011-09-15 10:58

 

SlicerGrey-detached.png (57,263 bytes)
SlicerGrey-detached.png (57,263 bytes)
finetjul

finetjul

2011-09-15 10:59

administrator   ~0003052

see attached screenshot.

kikinis

kikinis

2011-09-16 04:14

developer   ~0003058

9-16 looks very nice. I am happy :)

2011-09-16 10:15

 

grey2Dividers.png (339,338 bytes)
grey2Dividers.png (339,338 bytes)

2011-09-16 10:16

 

wjp

wjp

2011-09-16 10:24

administrator   ~0003067

Julien & I decided a few things in our phone conversation.

  • we'd revert the white color for the movable divider between viewer frames for a lighter and more consistent look.

  • we'd darken the grey between viewers to make it less "POW" and to set off the "active slice in lightbox viewers.

  • we'd only draw an additional "lightbox frame" around slice viewers with a lightbox bigger than 1x1, or a future multi-frame viewer with more than one frame. This makes the overall layout less chrome-heavy in the case where we don't have any multi-slice lightboxes displayed.

  • we had decided on making the lightbox frame grey, and the viewer divider grey the same color, but after experimenting (see attached), i think better to go to a slightly darker grey with the lightbox frame. Just more appealing.

  • then, as a clarification, we have the concepts of "active slice" only in the context of lightbox viewers showing multi-slices. Otherwise, we have a concept of "active viewer" whose design and implementation will happen AFTER the RSNA deadline.
kikinis

kikinis

2011-09-27 05:00

developer   ~0003122

time to close this one?

finetjul

finetjul

2011-09-27 06:45

administrator   ~0003125

Fixed in r18073:
http://viewvc.slicer.org/viewvc.cgi/Slicer4?view=revision&revision=18073

Issue History

Date Modified Username Field Change
2011-08-16 07:16 finetjul New Issue
2011-08-16 07:16 finetjul File Added: SlicerViewers2.png
2011-08-16 07:19 finetjul File Added: SlicerViewers3.png
2011-08-16 07:21 finetjul Reporter finetjul => kikinis
2011-08-16 09:46 kikinis Note Added: 0002714
2011-08-16 10:37 finetjul Relationship added related to 0001317
2011-08-16 14:45 lassoan Note Added: 0002718
2011-08-18 17:59 finetjul Relationship added related to 0001321
2011-08-25 05:09 kikinis File Added: SliceControllerV13.png
2011-08-25 05:10 kikinis Note Added: 0002785
2011-08-25 05:11 kikinis Note Added: 0002786
2011-08-25 10:39 kikinis File Added: Screen Shot 2011-08-25 at 2.36.36 PM.png
2011-08-25 10:41 kikinis Note Added: 0002796
2011-08-26 11:10 finetjul Note Added: 0002820
2011-08-26 11:10 finetjul Assigned To => finetjul
2011-08-26 11:10 finetjul Status new => feedback
2011-08-26 17:59 wjp Note Added: 0002822
2011-08-26 18:01 wjp Note Edited: 0002822
2011-08-27 12:04 finetjul Note Added: 0002823
2011-08-27 17:22 wjp Note Added: 0002826
2011-08-27 19:21 kikinis Note Added: 0002827
2011-09-09 04:43 finetjul Note Added: 0002953
2011-09-11 05:14 kikinis Note Added: 0002975
2011-09-11 08:10 wjp Note Added: 0002976
2011-09-12 05:50 finetjul Relationship added related to 0001396
2011-09-12 12:30 finetjul Relationship deleted related to 0001396
2011-09-12 15:06 finetjul Note Edited: 0002953
2011-09-12 18:46 finetjul File Added: SlicerWhite.png
2011-09-12 18:50 finetjul File Added: SlicerWhite-Lightbox.png
2011-09-12 18:53 finetjul Note Added: 0002989
2011-09-12 19:06 lassoan Note Added: 0002990
2011-09-12 19:12 lassoan Note Added: 0002991
2011-09-13 01:45 kikinis Note Added: 0002993
2011-09-13 02:21 kikinis File Added: AdditionalBlackLines.PNG
2011-09-13 02:23 kikinis Note Added: 0002994
2011-09-13 05:05 pieper Relationship added parent of 0001412
2011-09-13 05:38 finetjul Note Added: 0002996
2011-09-13 09:18 wjp Note Added: 0003001
2011-09-13 09:39 finetjul Note Added: 0003003
2011-09-13 10:16 wjp Note Added: 0003005
2011-09-13 13:53 lassoan Note Added: 0003011
2011-09-14 03:43 kikinis File Added: Screen Shot 2011-09-14 at 7.41.42 AM.png
2011-09-14 03:45 kikinis Note Added: 0003024
2011-09-14 12:11 kikinis Note Edited: 0003024
2011-09-14 15:53 finetjul Note Added: 0003031
2011-09-14 15:54 kikinis Note Added: 0003032
2011-09-14 20:34 finetjul Relationship added related to 0001320
2011-09-15 03:31 kikinis File Added: Verticaldouble.PNG
2011-09-15 03:35 kikinis Note Added: 0003039
2011-09-15 05:00 finetjul Note Added: 0003042
2011-09-15 05:16 finetjul Note Added: 0003043
2011-09-15 05:17 finetjul File Added: SlicerGrey.png
2011-09-15 08:47 wjp Note Added: 0003047
2011-09-15 09:18 finetjul Note Added: 0003048
2011-09-15 09:39 wjp Note Added: 0003049
2011-09-15 10:49 kikinis Note Added: 0003051
2011-09-15 10:58 finetjul File Added: SlicerGrey-detached.png
2011-09-15 10:59 finetjul Note Added: 0003052
2011-09-16 04:14 kikinis Note Added: 0003058
2011-09-16 09:42 wjp File Added: grey2Dividers.png
2011-09-16 10:15 wjp File Deleted: grey2Dividers.png
2011-09-16 10:15 wjp File Added: grey2Dividers.png
2011-09-16 10:16 wjp File Added: grey2LightboxDividersDarker.png
2011-09-16 10:24 wjp Note Added: 0003067
2011-09-27 05:00 kikinis Note Added: 0003122
2011-09-27 06:45 finetjul Note Added: 0003125
2011-09-27 06:45 finetjul Status feedback => resolved
2011-09-27 06:45 finetjul Fixed in Version => Slicer 4.0 RSNA
2011-09-27 06:45 finetjul Resolution open => fixed
2011-09-27 06:46 finetjul Relationship deleted parent of 0001412
2011-09-27 06:46 finetjul Relationship added related to 0001412
2011-10-05 12:36 kikinis Status resolved => closed