Lazarus

Programming => LCL => Topic started by: valter.home on October 05, 2020, 02:51:46 pm

Title: Show thumbnail images of a folder
Post by: valter.home on October 05, 2020, 02:51:46 pm

Hello everybody,
I was looking at the various components and trying TFileListBox, TShellTreeView, TShellListView.
I'm looking for a component capable of showing a thumbnail of all the images contained in a folder. The purpose is to then drag the desired images into another container to create a sprite sheet from them.
Is there anything inside Lazarus for viewing image previews or is it to manage via code?

Title: Re: Show thumbnail images of a folder
Post by: wp on October 05, 2020, 04:32:38 pm

There are thumbnail viewers in the JVCL library (install from Online-Package-Manager): JvThumbView and JvImagesViewer in the JvCustom package.

Title: Re: Show thumbnail images of a folder
Post by: valter.home on October 06, 2020, 06:12:41 pm

Thanks wp for the tip.
In the meantime I have collected several info and written the following code for those who do not want to eventually use third-party components.
It uses TShellTreeView and TShellListView.

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

1. procedure TMainForm.PreviewListImg;
2. const
3.   ImgPreviewSize = 64;
4. var
5.   Rct: TRect;
6.   i, k, ImgPreviewHalfSize: integer;
7.   ImgDraw: TBitmap;
8.   ImgLoad: TPicture;
9.   ImgPreviewList: TImageList;
10. begin
11.   ImgPreviewHalfSize := Round(ImgPreviewSize/2);
12.   ImgPreviewList := TImageList.Create(Self);
13.   ImgPreviewList.Width:=ImgPreviewSize;
14.   ImgPreviewList.Height:=ImgPreviewSize;
15.   ImgLoad := TPicture.Create;
16.   ImgDraw := TBitmap.Create;
17.   ImgDraw.SetSize(ImgPreviewSize,ImgPreviewSize);
18.   for i := 0 to ShellListView1.Items.Count - 1 do
19.   begin
20.     try
21.       ImgLoad.LoadFromFile(ShellTreeView1.Path + '\'+ShellListView1.Items[i].Caption);
22.       ImgDraw.Canvas.Clear;
23.       ImgDraw.Canvas.Brush.Color:=clNone;
24.       ImgDraw.Canvas.FillRect(0,0,ImgPreviewSize,ImgPreviewSize);
25.       if ((ImgLoad.Width <= ImgPreviewSize) and (ImgLoad.Height <= ImgPreviewSize)) then
26.       begin
27.         ImgDraw.Canvas.Draw(round(ImgPreviewHalfSize-(ImgLoad.Width/2)),
28.                             round(ImgPreviewHalfSize-(ImgLoad.Height/2)),
29.                             ImgLoad.Bitmap);
30.         ImgPreviewList.Add(ImgDraw,NIL);
31.         ShellListView1.Items[i].ImageIndex:=i;
32.       end
33.       else
34.       begin
35.         Rct.Left := 0;
36.         Rct.Top := 0;
37.         if ImgLoad.Width > ImgLoad.Height then
38.         begin
39.           Rct.Right := ImgPreviewSize;
40.           Rct.Bottom := (ImgPreviewSize * ImgLoad.Height) div ImgLoad.Width;
41.           k := round((ImgPreviewSize - Rct.bottom) /2);
42.           Rct.Top:=k;
43.           Rct.Bottom:=Rct.Bottom+k;
44.           ImgDraw.Canvas.StretchDraw(Rct, ImgLoad.Graphic);
45.         end
46.         else if ImgLoad.Height > ImgLoad.Width then
47.         begin
48.           Rct.Bottom := ImgPreviewSize;
49.           Rct.Right := (ImgPreviewSize * ImgLoad.Width) div ImgLoad.Height;
50.           k := round((ImgPreviewSize - Rct.Right) / 2);
51.           Rct.Left:=k;
52.           Rct.Right:=Rct.Right+k;
53.           ImgDraw.Canvas.StretchDraw(Rct, ImgLoad.Graphic);
54.         end
55.         else
56.           ImgDraw.Canvas.StretchDraw(Rect(0,
57.                                           0,
58.                                           ImgPreviewSize,
59.                                           ImgPreviewSize),
60.                                           ImgLoad.Graphic);
61.         ImgPreviewList.Add(ImgDraw,NIL);
62.         ShellListView1.Items[i].ImageIndex:=i;
63.       end;
64.     except
65.       // what you want
66.     end;
67.   end;
68.   ShellListView1.LargeImages := ImgPreviewList;
69. end;
70.  

If the images are smaller than the ImgPreviewSize constant they are centered but left with their original size, if they are larger they are resized and centered.
Obviously the code needs to be optimized but it can be used as a starting point.

Anyone who likes to improve it is welcome.

I am attaching an image showing the current result.

Title: Re: Show thumbnail images of a folder
Post by: valter.home on October 06, 2020, 06:36:56 pm

I notice now from the screenshot that the background of the previews is not transparent so the following lines of code fail:

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

1.       ImgDraw.Canvas.Brush.Color:=clNone;
2.       ImgDraw.Canvas.FillRect(0,0,ImgPreviewSize,ImgPreviewSize);
3.  

Actually the background is black by default, does anyone have any suggestions to make the preview images transparent?