Page MenuHome

UI: Improve scaling of widgets when zooming
ClosedPublic

Authored by Leon Schittek (lone_noel) on Oct 12 2021, 10:00 PM.

Details

Summary

This commit improves the scaling of some ui widgets when
zooming by making the radius of the rounded corners
dependent on the element's zoom level.

The zoom is added as a parameter to the widget drawing functions
and can usually derived from the aspect. In the cases where that
isn't possible or wouldn't make sense we continue to rely on the
element's size.

The improvement is most noticeable in the node editor.


masterpatch

Issue
Most UI widgets have a fixed corner radius based on the constant
U.widget_unit that is scaled by the roundness defined in the theme.
This means that, when the size of these widgets changes (e.g. when
zooming into nodes or scaling regions with ctrl + mousewheel) the
absolute corner radius in screen space stays the same, but changes
relatively to the element.

Approach
Instead of a constant corner radius, the corner rounding should be
scaled according to the zoom.
In most parts of the UI this won't make a difference.

The zoom is the inverse of the aspect but the term is more
clear even though aspect is used in many other places in
blender.

In principle this approach should work for all widgets but there are
some that don't have access to the aspect or have a special shape
(like the scrollbars) where basing it on U.widget_unit wouldn't
make sense. Those widgets are kept unchanged and calculate the
corner radius based on the size of the element, which works
with any zoom level.

Limitations
Currently popovers (with the triangle pointing at the button) stay
with a fixed corner radius, that doesn't adjust to the zoom.
Since those popovers exhibit some additional issues like the
triangle clipping on higher zoom levels I think I might address
them in a different patch.

Side Effects
I still have to check more areas of blender to see whether I missed
something, but so far I haven't found any unintended side effects.

Diff Detail

Repository
rB Blender
Branch
ui-improve-widget-scaling (branched from master)
Build Status
Buildable 18272
Build 18272: arc lint + arc unit

Event Timeline

Leon Schittek (lone_noel) requested review of this revision.Oct 12 2021, 10:00 PM
Leon Schittek (lone_noel) created this revision.
Leon Schittek (lone_noel) added projects: User Interface, Restricted Project.
Leon Schittek (lone_noel) planned changes to this revision.Oct 13 2021, 10:33 PM

I noticed that changing the menu buttons to use the rectangle height for the rounding breaks the brush layout. The brush selector/preview is just a huge menu button so basing the rounding on the button size obviously doesn't go well:

I wonder if it's simpler to pass the region zoom into these functions, then some combination of the widget rounding value, the widget unit, and the zoom should do the trick. Maybe not though.

I wonder if it's simpler to pass the region zoom into these functions, then some combination of the widget rounding value, the widget unit, and the zoom should do the trick. Maybe not though.

I thought about something like that, but hadn't looked into it, yet.
If the zoom is available that indeed seems like a much more general approach, that might eliminate most - if not all - edge cases. I think that's where I'm trying to go next!

  • WIP: Pass region to widget draw functions to calculate the actual zoom for the corner rounding.
Leon Schittek (lone_noel) planned changes to this revision.EditedOct 15 2021, 3:13 PM

@Hans Goudey (HooglyBoogly) The general approach seems to be good and at this point I didn't find any more edge cases that I can't get to work properly.

Unfortunately the regions of popups don't have the view rectangles set properly leading to a division by 0. So I still have do maneuver some edge cases and fall back to either of the old approaches, which overall isn't as clean as I had hoped it would be. I'll see if I can manage to fix that so might be able use one universal approach for all rounded corners.

Leon Schittek (lone_noel) edited the summary of this revision. (Show Details)
  • Fix some widgets that were not scaling correctly yet
  • Change the widget drawing functions to take the aspect directly rather than calculating it from the region, because not all widgets have a proper region with a valid v2d to calculate the scale from
  • Merge branch 'master'
  • Merge branch 'master'
  • Account for zoom in the corner rounding of panels.

OK, after looking around quite a bit I think this now actually fixes all instances of the corner radius not adjusting with the zoom
without having any weird side effects. So functionally it's where it should be.

@Hans Goudey (HooglyBoogly) when you got some time on your hand it would be interesting to know, if my approach is alright in general. But it's not urgent at all :)

source/blender/editors/interface/interface_panel.c
1121–1123

