UI: Color Tooltips #117815

Harley Acheson · 2024-02-04T21:13:04+01:00

Harley Acheson commented

2024-02-04 21:13:04 +01:00

Hovering over a color button shows a tooltip that includes the color
values and a large sample.

It is a bit unrelated, but what started me on this idea was https://blender.community/c/rightclickselect/49r6/ and the desire to see a larger representation of the color.

Hovering over a color button shows a tooltip that includes the color values and a large sample. --- ![image](/attachments/c5f69454-20c7-4285-8d95-729bb41f5a90) It is a bit unrelated, but what started me on this idea was https://blender.community/c/rightclickselect/49r6/ and the desire to see a larger representation of the color.

image.png

18 KiB

image.png

18 KiB

image.png

19 KiB

image.png

20 KiB

👍 14

Harley Acheson added this to the User Interface project 2024-02-04 21:13:31 +01:00

Harley Acheson requested review from Pablo Vazquez 2024-02-04 21:13:41 +01:00

Pablo Vazquez commented

2024-02-13 20:31:37 +01:00

I like the idea of a more informative tooltip, not 100% sure about the design.

The size of the color sample is a bit too large IMO. In your mockup it is about 4x as tall as the color widget. 2x as big would be enough. It should be rounded as well (if possible).

The color details could use a dimmer color and be split in lines for each property (similar to the metadata in tooltips when mouse hover videos in the File Browser).

Mockup:

With right-aligned text:

I like the idea of a more informative tooltip, not 100% sure about the design. The size of the color sample is a bit too large IMO. In your mockup it is about 4x as tall as the color widget. 2x as big would be enough. It should be rounded as well (if possible). The color details could use a dimmer color and be split in lines for each property (similar to the metadata in tooltips when mouse hover videos in the File Browser). Mockup: ![color tooltip](/attachments/f219e634-29a8-4edb-baaa-db69fcf02143) With right-aligned text: ![color tooltip with right-aligned text](/attachments/50548abb-014d-4f23-afeb-bc89cc8b12d2)

image.png

25 KiB

image.png

51 KiB

image.png

55 KiB

image.png

25 KiB

❤️ 1

Harley Acheson commented

2024-02-13 23:20:54 +01:00

@pablovazquez

Closer. I changed the text color, added some padding, changed the size, and gave it the extra output lines:

I currently can't do the rounded corners though, because currently all tooltip images are getting a checkerboard background. But maybe later we could add a flag to image fields so we can vary them a bit more?

But yours does look nicer with the border and rounded corners.

@pablovazquez Closer. I changed the text color, added some padding, changed the size, and gave it the extra output lines: ![image](/attachments/fae08126-c375-4e20-a840-fc7fee8c5c2b) I currently can't do the rounded corners though, because currently all tooltip images are getting a checkerboard background. But maybe later we could add a flag to image fields so we can vary them a bit more? But yours does look nicer with the border and rounded corners.

image.png

78 KiB

Pablo Vazquez commented

2024-02-14 20:18:37 +01:00

Much nicer!

I still think the color sample is way too large:

It's less jarring when the color has alpha because it's split in two, but when it doesn't it's just a massive block of color. Half or 1/4 the size at least would do.

Much nicer! I still think the color sample is way too large: ![color tooltip](/attachments/77fd4a17-0b4b-4c2a-8e50-643f72ab5ba1) It's less jarring when the color has alpha because it's split in two, but when it doesn't it's just a massive block of color. Half or 1/4 the size at least would do.

image.png

115 KiB

Harley Acheson commented

2024-02-14 20:50:16 +01:00

@pablovazquez

I probably have a scaling error somewhere. I had made mine to exactly match yours when I was in themes. But your last capture shows it larger than I remember.

LOL, will be related to 2D region zoom. With this PR, here is a huge tooltip with a tiny sample.

@pablovazquez I probably have a scaling error somewhere. I had made mine to exactly match yours when I was in themes. But your last capture shows it larger than I remember. LOL, will be related to 2D region zoom. With this PR, here is a huge tooltip with a tiny sample. ![image](/attachments/3a2ec258-5c87-4402-ac8a-7e7e5674280c)

image.png

41 KiB

Harley Acheson commented

2024-02-14 22:07:14 +01:00

@pablovazquez

Got it. I actually had a couple different scaling errors there. You should see this as slightly narrower than your original mockup but should not get huge anymore. To compare against your last capture, here is how it looks for vertex paint color at the same scale, aspect, etc. Just wide enough so that the sample width is just slightly wider than when all four digits show three decimal places.

@pablovazquez Got it. I actually had a couple different scaling errors there. You should see this as slightly narrower than your original mockup but should not get huge anymore. To compare against your last capture, here is how it looks for vertex paint color at the same scale, aspect, etc. Just wide enough so that the sample width is just slightly wider than when all four digits show three decimal places. ![image](/attachments/41080ddf-ba25-4f60-be9f-0fa32534245a)

