* * *

Author Topic: Adding multiple image resolutions to TImageList under V2.0RC1  (Read 376 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.

jamie

  • Hero Member
  • *****
  • Posts: 908
Re: Adding multiple image resolutions to TImageList under V2.0RC1
« Reply #1 on: October 25, 2018, 12:28:16 am »
I wasn't aware they made changes to do this but, It used to be a problem where as adding oversized images would not compress
them to the format size set in the control? Maybe that is what is really happening, it is shrinking the oversized images to fit fully
the set X,Y size which would make perfect sense.

 I think it would be a nightmare to try to manage it without formatted memory segmentation.
« Last Edit: October 25, 2018, 12:30:46 am by jamie »

Blaazen

  • Hero Member
  • *****
  • Posts: 2654
  • POKE 54296,15
    • Eye-Candy Controls
Re: Adding multiple image resolutions to TImageList under V2.0RC1
« Reply #2 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.1.0 r59474M FPC 3.3.1 r40247 x86_64-linux-qt Chakra, Qt 4.8.7/5.11.2, Plasma 5.14.2
Lazarus 1.8.2 r57369 FPC 3.0.4 i386-win32-win32/win64 Wine 3.14

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 #3 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: 5034
Re: Adding multiple image resolutions to TImageList under V2.0RC1
« Reply #4 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.
Lazarus trunk / fpc 3.0.4 / all 32-bit on Win-10

 

Recent

Get Lazarus at SourceForge.net. Fast, secure and Free Open Source software downloads Open Hub project report for Lazarus