UI: Custom Tooltips with Optional Images #105905

Merged
Harley Acheson merged 6 commits from Harley/blender:CustomTooltips into main 2023-09-15 21:06:38 +02:00
Member

This adds an optional uiBut callback that allows creating a tooltip
line-by-line with specified style and color in any order. It also
allows adding images as well to create very informative tooltips.


The format and content of tooltips are currently just automatically created based on the data type. We have the quick ability to supply a single simple string to replace the content, but otherwise we have no custom control over the data, styles, formatting, etc.

This PR adds the ability to create the tooltip contents line-by-line, with each one having custom style, color, etc. This also adds the ability to add images to it.

As an example of usage, we can create a custom tooltip in file_draw.cc. Instead of creating a dynamic tooltip like this:

UI_but_func_tooltip_set(but, file_draw_tooltip_func, BLI_strdup(path), MEM_freeN);

...we set up a custom tooltip like this:

UI_but_func_tooltip_custom_set(but, file_draw_tooltip_func, BLI_strdup(path), MEM_freeN);

That custom tooltip callback gets passed a uiTooltipData that can then be added to with UI_tooltip_text_field and UI_tooltip_image_field like this:

static void file_draw_tooltip_func(const bContext * /*C*/, struct uiTooltipData *data, void *argN)
{
  char *path = (char *)argN;

  UI_tooltip_text_field_add(data, BLI_strdup(path), nullptr, UI_TIP_STYLE_HEADER, UI_TIP_LC_MAIN, true);

...

  ImBuf *img = UI_icon_alert_imbuf_get(ALERT_ICON_BLENDER);
  UI_tooltip_image_field_add(data, img, 128 * UI_SCALE_FAC, 128 * UI_SCALE_FAC);
  IMB_freeImBuf(img);
}

So when you hover over the small icon in the list view of File Manager you would get the following. Obviously with the "Blender" logo standing in for any ImBuf we might want to show. And the file details are just placeholders to show the differences in color, spacing, etc that is possible.

image

Although this PR seems to have a lot of changes, it is actually quite simple. Instead of uiTooltipData, styles, and colors being private to interface_region_tooltip.cc they are made public. Creating a custom tooltip is just setting a callback that passes an empty uiTooltipData to you. Then you can add any fields you want in any order by calling UI_tooltip_text_field_add or UI_tooltip_image_field_add.

This makes a little bit of mess inside interface_region_tooltip.cc. Currently there is a pattern where we create a new field and then add text to it. This PR makes that one step (so there is no need to be aware of uiTooltipField), creating the field and adding strings to it. Most of the changes here is just this.

This adds an optional uiBut callback that allows creating a tooltip line-by-line with specified style and color in any order. It also allows adding images as well to create very informative tooltips. --- The format and content of tooltips are currently just automatically created based on the data type. We have the quick ability to supply a single simple string to replace the content, but otherwise we have no custom control over the data, styles, formatting, etc. This PR adds the ability to create the tooltip contents line-by-line, with each one having custom style, color, etc. This also adds the ability to add images to it. As an example of usage, we can create a custom tooltip in file_draw.cc. Instead of creating a dynamic tooltip like this: ``` UI_but_func_tooltip_set(but, file_draw_tooltip_func, BLI_strdup(path), MEM_freeN); ``` ...we set up a custom tooltip like this: ``` UI_but_func_tooltip_custom_set(but, file_draw_tooltip_func, BLI_strdup(path), MEM_freeN); ``` That custom tooltip callback gets passed a `uiTooltipData` that can then be added to with `UI_tooltip_text_field` and `UI_tooltip_image_field` like this: ``` static void file_draw_tooltip_func(const bContext * /*C*/, struct uiTooltipData *data, void *argN) { char *path = (char *)argN; UI_tooltip_text_field_add(data, BLI_strdup(path), nullptr, UI_TIP_STYLE_HEADER, UI_TIP_LC_MAIN, true); ... ImBuf *img = UI_icon_alert_imbuf_get(ALERT_ICON_BLENDER); UI_tooltip_image_field_add(data, img, 128 * UI_SCALE_FAC, 128 * UI_SCALE_FAC); IMB_freeImBuf(img); } ``` So when you hover over the small icon in the list view of File Manager you would get the following. Obviously with the "Blender" logo standing in for any ImBuf we might want to show. And the file details are just placeholders to show the differences in color, spacing, etc that is possible. ![image](/attachments/bea297ff-97bd-4494-b95c-c7bfabbc9158) Although this PR seems to have a lot of changes, it is actually quite simple. Instead of uiTooltipData, styles, and colors being private to `interface_region_tooltip.cc` they are made public. Creating a custom tooltip is just setting a callback that passes an empty uiTooltipData to you. Then you can add any fields you want in any order by calling `UI_tooltip_text_field_add` or `UI_tooltip_image_field_add`. This makes a little bit of mess inside `interface_region_tooltip.cc`. Currently there is a pattern where we create a new field and then add text to it. This PR makes that one step (so there is no need to be aware of uiTooltipField), creating the field and adding strings to it. Most of the changes here is just this.
Author
Member

Harley Todo: This post includes information from Julian about how asset tooltips might look: #104693

