improving darkroom filmstrip readability

Software darktable
1

To me the darkrooms filmstrip is hard to decipher. The shading between inactive, selected and hovered is not easily discernable to me. I hacked up some CSS to help me visualize things better:

before

grafik
grafik1268×185 92.9 KB

after - darkened background + lines only

grafik
grafik1268×185 91.9 KB

after - selection with golden borders: helps discern selection and active even more

grafik
grafik1268×185 94 KB

css for darkening the background:

/* Base: darken the filmstrip background and border of every filmstrip thumbnail */
#thumbtable-filmstrip #thumb-back {
  background-color: shade(@thumbnail_bg_color, 0.7);
  border-color: shade(@lighttable_bg_color, 0.75);
}

/* Restore the theme's group-indicator border color on the specific edge(s)
   of thumbnails belonging to a duplicate/group, which the base border
   color above would otherwise overwrite */
#thumbtable-filmstrip .dt_group_left #thumb-back   { border-left-color:   @group_indicator_color; }
#thumbtable-filmstrip .dt_group_top #thumb-back    { border-top-color:    @group_indicator_color; }
#thumbtable-filmstrip .dt_group_right #thumb-back  { border-right-color:  @group_indicator_color; }
#thumbtable-filmstrip .dt_group_bottom #thumb-back { border-bottom-color: @group_indicator_color; 
}

css for the selection with borders

/* Selected, not hovered: keep the base background color */
#thumbtable-filmstrip #thumb-main:selected:not(:active):not(:hover) #thumb-back {
  background-color: shade(@thumbnail_bg_color, 0.7);
}

/* Selected: gold border, regardless of active/hover state */
#thumbtable-filmstrip #thumb-main:selected #thumb-back {
  border-color: #FFD700;
}

Note: This conceptualy interferes with the markings for grouped images, which receive a joint golden border. I am in fact not using the golden borders atm.

While fiddeling around with this I discovered an neat fact about the hovering I didn’t know: When the mouse is over the canvas the active image is in effect hovered, the filmstrip reflects this by brightening the active image.

10 Likes
2

This part of the change is now part of the grey theme in master.

I fiddled some more with it for my setup. To help me understand which images are selected vs active I added a small golden border around selected images themselves, which doesn’t interfere with the golden boxes around grouped images:

grafik
grafik1044×144 58.2 KB

/* Selected: border directly around the image itself */
#thumbtable-filmstrip #thumb-main:selected #thumb-image {
border: 1px solid gold;
}
2 Likes
3

I changed it to 2px dotted white to look more like an image editor region selection, and it highlights some really odd behavior. When I have the first image of duplicates ("siblings) opened and select the other sibling, the opened image shows as selected, and it shows as selected or deselected depending on which other images are selected, whether it’s one or multiple, and whether its sibling (the duplicate).

I experimented by rating the images and seeing what changes (with the cursor over the selection), and it turns out the currently open image really is being selected and deselected for unintuitive reasons.

Here’s how the dashed line looks:

image
image727×158 54 KB

4

@finestructure could you share a screencast? That sounds like a bug.

(I tried the dotted line, too, because I liked the thought of staying in shades of grey but to me it felt too busy but I am still experimenting).

5

I experimented more, and the behavior is simpler than I thought. I will file a bug.

1 Like