Remove widget emboss #42228

New Issue

Jonathan Williamson · 2014-10-14T21:56:12+02:00

2014-10-14 21:56:12 +02:00

Currently the embossing of UI widgets is hard-coded, often resulting in bad highlights/shadows in themes. It is particularly noticeable in dark themes.

Per @billrey's mockups in #38037, I think it's time we remove the embossing from UI widgets. This use to be an option in the theme preferences, but we are already overloaded with options.

I propose we remove embossing entirely, yielding a more modern, flat UI style that is more easily theme able and clean.

This is actually quite a subtle change in most places. For example, here is the default them with and without embossing:

The change is more noticeable on darker themes, such as Graph:

I am willing/able to undertake this myself. I've already been experimenting with the embossing code and it's not difficult. The main challenge will be cleaning up the various remnants of the now defunct emboss theme option.

Currently the embossing of UI widgets is hard-coded, often resulting in bad highlights/shadows in themes. It is particularly noticeable in dark themes. Per @billrey's mockups in #38037, I think it's time we remove the embossing from UI widgets. This use to be an option in the theme preferences, but we are already overloaded with options. I propose we remove embossing entirely, yielding a more modern, flat UI style that is more easily theme able and clean. This is actually quite a subtle change in most places. For example, here is the default them with and without embossing: ![Screen_Shot_2014-10-14_at_1.38.31_PM.png](https://archive.blender.org/developer/F116725/Screen_Shot_2014-10-14_at_1.38.31_PM.png) ![Screen_Shot_2014-10-14_at_1.38.18_PM.png](https://archive.blender.org/developer/F116727/Screen_Shot_2014-10-14_at_1.38.18_PM.png) The change is more noticeable on darker themes, such as *Graph*: ![Screen_Shot_2014-10-14_at_1.36.30_PM.png](https://archive.blender.org/developer/F116729/Screen_Shot_2014-10-14_at_1.36.30_PM.png) ![Screen_Shot_2014-10-14_at_1.37.12_PM.png](https://archive.blender.org/developer/F116730/Screen_Shot_2014-10-14_at_1.37.12_PM.png) I am willing/able to undertake this myself. I've already been experimenting with the embossing code and it's not difficult. The main challenge will be cleaning up the various remnants of the now defunct emboss theme option.

Jonathan Williamson commented

2014-10-14 21:56:12 +02:00

Changed status to: 'Open'

Pablo Vazquez was assigned by Jonathan Williamson

2014-10-14 21:56:12 +02:00

Jonathan Williamson commented

2014-10-14 21:56:12 +02:00

Added subscribers: @billrey, @ThomasDinges, @JonathanWilliamson, @PawelLyczkowski-1, @ideasman42, @JulianEisel, @mont29, @pablovazquez, @liquidape

Paweł Łyczkowski commented

2014-10-14 22:00:26 +02:00

This has my support. This would clean the GUI up in dark themes, while not impacting the light themes that much.

Jonathan Williamson commented

2014-10-14 22:14:44 +02:00

Here are a few more screenshots showing with and without embossing. You'll notice that the emboss (or lack there of) is quite subtle in the default theme, but sticks out strongly in the darker Graph theme.

Default theme with emboss:

Default theme without emboss:

Graph theme with emboss:

Graph theme without emboss:

Here are a few more screenshots showing with and without embossing. You'll notice that the emboss (or lack there of) is quite subtle in the default theme, but sticks out strongly in the darker *Graph* theme. **Default theme with emboss:** ![Screen_Shot_2014-10-14_at_3.12.18_PM.png](https://archive.blender.org/developer/F116733/Screen_Shot_2014-10-14_at_3.12.18_PM.png) **Default theme without emboss:** ![Screen_Shot_2014-10-14_at_3.12.28_PM.png](https://archive.blender.org/developer/F116735/Screen_Shot_2014-10-14_at_3.12.28_PM.png) **Graph theme with emboss:** ![Screen_Shot_2014-10-14_at_3.11.48_PM.png](https://archive.blender.org/developer/F116737/Screen_Shot_2014-10-14_at_3.11.48_PM.png) **Graph theme without emboss:**![Screen_Shot_2014-10-14_at_3.11.54_PM.png](https://archive.blender.org/developer/F116739/Screen_Shot_2014-10-14_at_3.11.54_PM.png)

Pablo Vazquez commented

2014-10-15 11:38:57 +02:00

Hi,

Emboss has a function, it's a way to make the element pop, the reason it doesn't always work now it's because it's hardcoded to white (well, glColor4f(1.0f, 1.0f, 1.0f, 0.02f) )

/source/blender/editors/interface/interface_widgets.c

if (wtb->emboss) {
    glColor4f(1.0f, 1.0f, 1.0f, 0.02f);
}

So I wouldn't remove it completely, but allow to change it's color/alpha (same we do now with Text Style), so we can make it fit all themes. If its alpha is set to 0, we skip the drawing completely.

Personally, I have it changed to black (glColor4f(0.0f, 0.0f, 0.0f, 0.02f)) to work like a subtle shadow.

Example of emboss turned into black for a subtle drop shadow effect:

(ignore the other UI tweaks in this branch :)

Being able to change the color/alpha of emboss will allow us to keep a classic 2.5 (and 2.4!) theme identical as it is now, a flat theme without, and the drop shadow effect if needed. While still taking the OGL advantage of not drawing it in case its alpha is 0.

Hi, Emboss has a function, it's a way to make the element pop, the reason it doesn't always work now it's because it's hardcoded to white (well, glColor4f(1.0f, 1.0f, 1.0f, 0.02f) ) ``` /source/blender/editors/interface/interface_widgets.c ``` ``` if (wtb->emboss) { glColor4f(1.0f, 1.0f, 1.0f, 0.02f); } ``` So I wouldn't remove it completely, but allow to change it's color/alpha (same we do now with Text Style), so we can make it fit all themes. If its alpha is set to 0, we skip the drawing completely. Personally, I have it changed to black (glColor4f(0.0f, 0.0f, 0.0f, 0.02f)) to work like a subtle shadow. Example of emboss turned into black for a subtle drop shadow effect: ![graph_defaultflat.png](https://archive.blender.org/developer/F116946/graph_defaultflat.png) (ignore the other UI tweaks in this branch :) Being able to change the color/alpha of emboss will allow us to keep a *classic* 2.5 (and 2.4!) theme identical as it is now, a flat theme without, and the drop shadow effect if needed. While still taking the OGL advantage of not drawing it in case its alpha is 0.

Campbell Barton commented

2014-10-15 12:08:40 +02:00

Think this can work as a theme option without much trouble, then we can propose changing defaults after.

Pablo Vazquez commented

2014-10-15 12:18:13 +02:00

+1 to be theme option (RGBA?), by default to white 1.0f/alpha 0.02f so it doesn't affect the current theme.

Jonathan Williamson commented

2014-10-15 16:55:14 +02:00

That's a good example @venomgfx.

@ideasman42 didn't it use to be a theme option? Any idea why it was disabled? I seem to remember it not making the leap to 2.5x.

I'll dig in and see if I can make it an option.

That's a good example @venomgfx. @ideasman42 didn't it use to be a theme option? Any idea why it was disabled? I seem to remember it not making the leap to 2.5x. I'll dig in and see if I can make it an option.

Pablo Vazquez commented

2014-10-15 17:08:17 +02:00

It was never really an option IIRC. It's the UI Draw Type setting that allowed different "styles", from which some of them had emboss and some didn't.

It was never really an option IIRC. It's the UI Draw Type setting that allowed different "styles", from which some of them had emboss and some didn't. ![blender_ui_24_emboss.gif](https://archive.blender.org/developer/F117022/blender_ui_24_emboss.gif)

Jonathan Williamson commented

2014-10-16 00:02:10 +02:00

Okay I've added a new diff to add the Theme option for the emboss feature. By default it's set to same color as was previously hard-coded.

Note: I had some trouble getting everything to align in the User Preferences. Perhaps @ThomasDinges has some suggestions?

Okay I've added a new diff to add the **Theme option** for the emboss feature. By default it's set to same color as was previously hard-coded. **Note**: I had some trouble getting everything to align in the User Preferences. Perhaps @ThomasDinges has some suggestions?

Diego Gangl commented

2014-10-23 15:32:06 +02:00

Added subscriber: @Januz