image.png

89 KiB

Duarte Farrajota Ramos commented

2024-02-15 12:06:43 +01:00

First-time contributor

This looks useful.
I think you should monospace the color values, it would improve readability, at lease the number part, if that is feasible

RGBA:	0.071,	0.710,	0.620,	0.543
HSVA:	0.476,	0.901,	0.710,	0.543
HEX	:	#12b59eeb

maybe ditch the separating comas, use a tab or space

RGBA:	0.071	0.710	0.620	0.543
HSVA:	0.476	0.901	0.710	0.543
HEX	:	#12b59eeb

optionally include the square brackets, though I thinkk they add unnecessary noise

RGBA:	[0.071,	0.710,	0.620,	0.543]
HSVA:	[0.476,	0.901,	0.710,	0.543]
HEX	:	#12b59eeb

Allow me to derail this a bit with a tangentially related request. Since you are dealing with color picker UI, one neat quality of life improvement that I've been dreaming about was adding a right-click context menu entries for copy-paste on color properties.
These would allow mouse based clipboard operations between color.

Cherry on top allow pressing Alt during dra&drop between color properties to swap colors, like we can do with node sockets currently.

This looks useful. I think you should monospace the color values, it would improve readability, at lease the number part, if that is feasible ``` RGBA: 0.071, 0.710, 0.620, 0.543 HSVA: 0.476, 0.901, 0.710, 0.543 HEX : #12b59eeb ``` maybe ditch the separating comas, use a tab or space ``` RGBA: 0.071 0.710 0.620 0.543 HSVA: 0.476 0.901 0.710 0.543 HEX : #12b59eeb ``` optionally include the square brackets, though I thinkk they add unnecessary noise ``` RGBA: [0.071, 0.710, 0.620, 0.543] HSVA: [0.476, 0.901, 0.710, 0.543] HEX : #12b59eeb ``` Allow me to derail this a bit with a tangentially related request. Since you are dealing with color picker UI, one neat quality of life improvement that I've been dreaming about was adding a right-click context menu entries for copy-paste on color properties. These would allow mouse based clipboard operations between color. Cherry on top allow pressing <kbd>Alt</kbd> during dra&drop between color properties to swap colors, like we can do with node sockets currently.

Harley Acheson commented

2024-02-15 17:18:12 +01:00

@DuarteRamos - > I think you should monospace the color values...

That is probably a good idea, and I like all your examples, and will play a bit. The only slight complication to keep in mind is translations of the label, as in a translator to random language could choose a long word for "hex" for example. But there could be something there.

I see one thing that should probably change is my conversion from float to string is giving "1" when exactly 1, when it should be "1.000".

Allow me to derail this a bit with a tangentially related request. Since you are dealing with color picker UI, one neat quality of life improvement that I've been dreaming about was adding a right-click context menu entries for copy-paste on color properties.
These would allow mouse based clipboard operations between color.

I think you are wanting the same functionality we do have now with colors in that we can do ctrl-c ctrl-v between colors to work on the context menu? This seems like a no-brainer, and it probably is. But, weirdly, we can currently allow ctrl-c and ctrl-v to work with all sorts of different types of data, but once "Paste" is a visible option we expect it to disable if the format is incorrect. For example in this case we'd want that disabled if the clipboard didn't contain text formatted like "[0.006049, 0.462077, 0.341914, 1.000000]". We even have times where what we copy to the clipboard is text containing a path to a temporary file, so a paste to a text input would put that path there. So might need thought and planning. Or maybe it isn't a big deal.

> @DuarteRamos - > I think you should monospace the color values... That is probably a good idea, and I like all your examples, and will play a bit. The only slight complication to keep in mind is translations of the label, as in a translator to random language could choose a long word for "hex" for example. But there could be something there. I see one thing that should probably change is my conversion from float to string is giving "1" when exactly 1, when it should be "1.000". > Allow me to derail this a bit with a tangentially related request. Since you are dealing with color picker UI, one neat quality of life improvement that I've been dreaming about was adding a right-click context menu entries for copy-paste on color properties. > These would allow mouse based clipboard operations between color. I think you are wanting the same functionality we do have now with colors in that we can do ctrl-c ctrl-v between colors to work on the context menu? This seems like a no-brainer, and it probably is. But, weirdly, we can currently allow ctrl-c and ctrl-v to work with all sorts of different types of data, but once "Paste" is a visible option we expect it to disable if the format is incorrect. For example in this case we'd want that disabled if the clipboard didn't contain text formatted like "[0.006049, 0.462077, 0.341914, 1.000000]". We even have times where what we copy to the clipboard is text containing a path to a temporary file, so a paste to a text input would put that path there. So might need thought and planning. Or maybe it isn't a big deal.

