Blurred Image for "thinking/loading" screen - ios

Question

I have used 2 pages to create a blurred image with a spinner that I want to use for loading/thinking overlays:
http://www.sitepoint.com/all-purpose-loading-view-for-ios/
http://x-code-tutorials.com/2013/06/18/ios7-style-blurred-overlay-in-xcode/
It is working ok, but needs so modifications. I have 3 questions.
1st question:
After the button is clicked it seems to take a long time to actually come up. Any suggestions?
2nd question is:
The blurred image gets shift to the left and down, either when it is taken or when it is set in the view. Any thoughts on why?
Seems like the higher the numberWithFloat is, the more shift in the image.
[gaussianBlurFilter setValue:[NSNumber numberWithFloat: 10] forKey: #"inputRadius"];
3rd question:
I am trying to get this to display while the API backend is doing database stuff. If I don't call RemoveBlurredOverlay then it displays and worked, however if I call it after all the database work it won't display at all. Any thoughts? Need to be threaded?
BlurredOverlay.m
#implementation BlurredOverlay
+(BlurredOverlay *)loadBlurredOverlay:(UIView *)superView {
BlurredOverlay *blurredOverlay = [[BlurredOverlay alloc] initWithFrame:superView.bounds];
// Create a new image view, from the image made by our gradient method
UIImageView *blurredBackground = [[UIImageView alloc] initWithImage:[self captureBlur:superView]];
[blurredOverlay addSubview:blurredBackground];
// This is the new stuff here ;)
UIActivityIndicatorView *indicator =
[[UIActivityIndicatorView alloc] initWithActivityIndicatorStyle: UIActivityIndicatorViewStyleWhiteLarge];
//set color
[indicator setColor:UIColorFromRGB(0x72CE97)];
// Set the resizing mask so it's not stretched
indicator.autoresizingMask =
UIViewAutoresizingFlexibleTopMargin |
UIViewAutoresizingFlexibleRightMargin |
UIViewAutoresizingFlexibleBottomMargin |
UIViewAutoresizingFlexibleLeftMargin;
// Place it in the middle of the view
indicator.center = CGPointMake(superView.bounds.origin.x + (superView.bounds.size.width / 2), superView.bounds.origin.y + (superView.bounds.size.height / 2));
// Add it into the spinnerView
[blurredOverlay addSubview:indicator];
// Start it spinning! Don't miss this step
[indicator startAnimating];
//blurredOverlay.backgroundColor = [UIColor blackColor];
[superView addSubview:blurredOverlay];
return blurredOverlay;
}
+ (UIImage *) captureBlur:(UIView *)superView {
//Get a UIImage from the UIView
UIGraphicsBeginImageContext(superView.frame.size);
[superView.layer renderInContext:UIGraphicsGetCurrentContext()];
UIImage *viewImage = UIGraphicsGetImageFromCurrentImageContext();
UIGraphicsEndImageContext();
//Blur the UIImage
CIImage *imageToBlur = [CIImage imageWithCGImage:viewImage.CGImage];
CIFilter *gaussianBlurFilter = [CIFilter filterWithName: #"CIGaussianBlur"];
[gaussianBlurFilter setValue:imageToBlur forKey: #"inputImage"];
[gaussianBlurFilter setValue:[NSNumber numberWithFloat: 1] forKey: #"inputRadius"]; //change number to increase/decrease blur
CIImage *resultImage = [gaussianBlurFilter valueForKey: #"outputImage"];
//create UIImage from filtered image
UIImage *blurrredImage = [[UIImage alloc] initWithCIImage:resultImage];
return blurrredImage;
}
-(void)removeBlurredOverlay{
// Take me the hells out of the superView!
[super removeFromSuperview];
}
#end
MainViewController.m
...
- (IBAction)loginButton:(id)sender {
//Add a blur view to tell uses the app is "thinking"
BlurredOverlay *blurredOverlay = [BlurredOverlay loadBlurredOverlay:self.view];
NSInteger success = 0;
//Check to see if the username or password textfields are empty or email field is in wrong format
if([self validFields]){
//Try to login user
success = [self loginUser]; //loginUser sends the http to the back end API that does the database stuff
}
//If successful, go to the View
if (success) {
//Remove blurredOverlay
//[blurredOverlay removeBlurredOverlay]; //This makes it not display at all
//Seque to the main View
[self performSegueWithIdentifier:#"loginSuccessSegue" sender:self];
}
else
{
//Remove blurredOverlay
//[blurredOverlay removeBlurredOverlay]; //This makes it not display at all
self.passwordTextField.text = #"";
}
}

Answer 1

Here is my answer for Question 1:
New to threads so and advice would be greatly appreciated.
I added another method in BlurredImageView.m to build the view with taking in a blurred imaged.
I made the captureBlurredImage method public, and called that in a thread in ViewDidLoad in Login.m first, then passed the blurred image into the new loadBlurredOverlay. I also added the login processing into a thread. It is really fast now, however:
Question #3 still remains!!!!
If I call [blurredOverlay removeBlurredOverlay]; in LoginViewController.m which calls [self removeFromSuperview]; in BlurredOverlay.m the BlurredImage and spinner never comes up. If I comment it out, I works like a charm but can't get it to dismiss after the login processing is done.
Comments and help will be appreciated. I will edit this answer if we can get to the bottom of this.
BlurredImage.m
#import "BlurredOverlay.h"
#implementation BlurredOverlay
+(BlurredOverlay *)loadBlurredOverlay:(UIView *)superView :(UIImage *) blurredImage {
NSLog(#"In loadBlurredOverlay with parameter blurredImage: %#", blurredImage);
BlurredOverlay *blurredOverlay = [[BlurredOverlay alloc] initWithFrame:superView.bounds];
// Create a new image view, from the image made by our gradient method
UIImageView *blurredBackground = [[UIImageView alloc] initWithImage:blurredImage];
[blurredOverlay addSubview:blurredBackground];
// This is the new stuff here ;)
UIActivityIndicatorView *indicator =
[[UIActivityIndicatorView alloc]
initWithActivityIndicatorStyle: UIActivityIndicatorViewStyleWhiteLarge];
//set color
[indicator setColor:UIColorFromRGB(0x72CE97)];
// Set the resizing mask so it's not stretched
indicator.autoresizingMask =
UIViewAutoresizingFlexibleTopMargin |
UIViewAutoresizingFlexibleRightMargin |
UIViewAutoresizingFlexibleBottomMargin |
UIViewAutoresizingFlexibleLeftMargin;
// Place it in the middle of the view
indicator.center = CGPointMake(superView.bounds.origin.x + (superView.bounds.size.width / 2), superView.bounds.origin.y + (superView.bounds.size.height / 2));
// Add it into the spinnerView
[blurredOverlay addSubview:indicator];
// Start it spinning! Don't miss this step
[indicator startAnimating];
//blurredOverlay.backgroundColor = [UIColor blackColor];
[superView addSubview:blurredOverlay];
[superView bringSubviewToFront:blurredOverlay];
return blurredOverlay;
}
+ (UIImage *) captureBlurredImage:(UIView *)superView {
//Get a UIImage from the UIView
UIGraphicsBeginImageContext(superView.frame.size);
[superView.layer renderInContext:UIGraphicsGetCurrentContext()];
UIImage *viewImage = UIGraphicsGetImageFromCurrentImageContext();
UIGraphicsEndImageContext();
//Blur the UIImage
CIImage *imageToBlur = [CIImage imageWithCGImage:viewImage.CGImage];
CIFilter *gaussianBlurFilter = [CIFilter filterWithName: #"CIGaussianBlur"];
[gaussianBlurFilter setValue:imageToBlur forKey: #"inputImage"];
[gaussianBlurFilter setValue:[NSNumber numberWithFloat: 1] forKey: #"inputRadius"]; //change number to increase/decrease blur
CIImage *resultImage = [gaussianBlurFilter valueForKey: #"outputImage"];
//create UIImage from filtered image
UIImage *blurrredImage = [[UIImage alloc] initWithCIImage:resultImage];
return blurrredImage;
}
-(void)removeBlurredOverlay{
// Take me the hells out of the superView!
[self removeFromSuperview];
}
#end
LoginViewController.m
...
-(void)viewDidAppear:(BOOL)animated
{
//Get a blurred image of the view in a thread<#^(void)block#>
dispatch_async(dispatch_get_global_queue(DISPATCH_QUEUE_PRIORITY_BACKGROUND, 0), ^{
self.blurredImage = [BlurredOverlay captureBlurredImage:self.view];
});
}
...
//Send the username and password to backend for verification
//If verified, go to ViewController
- (IBAction)loginButton:(id)sender {
__block BOOL success = false;
//Add a blur view with spinner to tell user the app is processing login information
BlurredOverlay *blurredOverlay = [BlurredOverlay loadBlurredOverlay:self.view :self.blurredImage];
//Login user in a thread
//Get a blurred image of the view in a thread
dispatch_sync(dispatch_get_global_queue(DISPATCH_QUEUE_PRIORITY_BACKGROUND, 0), ^{
//Check to see if the username or passord texfields are empty or email field is in wrong format
if([self validFields]){
//Try to login user
success = [self loginUser];
}
else {
success = false;
}
dispatch_async(dispatch_get_main_queue(), ^{
//If successful, go to the ViewController
if (success) {
//Remove blurredOverlay
//[blurredOverlay removeBlurredOverlay];
//Seque to the main ViewController
[self performSegueWithIdentifier:#"loginSuccessSegue" sender:self];
}
else
{
//Remove blurredOverlay
//[blurredOverlay removeBlurredOverlay];
//Reset passwordTextField
self.passwordTextField.text = #"";
}
});
});
}
...