Page MenuHome

UI: Larger Alert Icons
ClosedPublic

Authored by Harley Acheson (harley) on Feb 15 2020, 3:57 AM.

Details

Summary

Playing around with larger, full-color icons that can be used in alerts, and dialog.

Tested here with the "Exit" dialog. Looking like the following on Windows and Mac:

This would require applying this patch AND unzipping the contents of the following into your blender\release\datafiles\ folder:

Diff Detail

Repository
rB Blender

Event Timeline

There are a very large number of changes, so older changes are hidden. Show Older Changes

Hey @Andrzej Ambroz (jendrzych) - The following is the SVG I was working on. Excuse the programmer art.

You should see that it is 5 256x256 icons for a total of 128x256. The first started as blown-up versions of your smaller icons, aligned to this grid, and borders added. The last one is taken directly from an SVG from the blender site.

When thinking about minimum feature sizes, I doubt these would ever be shown at less than about 64x64

This seems good to me - with some nice bespoke fitting icons by @Andrzej Ambroz (jendrzych) I expect this can look very nice, and also make the dialogs a bit clearer as well.

This revision is now accepted and ready to land.Feb 15 2020, 9:30 PM

@Campbell Barton (campbellbarton) - This patch makes changes to the "exit" dialog only as a way to show off the use of these icons. My hope is that we would NOT commit any changes to wm_files.c and leave that to further discussion. So, in a nutshell, don't worry too much about the changes to the dialog.

@Harley Acheson (harley)

const rcti crop = {xmin, xmax, ymin, ymax};
IMB_rect_crop(ibuf, &crop);
Harley Acheson (harley) planned changes to this revision.Feb 17 2020, 7:14 PM

Looks like the images will be monochrome and will then need to be recolored when output, based on theme colors. Will have to give this a bit of a think on how to pass along this color information. Could send along an icon id, or use a1/a2 to send theme color id.

Can't we just do it the same way we handle the prvicons in the File Browser?

Can't we just do it the same way we handle the prvicons in the File Browser?

The coloring part? Not really. The prvicons are very private to the File Browser and has better control over the lifecycle of those bitmaps. We need to worry not just about how they are created and used but also how and when they are disposed.

I suggest using one sheet with different sizes of each icon, 'crop' faster than 'scale', and it also allows you to use different design (detail) for different sizes.

Updating to current state of master. Allow uiBut's col member (if UI_BTYPE_IMAGE) to override image color. New helper function to make it easier to create UI_BTYPE_IMAGE uiButs with color override.

Now waiting for updated monochrome icons from @Andrzej Ambroz (jendrzych) then will hook those up to theme colors.

This revision is now accepted and ready to land.Feb 18 2020, 6:40 PM
Harley Acheson (harley) edited the summary of this revision. (Show Details)Feb 20 2020, 1:11 AM

Now using @Andrzej Ambroz (jendrzych)'s new icons (zip updated in main message at top). Icons are monochrome and being recolored on output using theme color (Info's Warning Color for the icon in the Quit dialog). Although default Warning color is very brown so I changed my own to yellow for the screenshot. The icon will now keep the same proportion in the Quit dialog if the dialog is made wider by long file names.

Harley Acheson (harley) retitled this revision from WIP: Alert Icons to UI: Larger Alert Icons.Feb 20 2020, 1:17 AM

Fixing a mistake that was adding some unnecessary vertical padding.

  • On a Mac, there should be a gap between the "Don't Save" button and the "Cancel", "Save".
  • The icon is too large relative to the current text size.
  • Title (without icon) and lines with an icon or checkbox are not aligned.
  • The checkbox is too close to the large icon.

  • You should scale the icons exactly in half, or you will not get perfectly clear lines.
  • The icon in the screenshot above is 128 px (for retina), works good.

  • Or use an icon sheet like the next one and you will always have perfect icons in any size.
  • Although I don't think there is a need for a 256 icon, 128 is already very large on the retina screen.

@Andrzej Ambroz (jendrzych) The Inkscape leaves a lot of garbage in the SVG file, here is the cleaned file, 14kB vs 527kB.

@Yevgeny Makarov (jenkm)
I managed going down to 9kb. :)

Harley Acheson (harley) edited the summary of this revision. (Show Details)Feb 20 2020, 6:01 PM

I have an even smaller version :))
Only in this case (plain svg) you lose some settings such as layers.

Updated to current state of master.

