feature request: brightness and contrast sliders for layers

[mhl]

Pavel suggested that it would be great to be able to adjust the brightness and contrast of layers as well as their transparency.

[unidesigner]

webgl would support it all: http://evanw.github.com/glfx.js/docs/

[unidesigner]

Now, fabric also supports this:
http://fabricjs.com/image-filters/
http://www.phpied.com/pixel-manipulation-in-canvas/

[tomka]

Comment from @SRez in issue #606 regarding the support of contrast sliders:

Second, I have a request. Is it possible to have a ‘contrast slider’ – this is very important for us. There is already a ‘brightness slider’, which is a blessing.

Reply from me in issue #606:

For the contrast slider: This is certainly something we want to have, too. I once created infrastructure for having such sliders which let the back-end manipulate the images. This is, however, not practical, as you can easily kill the server with many image manipulating requests. Instead, I will look into letting the front-end (browser) do that. The whole topic is covered in issue #186.

Reply from @SRez in #606:

With respect to ‘contrast slider’, a front-end solution would be fine – I would be happy with any type of control over contrast.
The reason a contrast slider would be of great aid in tracing is that often times one gets folds on a section as dark lines; and while the fold might appear dark (product of image acquisition and exposure settings), there is actually information there. By changing the contrast, one could, more often than not, see the information beneath the fold. It is also a useful tool for deciphering synaptic densities.

[SRez]

Hi,
Could you tell me how this filter is implemented? Does it appear as a slider like the 'opacity slider' or as a interactive button..? We upgraded to the latest instance, but I can not see where this is implemented.
Many thanks,
Best,
Reza

[aschampion]

To use the brightness/contrast sliders (and other filters), you will need to enable the tiles to be rendered with WebGL. You can enable this from the settings widget (gear icon in the toolbar) by clicking the "Prefer WebGL Layers" checkbox. After doing this you will need to refresh the page.

However, for this to work the server hosting your image stack must be appropriately configured. Specifically, it must set a cross-origin resource sharing policy, and that policy must include the origin which hosts your CATMAID instance. You can find information on how to do that for many types of server at this site, but for nginx it is usually as simple as adding add_header Access-Control-Allow-Origin *; to the location block for your image tiles. Of course if you don't want to allow use of the images from any domain you may want to replace the wildcard * with a regex which matches specific domains you plan to use.

To tell that the WebGL tile layer is working, when you open the layers and filter control by clicking the toggle in the bottom left of the stack view, you should see controls for blend mode and filters in addition to the opacity slider:

Select "Brightness, Contrast, & Saturation" from the filters drop down, click "Add", and the appropriate sliders will appear:

[SRez]

Thank you so much for this information Andrew. I shall definitely try this; from your screen shot it looks exactly what I was wishing for. Super.
best,
Reza

[sdadoun]

Thank you Andrew. I just suceed to install a new instance of Catmaid and those new features seem to work perfectly.
Best,
Simon