Recent

Author Topic: Adding multiple image resolutions to TImageList under V2.0RC1  (Read 3334 times)

ShrekNZ

  • Newbie
  • Posts: 2
Adding multiple image resolutions to TImageList under V2.0RC1
« on: October 24, 2018, 11:42:47 pm »
Hi,

V2.0 extends TImageLists to allow images to be stored with multiple resolutions. But how do we add multiple resolution images at design time?

One of the examples shows how to do this at runtime, but at design time, it appears that the (32px) image that I add is simply scaled to my other specified resolution (16px). If I try adding the 16px image, it simply gets added as another image, and a 32px version is created by scaling.

What am I missing?

Thanks.

Blaazen

  • Hero Member
  • *****
  • Posts: 3237
  • POKE 54296,15
    • Eye-Candy Controls
Re: Adding multiple image resolutions to TImageList under V2.0RC1
« Reply #1 on: October 25, 2018, 12:51:57 am »
Put TImageList to the Form. It has default resolution 16*16.
Open ImageList Editor and use button "New resolution ..." to add as many resolutions as you need.
Lets say you added resolutions 32, 48 and 64px.

Method 1)
Prepare your icons with following names:
icon.png - basic resolution
icon_32.png
icon_48.png
icon_64.png
Click "Add more resolutions ..." and multi-select those four files in dialog.
Now you should have icons in list.

Method 2)
Use button "Add ..." and add the largest icon only. The smaller size will be scaled and added automatically.

You can try both methods. Autosized images and images scaled by your graphic editor (GIMP, LazPaint, Inkscape) may have different quality. Just compare yourself.

EDIT:
If you are happy with autoscaling (Method 2) you can multi-select icons in "Add .." dialog and add them all at once.
If you prefer your own prepared icons (Method 1) you have to add icons step by step by "Add more resolutions ...".
« Last Edit: October 25, 2018, 01:00:36 am by Blaazen »
Lazarus 2.3.0 (rev main-2_3-2863...) FPC 3.3.1 x86_64-linux-qt Chakra, Qt 4.8.7/5.13.2, Plasma 5.17.3
Lazarus 1.8.2 r57369 FPC 3.0.4 i386-win32-win32/win64 Wine 3.21

Try Eye-Candy Controls: https://sourceforge.net/projects/eccontrols/files/

ShrekNZ

  • Newbie
  • Posts: 2
Re: Adding multiple image resolutions to TImageList under V2.0RC1
« Reply #2 on: October 25, 2018, 02:15:45 am »
Thanks for that. I had observed the behaviour you described in Method 2, but I wanted to use the icons that I have to get better images than the scaling achieves.

Of course, my icons were in two separate folders, and had the same names in each folder ... So, I've renamed one set, and put them all into one folder, and your Method 1 works fine.

I do note there is an option to "Replace all resolutions" which I would expect to be the replace equivalent of "Add more resolutions". However, the "Replace all resolutions" does not allow multi-select in the "New Image" dialog box. (I suppose I could have typed the names into the File Name edit box - but I didn't think of that at the time). So I used the Add function to add the icons at the two resolutions, deleted the old scaled images, and moved the new images to the correct index value.

Thanks.

wp

  • Hero Member
  • *****
  • Posts: 11855
Re: Adding multiple image resolutions to TImageList under V2.0RC1
« Reply #3 on: October 26, 2018, 11:06:02 am »
Thanks for that. I had observed the behaviour you described in Method 2, but I wanted to use the icons that I have to get better images than the scaling achieves.

Of course, my icons were in two separate folders, and had the same names in each folder ... So, I've renamed one set, and put them all into one folder, and your Method 1 works fine.

I do note there is an option to "Replace all resolutions" which I would expect to be the replace equivalent of "Add more resolutions". However, the "Replace all resolutions" does not allow multi-select in the "New Image" dialog box. (I suppose I could have typed the names into the File Name edit box - but I didn't think of that at the time). So I used the Add function to add the icons at the two resolutions, deleted the old scaled images, and moved the new images to the correct index value.

Thanks.
In Blaazen's method 2, of course, you are not restricted to add only the largest image, you can add the other sizes, too. In fact, you need not even add the largest image, you can add any image size. The point is that the images will always be scaled to the sizes defined by "New resolution". But down-scaling usually leads to better image quality than up-scaling.

Another nice feature is that now you can use the same image list for large and small images, as you know in the TListView. Just set SmallImagesWidth to 16 (for example) to say that the small image list will be 16x16 pixels, and set LargeImagesWidth to 32 to say that the large images will be 32x32.

And when you set Scaled=true image sizes will be scaled further according to screen resolution (above values are interpreted as those used on 96-ppi screen ("100%" in Windows terms) if the project option "LCLScaling" has been set to true.

I'm not very happy with the button captions that were selected in the image list editor, however, did not seek for better ones hard enough. Maybe you have better ideas.

geraldholdsworth

  • Full Member
  • ***
  • Posts: 195
Re: Adding multiple image resolutions to TImageList under V2.0RC1
« Reply #4 on: March 25, 2021, 05:47:19 pm »
I've just been playing with this. One thing I noticed is that (and this is using a TToolBar and adjusting the ImageWidth) is that it doesn't matter what resolutions you have defined in the TimageList, it still scales it anyway.

For example, I set it up with a single image and added three resolutions: the basic 68x68, half size 34x34 and quarter size 17x17. I could set TToolBar.ImageWidth to anything and it would still scale it. So I don't see the point of Method 2.

But, I then tried out Method 1 - now this is a different story. As you can have a different image for each resolution (i.e. not just a scaled down version of the bigger one). So for anything above 34x34 it used the 68x68 resolution. For 18x18 to 34x34 it used the 34x34 resolution, and 17x17 and under used the smallest.

wp

  • Hero Member
  • *****
  • Posts: 11855
Re: Adding multiple image resolutions to TImageList under V2.0RC1
« Reply #5 on: March 25, 2021, 06:37:55 pm »
For example, I set it up with a single image and added three resolutions: the basic 68x68, half size 34x34 and quarter size 17x17. I could set TToolBar.ImageWidth to anything and it would still scale it. So I don't see the point of Method 2.

But, I then tried out Method 1 - now this is a different story. As you can have a different image for each resolution (i.e. not just a scaled down version of the bigger one). So for anything above 34x34 it used the 68x68 resolution. For 18x18 to 34x34 it used the 34x34 resolution, and 17x17 and under used the smallest.

Downscaling a large image often leads to very good quality. So if you only want to use a single image store the largest size; if  you'd store the smallest size the quality in the large sizes would be very messy.

 

TinyPortal © 2005-2018