Page MenuHome

UI: Color Ramp: Add tools menu

Authored by Charlie Jolly (charlie) on Nov 19 2018, 5:15 PM.

Diff Detail

rB Blender

Event Timeline

Behaviour is not defined but this distributes the stops from left to right with gap at end.

Currently uses the following icon: ICON_TRACKING_FORWARDS_SINGLE

While functionality is nice, these buttons are getting quite crowded, also, communicating even-spacing via a single icon isn't so clear.

Suggest operations like this go into a sub-menu, then they're clearly named without cramping the UI (flip could go into submenu too).

What do our designers think @Pablo Vazquez (pablovazquez) @William Reynish (billreynish) ?

Yes I agree with Campbell here. Better to add a menu with operations. The flip operations could be added there too.

This makes it so we can use descriptive names and then we don’t make the main color ramp UI cluttered. The color ramp should remain compact.


Yes, just add it to a dropdown menu. This dropdown could have the Flip operator, and the obscure Sample Colorramp feature which is great but not used as often as adding/removing (plus it already has the E shortcut for advanced users).

Flip is one of the most used buttons in the colorramp node, at least for me, so having that go into a submenu is not really an ideal solution.
Why not move the menu or icon for the even distribution thing between the two sliders below the actual colorramp? Those sliders are quite big, especially the position slider is larger than it really needs to be.

UI: Color Ramp: Add tools menu

Add color stop distribute functions
Add reset to default function
Move flip option from button to menu

@Sebastian Koenig (sebastian_k) I've moved the flip option as originally suggested, see what the UI team suggest and it's easy to change it back

Additional notes:

  • Eye dropper seems to be broken in current builds. I've not attempted to fix this.
  • I've amended the BKE_colorband_init function to reset the ipotype and cur variables.
  • The dropdown menu was copied from the curve tools menu. I've changed both of these to a menu that opens below rather than to the right.
  • There are two options for the distribution, either evenly spread from 0->1 or just from the left. See screenshot below.

Charlie Jolly (charlie) retitled this revision from UI: Color Ramp: Add button to evenly distribute color stops to UI: Color Ramp: Add tools menu.

@Charlie Jolly (charlie): Looks good overall.

There are some small UI issues where the text gets clipped, but I presume that's not in your code?

And as you say, the eyedropper doesn't work, but that's a separate issue too.

@William Reynish (billreynish) I don't get the issue with the clipped menu! Do you get the same issue with the curve mapping menu too?

@Charlie Jolly (charlie): yes I do:

Perhaps it's a DPI thing - I'm running on a HiDPI monitor. Sometimes there are certain UI bugs that appear where a scale isn't properly multiplied with the DPI setting - this could be one of them.

The strange thing is that I haven't noticed this anywhere else than these two specific menus.

BTW, another small nitpick: Commands should always be capitalized. So 'Flip colorband' should be 'Flip Colorband' etc.

Charlie Jolly (charlie) updated this revision to Diff 12580.EditedNov 20 2018, 4:54 PM

Attempt to fix menu width for high DPI

Copied 3.0f * UI_UNIT_X from ...\interface\interface_region_menu_popup.c

@Charlie Jolly (charlie): That fixed it. Great.

Only remaining issue now is the lack of capitalisation, and then of course making the eyedropper work, but the latter is really a separate task.

Fix menu capitalisation

Brecht Van Lommel (brecht) added inline comments.

Colorband is the old internal name, we call the color ramps in the UI.

Charlie Jolly (charlie) marked an inline comment as done.

Update text to refer to color ramp instead of colorband

This revision is now accepted and ready to land.Nov 20 2018, 5:47 PM
This revision was automatically updated to reflect the committed changes.

Can we add a Distribute button only?

If I shouldn't comment on closed threads/tickets/pages, I will delete this. I'm an idiot. sorry.

