Page MenuHome

UI: Icon number indicator for data-blocks
ClosedPublic

Authored by Dalai Felinto (dfelinto) on Oct 18 2022, 2:43 PM.

Details

Summary

Adds the possibility of having a little number on top of icons.

At the moment this is used for:

  • Outliner
  • Node Editor bread-crumb
  • Node Group node header

For the outliner there is almost no functional change. It is mostly a refactor
to handle the indicators as part of the icon shader instead of the outliner
draw code. (note that this was already recently changed in a5d3b648e3e2).

The difference is that now we use rounded border rectangle instead of circles, and we can go up to 999 elements.

So for the outliner this shows the number of collapsed elements of a
certain type (e.g., mesh objects inside a collapsed collection).

For the node editors is being used to show the use count for the data-block.
This is important for the node editor, so users know whether the node-group
they are editing (or are about to edit) is used elsewhere. This is
particularly important when the Node Options are hidden, which is the
default for node groups appended from the asset libraries.


Note: This can be easily enabled for ID templates which can then be part
of T84669. It just need to call UI_but_icon_indicator_number_set in the
function template_add_button_search_menu.


Thanks Clément Foucault for the help figuring out the shader, Julian
Eisel for the help navigating the UI code, and Pablo Vazquez for the
collaboration in this design solution.


Upcoming Blender Open Movie Project examples:

More examples with a lot of elements:

Diff Detail

Repository
rB Blender

Event Timeline

There are a very large number of changes, so older changes are hidden. Show Older Changes
This revision now requires review to proceed.Oct 18 2022, 3:05 PM
Jacques Lucke (JacquesLucke) requested changes to this revision.Oct 18 2022, 4:39 PM

Main change I'd like to see is the use of some named constant instead of passing 1 to various function calls.

source/blender/editors/interface/interface_icons.c
418–426

Using 1 to disable the indicator seems wrong. Better define e.g. UI_NO_ICON_INDICATOR as -1 somewhere and use that.

1744

I think either the naming indicator_number is wrong or the > 1 should be moved out of here. To me, indicator_number does not imply that it's useless when it is e.g. 0 or 1. Not sure which approach would be better here. Longer term it may become useful to pass the "indicator string" into this function (limited to e.g. 3 characters). For now it's prooobably fine as is.

1782

Personally, I think I prefer +99 instead of just 999 when the number is too large. 999 looks like it's an exact number which is most likely wrong. We could potentially still show the actual number on hover, but that's can be done separately.

source/blender/gpu/shaders/gpu_shader_icon_frag.glsl
3

typo (outer)

source/blender/gpu/shaders/infos/gpu_interface_info.hh
24

Missing newline

This revision now requires changes to proceed.Oct 18 2022, 4:39 PM

Agree with Jacques on the magic 1 and +99 instead of 999. Three digits with the box cover up the icon quite a bit, making it unreadable. That's part of why I prefer the circle btw, but I want to discuss that with Pablo.

Dalai Felinto (dfelinto) updated this revision to Diff 56907.EditedOct 18 2022, 5:00 PM
Dalai Felinto (dfelinto) marked an inline comment as done.
  • From review: typos, UI_NO_ICON_INDICATOR, make format

Not addressed:

  • Change limit to 99
  • Pass string or change indicator_number parameter name
Dalai Felinto (dfelinto) marked 2 inline comments as done.Oct 18 2022, 5:07 PM

I will wait for a conclusion re: circle vs rectangle before doing or not doing the +99 change.

I will discuss with @Jacques Lucke (JacquesLucke) offline for a better solution regarding the text/int/>1 logic.

I've never liked our use of the plus symbol like "+99". It would make more sense to use greater-than like ">99" instead. However, we could actually show more than 999 in only three characters if we wish, using Greek abbreviations:

"1K" = 1,000
"99K" = 99,000
".1M = 100,000
"1M" = 1,000,000
"99M" = 99,000,000
".1G" = 100,000,000
"1G" = 1,000,000,000
"99G" = 99,000,000,000
...

  • From review: Pass a string around with the text overlay

I think my comment below would still be an improvement but my main points have been addressed.

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

I'd probably store the icon overlay text here instead of the number.

This revision is now accepted and ready to land.Oct 18 2022, 5:42 PM
  • Make it compile again (tm)

I've never liked our use of the plus symbol like "+99". It would make more sense to use greater-than like ">99" instead.

It looks really ugly with it to be honest:

However, we could actually show more than 999 in only three characters if we wish, using Greek abbreviations:

This is the first time I read about "Greek abbreviations". They are certainly ingenious, but I don't think most people are familiar with .1M.

  • From Review: rename icon shader to remove 2D
  • From review: still use cache
  • Tweak comment

@Dalai Felinto (dfelinto) - It looks really ugly with it to be honest:

I also find ">99" to be ugly too, but only about equally ugly as "+99" while having better meaning.

This is the first time I read about "Greek abbreviations". They are certainly ingenious, but I don't think most people are familiar with .1M.