Harley Acheson commented

2024-02-15 17:47:08 +01:00

@DuarteRamos

How does this look? I changed the formatting so that "1" will show as "1.000", put the hex value first so that it doesn't mess with the following table-like values.

@DuarteRamos How does this look? I changed the formatting so that "1" will show as "1.000", put the hex value first so that it doesn't mess with the following table-like values. ![image](/attachments/c76d8ea3-f75f-4823-8b96-62f8bfd18c6b)

image.png

18 KiB

👍 6

Duarte Farrajota Ramos commented

2024-02-15 18:54:28 +01:00

First-time contributor

@DuarteRamos

How does this look?

Looks great now, much more readable. Padding numbers to uniform length is also very welcome. Only the HEX value seems slightly off, but I supposed it is unavoidable, since it will always appear shorter.

I think you are wanting the same functionality we do have now with colors in that we can do ctrl-c ctrl-v between colors to work on the context menu?

Yes, exactly that. Basically menu entries for the current Ctrl + C, Ctrl + V functionality. I tried implementing it through Python, but either my scripting failed me, or it is not possible currently through API

This seems like a no-brainer, and it probably is. But, weirdly, we can currently allow ctrl-c and ctrl-v to work with all sorts of different types of data, but once "Paste" is a visible option we expect it to disable if the format is incorrect.

Ah yes there's always a catch, hadn't though about that. If we never disable it, we'd just rely on whatever current validation system is in place when pasting to make sure it is a valid value.
Maybe it is not a big deal indeed, but I'm probably biased towards my request.

> @DuarteRamos > > How does this look? Looks great now, much more readable. Padding numbers to uniform length is also very welcome. Only the HEX value seems slightly off, but I supposed it is unavoidable, since it will always appear shorter. > I think you are wanting the same functionality we do have now with colors in that we can do ctrl-c ctrl-v between colors to work on the context menu? Yes, exactly that. Basically menu entries for the current <kbd>Ctrl</kbd> + <kbd>C</kbd>, <kbd>Ctrl</kbd> + <kbd>V</kbd> functionality. I tried implementing it through Python, but either my scripting failed me, or it is not possible currently through API > This seems like a no-brainer, and it probably is. But, weirdly, we can currently allow ctrl-c and ctrl-v to work with all sorts of different types of data, but once "Paste" is a visible option we expect it to disable if the format is incorrect. Ah yes there's always a catch, hadn't though about that. If we never disable it, we'd just rely on whatever current validation system is in place when pasting to make sure it is a valid value. Maybe it is not a big deal indeed, but I'm probably biased towards my request.

Duarte Farrajota Ramos commented

2024-02-15 19:00:59 +01:00

First-time contributor

Do you think the color swatch should come first, before the color codes?. Thinking about it, if the main goal is showing a larger preview, maybe it should be first, and closer to the original cursor position.

Harley Acheson commented

2024-02-15 19:18:20 +01:00

Just a mockup, but you mean like this?

Just a mockup, but you mean like this? ![image](/attachments/77cb7f15-3ec7-44fc-b594-827aaf319a30)

image.png

18 KiB

👍 2

Duarte Farrajota Ramos commented

2024-02-15 21:11:00 +01:00

First-time contributor

Just a mockup, but you mean like this?

Yes, I think that looks better. I'd keep this version either as is, or perhaps with the "Hex:" label.

> Just a mockup, but you mean like this? Yes, I think that looks better. I'd keep this version either as is, or perhaps with the "Hex:" label.

Harley Acheson commented

2024-02-15 21:39:25 +01:00

For a change of order @pablovazquez would have to wade in.

Harley Acheson referenced this pull request

2024-03-13 19:31:23 +01:00

UI: Add Optional Flags for Tooltip Image Fields #119437

Jonathan Lampel commented

2024-03-13 20:12:51 +01:00

First-time contributor

You could potentially save some space and balance it out a bit by putting the hex in the top right. Though that might break conventions for titles, not sure.

color-tooltip.jpg

40 KiB

👍 2

Duarte Farrajota Ramos commented

2024-03-13 20:26:12 +01:00

First-time contributor

You could potentially save some space and balance it out a bit by putting the hex in the top right. Though that might break conventions for titles, not sure.

That does look tidier, though conceptually all codes should be "equal" and close to each other.

Another possibility

RGBA:	0.071	0.710	0.620	0.543
HSVA:	0.476	0.901	0.710	0.543
HEX	:	#12		b5		9e		eb

or simply

RGBA:	0.071	0.710	0.620	0.543
HSVA:	0.476	0.901	0.710	0.543
HEX	:	#12 b5 9e eb

though visually Jonathan's wins hands down

