Icon sizes

thyresias · August 19, 2022, 12:19pm

I had a classical issue: difference of size between small windows icons (16x16) and Opus small icons (22x22). Here is how my File menu was looking like, for instance:

I found this post:

I downloaded the file, even though I have a 4K monitor and the post talks about standard DPI.
It worked:
file menu small

Aside:

The file lacks an icon: <icon row="9" col="24" name="releasenotes"/>
The icons are a bit smaller than standard windows icons. I realized this is because the standard Opus icons generally do not use the full space, except the spacer. Any reason for that?

There was however an unexpected consequence:

These 4 icons were too small, I preferred them as they are by default:

To achieve that, I just changed the names of these 4 icons in the file: goback_small, goforward_small, goup_small, favorites_small. It works, and I have now what I want (small icons in menus, larger ones in the tab bar).

But there was a funny consequence:

Logical, but if I checked "Preview Large icon size", the 4 icons were the ones without the _small suffix. I thought I could make them appear in this mode as well by adding this to the file:

  <set filename=":INTERNAL:#DEFAULT_ICONS_FLAT_32.png" size="large" width="32" height="32">
    <dpi base="100">
      <scale factor="100" filename=":INTERNAL:#DEFAULT_ICONS_FLAT_32.PNG" width="32" height="32" no_scale_min="0" no_scale_max="125"/>
      <scale factor="150" filename=":INTERNAL:#DEFAULT_ICONS_FLAT_48.PNG" width="48" height="48" no_scale_min="126" no_scale_max="175"/>
      <scale factor="200" filename=":INTERNAL:#DEFAULT_ICONS_FLAT_64.PNG" width="64" height="64"/>
    </dpi>
    <icon row="2" col="20" name="goback_small"/>
    <icon row="2" col="21" name="goforward_small"/>
    <icon row="2" col="22" name="goup_small"/>
    <icon row="2" col="32" name="favorites_small"/>
  </set>

And indeed it works, although they appear first, not last:

I have several questions:

Is what I did something reliable, or am I using a mouse hole that may disappear in the future?
Why am I having the initial issue, when I have a 4K monitor: because my scale factor is not 200%? (It is 140%).
What is the logic when handling DPI? What is done by Opus, what is done by Windows? I figured out that base=200 + factor=137 was chosen because 32 / 200 x 137 = 21.92, the closest to 22, but what does it have to do with the 16x16 windows standard, that the windows explorer renders on my 4K screen by reducing the 32-pixel icons to... 22 physical pixels, in agreement with my scale factor of 140% (16 x 1.4 = 22.4). So theoritically, the default 22-pixel icons of Opus would be perfect if not resized... I must say I'm fairly lost here.

Leo · August 19, 2022, 12:49pm

That icon set was made for 4K / 200% scaling.

The post only talks about standard DPI to say that the icons won't look as good in standard DPI, since the source bitmaps are 32x32 and in standard DPI they will be scaled down to 16x16.

The icon-set's size is 16x16 multiplied by the DPI scaling factor, which is the exact size of Windows small icons.

(Technically, it is 32x32 multiplied by the scaling factor divided by 2. Same result.)

Most icons, including the standard Windows ones, don't use the full space. This is to avoid all the icons touching each other if there isn't any other gap between rows.

They almost never go right to the edge of the frame, except for the really small 16x16 icons, and even then only sometimes.

This is one of the Windows icons, and only the 16x16 version touches the frame, and only at the top/bottom:

Untitled Project

The icon set isn't intended for use on toolbars. You can apply it to them if you really want to, but it's not recommended. The icons are too small for that.

I would undo that. It isn't needed, and it's going to make the icon set inconsistent with itself, resulting in things like your "funny consequence" where some icons are larger than others.

It sounds like you moved the icon-set to the top of the list in Preferences, which would make it override the others and be used on any toolbar that doesn't specify an explicit set. You don't want to do that. It'll affect lots of other things as well, like the icons used in some dialogs.

