I put together this Delphi XE5 Firemonkey Frame object called AsyncImageLoader which implements a threaded HTTP image loader with a progress bar. If you want to load up a TListBox with an RSS feed you have to create an TImage and download each image manually which will block the GUI of your app. AsyncImageLoader shows one way to solve this problem. The code should work cross platform on Android, IOS, Windows, and IOS. Once you tell AsyncImageLoader to load an image it will display a progress bar until the image has been downloaded and loaded. Instagram uses a similar progress bar style within their app when they load images into your feed.
Another feature of AsyncImageLoader is that it can either pool the HTTP request components and re-use them the next time you load an image with the Frame or it can create the HTTP request components on each request (by setting Pooled to False). If you are only ever going to load an image once you can probably save memory by turning off pooling. Lastly you can load up the URL property of the Frame with the URL that you want to load and then use your own queuing system to load the images (with the Get procedure) when the images become visible (or one at a time). The threading is based on anonymous threads so there is also a new thread created and terminated for each image request.
There are other solutions out there for asynchronous image loading but I haven’t seen any that implement a progress bar. If you don’t need the progress bar and just want a threaded image loading queue check out TImageLoader.
To use AsyncImageLoader you should include the uAsyncImageLoader into your project, select Frames from the component palette, and choose AsyncImageLoader from the popup box.
Download the source code for the Delphi XE5 Firemonkey frame based AsyncImageLoader.
I am trying to load the images by using this uAsyncImageLoader with some issues.
In our app we need to show the images (like facebook wall). We are loading first 5 images then after if user clicks on “Show More” we are loading another 5 images. Process repeats until there is no data found. Problem is after loading the 20 or 25 images app is forcely closing. And another thing is in the given frame i have removed the “ProgressBar” and placed an “AniIndicator”. But it is not showing the “AniIndicator”.
Can you please help me in regarding this ?
Sounds like an IOS app. I’m thinking low memory is the reason your app closes.
I recommend checking for the Low Memory event from the lifecycle:
http://www.fmxexpress.com/handle-android-and-ios-lifecycle-events-in-delphi-xe5-firemonkey/
I’d say what you need to do is cache the images to disk:
http://www.pockhero.com/disk-cache-manager-for-string-tbitmap-tstrings-tstream-data-types/
And then when they are no longer visible you should clear the image from memory. When it comes back into visible range you should load it from disk again. You would need to add new code to uAsyncImageLoader to do that.
AniIndicator does it’s own internal threading (or not) which can conflict with the main thread and downloading data. I would recommend not using it this way. You’re better off using either an animated image or an animated component to do this instead of AniIndicator. Like you’re better off using a TRectangle w/ a image brush on it and then changing the RotationAngle instead of the progress bar.
http://www.fmxexpress.com/trectangle-bitmap-instead-of-timage-for-delphi-xe5-firemonkey-on-android-and-ios/
Thanks for your reply.
It’s not IOS it is android app. I will check the above mentioned methods and let you know what happened.
Time being removed pooling. Now feeling better. Need to enhance when got time. Thank you.
In our app we have an option called wall post. There user will enter some wall status (writes some comments) and selects an image from mobile gallery. How to upload and save that image in our server ?
Thanks in advance.
Use TRESTClient to submit the data to the server. In the below example I Base64 encode the file first. I use PHP on the server side to get the file with $_REQUEST[‘I’].
stream.LoadFromFile(Filename);
stream.Seek(0,0);
EncStr := EncodeBase64(stream.Memory, stream.Size);
RESTRequest.AddParameter(‘I’,EncStr);
RESTRequest.Execute;
I tried this. It is saying the error as “Project Project1.apk raised exception class EIdHTTPProtocolException with message ‘HTTP/1.1 414 Request-URI Too Long’.” What else can do.
Please suggest.
That is your web server telling you that your URL is too long I believe. Try doing a POST instead of a GET?
Yes.
Actually i forgot to change that property (RestRequest.Method = rmPost). After that it worked like charming.
Thanks once again.
Please do you have a working example?
can’t make this work, i really need to make na upload to our server but didn’t yet figure out how to do it
This sample isn’t for uploading. For uploading you can use TRESTRequest.AddBody() or TidHTTP.
Hi,
How to make an image auto size ? I mean, without hard coding the TImage height and width how to auto adjust the size of the TImage based on that image dimensions ? In simple words, like facebook wall image. Actually i submitted this query at “Submit Story”. But unfortunately i didn’t receive the response. Please help.
Thanks in advance.
http://docwiki.embarcadero.com/Libraries/XE6/en/FMX.Objects.TImage.WrapMode
http://docwiki.embarcadero.com/Libraries/XE6/en/FMX.Objects.TImageWrapMode
I have already tried that one. I am not looking for that solution.
Can you please send me your mail id, so that i can send you my sample code and what i am expecting.
Can you please send me your mail Id ?
Ask your question on: https://forums.embarcadero.com/forum.jspa?forumID=380
How to add AsyncImageLoader to my project on DX Seattle?