[Help needed] Let's find a good look for the Flexi mask panel

Software darktable
, , ,
1

With the latest build it is now possible to easily customize the look of the flexi panel with a few CSS rules.

It seems a good a moment to ask those with more good taste than yours truly to play a bit with the CSS and come up with a proposal for a good and functional look for the default theme.

This is what I landed on for now:

image
image420×1152 82.5 KB

If you are interested, you can copy paste the CSS snippet below in the preferences and have a go at it:

CSS snippet 
/* ---- flexi mask panel ---- */

/* header / rail / card-frame shades per state */
@define-color mask_rest          rgba(255, 255, 255, 0.15);
@define-color mask_implied       rgba(255, 255, 255, 0.4);
@define-color mask_selected_top  rgba(255, 255, 255, 0.60);
@define-color mask_selected      rgba(255, 255, 255, 0.60);
@define-color mask_hover_top     rgba(255, 255, 255, 0.90);
@define-color mask_hover         rgba(255, 255, 255, 0.60);
/* background of the controls under an open header */
@define-color mask_card          rgba(255, 255, 255, 0.15);
/* background of the whole list container, rails included */
@define-color mask_list_bg       rgba(0, 0, 0, 0.4);

/* header names per state */
@define-color mask_text_rest     @fg_color;
@define-color mask_text_implied  @mask_text_rest;
@define-color mask_text_selected rgba(0, 0, 0, 0.9);
@define-color mask_text_hover    rgba(0, 0, 0, 0.9);

/* compact opacity value in headers ("use sliders for opacity" off) */
@define-color mask_text_value       alpha(@text_color, 0.85);
@define-color mask_text_value_hover @text_color;

/* slider labels and values in cards */
@define-color mask_text_control       @fg_color;
@define-color mask_text_control_hover shade(@fg_color, 1.2);

/* the list container's shape */
#masks-list-box
{
  padding: 4px;
  border-radius: 6px;
}

Thanks a lot for your help and feedback :slight_smile:

5 Likes
2

Hi Daniele. I am not able to help with the look but I have a question. I presume the the second mask (which might be a brush) could be set to exclude rather than union and then would act as an eraser effectively. Is that correct?

Is the flexi mask panel in the nightly builds yet?

3

I’ve been wondering about the mask combination modes myself today. @Terry ‘difference’ mode acts like an ‘erase’ or ‘subtract’ mode with the existing tools. ‘Exclusion’ I’m not too sure about (not familiar with XOR), but it seems like ‘add to masked area, but also subtract from other masks at the same time.’

I think I should bring up the naming for Difference and ask about icons in the other thread (when the servers stop being broken, I can barely load a single page on firefox atm).

4

Thanks for the response. I used the term exclude but there may be an already accepted convention such as difference.

BTW, I went to look at the mask manager before posting. Hell…you would need to have the user guide opened to work out that beast unless you were experienced. I was right clicking, left clicking and everything else I could consider but couldn’t work out how to change the way masks worked together.

1 Like
5

I found it tricky at first but they work like the pipeline in a way… Interactions are determined from the bottom towards the top and you can reorder things…it will take some experimentation…

1 Like
6

Yes, Terry. If you have a group set to difference with N children, the children above will be subtracted from the one below.

Note that you can already subtract in the classic mask, but the UX is much less convenient. In classic, everytime that you draw a brush stroke you have to go in the mask manager and change its operator to difference. This does not play well with the typical workflow of overlaying many layers of low opacity brush strokes. In flexi, you would just select a subtractive group and start drawing. All shapes that you add end up in that group automatically, so you can easily add many brush strokes much more conveniently.

3 Likes
7

For example Terry…here is a quick group…set to interact in difference. I added the parametric mask first then two brush strokes with a litttle overlap and path off to the side… you will get this…

image
image1920×1080 776 KB

If however you added the parametric mask later or drag it up you will get this from the order of the elements …

image
image1920×1080 480 KB

Same elements different order…

2 Likes
8

Daniele,

This is really great work. I think its truly really flexible and after people get the hang of it I think this will really take off.

I have two suggestions that came up for me during testing…Maybe real world it would be used less but could we consider, and further pardon me if this came up already as it likely did but I find two features a little bit of a pain to have to right click to get and that is the invert and the enable/disable. I think maybe the disable is hidden there to make sure people have to take a positive action to do it maybe??

I know already you have packed in so much to a small space but I think even if it was an option to enable that clicking on the element icon, ie the path or brush or drawn object etc identifier icon in the element header could be used to toggle the module off and on maybe with a visual bolding and unbolding or whatever. Second maybe allowing alt clicking on the element header or hover and a key like “i” for inverting… Basically it would be nice to have a direct way to explore the mask by being able to quickly invert and enable/disable… I may have missed something around this so if its already flogged to death just ignore me…

1 Like
9

Thanks for the feedback, Todd.

You can already assign shortcuts to all actions, including invert and disable.

1 Like
10

Okay I’ll explore…I still think it would be nice to find a direct click option for those actions if it could be managed… Again really nice work…

1 Like
11

I was thinking about your illustrated example. "Do we need to be shown, for instance, opacity, in the slider.

And I think not. Everyone knows what it is, and its representation on the slider line is not going to literal anyway.

Where nothing real is gained, stick to classic darktable minimalist slider design.