Instead, keep it at the bottom of the list in Preferences. For the menu items you want to use smaller icons, edit them so they explicitly specify the smaller icon-set, using the drop-down near the top of the icon chooser. This would usually only be done to a handful of items in context menus; things that would appear next to icons from Windows or other software. The other icons in toolbars/menus can be left as they are.

The icon set is designed for 200% scaling. At something less, the base 32x32 images will be scaled down to match your scaling factor, which won't look as good as having native icons (but should look reasonably OK).

Icon sets can contain various image sizes. The XML specifies rules for how they are selected and, if needed, resized for different DPIs. It's documented in the manual here: https://www.gpsoft.com.au/help/opus12/index.html#!Documents/Icon%20Sets/Icon_Sets.htm

You could make a similar XML-only icon-set which specifies the 22x22 icons be used as-is for 140% scaling.

BTW, 140% is an unusual scale factor and very few things will be optimized for it, since the main Windows UI for selecting DPI goes up in 50% increments:

thyresias · August 19, 2022, 5:42pm

Thank you for the detailed explanations, but there is something I do not understand: on the first of my screenshots, it is clear that Opus icons are larger than Windows icons. I wanted to make all Opus icons the same size as Windows icons, so moving the small set to the top seemed the way to go. It seems to me that having all icons of the same size in the UI, irrespective of where they come from, is a natural expectation? The only exceptions would be the 4 icons in the tab bar.

I do not quite understand how the XML declarations work.

Here is the default XML:

<set filename="#DEFAULT_ICONS_FLAT_22.png" size="small" width="22" height="22">
  <dpi base="100">
    <scale factor="100" filename="#DEFAULT_ICONS_FLAT_22.PNG" width="22" height="22" no_scale_min="0" no_scale_max="125"/>
    <scale factor="150" filename="#DEFAULT_ICONS_FLAT_32.PNG" width="32" height="32" no_scale_min="126" no_scale_max="175"/>
    <scale factor="200" filename="#DEFAULT_ICONS_FLAT_48.PNG" width="48" height="48"/>
    <scale factor="300" filename="#DEFAULT_ICONS_FLAT_64.PNG" width="64" height="64"/>
  </dpi>

<set filename="#DEFAULT_ICONS_FLAT_32.png" size="large" width="32" height="32">
  <dpi base="100">
    <scale factor="100" filename="#DEFAULT_ICONS_FLAT_32.PNG" width="32" height="32" no_scale_min="0" no_scale_max="125"/>
    <scale factor="150" filename="#DEFAULT_ICONS_FLAT_48.PNG" width="48" height="48" no_scale_min="126" no_scale_max="175"/>
    <scale factor="200" filename="#DEFAULT_ICONS_FLAT_64.PNG" width="64" height="64"/>
  </dpi>

Here is the "small" one:

<set filename=":INTERNAL:#DEFAULT_ICONS_FLAT_32.png" size="small" width="32" height="32">
  <dpi base="200">
    <scale factor="137" filename=":INTERNAL:#DEFAULT_ICONS_FLAT_22.PNG" width="22" height="22"/>
    <scale factor="200" filename=":INTERNAL:#DEFAULT_ICONS_FLAT_32.PNG" width="32" height="32"/>
    <scale factor="300" filename=":INTERNAL:#DEFAULT_ICONS_FLAT_48.PNG" width="48" height="48"/>
    <scale factor="400" filename=":INTERNAL:#DEFAULT_ICONS_FLAT_64.PNG" width="64" height="64"/>
  </dpi>

What is the relationship between "base", "factor" and the icon sizes (22, 32, 48, 64)?
The standard small set has:

set icon size=22, base=100
factor=100, icon size=22
factor=150, icon size=32
I first thought it meant "if the scaling factor is 100%, use the 22px icons as small; if the scaling factor is 150, use the 32px icons as small". But in that case, the icons would be what size with a 125% scaling factor, taken from where? 22px icons enlarged 221.25 = 27.5px? Or 32px icons shrinked 32/1.51.25 = 26.67px? And why does this result in different icon sizes from Opus and from Windows?

