Automatically select an appropriate background colour based on the image's luminance

[oparoz]

Current situation

• The large previews use a black viewport
• Each picture has a 30 pixels wide white border and a white background
• A toggle-background button was introduced so that the background+border could be turned off. There is a discussion going about what should be the default behaviour. See Add a button to toggle the colour of the background in the slideshow #40

The problem

This is not ideal as currently users have to manually adjust the background+border if they're viewing very bright pictures and the white border doesn't look very nice with dark pictures with no transparency.

It gets worse in slideshow mode as you have to adjust the background if reaching a picture which can't be properly seen with the currently selected background.

Solution

• Calculate the luminance of each picture and adjust the background accordingly
• Keep the toggle button as an emergency measure?
• Possible bonus colour transition if Various picture transitions in the slideshow #83 is implemented

IE8 is not supported

Next steps

Feasibility study

I did some experiments both in PHP and JS and it's doable.
Background switcher should stay imho, at least as an option.

• Build proof of concept

Development

The amount of work required is estimated at 2 days, including extensive testing

• Secure funding
• Build specifications

Implementation details

• Ignore some media types, either to speed things up or because we can't easily calculate their luminance without using additional libraries
• Calculate the luminance
• Calculate the alpha level
• Calculate what the optimum background colour should be

QA

If the accuracy level reaches 90%, the toggle button (#40) could be removed

• Gather a large sample of very different pictures to test with
• Optimise the algorithm so that it gets it right >75% of the time. % tbd based on funding.

@anarcat - Do you have some sample pictures? Would auto white/black be OK?
@jancborchardt - This would solve the white border issues when going fullscreen and should improve usability

Want to back this issue? Post a bounty on it! We accept bounties via Bountysource.

[anarcat]

here's hopefully a sample:

a good test is the images generated by nagios's status map.

i still believe just having a gray background would be a good compromise.

[oparoz]

Thanks! That's detected as a very dark picture and a white background is automatically selected when in full screen.

[jancborchardt]

@oparoz I don’t know about this. The dark background is simply standard for image viewers. It would be incredibly janky if the background would change when switching images. This seems like overthinking it.

We shouldn’t have a background switcher, nor have it switch automatically. The only thing we wanted to solve is the issue for transparent images, and we kinda did that.

[oparoz]

Well, the problem is that the white background + border isn't working well for pictures, so we need to find a way to only turn it on only for dark, transparent images and they're not necessarily all in the same folder or one after the other.

[jancborchardt]

@oparoz ah ok – you were talking about the background of the image – not of the whole overlay? In that case sorry. :)

[oparoz]

Yeah, I've tried to use the word viewport to make the distinction between the whole background and the image's background, but I'm happy to take suggestions on how to word it better :)

[oparoz]

Maybe I should start a bountysource funding campaign...

[oparoz]

This issue was moved to nextcloud/gallery#22