[SOLVED] SVG thumbnails lazarus / 39-Graphics ---------------------------------------------------------------------- Pe3s · 2023-12-05 18:54 Hello forumers, there is a component that has the ability to display thumbnails of .svg files in the specified folder ? ---------------------------------------------------------------------- domasz · 2023-12-05 21:22 Code: Pascal  [Select][+][-]window.onload = function(){var x1 = document.getElementById("main_content_section"); if (x1) { var x = document.getElementsByClassName("geshi");for (var i = 0; i uses BGRABitmap, BGRASVG; ...Bgra := TBgraBitmap.Create('file.svg');Bgra2 := Bgra.Resample(200,200); In order to list files in a directory- FindFirst, FindNext ---------------------------------------------------------------------- Pe3s · 2023-12-06 08:19 I meant to create a grid of thumbnails based on the path. ---------------------------------------------------------------------- domasz · 2023-12-06 10:18 Prepare thumbnails using the code I posted earlier and display them in TDrawGrid. ---------------------------------------------------------------------- circular · 2023-12-07 10:50 Hi @Pe3s, That's a great question. There isn't component that display all SVGs in a directory. Though, it is simple to generate a thumbnail from a file and use it in an existing component like a TDrawGrid or a TListView. To make a thumbnail, there is a dedicated function in BGRAThumbnail unit: Code: Pascal  [Select][+][-]window.onload = function(){var x1 = document.getElementById("main_content_section"); if (x1) { var x = document.getElementsByClassName("geshi");for (var i = 0; i uses BGRABitmap, BGRAThumbnail; bgra := GetFileThumbnail('file.svg', 200, 200, BGRAWhite, true);  Regards ---------------------------------------------------------------------- Pe3s · 2023-12-07 16:20 Thank you ---------------------------------------------------------------------- Pe3s · 2023-12-10 19:22 I would like to ask for help. I have never drawn anything in TListView, how can I draw thumbnails in ListView Code: Pascal  [Select][+][-]window.onload = function(){var x1 = document.getElementById("main_content_section"); if (x1) { var x = document.getElementsByClassName("geshi");for (var i = 0; i uses BGRABitmap, BGRAThumbnail;bgra := GetFileThumbnail('file.svg', 200, 200, BGRAWhite, true); ---------------------------------------------------------------------- circular · 2023-12-10 22:46 This is not obvious to do. However, this can be done in a few steps. TListView will display icons that are stored in its LargeImages and SmallImages property. The two lists are used for different values of ViewStyle. If you're going to use big icons, then you just need LargeImages. So add an ImageList to your form. Set its Width and Height to the size of the thumbnails. Using the object inspector of the ListView, select the ImageList in the LargeImages property. Set the ViewStyle to vsIcon. To add an element to the ListView, there are two steps: - after you load the thumbnail, add it using to the ImageList using the Add function. You can specify nil for the Mask parameter. The function will return an index for the image. - add an item to the ListView, for example with Items.Add. Assign the image via the ImageIndex property of the item. If you have any more question, feel free to ask for specific points. Regards ---------------------------------------------------------------------- Pe3s · 2023-12-11 12:31 Is it possible to do this with ListBox and OwnerDraw without using ImageList? ---------------------------------------------------------------------- domasz · 2023-12-11 14:31 You can use this with ListBox. You can use it without ImageList but it needs to store the thumbnails somewhere. It can be an array of TBitmap or array of TMemoryStream or an array of array of Byte and so on. You can't generate thumbnails on the fly and display them because for every redrew it would need to again load an SVG file, generate thumbnail and show it- and that would just take too much time. ---------------------------------------------------------------------- domasz · 2023-12-11 15:20 Here's a demo with TListBox ---------------------------------------------------------------------- Pe3s · 2023-12-11 18:06 Thank you for your help ---------------------------------------------------------------------- alaa123456789 · 2023-12-12 17:45 Quote from: domasz on December 11, 2023, 04:20:23 pmHere's a demo with TListBox thanks for the example,what the reason that the right side of the listitem become black when we scrolldown regards ---------------------------------------------------------------------- domasz · 2023-12-13 03:07 You can paint the whole area before drawing: Code: Pascal  [Select][+][-]window.onload = function(){var x1 = document.getElementById("main_content_section"); if (x1) { var x = document.getElementsByClassName("geshi");for (var i = 0; i procedure TForm1.ListBox1DrawItem(Control: TWinControl; Index: Integer;  ARect: TRect; State: TOwnerDrawState);var bgra: TBGRABitmap;begin  bgra := ListBox1.Items.Objects[Index] as TBGRABitmap;   ListBox1.Canvas.Brush.Color := clWhite;  ListBox1.Canvas.Brush.Style:= bsSolid;  ListBox1.Canvas.FillRect(ARect);   bgra.Draw(ListBox1.Canvas, ARect.Left, ARect.Top);   ListBox1.Canvas.TextOut(ARect.Left, ARect.Top, ListBox1.Items[Index]);end; ---------------------------------------------------------------------- Pe3s · 2023-12-16 12:44 Hello, I have one more question - is it possible to make the selection also select the background under the thumbnail? Code: Pascal  [Select][+][-]window.onload = function(){var x1 = document.getElementById("main_content_section"); if (x1) { var x = document.getElementsByClassName("geshi");for (var i = 0; i procedure TForm1.ListBox1DrawItem(Control: TWinControl; Index: Integer; ARect: TRect; State: TOwnerDrawState);var bgra: TBGRABitmap;begin  bgra := ListBox1.Items.Objects[Index] as TBGRABitmap;  if odSelected in State then  begin    ListBox1.Canvas.Brush.Color:= clRed;  end;  ListBox1.Canvas.FillRect(ARect);  bgra.Draw(ListBox1.Canvas, ARect.Left, ARect.Top);  ListBox1.Canvas.TextOut(ARect.Left + 120, ARect.Top + 44, ListBox1.Items[Index]);end; ---------------------------------------------------------------------- domasz · 2023-12-16 12:58 Quote from: Pe3s on December 16, 2023, 01:44:25 pmHello, I have one more question - is it possible to make the selection also select the background under the thumbnail? Code: Pascal  [Select][+][-]window.onload = function(){var x1 = document.getElementById("main_content_section"); if (x1) { var x = document.getElementsByClassName("geshi");for (var i = 0; i bgra := GetFileThumbnail('thumb/' + sr.name, 100, 100, $000000FF, false); ---------------------------------------------------------------------- Pe3s · 2023-12-16 16:22 @domasz, Thank you ---------------------------------------------------------------------- domasz · 2023-12-16 18:18 @Pe3s No problem. Keep going