In the patch description you say this doesn't affect panels, but there is still a change here. Does it do something else?

source/blender/editors/interface/interface_widgets.c
273–276

I think you made the right choice.

Unfortunately, aspect is one of the most confusing terms in Blender's UI code.
I just find it so hard to intuit. A zoom factor (i.e. 1.01 is 1% bigger) might be easier to understand. I'm not sure though.

2602

Great description, it's helpful to see that sort of thing in the code. I'd suggest making the section name a bit more specific though. It can be generalized if more is added.

5050–5051

I removed this function since it isn't used anymore.

  • Merge branch 'master'
  • Exchange aspect for zoom to increase readability.
  • Fix scaling of menu_itembut to not rely on the item's size as that gives bad results with the brush selection menu.
  • Remove outdated comment.
Leon Schittek (lone_noel) marked 2 inline comments as done.Oct 24 2021, 7:32 PM
Leon Schittek (lone_noel) added inline comments.
source/blender/editors/interface/interface_panel.c
1121–1123

This does indeed affect the panels. I only added this in a more recent update and forgot to update the description, as well.

source/blender/editors/interface/interface_widgets.c
273–276

I can see that as I'm always a bit confused about it myself.

In the panels code I saw a section where it used something like zoom = 1.0f / aspect. So I changed it to be in line with that.

Any remaining issues on this patch?

This seems to solve most cases, especially the very bad one in thumbnail lists.

Leon Schittek (lone_noel) retitled this revision from [WIP] UI: Improve scaling of widgets when zooming to UI: Improve scaling of widgets when zooming.Oct 26 2021, 10:50 PM
Leon Schittek (lone_noel) edited the summary of this revision. (Show Details)
Leon Schittek (lone_noel) marked 2 inline comments as done.
Leon Schittek (lone_noel) planned changes to this revision.Oct 26 2021, 11:25 PM

I just had a crash when adding a color strip in the VSE that I can't reproduce in master. It's very late here, so I'll have to look into that tomorrow.

  • Merge branch 'master'
  • Fix crash caused by me ignoring an existing null check.
  • Merge branch 'master'
  • Make format

At this point I think I've clicked through almost all parts of the UI and haven't found any problems. But another pair of eyes would be very welcome, because blender is big and small things are easy to miss.

So I think the patch is ready for review.

  • Base menu item padding on zoom level, as well
  • Merge master
Hans Goudey (HooglyBoogly) requested changes to this revision.Nov 5 2021, 4:16 PM

Just a few small comments. Generally it's working very well!

source/blender/editors/interface/interface_intern.h
936

Inconsistent parameter name here. In the implementation, this argument is called rad.

If rad is correct, I'd suggest radius instead.

source/blender/editors/interface/interface_widgets.c
275

I would recommend adding zoom as the last argument rather than the first, since it's not the most important.

2610–2615

const arguments here.

This revision now requires changes to proceed.Nov 5 2021, 4:16 PM
Leon Schittek (lone_noel) marked 2 inline comments as done.
  • Change parameter name consistently to radius
  • Change zoom to be the last argument
  • Use const arguments for the radius calculation
  • Merge branch 'master'
Leon Schittek (lone_noel) marked an inline comment as done.Nov 5 2021, 6:48 PM

With the most recent changes, this looks good to me. But I think it's best if another UI developer sees this before it's committed.

  • Merge branch 'master'. No further changes.
Update to current state of master.

Looks good. Glad to see the zoom level be passed to the callbacks actually, it always bothered me that we had to use the rectangle or so to apply that.

Two minor changes requested, I can apply those myself before committing.

source/blender/editors/interface/interface_panel.c
1122

I prefer being a bit more explicit about the order of operations and use parentheses to avoid confusion. E.g. here (btheme->tui.panel_roundness * U.widget_unit * 0.5f) / aspect.

source/blender/editors/interface/interface_widgets.c
2602

This needs to start with /** to be a doxygen comment (the \name and \{ suggest that's what you're trying to do).

This revision is now accepted and ready to land.Nov 24 2021, 8:46 PM
This revision was automatically updated to reflect the committed changes.

@Leon Schittek (lone_noel)
I suppose, that you forgot about selection frames and now it is not cover actual border.
Here you can see a little gaps on corners: