[UI usability] masks selection: toggling

[althio]

This is a follow-up of #2011 :heart: by @flowernert (excellent UI improvement for mask selection).

Is your feature request related to a problem? Please describe. The current behavior is:

• toggling: when one disabled mask option is clicked, the mask becomes active, the mask icon is highlighted and the sliders box is shown
• un-toggling: when one enabled mask option is clicked, the mask becomes inactive, the mask icon is back to normal and the sliders box is hidden
• disabling: when the cross is clicked, any mask becomes inactive and the box is hidden

So clicking on a enabled mask option or on the cross gives the same result.

On the other hand... When masks are used in a module, the module gets very big i.e. UI height is very tall. I would like the ability to collapse the mask UI when I am done with the mask selection and I want to focus on module effect.

I think this is also a good opportunity to reclaim UI space.

Describe the solution you'd like

I would like the ability to collapse the mask UI but still keep the mask active.

The proposed behavior is:

• toggling: when one disabled mask option is clicked, the mask becomes active, the mask icon is highlighted and the sliders box is shown
• hiding: when one enabled mask option is clicked, the mask stays active, the mask icon stays highlighted but the sliders box is hidden
• disabling: when the cross is clicked, any mask becomes inactive and the box is hidden

[flowernert]

Hi @althio Thanks for your feedback on the feature 😊

Your suggestion really comes in sync, actually 2 days ago I was very bored by having these masks options always visible and I thought that it would be nice to have a folding arrowhead to collapse them.

However I like your proposition better, I'll look forward to implement it when I can.

[aurelienpierre]

Good idea. There is also a flaw in the current design : the buttons are more like tabs, and each of them inherit the conditions of the previous and adds one.

Instead of that, each tabs could add a unique set of constraints, so there is no redundancy between tabs. That way, we keep the tabs short. Then, the soft would read all the defined constraints and do a boolean AND to compute an alpha mask.

Idea:

Tab one : uniform blending

• enable/disable checkbox
• reset button
• blend mode combobox
• opacity slider

Tab 2 : parametric blending

• enable/disable checkbox
• reset button
• parametric sliders/color spaces tabs as of today

Tab 3 : drawn mask

• enable/disable checkbox
• reset button
• mask creation buttons
• mask list + positive/negativeboolean AND)

Tab 4 : edge refinements

• enable/disable checkbox
• reset button
• methods combobox
• feathering radius/contrast sliders

Tab 5 : mask management

• enable/disable the whole blending stack (for preview, or before/after comparison)
• reset the whole blending stack
• give a name to the current stack to export to raster masks (to be reused in another module)

Then, tabs buttons would have a different state depending whether the tab content is enabled or not, but will solely serve as toggle buttons.

[AlicVB]

I like your idea @aurelienpierre I've just some small concerns with the last tab : I think reset and enable/disable should be more directly accessible, as it is actually for all iop. We have space, maybe just add 2 small toggle buttons ?

If no one want to take it, I can have a try...

[flowernert]

Whilst I really love the space saving suggestion of @althio I'm not really fond on the suggestion @aurelienpierre

While what you say about masks is totally true from an image processing perspective, from a user interacting with the software I feel like it will add more clicks to get to what I want to do, for no foreseable benefit (if the mask params hiding suggested by @althio is implemented). But maybe I'm not seeing it, @aurelienpierre what benefit exactly would it be to the user ?

Let's make a common use case scenario I want to apply a parametric mask on a drawn mask and to adjust its opacity for the final blending in the image : currently it's 1 click to access this function, then I have all the knobs under my mousewheel.

With the proposition you make I would have to navigate thoughout the different tabs too many times, and everyone known that more that often when you finetune you need to move I slider, then adjust another, then adjust another...

I feel like the user experience would be lowered.

[aurelienpierre]

I've just some small concerns with the last tab : I think reset and enable/disable should be more directly accessible, as it is actually for all iop. We have space, maybe just add 2 small toggle buttons ?

The problem is how do you make a visual difference between what belongs to the module and what belongs to the masks API ?

While what you say about masks is totally true from an image processing perspective, from a user interacting with the software I feel like it will add more clicks to get to what I want to do, for no foreseable benefit (if the mask params hiding suggested by @althio is implemented). But maybe I'm not seeing it, @aurelienpierre what benefit exactly would it be to the user ?

Sure, you add more clicks to hide/show options, but in the same time, now we have 2 problems :

1. the mask API is becoming crowded and the option list is long (opacity + drawn masks + parametric blending + edge refinements), so you have to interact anyway with the middle button to scroll the list (plus, you have to push the mouse cursor on the scrolling bar before, because standard scroll sets the hovered slider),
2. once you are in the middle of that long list, you are kind of lost, and switching between modules, you constantly need to adjust the floating line, plus new users might not get what options belong to modules or masks.

My proposal turns long scrolls into clicks and keeps things neat and tidy for better understanding.

and everyone known that more that often when you finetune you need to move I slider, then adjust another, then adjust another...

That's another problem and a hint that the masking design is poor. Settings should be straightforward, and circular editing means something is wrong at an algorithmic level, so this problem needs to be investigated and adressed separately.

But from a strict UI perspective, I like the idea of explicitely stacking the masking conditions step by step, instead of duplicating controls between discrete cases (opacity alone, opacity + parametric, opacity + drawn, opacity + drawn + parametric… if we keep adding options in the future, the number of cases will increase exponentially, it's bad).

[AlicVB]

The problem is how do you make a visual difference between what belongs to the module and what belongs to the masks API ?

something like that ? with a more meaningful icons instead of the eye... (and I realize I may have not used the right words to explain, sorry...)

[aurelienpierre]

I see. Then the border would be better on the top I think.

But still, I don't like the general design of separate cases with combinations of options.

[AlicVB]

I agree, I've just copied the actual icons, the idea is to have one icon/tab for each mask "parts" like you suggest earlier. Maybe replace the 4th by one symbolizing edges refinements For the border, it was just some random stuff to symbolize the "tab" concept... but I'm not really good for ui designing...

[AxelG-DE]

I like the improvement by @flowernert a lot, thanks for that excellent work.

I see the points of @aurelienpierre and agree to most of it. Please keep in mind, that would mean a huge change in work flow and might be difficult for someone, as dt isn't very easy to learn.

Please get me right, I don't wanna open another discussion like on pixls "oh.... I like old UI more"

Just I remember, it took me some time to master masks like today. Also it would make some brilliant tutorials like those by Harry almost invalid (I know, this is taking the topic upside down)

Would it overload if we either can have those new tabs on/off by config, or a gentle move of the philosophy rather than radical change (don't ask me how, yet :>)?