Harley Todo: This post includes information from Julian about how asset tooltips might look: https://projects.blender.org/blender/blender/pulls/104693
Harley Acheson force-pushed CustomTooltips from 2dfe4381df to 27d3098c7c 2023-04-01 01:29:18 +02:00 Compare
Harley Acheson changed title from WIP: Demonstration of Custom Tooltips to WIP: Custom Tooltips with Optional Images 2023-04-01 01:29:52 +02:00
Harley Acheson added this to the User Interface project 2023-04-07 19:21:26 +02:00

Overall this approach makes sense to me.

It may be best to make a copy of the ImBuf (assuming it's always small), since there is some risk that it gets freed before the tooltip.

Overall this approach makes sense to me. It may be best to make a copy of the `ImBuf` (assuming it's always small), since there is some risk that it gets freed before the tooltip.
Harley Acheson force-pushed CustomTooltips from e10764d619 to 6b92a102f4 2023-09-14 21:28:17 +02:00 Compare
Harley Acheson changed title from WIP: Custom Tooltips with Optional Images to UI: Custom Tooltips with Optional Images 2023-09-14 21:34:34 +02:00
Author
Member

@brecht - Overall this approach makes sense to me.

Campbell has said similar when we talked about it, although he did not look at the code.

It may be best to make a copy of the ImBuf (assuming it's always small), since there is some risk that it gets freed before the tooltip.

Good point. It now does so.

Is this closer to what you are wanting?

image

> @brecht - Overall this approach makes sense to me. Campbell has said similar when we talked about it, although he did not look at the code. > It may be best to make a copy of the `ImBuf` (assuming it's always small), since there is some risk that it gets freed before the tooltip. Good point. It now does so. Is this closer to what you are wanting? ![image](/attachments/7706812e-d971-4023-943a-edab898affcc)
Harley Acheson requested review from Brecht Van Lommel 2023-09-14 21:55:21 +02:00
Author
Member

Is this closer to what you are wanting?

Although without the path. Just the full file name makes sense in this context.

> Is this closer to what you are wanting? Although without the path. Just the full file name makes sense in this context.

Is this closer to what you are wanting?

Although without the path. Just the full file name makes sense in this context.

Yes, this without the path looks good to me.

> > Is this closer to what you are wanting? > > Although without the path. Just the full file name makes sense in this context. Yes, this without the path looks good to me.
Brecht Van Lommel approved these changes 2023-09-15 17:53:03 +02:00
Brecht Van Lommel left a comment
Owner

This looks good to me (knowing that the changes in file_draw_tooltip_func are for demonstration purposes and would be left out).

This looks good to me (knowing that the changes in `file_draw_tooltip_func` are for demonstration purposes and would be left out).
Author
Member

@brecht - ...changes in file_draw_tooltip_func are for demonstration purposes and would be left out

Yes, for sure.

Will merge this quite soon, so can update ##104547.

> @brecht - ...changes in file_draw_tooltip_func are for demonstration purposes and would be left out Yes, for sure. Will merge this quite soon, so can update ##104547.
Harley Acheson added 4 commits 2023-09-15 18:38:06 +02:00
Harley Acheson added 1 commit 2023-09-15 19:13:29 +02:00
Author
Member

@blender-bot build

@blender-bot build
Harley Acheson merged commit 6453b00f44 into main 2023-09-15 21:06:38 +02:00
Harley Acheson deleted branch CustomTooltips 2023-09-15 21:06:40 +02:00
Contributor

Is there an example of doing this with an addon?

Is there an example of doing this with an addon?
Author
Member

Is there an example of doing this with an addon?

Do you have an example of where you would want this for an addon?

> Is there an example of doing this with an addon? Do you have an example of where you would want this for an addon?
First-time contributor

Is there an example of doing this with an addon?

Do you have an example of where you would want this for an addon?

a good example of an addon using GIFs for tooltips is maya's animbot addon. everything you see here (https://animbot.ca/tooltips/en/) is a tooltip in the addon itself
it is a bit busy but it also eliminates the need for separate documentation imo

> > Is there an example of doing this with an addon? > > Do you have an example of where you would want this for an addon? a good example of an addon using GIFs for tooltips is maya's animbot addon. everything you see here ([https://animbot.ca/tooltips/en/](https://animbot.ca/tooltips/en/)) is a tooltip in the addon itself it is a bit busy but it also eliminates the need for separate documentation imo
Contributor

Do you have an example of where you would want this for an addon?

  1. Adding an image or gif to the repository tooltips
  2. Adding an image or gif to a simple operator tooltip of an addon (example, the simple operator template)
> Do you have an example of where you would want this for an addon? 1. Adding an image or gif to the repository tooltips 2. Adding an image or gif to a simple operator tooltip of an addon (example, the simple operator template)
Sign in to join this conversation.
No reviewers
No Label
Interest
Alembic
Interest
Animation & Rigging
Interest
Asset Browser
Interest
Asset Browser Project Overview
Interest
Audio
Interest
Automated Testing
Interest
Blender Asset Bundle
Interest
BlendFile
Interest
Collada
Interest
Compatibility
Interest
Compositing
Interest
Core
Interest
Cycles
Interest
Dependency Graph
Interest
Development Management
Interest
EEVEE
Interest
EEVEE & Viewport
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
Virtual Reality
Interest
Vulkan
Interest
Wayland
Interest
Workbench
Interest: X11
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
EEVEE & Viewport
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
Platform
FreeBSD
Platform
Linux
Platform
macOS
Platform
Windows
Priority
High
Priority
Low
Priority
Normal
Priority
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
4 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#105905
No description provided.