The "small" small set has:

set icon size=32, base=200
factor=137, icon size=22
factor=200, icon size=32
This does not match what I first understood above: it cannot mean "if the scaling factor is 137%, use the 22px icons enlarged by 137%", rather "if the scaling factor is 137, use the 32px icons scaled down 32/200*137 = 21.92px". In that case, when would the 32px icons be used with an actual size of 32px?

Sorry to have difficulties understanding all this, I'm really lost...

Leo · August 19, 2022, 6:57pm

You can do that if you really want to, but it’s going to make the toolbar icons awfully small.

And you already found a place where you don’t actually want that, on the file display toolbar.

It should all be described in the manual. I linked to the section earlier.

thyresias · August 20, 2022, 9:01am

Ok, for the icon size, it's a matter of taste, I guess.

I had read it before posting. It says for base "specifies the base scale factor of the image", and for factor "specifies the scale factor of this alternate image". English is not my mother tongue, so maybe I do not completely understand it, but here is the kind of questions I have, and if the answer is in the documentation, please point me to it:

since we specify each time the icon sizes (22/32/48/64), the scale factor from one size to the other is given by the sizes: e.g. from 22 to 48, there is a scale factor of 218%.
so if we also specify the base/factor, they must play another role than giving the ratio of icons sizes: is it linked to the Windows scale factor declared by the user? And how does it interact with the ratio of icon sizes?

I feel you're a little upset: if so please accept my apologies, I'm just trying to understand.

Leo · August 20, 2022, 9:18am

The base value on the 2nd line defines the DPI of the main image (the one on the first line):

<set filename="MyIcons_32.PNG" size="large" width="32" height="32">
    <dpi base="100" />
    ...
</set>

Sometimes that's all there is, and those images will be scaled to other DPIs relative to that amount.

(If no base is defined at all, it's assumed to be 100% scaling.)

The width and height values are always the real pixel sizes of the images within the bitmaps. (Without that, Opus won't know how to divide up the grid of images.)

Icon sets that want to handle other DPIs better can optionally include more sizes and more complex scaling rules under the <dpi> tag:

<set filename="MyIcons_32.PNG" size="large" width="32" height="32">
    <dpi base="100">
       <scale factor="100" filename="MyIcons_32.PNG" width="32" height="32" no_scale_min="0" no_scale_max="125" />
       <scale factor="150" filename="MyIcons_48.PNG" width="48" height="48" no_scale_min="126" no_scale_max="175" />
       <scale factor="200" filename="MyIcons_64.PNG" width="64" height="64" />
    </dpi>
    ...
</set>

The factor tag specifies the DPI scaling each image is intended for.

In this case, the XML is saying MyIcons_32.PNG is for 100% scaling in two places, which is redundant, but the 2nd place is adding extra (optional) information.

Opus will find the best match and, if needed, scale that up or down (unless told not to for a given DPI range, via the optional no_scale_min and no_scale_max values; sometimes it's better to use images as-is without scaling than to scale them just to get a very slightly larger or smaller image; especially true with small images that won't scale well).

thyresias · August 20, 2022, 3:06pm

Thank you. To check I understood correctly: in your (2nd) example, if a screen has a Windows scaling factor 100%, the large icons will be the 32px ones, without scaling. They will be used "as is" up to 125% scaling factor (no_scale_max="125"), but from 126 to 175, it is the 48px ones that will be used, still unscaled. And for a Windows scaling factor of 400% (visually impaired person), the 64px ones would be used, scaled up to 128px. Correct?

Leo · August 20, 2022, 3:51pm

Yep, I think that's right.

thyresias · August 20, 2022, 4:36pm

I feel less stupid.
Thank you very much!