Page MenuHome

Color Ramp Handles

Authored by Charlie Jolly (charlie) on Feb 5 2014, 1:35 AM.



This patch changes how the color ramps are drawn by adding handles for the colour elements and also displaying a guide ramp without alpha.

The handles make it easier to see the elements and they also show the colour.

The guide ramp shows the gradient without alpha. This makes it much easier to visualise the alpha content of a ramp.

Note: Selection code has not changed so it still uses the same logic so clicking in the middle of the ramp will still select the handle.

Diff Detail

Event Timeline

I haven't reviewed the code, but the screenshot looks like a great improvement. I like that you can still select handles by choosing an index. At this time I have two suggestions for improvement:

  • Active handle should always be drawn on top.
  • Make it more obvious which one is active - e.g. make its base hang lower by a few pixels.
Charlie Jolly (charlie) updated this revision to Unknown Object (????).Feb 5 2014, 2:28 AM

Active handle is now always drawn on top.

Just wanted to say this looks awesome! :) Big improvement.

ahhh..finally, this is looks really great :)

Charlie Jolly (charlie) updated this revision to Unknown Object (????).Feb 5 2014, 10:38 PM

Experimental addition: Alt-drag vertically changes the alpha value of the colour stop.

Beware of whitespaces!! Also on my machine ALT DRAG doesn't work, there's a conflict with a similar "shortcut" that prevents me from using this :(. Maybe expose this shortcut to the user so they can change it ?

As @Alex Fraser (z0r) mentioned, the highlighting of the active handle is not clear in certain cases (e.g. with light colors). Could this be changed/improved ?

Other than that, +1 for this patch.

I'd prefer pointed tips on the handles -

When colors are spaced closely, this helps you know which handle is attached to which color (google image search gradient editor and most gradient other editors do this too)

I'd suggest keeping the alt-drag functionality for a separate patch. Let's get the styling approved first.

Thanks for the feedback. I'll remove the alpha adjust for the time being and concentrate on the design of the handles.

What is the general view on having the handles outside and increasing the vertical space a ramp takes up?

@Charlie Jolly (charlie) - I'd rather keep them the same vertical height as they are now, its handy there the same size as regular buttons.
Also, think using handles ~ half the height could still work.

I agree with @Campbell Barton (campbellbarton) on the pointed handles. Looking really good as is, huge upgrade.

Pointy handle example

Charlie Jolly (charlie) updated this revision to Unknown Object (????).Feb 7 2014, 11:18 PM

Pointy handle diff without alpha drag

Charlie Jolly (charlie) updated this revision to Unknown Object (????).Feb 8 2014, 12:22 AM


Note, main issue I had with the patch as-is, black/dark colors weren't visible, and the dot at the top to denote the active handle is quite small-subtle (and black too), so for dark colors you couldn't really see whats going on.

I've updated the patch:

based on a diff 5 with changes...

  • use 1/3 of the gradient solid color (was 1/5 which was quite thin).
  • multiple dark handles were hard to see, added white outline which is brighter for the active handle.
  • handles now scale with DPI and zoom.
  • fixed bug, wasn't disabling glEnable(GL_POLYGON_SMOOTH), glEnable(GL_LINE_SMOOTH)
  • meet our code-style guidelines:

Note, not sure having color in the handles works well at such a small size, it makes it hard to see the handle at all, and if you want to ensure you can see - you need contrasting outlines.

defalt zoom:

zoomed in:

While functional, I don't especially like the outlines, there is just a bit too much going on in a small space (color + blackline + whiteline).

Think it may be better not to have the color in the triangles and instead just use a single color with the active handle brighter.

I'd appretiate if a designer would like to draw up what they think can work best, it may be better if we can agree on an image first - then write up patch.

Campbell. Thanks for the notes and fixes to the code.

I think you are spot on about mocking up a design that works for both light and dark colours. I've got some ideas that may work but if anyone has some additional suggestions that would be great. It might come down to the prospect of allowing the ramp to occupy some additional space so the colours can be shown outside the box.

Updated handles for further feedback. Combination of original patch and triangles.

That newest version looks much better @Charlie Jolly (charlie). Nice work.

Charlie Jolly (charlie) updated this revision to Unknown Object (????).Feb 20 2014, 4:22 PM

Patch with combo handles

+ Ensure handles are drawn within button area
+ Hide handles when zoomed out too far in nodes

Campbell Barton (campbellbarton) commandeered this revision.
Campbell Barton (campbellbarton) updated this revision to Unknown Object (????).

Updated the patch with the following changes:

  • grey box was jittering and not pixel aligned
  • alpha arg a was ignored. now pass rgb
  • also highlight the triangle above the box for the active color.

@Charlie Jolly (charlie). I had to commandeer the patch to update it, feel free to commandeer back.

My main concern with this patch is colorbands need to be twice as tall as regular buttons, Id prefer they remain the same size.
Interested in opinions from others.

Thanks Campbell. I might ask psy-fi if he'll consider adding it to his texture branch for some feedback.

@Charlie Jolly (charlie), Note, the reason I'd prefer these buttons aren't 2x high is it means they don't layout as neatly with other buttons, however in current layouts it seems to work OK. since the colorbands are typically taking up the entire width anyway.

I don't like the commited triangle+cube solution. It gives too high handles.
When you have more than 5 handles, it distracts to resulting color ramp display.

I prefer to see a triangle or cube with highlighting provided by dashed line.

Another solution could be to simply respect lines of UI background.

Cool. Committed. Thanks Campbell.

Zeauro ... I think you are right, the handles have shifted slightly in the commit. I'm sure this can be tweaked. The last image I uploaded should be the correct position.

@ronan ducluzeau (zeauro), I quite like your design (post #32),

I think its not so much work to tweak existing code to match this.

Would be good if someone from our design team could comment too.

Charlie Jolly (charlie) commandeered this revision.

I've made some alternative tweaks. The reason for increasing the vertical size of the ramp is because when we draw the handles below the ramp they need to be within the click able rect.

The 2x ramp corresponds to my proposal.

The most important is that, at default zoom, the whole gradient of the ramp stays easily readable.
When handles are numerous and close, there are the most nuances in the gradient.
Too much triangles can form a chain of mountains disturbing readibility of the gradient.

I understand that handle have to still allow clicks on it when user zoom out.
But if he has ability to zoom in to correctly see gradient : it is satisfying.

Problem to avoid is more obvious with an image.

I think it's probably a rare case that you would need to have so many stops close together. Even with just lines this would look confusing.

Well, there is 6 stops. I don't think it is so much. It is really a common case to use 3 or 4 stops to create a line with a bump.
The fact that handles are close, really depends to purpose of the ramp.
According to factor it is influencing, range needed and how it is mapped.

I agree that with lines it is also confusing. But your patch introduced the improvement that only active stop line is shown.

Like you mentioned previously, in these cases you need to be able to zoom in. Maybe a popup editor like the color picker could work because you can draw a much wider ramp. .

I was just saying my preference for your 2x ramp patch.
I don't think a popup is needed.
There is no need for an extra click and glitches,problems to keep it fine and at correct place.
You have not suppress handle index button. So, it still can be used to select the correct one.

Just non shifted handles and it would be perfect.

Hi guys, from this sort of changes I really appreciate "solid color strip" at the bottom of gradient.
Thanks :)

New handles - hmm, I have to say - I never had a problem to see or find them in gradient.
I was pretty amazed from simplicity of "old" handles.
So I'm really sorry for this change of GUI.
It seems to me that grab area to catch handle is still the same, right?
So it's more psychological effect.

Anyway if there was a conclusion for that, I want to ask - what about circle / dot as handle?
This "color houses" are new and quite complicated element in Blender GUI.
Don't you think that circle shape (used also in nodes) can do the same job and is more convenient?

Thanks for your opinion.

These two mockups above uses a bit smaller handles than existing one (probably).
And sorry for missing alpha example, but you can see how it can work in these next mockups...

These next are maybe too big. But I hope you get tha idea.

When solid colors are represented in handles I'm not sure if solid color strip at bottom is needed ...

Alternative with circle handles, based on feedback from vklidu.

BA Thread

Circles look nice, but its harder to tell which is active (very clear with current arrows, even when closely overlapping).

Rather keep handles the way they are, design was made and agreed on, don't see value in changing them now.

Realize its interesting to try different things and see what works, but in that case it should be done while designing.

In all politeness … can you check a screen and tell how clearly can you see active?
(Default size with 80dpi I use.)

I'm not a hurry to implement my proposals, I'm trying to discuss this new handles, because I don't think it was handled in a best way.
Because as I wrote …

  • handles use quite complicated shape for this needs

(can be represented in a more simple way, like your triangles)

  • and I'm missing a continuity with the rest of GUI

(so it seemed to me that circle or triangle could fits better to this needs)

I'm really sorry that I haven't seen this thread before first release.
I hope there are possibilities to get better solution.

@Charlie Jolly (charlie): thank you for patch I will try functionality later, sorry
(I'll be out of technology for a week now). Your work is not a waste for me, I really appreciate that.

One idea more to think about:

Last post on BA was a version with campbell's triangles.
that moved me into more mockups for these reasons:

  • Since there is a solid color strip, color inside of handle is not needed.

It means that shape can consist only from one stroke color and fill color, that is a benefit - simplified handle and easier to see even in small.

  • To highlight active will be always hard to see just by brighter color … so what about one line more at the bottom of a shape?

(I tried also highlight active by different shape, but in small size looks circle and tris the same.Or I tried switch black&white colors for active, but even active meaning was clear, visually it was less dominant in some cases. So one line under triangle seems as the best for now.)

Thank you for patience :)

@filip mond (vklidu), You're right, in this case its not so obvious.
committed increase in handle contrast rB9327538f0abeb768fb89a2aee6b58d36cc9ca18f

Campbell, can you consider the tweaks I posted in comment 37 as this draws the bottom of the handle within the confines of the button block. As it stands, selecting the bottom of the handle does not work.

@Charlie Jolly (charlie), really prefer to keep color-bands one unit height, better for laying out buttons and don't think its significant advantage to increase height.