Recent

Author Topic: [Solved] Images on MainMenu with hi-res monitors  (Read 7543 times)

bobonwhidbey

  • Hero Member
  • *****
  • Posts: 586
    • Double Dummy Solver - free download
[Solved] Images on MainMenu with hi-res monitors
« on: December 01, 2021, 10:47:18 pm »
For each menu item I'm using an ImageList with 16x16 JPGs. This shows up appropriately sized on 96 PPI monitors but the images are far too small on a hi-res monitor. See attached. I'd guess that my little 16x16 images will look very fuzzy when pumped up to an appropriate size, but I'd rather that than the wimpy little pictures now being shown.

Is this somehow handled with the Scaled property of the TMainMenu? Is there a way to have appropriately sized images?
« Last Edit: December 02, 2021, 10:40:25 pm by bobonwhidbey »
Lazarus 3.0RC2, FPC 3.2.2 x86_64-win64-win32/win64

wp

  • Hero Member
  • *****
  • Posts: 11830
Re: Images on MainMenu with hi-res monitors
« Reply #1 on: December 01, 2021, 11:24:31 pm »
Yes, ImageList.Scaled is one ingredient. The other one is that you must define which image sizes will be in the image list. So, when you need 16x16 images at 96ppi, you'll need 24x24 at 144 ppi (150%) and 32x32 at 192 ppi (200%). Before you add the first image click "New resolution" in the imagelist editor, enter 24. Then repeat with 32 etc if you need more. Ideally every image should be available in these sizes - look at the lazarus/images folder as an example. If you don't have all sizes the missing sizes will be extrapolated. But it should be noted that image quality is better when the smaller images are calculated from the larger ones. So practically you get good quality when you only add the 32x32 images to the image list.

bobonwhidbey

  • Hero Member
  • *****
  • Posts: 586
    • Double Dummy Solver - free download
Re: Images on MainMenu with hi-res monitors
« Reply #2 on: December 02, 2021, 06:24:02 pm »
Thank you WP for a great answer. For my ImageList I set Scaled to true and only used 32 x 32 JPGs or PNGs. The size is now reasonable. I anticipated some fuzziness as the 32 x 32 was shrunk to 16 x 16 on my monitor - but the icons still look fine. However, they are extremely fuzzy as you can see in the attached on my user's hi rez monitor.
« Last Edit: December 02, 2021, 06:26:47 pm by bobonwhidbey »
Lazarus 3.0RC2, FPC 3.2.2 x86_64-win64-win32/win64

wp

  • Hero Member
  • *****
  • Posts: 11830
Re: Images on MainMenu with hi-res monitors
« Reply #3 on: December 02, 2021, 06:31:06 pm »
What's the pixel densitiy of that user's monitor?

bobonwhidbey

  • Hero Member
  • *****
  • Posts: 586
    • Double Dummy Solver - free download
Re: Images on MainMenu with hi-res monitors
« Reply #4 on: December 02, 2021, 06:43:25 pm »
He told me it is 338.67  so it must be close to that.  Maybe 336 ?
Lazarus 3.0RC2, FPC 3.2.2 x86_64-win64-win32/win64

wp

  • Hero Member
  • *****
  • Posts: 11830
Re: Images on MainMenu with hi-res monitors
« Reply #5 on: December 02, 2021, 07:36:35 pm »
This is 350%. This would correspond to an image size of 56x56. Such images are hard to find...

Two ideas: Maybe you are lucky to find 64x64 images. In this case you could add this size to the imagelist, too. You could drop the 32x32 images, but maybe add 16x16 if scaledown by such a large factor would result in a quality loss. With the 64x64 size, the images in your user's toolbar will probably be a bit too large. Test it. Or you could add also the resolution 56 to the image list and let it do the work to scale the 64x64 down to 56x56.

IIRC, all these intermediate images are stored in the lfm file and this will increase the size of the binary...

Alternatively you could search the forum for the "svg imagelist" implemented by the BGRA team. IIRC, this kind of image list accepts vector images and calculates the size needed upon request. Requires some rework of your project, though...

bobonwhidbey

  • Hero Member
  • *****
  • Posts: 586
    • Double Dummy Solver - free download
Re: Images on MainMenu with hi-res monitors
« Reply #6 on: December 02, 2021, 08:13:12 pm »
If I have 2 resolutions in my imagelist, 16 and 64, will Lazarus figure out the best image to use when someone has 120 PPI? How will it choose?
Lazarus 3.0RC2, FPC 3.2.2 x86_64-win64-win32/win64

wp

  • Hero Member
  • *****
  • Posts: 11830
Re: Images on MainMenu with hi-res monitors
« Reply #7 on: December 02, 2021, 09:04:47 pm »
I am not sure. I had always thought that it only selects the next predefined image size for the current resolution. But now I did an experiment with sizes 16 and 64 only, and it seemed to me that the images are always scaled correctly. However, I can only test up to 150%. And I have Win11 now, maybe this makes a difference - I don't know...

If intermediate resolutions are not handled correctly you should add them to the image list as well (16, 20, 24, 32, 48, 64). As I wrote it is enough to add only 64x64 images, and maybe 16x16.
« Last Edit: December 03, 2021, 12:53:11 am by wp »

bobonwhidbey

  • Hero Member
  • *****
  • Posts: 586
    • Double Dummy Solver - free download
Re: Images on MainMenu with hi-res monitors
« Reply #8 on: December 02, 2021, 10:40:06 pm »
I'll go with just 16 and 64. Thanks for all your help.
Lazarus 3.0RC2, FPC 3.2.2 x86_64-win64-win32/win64

bobonwhidbey

  • Hero Member
  • *****
  • Posts: 586
    • Double Dummy Solver - free download
Re: [Solved] Images on MainMenu with hi-res monitors
« Reply #9 on: December 03, 2021, 06:54:57 pm »
I've added two resolutions for each menu item: 16 x 16 and also 56 x 56. They just don't look good at all. There must be a way to get them clearer. These three pictures should tell the story. On the ImageList Editor, I would:
  • Click "Add more resolutions"
  • Select the lo and hi res pictures
It seems to me that Lazarus is stretching the pixels in the lo res picture to the desired size on my users hi-res monitor.
Lazarus 3.0RC2, FPC 3.2.2 x86_64-win64-win32/win64

 

TinyPortal © 2005-2018