Also update the "zip" file referenced in first comment along with the sample. Proportions and padding around the image should be a little nicer. SVG is from @Yevgeny Makarov (jenkm)'s cleaned-up version, so only 15k.

@Yevgeny Makarov (jenkm):

On a Mac, there should be a gap between the "Don't Save" button and the "Cancel", "Save"

Yes, that would be nice. If you know how to do that then let me know.

You should scale the icons exactly in half...128 is already very large on the retina screen

These have to work for any arbitrary size, including up to 2X scale on Retina. There isn't any way to enforce any particular size. The dialog width starts with a size related to dpi scaling, is made wider based on the text inside, with a minimum and maximum. Our layout rules will then give a percentage to the icon column and inside that the icon will be full width (up to the supplied padding) and a matching height to make it square. Almost every size for that icon is as likely as almost any other.

Harley Acheson (harley) edited the summary of this revision. (Show Details)Feb 20 2020, 8:38 PM

Changing icon maximum size to 128x128. Also had to make changes to the way the width of the quit dialog is adjusted to fit very long file names so that icon width is taken into account.

Indeed, it would be good to get the changes in from @Yevgeny Makarov (jenkm)'s paintover.

Indeed, it would be good to get the changes in from @Yevgeny Makarov (jenkm)'s paintover.

Yes, but this thread should really just be about the addition of the icons, rather than bikeshedding on the quit dialog. That dialog is only featured here as a way to show what the icons can look like in place.

I would prefer to commit the icons on their own and then make a separate patch for the quit dialog. Otherwise we won't get the icons in. I did change the icon padding to match his paintover, but things like that gap between "don't save" and "cancel" either needs someone to figure out how to do that or that is a feature that needs to be added to our layout logic.

Just adding a helper function to make the alert icon in one call, getting the correct color from themes.

Yes - things like the spacing between the buttons is unrelated to this. But the fact that the text is now not alignedned because the icons changed would ideally be fixed here, I think.

@William Reynish (billreynish) - But the fact that the text is now not alignedned because the icons changed would ideally be fixed here, I think.

No, that alignment issue is unrelated to adding large icons to the project.

We can't really change the formatting of the quit dialog until we get the large icons in there. But then you are asking to fix an unrelated formatting issue with the dialog before the images can go in.

So take the current code as it is RIGHT NOW, without this patch. The dialog shows the "title" with a single line like the following:

uiItemL(layout, title, ICON_ERROR);

Now just add a few variations below it, so it looks like this:

uiItemL(layout, title, ICON_ERROR);
uiItemL(layout, title, ICON_NONE);
uiItemL(layout, title, NULL);
uiItemL(layout, title, ICON_QUESTION);

You would expect these items, two with icons and two without, to line up vertically properly. But they do not:

Are saying that I have to hunt down this current behavior in layout before you would accept larger icons? I have no idea why these labels are set to behave as they do. I'll certainly look and see if I can fix this, and perhaps there is some cludge, but it is not introduced by the patch.

Do we need these icons regardless of the dialog box?
Seems like it's gonna be hard to fix all these alignment problems.
And so far, it looks worse than what we have right now.


By the way, just ten lines of code and I have this dialog box.
With bonuses like: displaying buttons on the Touch Bar, bold font for the title, word-wrap for long lines...

@Yevgeny Makarov (jenkm) - By the way, just ten lines of code and I have this dialog box.

Yes, I could probably make a Windows dialog with less lines than that as well. But we're not going to use OS-supplied dialogs any time soon.

But we're not going to use OS-supplied dialogs any time soon.

I know :)

I seem to know how to align the buttons, I'll try.

@Andrzej Ambroz (jendrzych) some work for you.

The size of the icons is 64x64 (128x128 for Retina), so you need to design them to be 64. Keep svg in 64 and just export it to 128 or 256.
The size of the symbol itself is 52x52, (for my taste).

Here are some templates that you can use, and preview.

@Yevgeny Makarov (jenkm) - ...you need to design them to be 64...export it to 128 or 256..size of the symbol itself is 52x52, (for my taste).
Here are some templates that you can use, and preview.

They are currently designed in a 64x64 grid with the symbols about 52x52, and exported at 128. Almost exactly what you ask for.

Here is the copy of the exported PNG with a background added and some rules to illustrate their sizes and placement:

They should be redrawn in 64px so that when they are scaled from 128 to 64 you get clear/sharp lines.