Most people, and almost all our users, are familiar with this notation when used to indicate the number of bytes in computer memory or storage. Outside of computer uses, the financial industry uses a slightly different progression, going from "K" to "M" to "B", so using "B" for billion rather than "G".

Using the above is very granular, in that you can have "8M" versus "7M", etc. But if you find that obscure and don't mind giving up granularity you can also do:

"1" - "999", "10³", "10⁴", "10⁵", "10⁶", "10⁷", "10⁸", "10⁹"

The above is not a change of font size but just using numbers from Unicode superscripts. Just a thought. I think I prefer the Greek. LOL

+1 Love it!
Paired with Greek style numbering I think it's the best of all worlds (nice idea Harley!)

Three digits with the box cover up the icon quite a bit, making it unreadable. That's part of why I prefer the circle btw, but I want to discuss that with Pablo.

The issue with circles is that you can't widen a circle without making it taller, so after a single digit you need to do compromises by making the text smaller or the circle larger.
Currently in master it already looks awkard with +99:

I think taking a bit more space from the icon to show useful info is okay (form follows function).

Funny that in yesterday's live stream someone asked about this exact thing.

Hi, just curious...
Usually in this kind of "badge count" the + sign comes after the number, (e.g. 99+), not before, as you can see in those mail badges examples..


Is there a special reason why it is done the other way in blender?

  • Undo unintended change
  • Revert the "skip" cache change (since it is not working for the breadcrumbs)

From review: Use special notation system for large numbers

This is implemented on BLI_str_format_integer_unit:

  • 10,000 -> 10K
  • 100,000 -> .1M
  • Cleanup + Merge from latest master
This comment was removed by Dalai Felinto (dfelinto).

Some examples with a lot of elements:

Dalai Felinto (dfelinto) added 1 blocking reviewer(s): Julian Eisel (Severin).
This revision now requires review to proceed.Oct 18 2022, 8:06 PM
  • Change enum order to avoid running into a recent bug from master (broken splashscreen)
  • Shader: Add 25% transparency + comments
Julian Eisel (Severin) accepted this revision.EditedOct 20 2022, 3:24 PM

I'm missing a comment on what the GPU_SHADER_ICON shader does, it's not at all clear that it has this feature built in.

Code looks good to me otherwise, however, on macOS this introduces a crash on startup for me:

ERROR (gpu.shader): gpu_shader_icon FragShader: 
      | 
    1 | #version 330
      |                                                                                               ^
      | Error: Initializer not allowed
      | 
      | #version 330
      |                                                                                                ^
      | Error: Use of undeclared identifier 'radius'
      | 
      | #version 330
      |                                                                                                  ^
      | Error: Initializer not allowed
      | 
      | #version 330
      |                                                                                                   ^
      | Error: Initializer not allowed
      | 
      | #version 330
      |                                                                                                     ^
      | Error: Use of undeclared identifier 'right_half'
      | 
      | #version 330
      |                                                                                                      ^
      | Error: Use of undeclared identifier 'mask'
      | 
      | #version 330
      |                                                                                                          ^
      | Error: Use of undeclared identifier 'lower_half'
      | 
      | #version 330
      |                                                                                                           ^
      | Error: Use of undeclared identifier 'mask'
      | 
      | #version 330
      |                                                                                                                ^
      | Error: Use of undeclared identifier 'mask'

/Users/julianeisel/blender/software/dev/default/src/source/blender/gpu/intern/gpu_shader.cc:613:48: runtime error: member access within null pointer of type 'blender::gpu::Shader'
SUMMARY: UndefinedBehaviorSanitizer: undefined-behavior /Users/julianeisel/blender/software/dev/default/src/source/blender/gpu/intern/gpu_shader.cc:613:48 in
This revision is now accepted and ready to land.Oct 20 2022, 3:24 PM
Julian Eisel (Severin) requested changes to this revision.Oct 20 2022, 3:24 PM
This revision now requires changes to proceed.Oct 20 2022, 3:24 PM
  • From review: Add comments
  • Fix Mac compilation
  • From Review: do not store integer in the button
This revision is now accepted and ready to land.Oct 20 2022, 4:37 PM
Jacques Lucke (JacquesLucke) added inline comments.
source/blender/blenlib/BLI_string.h
319

Would probably be good to mention that this (intentionally?) does not round the numbers. Otherwise this would be 2k.

source/blender/editors/interface/interface_icons.c
2533

UI_icon_text_overlay_init_from_count

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

icon_overlay_text

source/blender/editors/interface/interface_panel.cc
1116

UI_NO_ICON_OVERLAY_TEXT

Dalai Felinto (dfelinto) marked 4 inline comments as done.Oct 20 2022, 4:47 PM

Addressed all the comments from Jacques locally. Pushing it now.

The numbers and icons are quite cluttered and too tightly placed.
I would suggest adding more padding for better readability.

Some examples with a lot of elements: