UI: Headers and status text display #107094

New Issue

Pablo Vazquez · 2023-04-18T17:54:53+02:00

Pablo Vazquez commented

2023-04-18 17:54:53 +02:00

Situation

In 3.0, the order of the header and toolbar was flipped, to follow a more hierarchical order (first mode and top menu items, then tool settings for that mode).

One issue that arised was that there could be modes on which the header is emptier than the toolbar, so if the header is transparent, there would be dangling icons (image by Harley):

To fix that (and other issues), the header was removed from "Region Overlap", which removes transparency, as mentioned on #92844.

The other issues have been solved since, so it could be possible to bring transparency back. The issue now is that on transform, the header area gets replaced by certain info on coordinates or settings of the operator being executed (ED_area_status_text).

Possible Solutions

Do not change the transparency of the header when ED_area_status_text replaces its content. Fixed in UI: Header Status Text Changes #111676
Move the status text somewhere else.

The status text could be moved to:

Info text on the bottom-left. Makes sense since it's closer to the area where the redo panel shows up, and (usually) closer to the status bar where instructions are present. Mockup by Julien Kaspar.
Footer (see attached video for a quick hack demo). This has many issues on its own.
Info Text on top-left. Main argument against this in the past was that the text could be long, but that's no longer the case since long descriptions go to the status bar since 2.8
Near the cursor as you move. Similar to the Measure tool.
Somewhere else in the viewport.

I wish we could quickly prototype some of those options, especially number 3.

Task as follow up of: https://projects.blender.org/blender/blender/issues/92844#issuecomment-924488 ## Situation In 3.0, the order of the header and toolbar was flipped, to follow a more hierarchical order (first mode and top menu items, then tool settings for that mode). One issue that arised was that there could be modes on which the header is emptier than the toolbar, so if the header is transparent, there would be dangling icons (image by Harley): ![image](/attachments/a3c9bc4c-84a0-43e7-b4f3-190ec6eeabee) To fix that (and other issues), the header was removed from "Region Overlap", which removes transparency, as mentioned on #92844. The other issues have been solved since, so it could be possible to bring transparency back. The issue now is that on transform, the header area gets replaced by certain info on coordinates or settings of the operator being executed (`ED_area_status_text`). ![image](/attachments/b2b5dea0-c648-419c-9f7f-7d99f413d135) ## Possible Solutions 1. Do not change the transparency of the header when `ED_area_status_text` replaces its content. Fixed in [UI: Header Status Text Changes #111676](https://projects.blender.org/blender/blender/pulls/111676) 2. Move the status text somewhere else. The status text could be moved to: 1. Info text on the bottom-left. Makes sense since it's closer to the area where the redo panel shows up, and (usually) closer to the status bar where instructions are present. Mockup by Julien Kaspar. ![image](/attachments/ba558ca0-5bcd-4490-a6cf-5a4e13c8d84b) 2. Footer (see [attached video](https://projects.blender.org/attachments/f1b37f7a-11de-40ce-bad2-04a940a73098) for a quick hack demo). This has many issues on its own. ![image](/attachments/9d429eb3-76a6-4a37-a18a-366558c8f1d9) 3. Info Text on top-left. Main argument against this in the past was that the text could be long, but that's no longer the case since long descriptions go to the status bar since 2.8 ![Screenshot from 2023-04-18 17-56-49](/attachments/74b4fcde-b9e8-4f17-8113-849d0e3c7802) 4. Near the cursor as you move. Similar to the Measure tool. ![Screenshot from 2023-04-18 17-53-00](/attachments/b4cf5c5e-1f15-4cc6-87f3-f620c4fee68e) 5. Somewhere else in the viewport. I wish we could quickly prototype some of those options, especially number 3.

Screenshot from 2023-04-18 17-53-00.png

40 KiB

image.png

86 KiB

Screenshot from 2023-04-18 17-56-49.png

66 KiB

status_text_footer.mkv

1.9 MiB

Pablo Vazquez added the

labels 2023-04-18 17:55:12 +02:00

Gilberto Rodrigues commented

2023-04-30 10:15:13 +02:00

It could make sense to show it near the cursor, or between the cursor and the pivot point, but it would be too much text moving on the screen for operations that change more than a single value at the same time. Sometimes we just want to do an operation roughly by eye, not caring about the specific value, and a bunch of text popping on top of the object could be distracting.

I would much prefer it on the footer like in 2.79, as it is near the panel we use to adjust those values after the operation. It feels more cohesive this way. It is also closer to the status bar, where the user can see the options like locking that value to an axis. Currently not all values changed by the mouse movement are shown on the top. For some operations, like Bevel, it is displayed down in the status bar only. So having all the values changed by the mouse show in the bottom, for all operators, would be more consistent, and reduce eye movement looking around the screen.
How it's implemented in the video can be hard to read depending on the background color, so the text would need an outline, or shadow or something.
Now what if the user flips the header to the bottom, where to show that text?

I think there is no perfect solution for this.

Either way, the text flickering could be reduced many ways. Like adding a space for positive values, so the text doesn't move when the minus sign appears, so no flicker when a value goes from positive to negative, and using a fixed number of decimal places like in 2.79, or just adding space for the decimal places to show up without moving the text.

It could make sense to show it near the cursor, or between the cursor and the pivot point, but it would be too much text moving on the screen for operations that change more than a single value at the same time. Sometimes we just want to do an operation roughly by eye, not caring about the specific value, and a bunch of text popping on top of the object could be distracting. I would much prefer it on the footer like in 2.79, as it is near the panel we use to adjust those values after the operation. It feels more cohesive this way. It is also closer to the status bar, where the user can see the options like locking that value to an axis. Currently not all values changed by the mouse movement are shown on the top. For some operations, like Bevel, it is displayed down in the status bar only. So having all the values changed by the mouse show in the bottom, for all operators, would be more consistent, and reduce eye movement looking around the screen. How it's implemented in the video can be hard to read depending on the background color, so the text would need an outline, or shadow or something. Now what if the user flips the header to the bottom, where to show that text? I think there is no perfect solution for this. Either way, the text flickering could be reduced many ways. Like adding a space for positive values, so the text doesn't move when the minus sign appears, so no flicker when a value goes from positive to negative, and using a fixed number of decimal places like in 2.79, or just adding space for the decimal places to show up without moving the text.

Julien Kaspar commented

2023-05-16 12:46:28 +02:00

Right now the UI is a bit all over the place, so I'd like to contrbute an idea.

We could add an overlay option to show the modal operator shortcuts and statuses.
These are often very closely related and make sense to show together.
The status bar sometimes doesn't offer enough space to show all of this text.
Also showing the statuses all in one line leads to jittering.

This overlay could replace the Object Statuses temporarily while the operation is running. Here's an example before, while and after using the move operator.

Any toggle could light up to indicate that it is ON.
Status text can be colored differently to stand out.

There are various operators that use a lot or very little space in the status bar and header. Here's a comparisson between 4 different ones with the proposed overlay:

Notice how the Bevel operator has a lot of statuses next to the shortcuts.
The statuses that are ON are usually the ones that change their status with mouse movement (Like Width, Profile & Segments).

Alternatively we could also place this overlay in at the bottom to align it with the Adjust Last Operation popover (since these are closely related).
But this makes it look very disconnected from any other UI element.
It would also eventually collide with the Asset Shelf UI, which could be awkward.

Right now the UI is a bit all over the place, so I'd like to contrbute an idea. We could add an overlay option to show the modal operator shortcuts and statuses. These are often very closely related and make sense to show together. The status bar sometimes doesn't offer enough space to show all of this text. Also showing the statuses all in one line leads to jittering. This overlay could replace the Object Statuses temporarily while the operation is running. Here's an example before, while and after using the move operator. ![010_progression.png](/attachments/3a088534-f582-4f24-9ad8-3a8ba7fcc3ba) Any toggle could light up to indicate that it is ON. Status text can be colored differently to stand out. There are various operators that use a lot or very little space in the status bar and header. Here's a comparisson between 4 different ones with the proposed overlay: ![029_top_operator_comparisson.png](/attachments/b2450113-b326-450a-a223-55eabe372967) Notice how the Bevel operator has a lot of statuses next to the shortcuts. The statuses that are ON are usually the ones that change their status with mouse movement (Like Width, Profile & Segments). Alternatively we could also place this overlay in at the bottom to align it with the Adjust Last Operation popover (since these are closely related). But this makes it look very disconnected from any other UI element. It would also eventually collide with the Asset Shelf UI, which could be awkward. ![039_bottom_operator_comparisson.png](/attachments/ba558ca0-5bcd-4490-a6cf-5a4e13c8d84b)

