Jump to content

TfgCollectionView : Fetching thumbnail images from web

Recommended Posts

Posted (edited)

Hi All,
i'm testing tfgCollectionView with this rest resource : http://jsonplaceholder.typicode.com/photos

In this test my CollectionView Style has 1 fgImage and 1 fgLabel.
I get the RestResouce with a TRESTRequest.ExecuteAsync and it works perfectly.
When i've the ExecuteAsync CallBack i parse the JSON output string and i fill my Photos collection (TList).
I do this step with a separate Task because i've 5000 items ( more or less).

When i link data to the CollectionView i call fgCollectionViewGetItemCount and fgCollectionView1BindItem.
If i bind only the fgLabel all works perfectly.
My problem is link the tfgImage to the thumbnail.
I post my code:

procedure TFramePhoto.fgCollectionView1BindItem(Sender: TObject;const AIndex: Integer; const AStyle: string; const AItem: TfgItemWrapper);
VAR Item:TPhotoData;

    AItem.GetControlByLookupName<TfgLabel>('LblTitle').Text := Item.Ftitle;
    TfgAssetsManager.Current.AddBitmapFromUrlAsync(Item.FalbumId, Item.FthumbnailUrl,
    procedure (const AResultCode: Integer; const AResultMessage: string) begin
      AItem.GetControlByLookupName<TfgImage>('ImgAlbum').ImageName := Item.FalbumId;

    FGX.Log.TfgLog.Log(TfgLogLevel.Debug,'fgCollectionView1BindItem ' + e.Message);

Actually i'm saving the images in assets but i think it is a bad idea...
Can you suggest a best practice for this scenario ?

Thanks a lot guys,
Best Regards.



Edited by Luke

Share this post

Link to post
Share on other sites
Posted (edited)
if not TfgAssetsManager.Current.Contains(Item.FalbumId) then
   TfgAssetsManager.Current.AddBitmapFromUrlAsync(Item.FalbumId, Item.FthumbnailUrl);
AItem.GetControlByLookupName<TfgImage>('ImgAlbum').ImageName := Item.FalbumId;

Try it!

I think Item.FalbumId not uniq field for records, it needs to be replaced by Item.Id.

Edited by knsg12
  • Like 2

Share this post

Link to post
Share on other sites

Hi Knsg12,
you are right...
AlbumId is not unique... excuse me.
I check better if now it is solved.

Thanks a lot,

Share this post

Link to post
Share on other sites

Hi All,
now my demo works better, thanks Knsg12.
However i've seen that TfgAssetsManager.Current.AddBitmapFromUrlAsync take a lot of time ( 20 - 30 seconds ) to download the thumbnail from  'https://via.placeholder.com/150/92c952'.

I've tried also to update your demo AsyncBitmapAssetDemo and i've replaced your sample url with mine.
The first execution take 20 second, the nexts less than 1 second.
How could be possibile ?
Many thanks guys for your support.

Share this post

Link to post
Share on other sites

When you query a picture for the first time, it uploads it and save to Assets, the next time it will no longer upload a picture. And your fgimage always geting pic from Assets.

Share this post

Link to post
Share on other sites

Hi Knsg12, thanks for support.
I will do more tests and i will close the post if solved.
Thanks a lot.

Share this post

Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

  • Similar Content

    • By Luke
      Hi All,
      I'm trying to use a tfgSearchEdit with a tfgCollectionView.
      I'm searching the better way to set the focus to the CollectionViewitem that match my search value.
      There is a demo that explain this management ?
      I've seen that i can fill the SearchEdit.Suggestions with the CollectionViewItems field otherwise i can do a binarysearch in the Tlist<> that is linked to the CollectionView but i've to sort the list.
      Can you suggest a best practise for that ?
      Thanks a lot,
    • By Yaroslav Brovin
      В ближайшем релизе FGX Native появится расширение возможностей TfgCollectionView. Речь идет о перетаскивании элементов списка для ручного упорядочивания элементов.
      Для того, чтобы воспользоваться новым функционалом нужно:
      1. Определить, за какой компонент элемента можно будет выполнять перетаскивание элемента.
      Например, можно использовать TfgImage с общепринятой иконкой перетаскивания элементов.
      2. Указать для такого компонента стиля имя через LookupName.

      3. Указать в настройках TfgCollectionView имя компонента из пункта (3).

      4. После перетаскивания элементов в списке, отразить изменение последовательности элементов в вашей модели данных в событии OnMovingItem. 
    • By s.fedotenko@gmail.com
      Добрый день.
      При свойстве SelectionMode = SingleSelect при изменении выделения наблюдается заметное подтормаживание переключения выделенного итема. 
      При этом если мы находимся в начале списка, подтормаживания нет, а при прокрутке вниз - проявляется. При SelectionMode = None такого эффекта нет.
    • By Cinemaizer
      Добрый день!
      В примере CollectionViewSelectionDemo замечена проблема отрисовки в динамике - видео прилагаю. Просто тапаю список, не тащу, происходит какое то смещение на Xiaomi Redmi Note 5 (MIUI 11).
      Скачать видео 20200107_215136.mp4
      Скачать видео
  • Recently Browsing   0 members

    No registered users viewing this page.

  • Create New...