New Segment Editor layout - vertical effect toolbar

Thanks to all the development efforts of @jamesobutler and feedback from the community, the new, more space-efficient Segment Editor user interface is now ready (available in latest Slicer Preview Release). The main difference is that the effect toolbar is vertical, with fixed number of columns and without icon labels. This layout makes it easier to remember where to find an effect (because the same effect always appears at the same place), and the space is used more efficiently (there is less need for scrolling).

Feedbacks and suggestions are welcome.

10 Likes

This is looking great. One minor suggestion now that the Effect labels have been removed and the button icons are much smaller is to consider creating some new artwork for very common effects to harmonize them with well-known painting and image editing programs.

For example, the Draw tool could be made into a simple pencil icon, the Paint tool could just be a paintbrush, Flood Filling could be a paint can, Level Tracing could be a magic wand, Eraser just a simple eraser. I’m not sure what exactly to do with Scissors, the icon implies cutting/deleting to me, but the functionality is more like a “shapes” tool that lets you draw circles and rectangles. The more advanced, 3D image icons are probably fine as is, but worth putting some thought into given the new design.

2 Likes

Good idea. Contributions for improving these icons are very welcome. We actually need to update all Slicer icons, as screen resolutions increased since the current icons were created and the style has become inconsistent over the years.

Hi, just looked at this, it is great! Thanks for the effort!

One comment: would it make sense to put the undo/redo buttons like the picture attached? Then they would also always stay in the same place and not relocate in the GUI with each effect description.

I think it might also be clearer that they are not dependent on the effect

Thanks

2 Likes

What do you think about showing it below the effect toolbar?
It would keep the (none) effect stand out and and preserve the concept of workflows starting in the top-left corner (you would not start with undo/redo). Also, if you scroll up to see the all segment effects and masking settings then the top of the effect list may not be visible anymore.

Could you give this a try to implement this and give it a try how it works for you? Probably placing it into a separate frame (not in the effect toolbar) would be better, so that if the effect toolbar is configured with more columns, the undo/redo would still span the whole width.

1 Like

I see, this makes sense.

Yes, unfortunately lately haven’t had much time to work on developing in Slicer environment. This could be something to check out in the future.

No problem. Thanks for the suggestion anyway.

@jamesobutler when you implemented this new design, have you experimented with placing the undo/redo buttons in different locations? Would you have time to me to give it a try to put it under the effect toolbar?

I never considered moving the undo/redo button location, but moving it to smaller toolbuttons under the Segment Effect frame does make sense. That would then bring up masking to be directly below the effect options groupbox.

Yes, I can spend some time maybe this weekend to experiment with that change.

2 Likes

Here’s some images of the prototype. I’ve put it below the segment effects as @lassoan suggested based on the concept of the workflow starting at the top left and then working down. I’ve put the undo/redo in a similar styled frame groupbox like the effects frame.

I made it a separate frame rather than putting inside the same one as the effects to decouple logic associated with effect count which is based on the number of items in the layout in the effects layout. I had previously considered putting a horizontal line at the bottom of the effects frame and then putting the undo/redo buttons below that which would have had everything within that same effects frame. However, the two separate frames (Effects group and then the Undo/Redo group) appears to work well too.

Let me know what you think and I’ll issue a PR.

Overview Prototype:

1Column:
image

2 Column (Default)
image

3+ Column
image

2 Likes

This looks great!

Just one small change we could consider is adjustment of the space between the effects frame and undo/redo frame. The space between the two frames should be the same (or maybe a bit larger) than the internal margin (space between the frame and the buttons inside).

This is with the spacing set to 11 (same as QGridLayout margin values) instead of the default 7. This what you are thinking?

This is with the value set to 7. I thought this was the default, but actually looks a little different for the better. I think this looks a little better than the 11 value I showed above.
image

I have issued PR based on this work and if others want to experiment different values for spacing they can easily do it with the code.

1 Like

Looks perfect to me, thank you. If there are no other comments then I’ll merge this later today.

That was fast, very nice! thanks!

Do one has to use this new layout ? or is that an option ? I liked the older too because of the text labels.

Yes, the labels are “nice”, that’s why we have been holding out until now. However, it has become clear that displaying the labels only in tooltips (as all other software do) is better, because it takes much less space. We now fix the button positions to make the toolbar buttons easier to find.

I see that for new users the labels could save time, and you can enable that with a single line of code (the varying width of the buttons will be fixed in tomorrow’s Slicer Preview Relase):

getModuleGui('SegmentEditor').editor.effectButtonStyle = qt.Qt.ToolButtonTextUnderIcon

We could make the button style configurable in application settings, but it would be difficult to let users know that the option exists. It would be better to implement alternative solutions to make effect buttons easier to find.

What do you think about the suggestion above of making the icons more similar to commonly-used other software (Paint, Photoshop, Gimp?) - would that be sufficient?

The current tooltips are pretty good, but it could be nice if the buttons had a no-delay mouseover effect that set a label with the effect name, say at the top of the toolbar. That way the information would be readily discoverable without taking much space. Tool tips aren’t as nice because of the initial delay, they are sometimes covered by the mouse pointer, and because they jump around making them a little harder to read.

2 Likes

Regarding other applications use of tool tips, how do their tool tips behave? What delay is a common value to show? You would of course not want to show it immediately but only during a moment of delayed inspection.

The sidebar of effects is an elegant solution.
Maybe we could make the label text toggle when the user right-clicks on this particular frame and selects a menu option “button texts”, then save this preference for the next start? New users would certainly benefit from the label texts because the full selection of editor tools can be quite overwhelming, as soon as people are experts they could hide the labels.
Much of this is personal preference - f.e. I do not like program toolbars very much and prefer flexible, labeled buttons or using a menu.
The problem with tool text is, that you always get a short but significant time delay to actually see them - in my Slicer installations this is around 3 s

Updating the icons and styling them similarly in a flexible resolution would be great.