Recent

Author Topic: How do I add thumbnails to JvThumbView  (Read 464 times)

RedOctober

  • Sr. Member
  • ****
  • Posts: 291
How do I add thumbnails to JvThumbView
« on: November 17, 2019, 07:05:37 pm »
Platform:  Laz 1.8.4  FPC 3.0.4, OS Windows Server 2016

I have 203,000 .jpg images of people in a folder. 
I have 33,800 records in a Firebird DB each of which represents a human client. 
This results in about 6 images per client that I need to display as thumbnails to my end user, so they can select which images they want to see in more detail in a larger window.

My search for a component that does the following:

a)  Allows loading and display of only the 6 images associated with a particular client, and not just load every image from a given directory
b)  Allow end user to select one, or more, images via click or Ctrl-Click or Shift-Click

Has lead me to a few component sets, none of which does the above (that I can see).  The component I'm struggling with at the moment is TJvThumbView.  Pointing to a directory auto-loads the .jpg image contained therein.  But that's as far as I could get.

Here is my code:

Code: Pascal  [Select]
  1. procedure TfrmMain.Button1Click(Sender: TObject);
  2. begin
  3.   JvThumbView1.Directory := '';
  4.  
  5.   // Section 1, does nothing
  6.   JvThumbView1.AddFromFile('D:\app_vlt\pdf\1\0000A6FA-A1AB-46C7-8083-A1F8C38B9EFA.jpg');
  7.   JvThumbView1.AddFromFile('D:\app_vlt\pdf\1\0000C794-F7DC-4EC9-BC47-C22741505B71.jpg');
  8.   JvThumbView1.AddFromFile('D:\app_vlt\pdf\1\000021A1-D6B1-4EE0-8A7A-BED429A6C8E8.jpg');
  9.   Exit; // <-- Comment out sections and move this exit, so that only the one or two sections you want are "live" at a time
  10.  
  11.   // Section 2, adds thumbnails "panels" but no image is shown in any of them
  12.   JvThumbView1.AddThumb('My First Thumb', True);
  13.   JvThumbView1.AddThumb('My Second Thumb', True);
  14.   JvThumbView1.AddThumb('My Third Thumb', True);
  15.  
  16.   // Section 3, (Combine with Section 2 above) thumbmain panels created in Section 2 above are shown, but no images
  17.   JvThumbView1.ThumbList[0].FileName := 'D:\app_vlt\pdf\1\0000A6FA-A1AB-46C7-8083-A1F8C38B9EFA.jpg';
  18.   JvThumbView1.ThumbList[1].FileName := 'D:\app_vlt\pdf\1\0000C794-F7DC-4EC9-BC47-C22741505B71.jpg';
  19.   JvThumbView1.ThumbList[2].FileName := 'D:\app_vlt\pdf\1\000021A1-D6B1-4EE0-8A7A-BED429A6C8E8.jpg';
  20.  
  21.  
  22. end;
  23.  
  24.  


I cannot find documentation nor relevant examples to accomplish what I want.  All the examples just load all images from a directory.  Alternatively, is there any other component set you recommend that is easier to use and matches my requirements?

Thanks in advance for any help you can provide.


wp

  • Hero Member
  • *****
  • Posts: 6471
Re: How do I add thumbnails to JvThumbView
« Reply #1 on: November 17, 2019, 07:48:01 pm »
Yes, there is no documentation. But there is a demo file: you find it in folder "examples/JvThumbnail" of the jvcl installation.

Nevertheless, I am attaching here a simple demo of the AddFromFile method which works flawlessly for me - I don't know what you are doing wrong.

