Grand Central Dispatch - display first image when it´s loaded? - iphone

I just want to prerender different images for fast access.
I use grand central dispatch here to execute the different blocks.
After starting the queue, I want to set the first image when its done.
With the current code below, unfortunately the first image will only be displayed when all images has been rendered.
So how can i modify the code? Is it possible to get a delegate when each image has finished?
Here´s the code:
// Async prerendering
for (int i = 0; i < count; i++) {
dispatch_async(dispatch_get_global_queue(DISPATCH_QUEUE_PRIORITY_LOW, 0), ^{
dispatch_async(dispatch_get_main_queue(), ^{
UIImage* finalImage = [self prerenderImageForIndex:i];
[self.imageArray addObject:finalImage];
// TODO: i want to display the first image.
// rendering goes on in the background
if (i==0 && [self.imageArray objectAtIndex:0] != nil ) {
self.image = [self.imageArray objectAtIndex:0];
}
});
});
}
Update:
-(UIImage*) prerenderImageForIndex:(int)frame {
UIGraphicsBeginImageContextWithOptions(CGSizeMake(self.frame.size.width, self.frame.size.height), NO, 0);
for (int i=0; i< [configurationArray count]; i++) {
//... get the layerName
UIImage* layerImage = [UIImage imageWithContentsOfFile:[[NSBundle mainBundle] pathForResource:layerName ofType:#"png"]];
// draw layer with blendmode and alpha
[layerImage drawInRect:CGRectMake(x, y, layerImage.size.width, layerImage.size.height)
blendMode:layerblendmode
alpha: layeralpha];
}
// Get current context as an UIImage
UIImage* finalImage = UIGraphicsGetImageFromCurrentImageContext();
UIGraphicsEndImageContext();
return finalImage;
}
i just want to know how do i cancel/stop or restart a running queue?
Is that possible?
Thanks for your help.

you have to use a serial queue, which executes FIFO for example:
dispatch_queue_t queue;
queue = dispatch_queue_create("myImageQueue", NULL);
for(int i = 0; i<count; i++) {
dispatch_async(queue, ^{
// do your stuff in the right order
});
}
for serial Dispatch queues look at:
http://developer.apple.com/library/ios/#documentation/General/Conceptual/ConcurrencyProgrammingGuide/OperationQueues/OperationQueues.html

I'm not sure why you have the dispatch_async calls nested like this but maybe that's the problem. I would imagine something like below would accomplish what you want. You only need to get the main queue when you actually want to do the UI update, everything else should be done on the background queue.
dispatch_async(dispatch_get_global_queue(DISPATCH_QUEUE_PRIORITY_LOW, 0), ^{
UIImage* finalImage = [self prerenderImageForIndex:i];
[self.imageArray addObject:finalImage];
if (i==0 && [self.imageArray objectAtIndex:0] != nil ) {
dispatch_async(dispatch_get_main_queue(), ^{
self.image = [self.imageArray objectAtIndex:0];
});
}
});

Related

Why isn't my ImageView doing anything, at least redrawing?

I made a function that will cycle through images (1.png, 2.png, 3.png, 4.png, 5.png) and display them to a UIImageView. The idea is that I am loading a webpage and I want this imageview to run through this function, basically as a loading icon. However I dont understand why it isn't working, as far as the imageview goes, i dont see anything. Please help! My function's code is below. I know it is something wrong i'm doing here because everything else i test including the webview delegate works just fine.
dispatch_async(dispatch_get_global_queue(DISPATCH_QUEUE_PRIORITY_DEFAULT, 0), ^{
for(int c = 1; !webviewLoaded; c++)
{
c = c % 6;
if(c == 6)
c = 1;
NSString *numberString = [NSString stringWithFormat:#"%d.png", c];
UIImage *img = [UIImage imageNamed:numberString];
[self.loadingImage setImage:img];
sleep(1);
}
});
Because you are doing UI stuff on a background thread, you should't change UI components from a background thread.
You can change your code as following:
dispatch_async(dispatch_get_global_queue(DISPATCH_QUEUE_PRIORITY_DEFAULT, 0), ^{
dispatch_async(dispatch_get_main_queue(), ^{
for(int c = 1; !webviewLoaded; c++)
{
c = c % 6;
if(c == 6)
c = 1;
NSString *numberString = [NSString stringWithFormat:#"%d.png", c];
UIImage *img = [UIImage imageNamed:numberString];
[self.loadingImage setImage:img];
sleep(1);
}
}
});
This piece of code will work, but is kind of useless and it will give you results not as good as you're expecting because what you are doing is create a separate thread (operation) just to call the UI thread from it and this is not efficient.
What you should do is entirely remove the dispatch like this:
for(int c = 1; !webviewLoaded; c++)
{
c = c % 6;
if(c == 6)
c = 1;
NSString *numberString = [NSString stringWithFormat:#"%d.png", c];
UIImage *img = [UIImage imageNamed:numberString];
[self.loadingImage setImage:img];
sleep(1);
}
This will also work, but make sure you have those files #"%d.png added to your project.
And because you are not familiar with GCD here is a good tutorial

Reload own created UITableViewCell

I got a custom UITableViewcell which should load an Image when use that code:
- (void)setImageWithURL:(NSURL *)URL
{
dispatch_queue_t taskQ = dispatch_get_global_queue(DISPATCH_QUEUE_PRIORITY_DEFAULT, 0);
dispatch_async(taskQ, ^{
UIImage *image = [UIImage imageWithData:[NSData dataWithContentsOfURL:URL]];
imageView.image = image;
NSLog(#"test");
});
}
It loads the Image very fast, so I get the response "test" very fast, but it needs to load IN the tableView. Also if I select the row it loads the Image.
How can I fix this issue?
Thanks
As long as setImageWithURL: is called as an effect of cellForRowAtIndexPath, then it should should show up as you expect... however, you need to call imageView.image = image; on the main thread. This goes for ALL UI related tasks. So you'll want:
- (void)setImageWithURL:(NSURL *)URL
{
dispatch_queue_t taskQ = dispatch_get_global_queue(DISPATCH_QUEUE_PRIORITY_DEFAULT, 0);
dispatch_async(taskQ, ^{
UIImage *image = [UIImage imageWithData:[NSData dataWithContentsOfURL:URL]];
dispatch_async(dispatch_get_main_queue(), ^{
imageView.image = image;
NSLog(#"test");
});
});
}
EDIT:
Using NSOperationQueue.
Create an operation queue as a member of your view controller.
m_operationQueue = [NSOperationQueue new];
m_operationQueue.maxConcurrentOperationCount = 1 // if you want to load images in order;
Make sure you cancel operations when the view unloads and when the table will refresh using
[m_operationQueue cancelAllOperations];
Do your thing in setImageWithURL
- (void)setImageWithURL:(NSURL *)URL
{
[m_operationQueue addOperationWithBlock:^{
UIImage *image = [UIImage imageWithData:[NSData dataWithContentsOfURL:URL]];
dispatch_async(dispatch_get_main_queue(), ^{
imageView.image = image;
NSLog(#"test");
});
}];
}
EDIT again:
Sorry, forgot that setImage was in your custom table cell. You can either:
1) make it a static object that you initialize in the +(void)initialize; method of your cell
2) make it a static object available via class method on your view controller
2) make a singleton instance that is available to your table cell
The design preference is up to you and depends what other practices you've been using if you want to be consistent.
You should call [tableView reloadData] when you finish downloading the image.
There is a similar question with an accepted answer, but also it has a suggestion to use SDWebImage. Take a look: How to get UITableViewCell images to update to downloaded images without having to scroll UITableView

NSBlockOperation or NSOperation with ALAsset Block to display photo-library images using ALAsset URL

I am asking this question regarding my questions Display photolibrary images in an effectual way iPhone and Highly efficient UITableView "cellForRowIndexPath" method to bind the PhotoLibrary images.
So I would like to request that answers are not duplicated to this one without reading the below details :)
Let's come to the issue,
I have researched detailed about my above mentioned issue, and I have found the document about operation queues from here.
So I have created one sample application to display seven photo-library images using operation queues through ALAsset blocks.
Here are the sample application details.
Step 1:
In the NSOperationalQueueViewController viewDidLoad method, I have retrieved all the photo-gallery ALAsset URLs in to an array named urlArray.
Step 2:
After all the URLs are added to the urlArray, the if(group != nil) condition will be false in assetGroupEnumerator, so I have created a NSOperationQueue, and then created seven UIImageView's through a for loop and created my NSOperation subclass object with the corresponding image-view and URL for each one and added them in to the NSOperationQueue.
See my NSOperation subclass here.
See my implementation (VierwController) class here.
Let's come to the issue.
It not displaying all the seven images consistently. Some of the images are missing. The missing order is changing multiple times (one time it doesn't display the sixth and seventh, and another time it doesn't display only the second and third). The console log displays Could not find photo pic number. However, the URLs are logged properly.
You can see the log details here.
Are there any mistakes in my classes?
Also, when I go through the above mentioned operational queue documentation, I have read about NSBlockOperation. Do I need to implement NSBlockOperation instead of NSOperation while dealing with ALAsset blocks?
The NSBlockOperation description says
A class you use as-is to execute one or more block objects
concurrently. Because it can execute more than one block, a block
operation object operates using a group semantic; only when all of the
associated blocks have finished executing is the operation itself
considered finished.
How can I implement the NSBlockOperation with ALAsset block regarding my sample application?
I have gone through Stack Overflow question Learning NSBlockOperation. However, I didn't get any idea to implement the NSBlockOperation with ALAsset block!!
This is the tutorial about "How to access all images from iPhonePhoto Library using ALAsset Library and show them on UIScrollView like iPhoneSimulator" .
First of all add AssetsLibrary.framework to your project.
Then in your viewController.h file import #import <AssetsLibrary/AssetsLibrary.h> header file.
This is your viewController.h file
#import <UIKit/UIKit.h>
#import <AssetsLibrary/AssetsLibrary.h>
#import "AppDelegate.h"
#interface ViewController : UIViewController <UIScrollViewDelegate>
{
ALAssetsLibrary *assetsLibrary;
NSMutableArray *groups;
ALAssetsGroup *assetsGroup;
// I will show all images on `UIScrollView`
UIScrollView *myScrollView;
UIActivityIndicatorView *activityIndicator;
NSMutableArray *assetsArray;
// Will handle thumbnail of images
NSMutableArray *imageThumbnailArray;
// Will handle original images
NSMutableArray *imageOriginalArray;
UIButton *buttonImage;
}
-(void)displayImages;
-(void)loadScrollView;
#end
And this is your viewController.m file -
viewWillAppear:
#import "ViewController.h"
#import <QuartzCore/QuartzCore.h>
#implementation ViewController
- (void)viewWillAppear:(BOOL)animated
{
[super viewWillAppear:animated];
assetsArray = [[NSMutableArray alloc]init];
imageThumbnailArray = [[NSMutableArray alloc]init];
imageOriginalArray = [[NSMutableArray alloc]init];
myScrollView = [[UIScrollView alloc]initWithFrame:CGRectMake(0.0, 0.0, 320.0, 416.0)];
myScrollView.delegate = self;
myScrollView.contentSize = CGSizeMake(320.0, 416.0);
myScrollView.backgroundColor = [UIColor whiteColor];
activityIndicator = [[UIActivityIndicatorView alloc]initWithActivityIndicatorStyle:UIActivityIndicatorViewStyleGray];
activityIndicator.center = myScrollView.center;
[myScrollView addSubview:activityIndicator];
[self.view addSubview:myScrollView];
[activityIndicator startAnimating];
}
viewDidAppear:
-(void)viewDidAppear:(BOOL)animated
{
if (!assetsLibrary) {
assetsLibrary = [[ALAssetsLibrary alloc] init];
}
if (!groups) {
groups = [[NSMutableArray alloc] init];
}
else {
[groups removeAllObjects];
}
ALAssetsLibraryGroupsEnumerationResultsBlock listGroupBlock = ^(ALAssetsGroup *group, BOOL *stop) {
//NSLog(#"group %#",group);
if (group) {
[groups addObject:group];
//NSLog(#"groups %#",groups);
} else {
//Call display Images method here.
[self displayImages];
}
};
ALAssetsLibraryAccessFailureBlock failureBlock = ^(NSError *error) {
NSString *errorMessage = nil;
switch ([error code]) {
case ALAssetsLibraryAccessUserDeniedError:
case ALAssetsLibraryAccessGloballyDeniedError:
errorMessage = #"The user has declined access to it.";
break;
default:
errorMessage = #"Reason unknown.";
break;
}
};
[assetsLibrary enumerateGroupsWithTypes:ALAssetsGroupSavedPhotos usingBlock:listGroupBlock failureBlock:failureBlock];
}
And this is displayImages: method body
-(void)displayImages
{
// NSLog(#"groups %d",[groups count]);
for (int i = 0 ; i< [groups count]; i++) {
assetsGroup = [groups objectAtIndex:i];
if (!assetsArray) {
assetsArray = [[NSMutableArray alloc] init];
}
else {
[assetsArray removeAllObjects];
}
ALAssetsGroupEnumerationResultsBlock assetsEnumerationBlock = ^(ALAsset *result, NSUInteger index, BOOL *stop) {
if (result) {
[assetsArray addObject:result];
}
};
ALAssetsFilter *onlyPhotosFilter = [ALAssetsFilter allPhotos];
[assetsGroup setAssetsFilter:onlyPhotosFilter];
[assetsGroup enumerateAssetsUsingBlock:assetsEnumerationBlock];
}
//Seprate the thumbnail and original images
for(int i=0;i<[assetsArray count]; i++)
{
ALAsset *asset = [assetsArray objectAtIndex:i];
CGImageRef thumbnailImageRef = [asset thumbnail];
UIImage *thumbnail = [UIImage imageWithCGImage:thumbnailImageRef];
[imageThumbnailArray addObject:thumbnail];
ALAssetRepresentation *representation = [asset defaultRepresentation];
CGImageRef originalImage = [representation fullResolutionImage];
UIImage *original = [UIImage imageWithCGImage:originalImage];
[imageOriginalArray addObject:original];
}
[self loadScrollView];
}
Now you have two array one is imageThumbnailArray and another is imageOriginalArray.
Use imageThumbnailArray for showing on UIScrollView for which your scrolling will not be slow.... And use imageOriginalArray for an enlarged preview of image.
'loadScrollView:' method, This is how to images on UIScrollView like iPhoneSimulator
#pragma mark - LoadImages on UIScrollView
-(void)loadScrollView
{
float horizontal = 8.0;
float vertical = 8.0;
for(int i=0; i<[imageThumbnailArray count]; i++)
{
if((i%4) == 0 && i!=0)
{
horizontal = 8.0;
vertical = vertical + 70.0 + 8.0;
}
buttonImage = [UIButton buttonWithType:UIButtonTypeCustom];
[buttonImage setFrame:CGRectMake(horizontal, vertical, 70.0, 70.0)];
[buttonImage setTag:i];
[ buttonImage setImage:[imageThumbnailArray objectAtIndex:i] forState:UIControlStateNormal];
[buttonImage addTarget:self action:#selector(buttonImagePressed:) forControlEvents:UIControlEventTouchUpInside];
[myScrollView addSubview:buttonImage];
horizontal = horizontal + 70.0 + 8.0;
}
[myScrollView setContentSize:CGSizeMake(320.0, vertical + 78.0)];
[activityIndicator stopAnimating];
[activityIndicator removeFromSuperview];
}
And here you can find which image button has been clicked -
#pragma mark - Button Pressed method
-(void)buttonImagePressed:(id)sender
{
NSLog(#"you have pressed : %d button",[sender tag]);
}
Hope this tutorial will help you and many users who search for the same.. Thank you!
You have a line in your DisplayImages NSOperation subclass where you update the UI (DisplayImages.m line 54):
self.imageView.image = topicImage;
This operation queue is running on a background thread, and we know that you should only update the state of the UI on the main thread. Since updating the view of an image view is definitely updating the UI, this can be simply fixed by wrapping the call with:
dispatch_async(dispatch_get_main_queue(), ^{
self.imageView.image = topicImage;
});
This puts an asynchronous call on the main queue to update the UIImageView with the image. It's asynchronous so your other tasks can be scheduled in the background, and it's safe as it is running on the main queue - which is the main thread.

Animations Array Loads Slowly. How can I speed the process up?

we're loading about 30 full 320 x 480 images into an animations array. These images are very small in size at about 5 - 7Kb per images. The problem is when we run the loop to populate an array for the images, it seems to pause the entire app while this array get's populated. Is there perhaps a way to load this mutable array with the images in a separate thread or something to allow the array to populate without hurting performance? Thanks
NSMutableArray *totalAnimationImages = [[NSMutableArray alloc] initWithCapacity:numOfImages];
for(int i = 1; i < numOfImages; i++) {
[totalAnimationImages addObject:[UIImage imageNamed:
[NSString stringWithFormat:#"%#%d.png", image, i]]];
}
annImage.animationImages = totalAnimationImages;
annImage.animationDuration = speed; //.4 second
annImage.animationRepeatCount = 1; //infinite loop
[annImage startAnimating]; //start the animation
[totalAnimationImages release];
In working with this issue, and using the threading suggestion provided by shabzco, I've come up with the below code to process a loop, changing the image in an image view, with what seem to be absolutely no performance hit. This only holds one image at a time instead of 30 in an NSMutableArray. Just as Richard J. Ross III said, as soon as the animation would start it would be processing all of the images "into a in-memory bitmap format". This is where the long wait / lag came from. In the below code this is only happening once per image update instead of 30 just to start the animation. I use the while loop with timer in the suggested dispatch thread to keep this timer from effecting the main thread thus potentially creating jerky performance during animations. Please provide feedback on this solution! Thanks
UPDATE: Shabzco suggested that I replace the "ImageNamed" with "imageWithContentsOfFile" to avoid strange memory leaks due to ImageNamed potentially caching images in memory. This was discovered after running xcode profiler and watching the "Real Memory" counter. It became evident that every time an animation ran, the real memory would increase more and more until ultimately the app would crash. After replacing "ImageNamed" with "imageWithContentsOfFile" the issue went away. I've updated the below code.
annImage.image = [UIImage imageNamed:#""];
[annImage setAlpha:1.0];
dispatch_queue_t concurrentQueue = dispatch_get_global_queue(DISPATCH_QUEUE_PRIORITY_DEFAULT, 0);
dispatch_async(concurrentQueue, ^{
NSTimeInterval timeout = 1.00 / speed; // Number of seconds before giving up
NSTimeInterval idle = 1.00 / 8; // Number of seconds to pause within loop
BOOL timedOut = NO;
NSDate *timeoutDate;
for(int i = 1; i < numOfImages; i++) {
timeoutDate = [[NSDate alloc] initWithTimeIntervalSinceNow:timeout];
timedOut = NO;
while (!timedOut)
{
NSDate *tick = [[NSDate alloc] initWithTimeIntervalSinceNow:idle];
[[NSRunLoop currentRunLoop] runUntilDate:tick];
timedOut = ([tick compare:timeoutDate] == NSOrderedDescending);
[tick release];
}
dispatch_async(dispatch_get_main_queue(), ^{
//annImage.image = [UIImage imageNamed:
// [NSString stringWithFormat:#"%#%d.png", image, i]];
NSString *filePath = [[NSBundle mainBundle] pathForResource:[NSString stringWithFormat:#"%#%d", image, i] ofType:#"png"];
annImage.image = [UIImage imageWithContentsOfFile:filePath];
});
}
dispatch_async(dispatch_get_main_queue(), ^{
[UIView beginAnimations:nil context:nil];
[UIView setAnimationDuration: 0.3];
[annImage setAlpha:0.0];
[UIView setAnimationCurve:UIViewAnimationCurveEaseOut];
[UIView commitAnimations];
});
});
This will make your for loop happen in a different thread and will start animating once everything has been loaded.
#autoreleasepool {
NSMutableArray *totalAnimationImages = [[NSMutableArray alloc] initWithCapacity:numOfImages];
dispatch_queue_t concurrentQueue = dispatch_get_global_queue(DISPATCH_QUEUE_PRIORITY_DEFAULT, 0);
dispatch_async(concurrentQueue, ^{
for(int i = 1; i < numOfImages; i++) {
[totalAnimationImages addObject:[UIImage imageNamed:
[NSString stringWithFormat:#"%#%d.png", image, i]]];
}
annImage.animationImages = totalAnimationImages;
annImage.animationDuration = speed; //.4 second
annImage.animationRepeatCount = 1; //infinite loop
[annImage startAnimating]; //start the animation
dispatch_async(dispatch_get_main_queue(), ^{
[totalAnimationImages release];
});
});
}

Tapping button to go through each frame of animation

I am trying to create an app where when you tap a button it will go to the next frame in an animation.
I have 8 image files, and when I press the button I want the 1st image to display, and when i press the button again, I want the 2nd image to replace the 1st image and so on.
I was thinking something like:
-(IBAction)buttonPressDoStuff:(id)sender {
imageThing.image = [UIImage imageNamed:#"image1.png"];
imageThing.image = [UIImage imageNamed:#"image2.png"];
imageThing.image = [UIImage imageNamed:#"image3.png"];
imageThing.image = [UIImage imageNamed:#"image4.png"];
}
and somehow making this all work consecutively with each press.
I am fairly new at objective c, so any help would be much appreciated.
Can anyone throw up some sample code to do this?
Let's think about this. If you want to do something sequentially, that sounds like the job of an array. So what do you think about this:
In your .h file, add these instance variables:
NSMutableArray* picturesArray;
NSInteger counter;
And now in your .m file, in your class' init method:
//this loop will fill your array with the pictures
for(int idx = 0; idx < NUMBER_OF_PICTURES; idx++) {
//IMPORTANT: this assumes that your pictures' names start with
//'image0.png` for the first image, then 'image1.png`, and so on
//if your images' names start with 'image1.png' and then go up, then you
//should change the 'int idx = 0' declaration in the for loop to 'int idx = 1'
//so the loop will start at 0. You will then need to change the condition
//to 'idx < (NUMBER_OF_PICTURES + 1)' to accomodate the last image
NSString* temp = [NSString stringWithFormat:#"image%i.png", idx];
UIImage* tempImage = [UIImage imageNamed:temp];
[picturesArray addObject:tempImage];
}
and in your buttonPressDoStuff: method:
//this method will move to the next picture in the array each time it is pressed
-(IBAction)buttonPressDoStuff:(id)sender {
if(counter < [pictureArray count]) {
imageThing.image = [picturesArray objectAtIndex:counter];
counter++;
}
}
Your init method should look something like this:
- (id)initWithNibName:(NSString*)nibNameOrNil bundle:(NSBundle*)nibBundleOrNil {
self = [super initWithNibName:nibNameOrNil bundle:nibBundleOrNil];
if(self) {
//do setup here
for(int idx = 0; idx < NUMBER_OF_PICTURES; idx++) {
NSString* temp = [NSString stringWithFormat:#"image%i.png", idx];
UIImage* tempImage = [UIImage imageNamed:temp];
[picturesArray addObject:tempImage];
}
}
//it is important that you return 'self' no matter what- if you don't,
//you will get the 'control reached end of non-void method' warning
return self;
}