029_top_operator_comparisson.png

288 KiB

010_progression.png

224 KiB

039_bottom_operator_comparisson.png

288 KiB

Lloyd commented

2023-06-06 16:10:01 +02:00

Can we please keep the Header Regression[ Original Report ] and status text display [ New UI task ] as separate Tasks, as this will take years to iron out if kept combined.

Pablo Vazquez referenced this issue

2023-07-05 12:45:54 +02:00

UI: Make 3D Viewport header transparent #109735

Guillermo Venegas referenced this issue

2023-08-24 18:29:53 +02:00

3d view-port header shows transparent while using tools or modals operator #111485

Julien Kaspar commented

2023-08-31 13:01:02 +02:00

Some more thoughts: The The idea of the status overlay seems good. Drawbacks are:

Takes up space within the editor
Status overlay needs to be added to all node, animation, image & vse editor
Won't work well on low vertical height of animation editors
Status bar is left mostly unused

Another idea I could see working is to scroll the status bar.
House both modal statuses and shortcuts together. Improve readability with use of bold text, colors and spacing. Give each status some buffer space to avoid jittering.

This will make all the info wider but we could ensure that shortcuts like Ctrl Mouse Wheel are highlighted and available to scroll the status bar during a modal.
Not sure about alternatives to mouse wheel for pen users.

Some more thoughts: The The idea of the status overlay seems good. Drawbacks are: - Takes up space within the editor - Status overlay needs to be added to all node, animation, image & vse editor - Won't work well on low vertical height of animation editors - Status bar is left mostly unused Another idea I could see working is to scroll the status bar. House both modal statuses and shortcuts together. Improve readability with use of bold text, colors and spacing. Give each status some buffer space to avoid jittering. This will make all the info wider but we could ensure that shortcuts like `Ctrl Mouse Wheel` are highlighted and available to scroll the status bar during a modal. Not sure about alternatives to mouse wheel for pen users.

Paul Kotelevets commented

2023-09-02 02:16:22 +02:00

I am not sure if it makes sense to make UI mockups using empty scene.
It is not the way it will be used in practice.

I am not sure if it makes sense to make UI mockups using empty scene. It is not the way it will be used in practice.

👍 1

Albert commented

2023-09-03 20:12:37 +02:00

Much to improve, but just one more option, all on the right side.

kk.png

726 KiB

Albert commented

2023-09-04 20:31:44 +02:00

I would like to show how FreeCad approaches modal tools, although it has some drawbacks that make me crazy, it also has some advantages.
In the video I first create a line directly with the 3D cursor, then in the second line I start adding the first point with the cursor and the second by pressing (enter) allows me to confirm each attribute and execute the action by accepting all the options. Finally, I create a circle, using the (G) key to toggle between global or local position, and when the position is defined, I enter the radius numerically.

Disadvantages:
When you press keyboard shortcuts, depending on where the cursor is, it changes the units.
Although you can edit the values in the properties menu with the cursor, you lose the position of the 3D viewer due to the movement of the cursor.
With (TAB) or (Enter) you can skip or accept the attribute values, but no change is seen in the checkBoxes and it is very confusing.
You cannot dynamically edit attributes from the menu, you simply add the value and accept.

Advantages:
The information is organized, does not flicker, nor overlaps the 3D Viewport.
Allows scrolling, so you can adjust the size of the window.
You can edit attributes with the cursor without the need for the keyboard. In any case, it is not a great advantage, since Blender allows you to execute the action, making the adjustments later.
Shortcuts are not necessary for all attributes, since with (TAB) or (Enter) you can jump to the next one.

