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

[oparoz]

From @oparoz on March 11, 2015 23:30

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 Use EXIF taken date as sorting date for photos [$200] #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 Scale up really small images for the album presentation #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.

Copied from original issue: owncloud/gallery#84

[oparoz]

From @anarcat on March 12, 2015 0:14

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.

[oparoz]

From @jancborchardt on March 18, 2015 11:59

@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.

[oparoz]

From @jancborchardt on March 18, 2015 12:16

@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]

PR is in #179

@anarcat