I don't think the 'Eyedropper', 'Distribute Stops From Left', and the 'Reset Colorband' functions are really necessary. They're really cool but due to lack of real estate and for the purpose of efficiency, I think we can skip them.

  • Eyedropper: No other node/system has an eyedropper on the outside when it comes to color (see the materials tab under properties, or a node in the node editor) Do we really need it? It could go in the color section if it has to be on the outside. I don't like the bottom example, but it's better than a drop-down menu. You can already get to the EyeDropper in 2 clicks (color picker -> Eyedropper), so adding it under a menu doesn't make sense if it's not more efficient or convenient.

  • Distribute Stops From Left: This is only necessary because the 'Constant Interpolation Mode' under the 'RGB Color Mode' differs from all other modes. In all other modes, the last color stop on the far right hand side has influence on the colorband. This can be updated so that whenever the 'Constant' mode is selected, the 'Distribute' button distributes the stops differently. For all modes; 1 Divided by ([Number of stops]-1), and for 'Constant' it would be 1 Divided by (number of stops).

Ex. For a color ramp with 4 Color Stops:

Constant Interpolation mode 1/4=0.25 The positions will be:


All other Interpolation modes: 1/(4-1)=0.33* The positions will be:


*(up to whatever decimal points)
How the stops should be distributed for 'Constant Interpolation':

  • Reset Colorband: The reason I don't think this one is needed either is because there aren't really any 'Reset' or 'Restore to default settings' functions in any other nodes. It would just be faster to add a new ColorRamp Node. If the node is connected to a bunch of other nodes, you can use 'Node Wrangler' (shift+S) to switch and switch back. (if someone decides to add a new row in this node to make more room, then it should definitely be added as an icon)

So something like this with Import/Export color palette options (with better icons). The color picker can go there too maybe.

I agree with @Sebastian Koenig (sebastian_k) . If we move the 'Flip' function inside a menu, there are gonna be a lot of unhappy users. People use this functions almost every single time they are setting up a material or working in the node system.

Also if there is any way the flip icon can be changed, it would be fantastic. The current "flip" icon looks like a expand/scale/transform/stretch to edges icon.

Bonus request 1: Color Stop shape/size

Bonus request 2: I think the 'Flip ColorRamp' button should actually be 'Flip Color Stops'. (or both)

The button would Flip/mirror based on the 1st/last color stop center.

This will be a huge time saver for those who use the ColoRamp as a 'Color Palette'.

With the current system, if you have a particle system with an 'Object node<Random' plugged into the 'ColorRamp', and the majority of the color is made up of one color, when you flip it, the same percentage of the particles that inherited that color will get it again, which defeats the whole purpose.

Bonus request 3 (Cluttered)
I was thinking maybe a text field with the 'Total Number of Color Stops' would also be cool. So when you're setting up the node, you can just enter a number instead of clicking the plus sign a bunch of times and then aligning them.
As you can see, there are way too many icons and it no longer looks clean. If the 'Flip ColorRamp' button changed to 'Flip Stops', we can just have 4 icons total (picture 1)

Thank you so much @Charlie Jolly (charlie) for this btw. I've been wanting the 'distribute color stops evenly in the ColorRamp function' for a long time.
Also thank you everyone for all your hard work. I've only met a few of you, hopefully one day I'll get to thank all of you in person.

@Christopher Marcel Beumont (windex) thanks for your suggestions but they would be better placed on rightclickselect where more users will be able to discuss your ideas see:

The use of the menu and reset option is consistent with the curve mapping widget. The menu allows more functions to be added to the color ramp without cluttering the interface. This means other flip or distribute options could be added in the future.

The movement of the flip button maybe less desirable but code wise it is easy to change. I'm happy for the UI team to decide on this. The flip action has changed from a click to a click->hold interaction, it is first in the menu for that reason.

The eyedropper works differently depending on context. So for the color ramp it can be used to sample a range of colours. There is another eyedropper on the colorpicker itself to pick individual colours, see gif below. The eyedropper can be invoked with the E key when the mouse is over the color ramp.