Thoughts:
Just as the Status Bar is always visible, and Overlays can also be overlaid at any time, the SideBar or the rest of the editors can be hidden and this can make it difficult to temporarily replace them to show the attributes of the modal tools.
On the other hand, reading in StatusBar is complicated, and an Overlay can cover the figure or have no contrast with the background.

I would like to show how FreeCad approaches modal tools, although it has some drawbacks that make me crazy, it also has some advantages. In the video I first create a line directly with the 3D cursor, then in the second line I start adding the first point with the cursor and the second by pressing (enter) allows me to confirm each attribute and execute the action by accepting all the options. Finally, I create a circle, using the (G) key to toggle between global or local position, and when the position is defined, I enter the radius numerically. Disadvantages: When you press keyboard shortcuts, depending on where the cursor is, it changes the units. Although you can edit the values in the properties menu with the cursor, you lose the position of the 3D viewer due to the movement of the cursor. With (TAB) or (Enter) you can skip or accept the attribute values, but no change is seen in the checkBoxes and it is very confusing. You cannot dynamically edit attributes from the menu, you simply add the value and accept. Advantages: The information is organized, does not flicker, nor overlaps the 3D Viewport. Allows scrolling, so you can adjust the size of the window. You can edit attributes with the cursor without the need for the keyboard. In any case, it is not a great advantage, since Blender allows you to execute the action, making the adjustments later. Shortcuts are not necessary for all attributes, since with (TAB) or (Enter) you can jump to the next one. Thoughts: Just as the Status Bar is always visible, and Overlays can also be overlaid at any time, the SideBar or the rest of the editors can be hidden and this can make it difficult to temporarily replace them to show the attributes of the modal tools. On the other hand, reading in StatusBar is complicated, and an Overlay can cover the figure or have no contrast with the background.

FreeCadMTools.mp4

2.9 MiB

Albert commented

2023-09-04 20:42:34 +02:00

Another option would be to temporarily replace the overlays.

Replace overlays.png

552 KiB

Julien Kaspar commented

2023-09-06 13:13:59 +02:00

It's clear that the vertical overlay needs a background to remain readable. This will then negatively impact visibility in the editors.

Adding the stats back to the sidebar is a step backwards to how it was in Blender 2.7x.

Here's a first mockup based on the idea to expose it all in the status bar with extra spacing to avoid flickering, improved readability and a shortcut on Ctrl Mouse Wheel to scroll the horizontal list while a modal is running:

This also divides the contents into 4 categories with separators and extra spacing:

Actions (Usually to confirm or cancel)
Modes (Mutually exclusive setting that impacts mouse behavior. The active one has a highlighted key)
Modifiers (Not in this mockup. Use of holding down modifier keys to change mouse behavior. Would also have highlighted key while held)
Settings (Cycle bool or arrays of settings)

It's clear that the vertical overlay needs a background to remain readable. This will then negatively impact visibility in the editors. Adding the stats back to the sidebar is a step backwards to how it was in Blender 2.7x. Here's a first mockup based on the idea to expose it all in the status bar with extra spacing to avoid flickering, improved readability and a shortcut on `Ctrl Mouse Wheel` to scroll the horizontal list while a modal is running: ![50_status_bar_scrollable.png](/attachments/f2ab3ecc-5311-4877-a23f-819d2951e54c) This also divides the contents into 4 categories with separators and extra spacing: - **Actions** (Usually to confirm or cancel) - **Modes** (Mutually exclusive setting that impacts mouse behavior. The active one has a highlighted key) - **Modifiers** (Not in this mockup. Use of holding down modifier keys to change mouse behavior. Would also have highlighted key while held) - **Settings** (Cycle bool or arrays of settings)

50_status_bar_scrollable.png

199 KiB

👍 1 ❤️ 1 🚀 2

Albert commented

2023-09-10 16:37:14 +02:00

As Julien Kaspar indicates, improving the Status Bar is essential, especially so that it doesn't vibrate with the change of decimals or units. Spacing is also important to avoid clutter, a little more spacing between attributes wouldn't hurt.