This is the current at 64px and to the right is what I expect to see.

Updated to current state of master. Using new bold title text and breaking filename into a separate line. Changes to size and proportions.

A sample of how it looks from Windows (and with a change to Info Warning theme color) at 1X scale:

At 2X scale:

Changes to error reports so the message and filepath can be on different lines.

Following is a worse-case scenario at 1X

at 2X

Macs and Linux get a more harmonious button gap...

At 1X scale:

At 2X scale:

Various tweaks plus some miscellaneous bits and pieces stolen from @Yevgeny Makarov (jenkm). LOL

A sample, from Mac and at 2X scale:

From Windows, at 1X scale, showing extra warnings:

Checked this again. Looks good to me now.

Setting @Brecht Van Lommel (brecht) as reviewer, since he also recently reviewed many similar patches.

@Campbell Barton (campbellbarton) I hope that's ok with you - if not, feel free to say so.

Improvements to the string routines for breaking the report lines.

Harley Acheson (harley) edited the summary of this revision. (Show Details)Mar 1 2020, 10:36 PM

Updated to current state of master. Also blend function changed so no longer can create edge pixels that are darker than source and destination.

Harley Acheson (harley) edited the summary of this revision. (Show Details)Mar 2 2020, 6:19 PM
Harley Acheson (harley) edited the summary of this revision. (Show Details)

Just removing the changed blending function - I don't think it was doing anything.

@Harley Acheson (harley) you need IMB_premultiply_alpha before you IMB_scaleImBuf.

Harley Acheson (harley) edited the summary of this revision. (Show Details)Mar 9 2020, 4:49 PM

Updating to reflect current state of master (mostly because of code cleanup day). And also to premultiply the image alpha before resizing and combining with a changed blend function.

Needed to change where alpha was premultiplied so it cannot happen multiple times.

Campbell Barton (campbellbarton) added inline comments.
source/blender/editors/datafiles/CMakeLists.txt
779

*picky* prefer spaces between words.

source/blender/editors/space_image/image_ops.c
2355

No reason to format static strings, they can be left as-is.

source/blender/windowmanager/intern/wm_files.c
3112–3117

It's not clear why this is needed, comment should state what this is for (example message that needs this).

3165

Would prefer to keep the name split, as this is in keeping with Python layout code, buttons is a bit general since most UI elements are called buttons in Blender.

Harley Acheson (harley) edited the summary of this revision. (Show Details)Mar 13 2020, 5:10 PM

Updated to incorporate all the concerns and suggestions by @Campbell Barton (campbellbarton)

  • Data file names changed (alert_icons)
  • ED_image_save_all_modified_info() error string formats improved
  • Better comments explaining the need to split error strings
  • Button layout renamed back to "split"

First point requires using an updated version of the "datafiles.zip" file referenced in the main comment.

And a reminder that the "Alert" icon will look an ugly brown until the color is changed in your theme settings. Preferences / Themes / Info / "Warning Icon Background"

Accepting code with only minor suggestions.

Reminder to use clang-format (currently it's re-formatting some of these changes).

source/blender/editors/interface/interface.c
4445

Pass color as const, unless there is reason not to.

source/blender/windowmanager/intern/wm_files.c
3115

Name could be more descriptive eg, line_brief

3199

*picky* double spaces.

source/blender/editors/interface/interface.c
78–79

No need to include these headers AFAICS, the argument can be listed as struct ImBuf since it's only forwarded.

Harley Acheson (harley) edited the summary of this revision. (Show Details)Mar 14 2020, 6:32 PM

Updated to current stated of master and incorporate all the changes requested by @Campbell Barton (campbellbarton)

Using const argument for color in uiDefButImage()
Better comments and identifier for supplemental file error line

Also changing the default theme color of space_info.info_warning (currently a muddy brown) with related subversion bump and versioning change. Color picked and approved by @William Reynish (billreynish)

Updated to reflect current state of master, to incorporate changes requested by @Campbell Barton (campbellbarton), and change a theme color:

  • Passing const argument to uiDefButImage()
  • Better comments and more descriptive identifier for file error supplemental line
  • Removed accidental double space in a comment
  • No longer including two unnecessary headers

Changing the default them color for space_info.info_warning (currently a muddy brown) with related subversion bump and versioning change. Color picked and approved by @William Reynish (billreynish)

This revision was automatically updated to reflect the committed changes.