WIP: UI: Display axis indicator in number sliders #127264

Pablo Vazquez · 2024-09-06T20:33:28+02:00

Pablo Vazquez commented

2024-09-06 20:33:28 +02:00

On number sliders that refer to axes (X,Y,Z), show a small rectangle indicator with the color of each axis.

The goal is to tell apart at a glance the subtype of a number slider.
Supported subtypes are: PROP_XYZ, PROP_XYZ_LENGTH, PROP_TRANSLATION, PROP_EULER, PROP_AXISANGLE.

To prevent making Blender look like a christmas tree, draw the indicators at 25% opacity and fully opaque on hover or when editing the field.

Examples

Custom Properties

Transform

Nodes

Modifiers

Instancing

Themes

On number sliders that refer to axes (X,Y,Z), show a small rectangle indicator with the color of each axis. The goal is to tell apart at a glance the subtype of a number slider. Supported subtypes are: `PROP_XYZ, PROP_XYZ_LENGTH, PROP_TRANSLATION, PROP_EULER, PROP_AXISANGLE`. To prevent making Blender look like a christmas tree, draw the indicators at 25% opacity and fully opaque on hover or when editing the field. ## Examples ### Custom Properties ![custom properties](/attachments/d0982232-f796-4fb2-a575-a594ab7f58ce) ### Transform <video src="/attachments/106df6b8-c1c7-4c6d-90ff-f6f0c0ce0fd7" title="ui_xyz_indicators.mov" controls></video> ### Nodes ![Vector Node](/attachments/403b5539-65a2-4ef4-83ce-a6566a277f73) ### Modifiers ![Array Modifier](/attachments/b33f868e-50d5-426c-9adc-e0b12ec3068c) ### Instancing ![Collection Instance](/attachments/63d4c2d9-f4ab-4bdf-b44d-309fe0e5cc41) ### Themes ![nordic gold](/attachments/b11ad8cc-8451-4f8c-8098-2b444e59ed18) ![silk minimal](/attachments/42a41b22-2f58-4a17-b597-8bd522d12b4d) ![gruvbox light](/attachments/0460c699-a789-4641-9fc2-aacb81e19f19) ![gruvbox dark](/attachments/c34fb2d6-1f9e-46c0-b6a6-52ced1628ba9) ### Widget States ![widget states](/attachments/ed57d1f2-5739-4148-9f35-3cb2b9b170d5)

image.png

64 KiB

image.png

70 KiB

image.png

43 KiB

image.png

306 KiB

image.png

256 KiB

image.png

14 KiB

image.png

350 KiB

image.png

19 KiB

image.png

358 KiB

ui_xyz_indicators.mov

2.5 MiB

👍 1 👀 1 ❤️ 9 🎉 3 🚀 1

Pablo Vazquez added 1 commit 2024-09-06 20:33:40 +02:00

WIP: UI: Display axis indicator in number sliders dcd25fd5d7

On number sliders that refer to axes (X,Y,Z), show a small rectangle indicator.