Regarding the overlays, as Paul Kotelevets indicates, it is important to differentiate them from the background, for this reason, I consider that they should be on a frame, with partial opacity.

Having a slight reference to the overlays of the DECALmachine addon, where the modal properties follow the cursor, I make a couple of proposals.

The top one is more simplified and the second copies the menu of the last action, adding keyboard shortcuts.
In both I have added a dot or bar that indicates the active attribute, and the access shortcuts. The navigation between them should be possible using the TAB or the navigation cursors. For this reason, so many shortcuts would not be necessary either.

On the other hand, it should be possible to direct the position of the menu using the mouse direction, if it is to the right the menu would open to the right, and vice versa.

I know that Ton does not like float windows, but I think that in this case it is the best option, since they are temporary and the position is dynamic. Since the values are controlled by the distance to the activation point, I think there is always a position where they do not interfere with the scene.

As you can see, I have also reduced the size of the shortcuts a bit to improve the spacing.

I hope you like it, you can always try an addon to see if it's comfortable.

Updated 1
If the position of the popup/overlay were set using a key, for example (space), it would also be possible to edit the attributes of the modal action using the cursor, which, although not as fast as accessing it using the keyboard, is more intuitive.

As Julien Kaspar indicates, improving the Status Bar is essential, especially so that it doesn't vibrate with the change of decimals or units. Spacing is also important to avoid clutter, a little more spacing between attributes wouldn't hurt. Regarding the overlays, as Paul Kotelevets indicates, it is important to differentiate them from the background, for this reason, I consider that they should be on a frame, with partial opacity. Having a slight reference to the overlays of the DECALmachine addon, where the modal properties follow the cursor, I make a couple of proposals. The top one is more simplified and the second copies the menu of the last action, adding keyboard shortcuts. In both I have added a dot or bar that indicates the active attribute, and the access shortcuts. The navigation between them should be possible using the TAB or the navigation cursors. For this reason, so many shortcuts would not be necessary either. On the other hand, it should be possible to direct the position of the menu using the mouse direction, if it is to the right the menu would open to the right, and vice versa. I know that Ton does not like float windows, but I think that in this case it is the best option, since they are temporary and the position is dynamic. Since the values are controlled by the distance to the activation point, I think there is always a position where they do not interfere with the scene. As you can see, I have also reduced the size of the shortcuts a bit to improve the spacing. I hope you like it, you can always try an addon to see if it's comfortable. Updated 1 If the position of the popup/overlay were set using a key, for example (space), it would also be possible to edit the attributes of the modal action using the cursor, which, although not as fast as accessing it using the keyboard, is more intuitive.

Flota2.jpg

498 KiB

Paul Kotelevets commented

2023-10-13 12:37:58 +02:00

I think that the main problem of overlays is that they are compatible with limited workflow range, addons that use overlays like hops or decal machine are usually designed for quite specific goals, so they can afford them.

It is not a problem to bring whatever to the viewport (overlays, pie menus, widgets and so one), the problem is that it contradicts the complexity conditions - the ability of editing the most complex and messy content assumes the least viewport invasive solutions.

I think that the main problem of overlays is that they are compatible with limited workflow range, addons that use overlays like hops or decal machine are usually designed for quite specific goals, so they can afford them. It is not a problem to bring whatever to the viewport (overlays, pie menus, widgets and so one), the problem is that it contradicts the complexity conditions - the ability of editing the most complex and messy content assumes the least viewport invasive solutions.

Pablo Vazquez commented

2023-10-13 12:45:32 +02:00

This task has been partially tackled in !111676

Any new exploration should use 4.0 as a starting point.

This task has been partially tackled in !111676 Any new exploration should use 4.0 as a starting point.

Pablo Vazquez closed this issue

2023-10-13 12:45:35 +02:00

Blender Bot added the

Status

Archived

label 2023-10-13 12:45:36 +02:00

Sign in to join this conversation.

No Label

Download

What's New

Blender Studio

Manual

Developers Blog

Documentation

Benchmark

Blender Conference

Development Fund

One-time Donations

UI: Headers and status text display #107094

Situation

Possible Solutions