If I understood you correctly you only want to display a small number of thumbnails. Then JvThumbView is ok. For a larger number of thumbnails I'd recommend theo's thumb viewer (https://github.com/theo222/lazarus-thumbviewer) which reads the images in a separate thread.
Lazarus trunk / fpc 3.0.4 / all 32-bit on Win-10

RedOctober

  • Sr. Member
  • ****
  • Posts: 291
Re: How do I add thumbnails to JvThumbView
« Reply #2 on: November 17, 2019, 08:26:38 pm »
Thank you wp.  This is why it's so helpful to have another pair of eyes on the problem to do a "sanity" check.

The mistake I made was that the images are in the /img/ folder, not the /pdf/ folder.

I corrected the path and the Thumbnail viewer .LoadFromFile function is working as expected.

mia culpa

RedOctober

  • Sr. Member
  • ****
  • Posts: 291
Re: How do I add thumbnails to JvThumbView
« Reply #3 on: November 17, 2019, 10:19:50 pm »
If I understood you correctly you only want to display a small number of thumbnails.

Yes, I will only have maximum of 20 thumbnails to display at any one time.

Hit a snag with your example project wp.

It works without error until I do the following:

Set ChildSizing.Layout property from cclNone to to cclLeftToRightThenTopToBottom

This causes the following error when loading the first image file

TControl.ChangeBounds loop detected :TJvThumbImage Left=38,Top=51,Width=0,Height=0 NewLeft=19,NewTop=51,NewWidth=0,NewHeight=0.

I need the layout to be left to right, then top to bottom. 

What am I doing wrong here?

Thanks in advance.


wp

  • Hero Member
  • *****
  • Posts: 6471
Re: How do I add thumbnails to JvThumbView
« Reply #4 on: November 17, 2019, 10:49:10 pm »
Oh - JvThumbview is an old component which originates from Delphi where ChildSizing does not exist. Therefore, I guess this property should not be there at all... Unfortunately it was already published by TScrollbox from which TJvThumbview inherits.

The way to control the thumbnail layout in JvThumbview is by using the ScrollMode property; set it so smVertical to fill the viewer in rows so that a vertical scrollbar appears.
« Last Edit: November 17, 2019, 10:51:04 pm by wp »
Lazarus trunk / fpc 3.0.4 / all 32-bit on Win-10

RedOctober

  • Sr. Member
  • ****
  • Posts: 291
Re: How do I add thumbnails to JvThumbView
« Reply #5 on: November 17, 2019, 10:57:24 pm »
Ok, I'm playing with the scroll bars on JvThumbViewer... I want first row, two images (left, then right), then add another row, then left, right, then another row, left right etc.   When I put a stop in my code, I can see that this order is being obeyed up until the last image is drawn, then, the images are thrashed around so they are rearranged top, to bottom left column, then bottom to top in the right column.  I'll have to play with it more to see what can be done.  The "Sort" property has no effect on the order or direction the images are displayed.

On a related topic, I downloaded and installed TThumbControl into your demo project.  I can't figure out how to load individual files.

Here is the only code I can guess at:  (The file name/path definitely exists, because the JvThumbViewer is loading them ok)

Code: Pascal  [Select]
  1. // ... your stuff
  2.  
  3.   if OpenPictureDialog1.Execute then
  4.     for fn in OpenPictureDialog1.Files do
  5.       begin
  6.         JvThumbView1.AddFromFile(fn);
  7.         ThumbControl1.ImageLoaderManager.AddImage('D:\_temp\my.jpg');   // <--- Nothing is loaded
  8.       end;
  9.  
  10.  
  11.  



How is this accomplished?  Thanks in advance.

« Last Edit: November 17, 2019, 10:59:44 pm by RedOctober »

wp

  • Hero Member
  • *****
  • Posts: 6471
Re: How do I add thumbnails to JvThumbView
« Reply #6 on: November 18, 2019, 12:28:27 am »
If you want to have two thumbnails in a row, the next two below it etc. you must set ScrollMode to smVertical and adjust the width of the thumbnailviewer such that only two images fit in a row. The latter step can be done by this code:
Code: Pascal  [Select]
  1. uses
  2.   LCLIntf, LCLType;
  3.  
  4. procedure SetThumbColCount(AThumbView: TJvThumbView; ACount: Integer);
  5. var
  6.   scrollbarwidth: Integer;
  7. begin
  8.   scrollbarWidth := GetSystemMetrics(SM_CYHSCROLL);
  9.   AThumbView.ClientWidth := ACount*JvThumbView1.MaxWidth + scrollbarWidth;
  10. end;
MaxWidth is the badly named thumb width... Not 100% sure about the margins, the left/right/inner "Gaps" seem to be included, but maybe you have to add a few pixels if the function does not work exactly...

The Sort property does not affect the layout, only the order of the images (e.g. by name, maybe by date or so).

I had used Theo's ThumbControl in one project, and looking at this code again I noticed that your code is correct - and the image indeed is added because when you resize the ThumbControl the image is shown. Therefore I had added this quick-and-very-dirty solution to this issue:
Code: Pascal  [Select]
  1. ThumbControl1.ImageLoaderManager.AddImage('d:\temp\my.jpg');
  2. ThumbControl1.Width := ThumbControl1.Width + 1;
  3. ThumbControl1.Width := ThumbControl1.Width - 1;

Note that ThumbControl also publishes ChildSizing.
Lazarus trunk / fpc 3.0.4 / all 32-bit on Win-10

jamie

  • Hero Member
  • *****
  • Posts: 2162
Re: How do I add thumbnails to JvThumbView
« Reply #7 on: November 18, 2019, 01:36:59 am »
I suppose one could use a TStringgrid via custom drawn so that you can keep the list of names in the strings, sort them, view them in order, use the object part of the string to point to a TimageList index etc..

 I've done the trick using a TDrawgrid, but using the stringgrid would give you the stringlist to associate the cells to the image etc..


Number 1 at blue screen app creations!