Supported types are: `PROP_XYZ`, PROP_XYZ_LENGTH, PROP_TRANSLATION, PROP_EULER, PROP_AXISANGLE`.

Pablo Vazquez added the

Module

User Interface

label 2024-09-06 20:34:16 +02:00

Pablo Vazquez added 1 commit 2024-09-06 20:40:02 +02:00

Use 25% by default e59109fb3e

Pablo Vazquez added 1 commit 2024-09-06 20:41:07 +02:00

Merge branch 'main' into ui-widget-axes

buildbot/vexp-code-patch-lint Build done.

Details

buildbot/vexp-code-patch-darwin-arm64 Build done.

Details

buildbot/vexp-code-patch-darwin-x86_64 Build done.

Details

buildbot/vexp-code-patch-linux-x86_64 Build done.

Details

buildbot/vexp-code-patch-windows-amd64 Build done.

Details

buildbot/vexp-code-patch-coordinator Build done.

Details

159a75c4a1

Leon Schittek commented

2024-09-06 22:28:46 +02:00

This looks like an issue with rounding/truncating to integers.
The buttons don't seem to be the exact same height and, when calculating the axis width based on the height, the cutoff for when the strip becomes narrower/wider might be at slightly different zoom levels:

Calculating the axis width the following way is more consistent in my tests:

const int axis_width = min_ii(BLI_rcti_size_x(rect) / 3, U.widget_unit * zoom * 0.1333f);

The one case where this behaves differently from your patch is, that the colored strip will always be the same width, even when the layout is scaled (not zoomed) like in this screenshot, where I scaled the bottom widget by 2.0:

In your case the axis strip would be twice as wide in the bottom widget, similarly to how the handles also become wider.
But maybe having the strip's width be consistent like this is fine, because the size of the rounded corner also stays the same.

> ![issues](/attachments/c76d6e76-a842-466c-b6d1-13f6187131f4) This looks like an issue with rounding/truncating to integers. The buttons don't seem to be the exact same height and, when calculating the axis width based on the height, the cutoff for when the strip becomes narrower/wider might be at slightly different zoom levels: ![button-height.png](/attachments/40343c38-3202-4a38-ab14-a38256dd5545) Calculating the axis width the following way is more consistent in my tests: ``` const int axis_width = min_ii(BLI_rcti_size_x(rect) / 3, U.widget_unit * zoom * 0.1333f); ``` The one case where this behaves differently from your patch is, that the colored strip will always be the same width, even when the layout is scaled (not zoomed) like in this screenshot, where I scaled the bottom widget by `2.0`: ![scaling-issue.png](/attachments/745900dc-f2a5-46b1-a2f4-bd36f00f178c) In your case the axis strip would be twice as wide in the bottom widget, similarly to how the handles also become wider. But maybe having the strip's width be consistent like this is fine, because the size of the rounded corner also stays the same.

scaling-issue.png

184 KiB

button-height.png

30 KiB

👍 2 ❤️ 1

thorn-neverwake commented

2024-09-07 03:01:26 +02:00

First-time contributor

The goal is to tell apart at a glance the subtype of a number slider.

How is the label of XYZ not sufficient?

I feel that colorizing these fields is going to cause a visual distraction, given that currently color in a field is associated with keyed values.

So your eye will now glance, see color, and then have to process "ok, that's the XYZ label".

> The goal is to tell apart at a glance the subtype of a number slider. How is the label of XYZ not sufficient? I feel that colorizing these fields is going to cause a visual distraction, given that currently color in a field is associated with keyed values. So your eye will now glance, see color, and then have to process "ok, that's the XYZ label".

Gerstmann Bradley commented

2024-09-07 08:52:10 +02:00

First-time contributor

I agree It doesn't look appealing imho. too many different colors in small spaces.

I'd say Cons much more than Pros.

I agree It doesn't look appealing imho. too many different colors in small spaces. I'd say Cons much more than Pros.

👍 2

Donovane commented

2024-09-07 17:00:03 +02:00

First-time contributor

I agree It doesn't look appealing imho. too many different colors in small spaces.

I'd say Cons much more than Pros.

The goal is to tell apart at a glance the subtype of a number slider.

How is the label of XYZ not sufficient?

I feel that colorizing these fields is going to cause a visual distraction, given that currently color in a field is associated with keyed values.

So your eye will now glance, see color, and then have to process "ok, that's the XYZ label".

As said in my right click topic, in many case we don't really know what the row do, and look in other software this things is always present is really a good things ! But @pablovazquez maybe add an option in interface setting to disable it if the people don't want it !
But i'm resting on my idea is a really good thing and good idea is more explicit when you try to find the good row for inputing the value !

--> https://blender.community/c/rightclickselect/qV0G/

The goal is to tell apart at a glance the subtype of a number slider.

How is the label of XYZ not sufficient?

I feel that colorizing these fields is going to cause a visual distraction, given that currently color in a field is associated with keyed values.

So your eye will now glance, see color, and then have to process "ok, that's the XYZ label".

Let me correct you, all row in blender are grey the background color aren't colored by the value like "Is an int backgound is green", "Is an float backgound is grey".... No all field and row are grey. I don't know where you see what you talking but no isn't the case.... And yes the color specify the axis ! Like the text indicate the axis ! But is more visual ! And more explicit !

> I agree It doesn't look appealing imho. too many different colors in small spaces. > > I'd say Cons much more than Pros. > > The goal is to tell apart at a glance the subtype of a number slider. > > How is the label of XYZ not sufficient? > > I feel that colorizing these fields is going to cause a visual distraction, given that currently color in a field is associated with keyed values. > > So your eye will now glance, see color, and then have to process "ok, that's the XYZ label". As said in my right click topic, in many case we don't really know what the row do, and look in other software this things is always present is really a good things ! But @pablovazquez maybe add an option in interface setting to disable it if the people don't want it ! But i'm resting on my idea is a really good thing and good idea is more explicit when you try to find the good row for inputing the value ! --> https://blender.community/c/rightclickselect/qV0G/ ---- > > The goal is to tell apart at a glance the subtype of a number slider. > > How is the label of XYZ not sufficient? > > I feel that colorizing these fields is going to cause a visual distraction, given that currently color in a field is associated with keyed values. > > So your eye will now glance, see color, and then have to process "ok, that's the XYZ label". Let me correct you, all row in blender are grey the background color aren't colored by the value like "Is an int backgound is green", "Is an float backgound is grey".... No all field and row are grey. I don't know where you see what you talking but no isn't the case.... And yes the color specify the axis ! Like the text indicate the axis ! But is more visual ! And more explicit !

Donovane commented

2024-09-07 17:46:51 +02:00

First-time contributor

@pablovazquez I compilled the branch by myself in my computer and the gadget don't showing in some nodes like in vector math or Separate XYZ & Combine XYZ

Screenshot_2.png

741 KiB

Donovane commented

2024-09-07 17:59:44 +02:00

First-time contributor

@blender-bot package

Blender Bot commented

2024-09-07 17:59:48 +02:00

Only blender organization members with write access can start builds. See documentation for details.

Only blender organization members with write access can start builds. See [documentation](https://projects.blender.org/infrastructure/blender-bot/src/branch/main/README.md) for details.

thorn-neverwake commented

2024-09-07 18:03:55 +02:00

First-time contributor

I am not understanding what you mean when you say "in many case we don't really know what the row do".

You don't understand it when it says x, but you do understand it when it has a red chip (which is the "color" of x) next to it? This does not make sense, assuming one can read... (Which obviously, you can).

It's like... the RGB color picker doesn't need color chips next to each label, to tell us which one is which. We read the field label.

I am not understanding what you mean when you say "in many case we don't really know what the row do". You don't understand it when it says x, but you do understand it when it has a red chip (which is the "color" of x) next to it? This does not make sense, assuming one can read... (Which obviously, you can). It's like... the RGB color picker doesn't need color chips next to each label, to tell us which one is which. We read the field label.

Aaron Carlisle commented

2024-09-07 18:07:26 +02:00

Can you show examples of when the property is animated or a driver

hamza.SMA commented

2024-09-07 20:04:53 +02:00

First-time contributor

a suggestion, For this to be less visual noisy for some user, this can this be activated when the cursor hover on an Area so the Workspace seems more clean,maybe.

👍 1

Dalai Felinto commented

2024-09-08 09:29:03 +02:00

@blender-bot package

👍 1

Blender Bot commented

2024-09-08 09:29:05 +02:00

Package build started. Download here when ready.

Package build started. [Download here](https://builder.blender.org/download/patch/PR127264) when ready.

Pablo Vazquez added 2 commits 2024-09-09 15:11:22 +02:00

Apply suggestion by @lone_noel c9d7bae29b

It still has the issue when the widget is set to be taller, but that
type of scaling shouldn't be used anyway.

Thanks!

Support Quaternions and Axis Angle subtypes

buildbot/vexp-code-patch-lint Build done.

Details

buildbot/vexp-code-patch-darwin-x86_64 Build done.

Details

buildbot/vexp-code-patch-darwin-arm64 Build done.

Details

buildbot/vexp-code-patch-linux-x86_64 Build done.

Details

buildbot/vexp-code-patch-windows-amd64 Build done.

Details

buildbot/vexp-code-patch-coordinator Build done.

Details

60bbe6d714

Pablo Vazquez commented

2024-09-09 15:19:55 +02:00

Can you show examples of when the property is animated or a driver

Because it is drawing the indicators using transparency (25%) it should work okay with any colors underneath. It draws them 100% opaque on hover.

> Can you show examples of when the property is animated or a driver Because it is drawing the indicators using transparency (25%) it should work okay with any colors underneath. It draws them 100% opaque on hover. <video src="/attachments/9cdbebbd-38b9-4c09-9862-eee041137df0" title="ui_xyz_widget_states.mov" controls></video>

ui_xyz_widget_states.mov

1021 KiB

❤️ 2

Pablo Vazquez commented

2024-09-09 16:18:47 +02:00

@blender-bot package

Blender Bot commented

2024-09-09 16:18:50 +02:00

Package build started. Download here when ready.

Package build started. [Download here](https://builder.blender.org/download/patch/PR127264) when ready.

Joel Velarde Cucho commented

2024-09-10 11:38:15 +02:00

First-time contributor

The axis Indicators do not appear in node groups.

Pablo Vazquez added 1 commit 2024-09-12 20:33:26 +02:00

Merge branch 'main' into ui-widget-axes

buildbot/vexp-code-patch-lint Build done.

Details

buildbot/vexp-code-patch-darwin-arm64 Build done.

Details

buildbot/vexp-code-patch-darwin-x86_64 Build done.

Details

buildbot/vexp-code-patch-linux-x86_64 Build done.

Details

buildbot/vexp-code-patch-windows-amd64 Build done.

Details

buildbot/vexp-code-patch-coordinator Build done.

Details

e4a2285b42

Pablo Vazquez commented

2024-09-12 20:36:18 +02:00

@blender-bot package

Blender Bot commented

2024-09-12 20:36:21 +02:00

Package build started. Download here when ready.

Package build started. [Download here](https://builder.blender.org/download/patch/PR127264) when ready.

Pablo Vazquez commented

2024-09-12 20:37:48 +02:00

The axis Indicators do not appear in node groups.

Thanks! I've noticed it too also in certain nodes. This is something that needs to be fixed in the nodes themselves, as it seems they are missing the subtype.

> The axis Indicators do not appear in node groups. Thanks! I've noticed it too also in certain nodes. This is something that needs to be fixed in the nodes themselves, as it seems they are missing the subtype.

Pablo Vazquez added 1 commit 2024-10-03 17:04:38 +02:00

Merge branch 'main' into ui-widget-axes a54e413462

This pull request is marked as a work in progress.

View command line instructions.

Checkout

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

git fetch -u ui-widget-axes:pablovazquez-ui-widget-axes

git checkout pablovazquez-ui-widget-axes

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

WIP: UI: Display axis indicator in number sliders #127264

Examples

Custom Properties

Transform

Nodes

Modifiers

Instancing

Themes

Widget States

Checkout