Forms editor scaling changes across platforms

[VTwin]

I wanted to note that I have now had considerable success compiling on Win 7 at 96 dpi, and then running the executable on Win 7 144 dpi without recompiling.

I was having trouble with PaintBoxes that were not resizing correctly. The PaintBoxes are used as a control to select colors, symbols, etc. As wp pointed out, the PaintBox in my demo worked fine. I had been initializing them in FormCreate, and after the discussion here, I realized that they needed to be initialized in FormShow.

I am now optimistic that my software can run well on different DPI machines. The last chore will be to modify bitmaps I use for toolbars and menus, which were created to work at 96 dpi.

Thanks!

[wp]

The last chore will be to modify bitmaps I use for toolbars and menus, which were created to work at 96 dpi.

The new imagelist of Laz 1.8+ supports images at several resolutions. When you set ImageList.Scaled to true the size needed for the current PixelsPerInch is selected or interpolated.

I once wrote the following instructions for using the dpi-aware imagelist:

• Activate the settings for a high-dpi project (LCLScaling on, dpi-aware manifest)
• Set ImageList.Scaled to true
• The image size set up by Width and Height are taken as initial size for 96 ppi. Starting with large images (64x64, or 32x32) means that missing smaller images will be down-scaled which has good quality. Starting with small images (16x16) will create missing images by upscaling which results in poorer quality. Usually it is sufficient to provide only the largest images.
• In the imagelist editor do this:
• Click "New resolution" and enter the resolutions for which additional images are needed. Image sizes usually needed are 16x16, 24x24 abd 32x32 on 96ppi, 144ppi and 192ppi monitors for Listview's smallImages and menu and usually toolbar. In case of Listview's LargeImages, additionally 48x48 and 64x64 are needed. Only the width needs to be entered
• Add new images by clicking "Add" or "Add more resolutions" -- it will load the image(s) and calculate the missing sizes. The difference is in the effect when several images are selected in the file dialog: "Add" creates separate items for each selected image at all resolutions. "Add more resolutions" adds a single image and assumes that the selected images show the same picture but at different resolutions.
• If the same image is available at other resolutions click "Replace all resolutions" for each size - this will replace the calculated image by the "real" one. As already noted not necessarily needed.
• "Replace" replaces only the reference size image (the size specified in the Width and Height of the imagelist).
• "Delete" removes the versions of the selected image, "Clear" removes all images if you want to start all over. Note that this will erase the added resolutions as well.

[VTwin]

Excellent! That will greatly assist with the task.

[VTwin]

The imagelist editor is working very well for me. Although the automatic rescaling works well, I prefer the option to include multiple resolutions, so have been doing that.

Question 1. Does Lazarus always scale an icon down from the next higher resolution? That is, if I had 32 and 48 pixel icons, and needed 36, it would scale from 48->36, and not 32->36.

Question 2. On Windows, it looks as if dpi scaling options (in some cases) include 100%, 125%, 150%, 175%, and 200%. If I include only, for example, 16 (for 100%), 24, and 32 pixel icons, what happens at the 125% and 175% dpi options?

[wp]

The imagelist editor is working very well for me. Although the automatic rescaling works well, I prefer the option to include multiple resolutions, so have been doing that.

Question 1. Does Lazarus always scale an icon down from the next higher resolution? That is, if I had 32 and 48 pixel icons, and needed 36, it would scale from 48->36, and not 32->36.

The source code tells that it takes the next higher resolution:

Code: Pascal  [Select][+][-]

1. function TCustomImageListResolutions.FindBestToCopyFrom(const ATargetWidth,
2.   AIgnoreIndex: Integer): Integer;
3. begin
4.   for Result := 0 to Count-1 do // find the smallest (but bigger) image
5.     if (Result<>AIgnoreIndex) and (Items[Result].Width>=ATargetWidth) then
6.       Exit;
7.  
8.   Result := Count-1; // just pickup the biggest image to scale up
9.   if Result=AIgnoreIndex then
10.     Dec(Result);
11. end;  

Question 2. On Windows, it looks as if dpi scaling options (in some cases) include 100%, 125%, 150%, 175%, and 200%. If I include only, for example, 16 (for 100%), 24, and 32 pixel icons, what happens at the 125% and 175% dpi options?

The IDE only seems to take care of 100%, 150%, 200% automatically. The mapping rule is in TCustomImageList.GetWidthForPPI:

Code: Pascal  [Select][+][-]

1. function TCustomImageList.GetWidthForPPI(AImageWidth,
2.   APPI: Integer): Integer;
3. var
4.   Factor: Integer;
5.   idx: Integer;
6. begin
7.   if AImageWidth<=0 then
8.     AImageWidth := FWidth;
9.  
10.   if not FScaled then
11.     Result := AImageWidth
12.   else begin
13.     Result := round(AImageWidth * APPI / 96);
14.     if not FData.Find(Result, idx) then begin
15.       if APPI <= 120 then
16.         Factor := 100 // 100-125% (96-120 DPI): no scaling
17.       else
18.       if APPI <= 168 then
19.         Factor := 150 // 126%-175% (144-168 DPI): 150% scaling
20.       else
21.         Factor := Round(APPI/96) * 100; // 200, 300, 400, ...
22.       Result := AImageWidth * Factor div 100;
23.     end;
24.   end;
25.  
26.   if Assigned(FOnGetWidthForPPI) then
27.     FOnGetWidthForPPI(Self, AImageWidth, APPI, Result);
28. end;

This means that 120ppi (125%) are handled as unscaled, and 168ppi (175%) as 150%. The last line, however, shows that you can implement your own rule in the TCustomImageList.OnGetWidthForPPI event, e.g:

Code: Pascal  [Select][+][-]

1. procedure TForm1.ImageList1GetWidthForPPI(Sender: TCustomImageList;
2.   AImageWidth, APPI: Integer; var AResultWidth: Integer);
3. begin
4.   if (APPI >=115) and (APPI <= 125) then AResultWidth := 24;
5. end;

It is not necessary to provide images for these intermediate resolutions. Of course, for ultimate quality, correctly scaled images are preferable.

[VTwin]

Thank you wp. I should have poked around more in the code myself. I appreciate your detailed answer.

That seems like a good way to handle the sizing, and is good news. I was concerned about having to prepare for all dpis that Microsoft (or others) might throw at me. I will stick with 100%, 150%, and 200%, and know that Lazarus will pick the best one.