> You could potentially save some space and balance it out a bit by putting the hex in the top right. Though that might break conventions for titles, not sure. That does look tidier, though conceptually all codes should be "equal" and close to each other. Another possibility ``` RGBA: 0.071 0.710 0.620 0.543 HSVA: 0.476 0.901 0.710 0.543 HEX : #12 b5 9e eb ``` or simply ``` RGBA: 0.071 0.710 0.620 0.543 HSVA: 0.476 0.901 0.710 0.543 HEX : #12 b5 9e eb ``` though visually Jonathan's wins hands down

Harley Acheson commented

2024-03-13 22:21:46 +01:00

We don't really have a way of getting right-aligned text on the same line as the title, but we can do things like this:

We don't really have a way of getting right-aligned text on the same line as the title, but we can do things like this: ![image](/attachments/e967fb04-3875-42dc-900d-262f98fe59ce)

image.png

18 KiB

👍 2

Harley Acheson force-pushed ColorTooltips from ba82b21562 to 912649794b

2024-03-19 02:08:43 +01:00

Compare

Harley Acheson changed title from ~~UI Experiment: Color Tooltips~~ to UI: Theme Color Tooltips

2024-03-19 02:09:23 +01:00

Harley Acheson added 1 commit 2024-04-05 21:51:22 +02:00

0eb4706741 Merge branch 'main' of projects.blender.org:blender/blender into ColorTooltips

Iliya Katushenock reviewed 2024-04-18 12:07:49 +02:00

source/blender/editors/interface/regions/interface_region_tooltip.cc

						
				@ -1046,0 +1088,4 @@

				    uiTooltipImage image_data;

				    image_data.width = int(w);

				    image_data.height = int(w / 3.2361f);

				    image_data.ibuf = IMB_allocImBuf(image_data.width, image_data.height, 32, IB_rect);

Iliya Katushenock commented

2024-04-18 12:07:49 +02:00

How this memory should be freed?

Harley marked this conversation as resolved

Harley Acheson added 2 commits 2024-04-18 18:32:30 +02:00

4aded86418 Merge branch 'main' of projects.blender.org:blender/blender into ColorTooltips

43a7233571 Forgot to free an ImBuf when no longer needed.

Harley Acheson commented

2024-04-18 18:33:44 +02:00

@mod_moder - How this memory should be freed?

Yikes! Thanks for noticing this. Fixed.

> @mod_moder - How this memory should be freed? Yikes! Thanks for noticing this. Fixed.

Harley Acheson commented

2024-04-24 21:34:14 +02:00

@pablovazquez

You had wondered about how this works with the larger picker with the pallet. Here is a capture (at 1.5 scale):

@pablovazquez You had wondered about how this works with the larger picker with the pallet. Here is a capture (at 1.5 scale): ![image](/attachments/fb96dc18-707c-407a-a8c1-5ac181415222)

image.png

50 KiB

image.png

5.8 KiB

❤️ 1

Harley Acheson requested review from Hans Goudey 2024-04-24 21:37:43 +02:00

Hans Goudey changed title from ~~UI: Theme Color Tooltips~~ to UI: Color Tooltips

2024-04-24 21:39:11 +02:00

Harley Acheson added 2 commits 2024-04-24 21:41:29 +02:00

3e75ce57f3 Merge branch 'main' of projects.blender.org:blender/blender into ColorTooltips

ec6c8eeabe Add "Hex:"

Pablo Vazquez commented

2024-04-25 12:57:19 +02:00

Awesome!

Just to show others how much better it is, the very useful Color tooltip now actually includes details. Especially useful when seeing a lot of colors together like in the Palette data-block. In the future we could add some special operations to the context menu to actually do something with that color info.

Before	After

Thank you!

Awesome! Just to show others how much better it is, the very useful `Color` tooltip now actually includes details. Especially useful when seeing a lot of colors together like in the Palette data-block. In the future we could add some special operations to the context menu to actually do something with that color info. |Before|After| |----|----| |![before](/attachments/43af9e3c-0634-46d9-974b-49557d9f9240)|![after](/attachments/7e067711-ecc5-4fb6-9dbc-4ecbc6809f9e)| Thank you!

image.png

196 KiB

image.png

212 KiB

Pablo Vazquez approved these changes 2024-04-25 12:57:32 +02:00

Merge conflict checking is in progress. Try again in few moments.

View command line instructions.

Checkout

From your project repository, check out a new branch and test the changes.

git fetch -u ColorTooltips:Harley-ColorTooltips

git checkout Harley-ColorTooltips

Sign in to join this conversation.

No reviewers

No Label

Download

What's New

Blender Studio

Manual

Developers Blog

Documentation

Benchmark

Blender Conference

Development Fund

One-time Donations

UI: Color Tooltips #117815

Checkout