UI: Color Tooltips #117815

Merged
Harley Acheson merged 10 commits from Harley/blender:ColorTooltips into main 2024-05-13 23:48:42 +02:00
Member

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


image

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.
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
Member

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

With right-aligned text:
color tooltip 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)
Author
Member

@pablovazquez

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

image

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.
Member

Much nicer!

I still think the color sample is way too large:

color tooltip

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.
115 KiB
Author
Member

@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

@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)
Author
Member

@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

@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)
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.
Author
Member

@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.
Author
Member

@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

@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)
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.
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.

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.
Author
Member

Just a mockup, but you mean like this?

image

Just a mockup, but you mean like this? ![image](/attachments/77cb7f15-3ec7-44fc-b594-827aaf319a30)
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.
Author
Member

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

For a change of order @pablovazquez would have to wade in.
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.

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.
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
Author
Member

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

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)
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
Iliya Katushenock reviewed 2024-04-18 12:07:49 +02:00
@ -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);

How this memory should be freed?

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
Author
Member

@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.
Author
Member

@pablovazquez

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

image

@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)
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
Member

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 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!
196 KiB
212 KiB
Pablo Vazquez approved these changes 2024-04-25 12:57:32 +02:00
Hans Goudey approved these changes 2024-05-13 17:19:42 +02:00
Hans Goudey left a comment
Member

I think the code is fine.

I think the code is fine.
@ -1046,0 +1048,4 @@
float color[4];
ui_but_v3_get(but, color);
color[3] = 1.0f;
bool has_alpha = false;
Member

has_alpha is unused here

`has_alpha` is unused here
Author
Member

It's used, just a few lines below

It's used, just a few lines below
Author
Member

yikes, you are right, removing that.

yikes, you are right, removing that.
Harley marked this conversation as resolved
@ -1046,0 +1094,4 @@
image_data.premultiplied = false;
ColorManagedDisplay *display = ui_block_cm_display_get(but->block);
if (color[3]) {
Member

Would be nice to have a comment here about the sequence of drawing two rectangles, and maybe a more explicit == 0.0f check here.

Would be nice to have a comment here about the sequence of drawing two rectangles, and maybe a more explicit `== 0.0f` check here.
Harley marked this conversation as resolved
Harley Acheson added 2 commits 2024-05-13 22:32:42 +02:00
Harley Acheson added 1 commit 2024-05-13 22:38:51 +02:00
Merge branch 'main' of projects.blender.org:blender/blender into ColorTooltips
All checks were successful
buildbot/vexp-code-patch-lint Build done.
buildbot/vexp-code-patch-linux-x86_64 Build done.
buildbot/vexp-code-patch-darwin-x86_64 Build done.
buildbot/vexp-code-patch-darwin-arm64 Build done.
buildbot/vexp-code-patch-windows-amd64 Build done.
buildbot/vexp-code-patch-coordinator Build done.
28b33837fc
Author
Member

@blender-bot build

@blender-bot build
Harley Acheson added 1 commit 2024-05-13 23:08:03 +02:00
unused variable
All checks were successful
buildbot/vexp-code-patch-lint Build done.
buildbot/vexp-code-patch-linux-x86_64 Build done.
buildbot/vexp-code-patch-darwin-x86_64 Build done.
buildbot/vexp-code-patch-darwin-arm64 Build done.
buildbot/vexp-code-patch-windows-amd64 Build done.
buildbot/vexp-code-patch-coordinator Build done.
d3269d21b5
Author
Member

@blender-bot build

@blender-bot build
Harley Acheson merged commit 41bbbd2359 into main 2024-05-13 23:48:42 +02:00
Harley Acheson referenced this issue from a commit 2024-05-13 23:48:43 +02:00
Harley Acheson deleted branch ColorTooltips 2024-05-13 23:48:45 +02:00
Sign in to join this conversation.
No reviewers
No Label
Interest
Alembic
Interest
Animation & Rigging
Interest
Asset System
Interest
Audio
Interest
Automated Testing
Interest
Blender Asset Bundle
Interest
BlendFile
Interest
Code Documentation
Interest
Collada
Interest
Compatibility
Interest
Compositing
Interest
Core
Interest
Cycles
Interest
Dependency Graph
Interest
Development Management
Interest
EEVEE
Interest
Freestyle
Interest
Geometry Nodes
Interest
Grease Pencil
Interest
ID Management
Interest
Images & Movies
Interest
Import Export
Interest
Line Art
Interest
Masking
Interest
Metal
Interest
Modeling
Interest
Modifiers
Interest
Motion Tracking
Interest
Nodes & Physics
Interest
OpenGL
Interest
Overlay
Interest
Overrides
Interest
Performance
Interest
Physics
Interest
Pipeline, Assets & IO
Interest
Platforms, Builds & Tests
Interest
Python API
Interest
Render & Cycles
Interest
Render Pipeline
Interest
Sculpt, Paint & Texture
Interest
Text Editor
Interest
Translations
Interest
Triaging
Interest
Undo
Interest
USD
Interest
User Interface
Interest
UV Editing
Interest
VFX & Video
Interest
Video Sequencer
Interest
Viewport & EEVEE
Interest
Virtual Reality
Interest
Vulkan
Interest
Wayland
Interest
Workbench
Interest: X11
Legacy
Asset Browser Project
Legacy
Blender 2.8 Project
Legacy
Milestone 1: Basic, Local Asset Browser
Legacy
OpenGL Error
Meta
Good First Issue
Meta
Papercut
Meta
Retrospective
Meta
Security
Module
Animation & Rigging
Module
Core
Module
Development Management
Module
Grease Pencil
Module
Modeling
Module
Nodes & Physics
Module
Pipeline, Assets & IO
Module
Platforms, Builds & Tests
Module
Python API
Module
Render & Cycles
Module
Sculpt, Paint & Texture
Module
Triaging
Module
User Interface
Module
VFX & Video
Module
Viewport & EEVEE
Platform
FreeBSD
Platform
Linux
Platform
macOS
Platform
Windows
Severity
High
Severity
Low
Severity
Normal
Severity
Unbreak Now!
Status
Archived
Status
Confirmed
Status
Duplicate
Status
Needs Info from Developers
Status
Needs Information from User
Status
Needs Triage
Status
Resolved
Type
Bug
Type
Design
Type
Known Issue
Type
Patch
Type
Report
Type
To Do
No Milestone
No project
No Assignees
6 Participants
Notifications
Due Date
The due date is invalid or out of range. Please use the format 'yyyy-mm-dd'.

No due date set.

Dependencies

No dependencies set.

Reference: blender/blender#117815
No description provided.