Recent

Author Topic: [SOLVED] SVG thumbnails  (Read 3540 times)

Pe3s

  • Hero Member
  • *****
  • Posts: 573
[SOLVED] SVG thumbnails
« on: December 05, 2023, 07:54:09 pm »
Hello forumers, there is a component that has the ability to display thumbnails of .svg files in the specified folder ?
« Last Edit: December 11, 2023, 07:06:57 pm by Pe3s »

domasz

  • Hero Member
  • *****
  • Posts: 553
Re: SVG thumbnails
« Reply #1 on: December 05, 2023, 10:22:28 pm »
Code: Pascal  [Select][+][-]
  1. uses BGRABitmap, BGRASVG;
  2.  
  3. ...
  4. Bgra := TBgraBitmap.Create('file.svg');
  5. Bgra2 := Bgra.Resample(200,200);

In order to list files in a directory- FindFirst, FindNext

Pe3s

  • Hero Member
  • *****
  • Posts: 573
Re: SVG thumbnails
« Reply #2 on: December 06, 2023, 09:19:33 am »
I meant to create a grid of thumbnails based on the path.

domasz

  • Hero Member
  • *****
  • Posts: 553
Re: SVG thumbnails
« Reply #3 on: December 06, 2023, 11:18:31 am »
Prepare thumbnails using the code I posted earlier and display them in TDrawGrid.

circular

  • Hero Member
  • *****
  • Posts: 4356
    • Personal webpage
Re: SVG thumbnails
« Reply #4 on: December 07, 2023, 11:50:51 am »
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][+][-]
  1. uses BGRABitmap, BGRAThumbnail;
  2.  
  3. bgra := GetFileThumbnail('file.svg', 200, 200, BGRAWhite, true);
  4.  

Regards
Conscience is the debugger of the mind

Pe3s

  • Hero Member
  • *****
  • Posts: 573
Re: SVG thumbnails
« Reply #5 on: December 07, 2023, 05:20:16 pm »
Thank you :)

Pe3s

  • Hero Member
  • *****
  • Posts: 573
Re: SVG thumbnails
« Reply #6 on: December 10, 2023, 08:22:24 pm »
I would like to ask for help. I have never drawn anything in TListView, how can I draw thumbnails in ListView

Code: Pascal  [Select][+][-]
  1. uses BGRABitmap, BGRAThumbnail;
  2. bgra := GetFileThumbnail('file.svg', 200, 200, BGRAWhite, true);

circular

  • Hero Member
  • *****
  • Posts: 4356
    • Personal webpage
Re: SVG thumbnails
« Reply #7 on: December 10, 2023, 11:46:54 pm »
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
Conscience is the debugger of the mind

Pe3s

  • Hero Member
  • *****
  • Posts: 573
Re: SVG thumbnails
« Reply #8 on: December 11, 2023, 01:31:10 pm »
Is it possible to do this with ListBox and OwnerDraw without using ImageList?

domasz

  • Hero Member
  • *****
  • Posts: 553
Re: SVG thumbnails
« Reply #9 on: December 11, 2023, 03:31:52 pm »
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

  • Hero Member
  • *****
  • Posts: 553
Re: SVG thumbnails
« Reply #10 on: December 11, 2023, 04:20:23 pm »
Here's a demo with TListBox

Pe3s

  • Hero Member
  • *****
  • Posts: 573
Re: SVG thumbnails
« Reply #11 on: December 11, 2023, 07:06:40 pm »
Thank you for your help :)

alaa123456789

  • Sr. Member
  • ****
  • Posts: 261
  • Try your Best to learn & help others
    • youtube:
Re: SVG thumbnails
« Reply #12 on: December 12, 2023, 06:45:37 pm »
Here'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

  • Hero Member
  • *****
  • Posts: 553
Re: [SOLVED] SVG thumbnails
« Reply #13 on: December 13, 2023, 04:07:31 am »
You can paint the whole area before drawing:

Code: Pascal  [Select][+][-]
  1. procedure TForm1.ListBox1DrawItem(Control: TWinControl; Index: Integer;
  2.   ARect: TRect; State: TOwnerDrawState);
  3. var bgra: TBGRABitmap;
  4. begin
  5.   bgra := ListBox1.Items.Objects[Index] as TBGRABitmap;
  6.  
  7.   ListBox1.Canvas.Brush.Color := clWhite;
  8.   ListBox1.Canvas.Brush.Style:= bsSolid;
  9.   ListBox1.Canvas.FillRect(ARect);
  10.  
  11.   bgra.Draw(ListBox1.Canvas, ARect.Left, ARect.Top);
  12.  
  13.   ListBox1.Canvas.TextOut(ARect.Left, ARect.Top, ListBox1.Items[Index]);
  14. end;

Pe3s

  • Hero Member
  • *****
  • Posts: 573
Re: [SOLVED] SVG thumbnails
« Reply #14 on: December 16, 2023, 01:44:25 pm »
Hello, I have one more question - is it possible to make the selection also select the background under the thumbnail?

Code: Pascal  [Select][+][-]
  1. procedure TForm1.ListBox1DrawItem(Control: TWinControl; Index: Integer; ARect: TRect; State: TOwnerDrawState);
  2. var bgra: TBGRABitmap;
  3. begin
  4.   bgra := ListBox1.Items.Objects[Index] as TBGRABitmap;
  5.   if odSelected in State then
  6.   begin
  7.     ListBox1.Canvas.Brush.Color:= clRed;
  8.   end;
  9.   ListBox1.Canvas.FillRect(ARect);
  10.   bgra.Draw(ListBox1.Canvas, ARect.Left, ARect.Top);
  11.   ListBox1.Canvas.TextOut(ARect.Left + 120, ARect.Top + 44, ListBox1.Items[Index]);
  12. end;
  13.  

 

TinyPortal © 2005-2018