/Developer/Platforms/iPhoneOS.platform/Developer/usr/bin/pngcrush -revert-iphone-optimizations input.png decoded.png

But, I was not satisfied for several reasons :

1. Needed to copy the binary inside the plugin for people who don’t have dev tools installed.
2. For each crushed PNG, a process was spawned to uncrush it.
3. A temporary image was written to disk, read into memory then deleted.

I don’t call this very efficient because that’s a lot of work for such a small task. Then I thought, what’s better than libpng to work with PNGs ?

So I coded a tiny library to uncrush an Apple’s PNG file and integrated it in qlImageSize. I’ll write a technical post about it later.

I updated the code in my github repo.

The new compiled version is also available here.

So, after creating the QuickLook project, I took a look at QuickLook.h, and find this useful line of code :

QL_EXPORT const CFStringRef kQLPreviewPropertyDisplayNameKey; // useful to customize the title of the QuickLook panel

Awesome, just what I needed.
Now finding the images dimensions is trivial with ImageIO, so let’s implement GeneratePreviewForURL().

OSStatus GeneratePreviewForURL(void *thisInterface, QLPreviewRequestRef preview, CFURLRef url, CFStringRef contentTypeUTI, CFDictionaryRef options)
{
	CGImageSourceRef imgSrc = CGImageSourceCreateWithURL(url, NULL);
	if (!imgSrc)
	{
		QLPreviewRequestSetURLRepresentation(preview, url, contentTypeUTI, NULL);
		return -1;
	}
	CFDictionaryRef imgProperties = CGImageSourceCopyPropertiesAtIndex(imgSrc, 0, NULL);
	CFRelease(imgSrc);
	if (!imgProperties)
	{
		QLPreviewRequestSetURLRepresentation(preview, url, contentTypeUTI, NULL);
		return -1;
	}
	CFNumberRef w = CFDictionaryGetValue(imgProperties, kCGImagePropertyPixelWidth);
	int width = 0;
	CFNumberGetValue(w, kCFNumberIntType, &width);
	CFNumberRef h = CFDictionaryGetValue(imgProperties, kCGImagePropertyPixelHeight);
	int height = 0;
	CFNumberGetValue(h, kCFNumberIntType, &height);
	CFRelease(imgProperties);

	CFStringRef keys[1] = {kQLPreviewPropertyDisplayNameKey};
	CFStringRef values[1] = {CFStringCreateWithFormat(kCFAllocatorDefault, NULL, CFSTR("%dx%d"), width, height)};
	CFDictionaryRef properties = CFDictionaryCreate(kCFAllocatorDefault, (const void**)keys, (const void**)values, 1, &kCFTypeDictionaryKeyCallBacks, &kCFTypeDictionaryValueCallBacks);
	QLPreviewRequestSetURLRepresentation(preview, url, contentTypeUTI, properties);

	CFRelease(values[0]);
	CFRelease(properties);

	return noErr;
}

Ok, we are almost done, we need to implement the GenerateThumbnailForURL() function, otherwise all images icon will become generic. Luckily, it’s only one line of code :

OSStatus GenerateThumbnailForURL(void *thisInterface, QLThumbnailRequestRef thumbnail, CFURLRef url, CFStringRef contentTypeUTI, CFDictionaryRef options, CGSize maxSize)
{
	QLThumbnailRequestSetImageAtURL(thumbnail, url, NULL);
	return noErr;
}

Let’s take a look at the result :

Ok, that’s more like it.

I put the Xcode project on my github.

For non-devs, here is a direct link to the plugin.
To install it, simply unzip the file and place qlImageSize.qlgenerator in your ~/Library/QuickLook or /Library/QuickLook folder.

To force QuickLook to reload the plugins open Terminal.app and type :

qlmanage -r

EDIT : I added the file size.

If you build from the sources, I added an option to display the image extension inside the icons in the finder. The extension is based on the Uniform Type Identifier (UTI) of the image.

NYXProgressiveImageView* iv = [[NYXProgressiveImageView alloc] initWithFrame:CGRectMake(0.0f, 0.0f, 320.0f, 640.0f)];
[iv loadImageAtURL:[NSURL urlWithString:@"http://www.image.url"]];

There is also a protocol with 2 optional methods, the first will be called if the download was successful and will contain the downloaded image object. If you want to implement some sort of caching, it’s the place.

-(void)imageDownloadCompletedWithImage:(UIImage*)img;

The second will be called if the download failed, and will contain the downloaded data or nil

-(void)imageDownloadFailedWithData:(NSData*)data;

The code for NYXImagesKit is available on my github page.

Introduction

The main idea was to focus on performances, how could I improve them ?

It turned out that Apple brought Accelerate.framework on iOS 4 so we can take advantages of vDSP functions.
And it’s even better on iOS 5, because we now have access to Core Image and vImage APIs in Accelerate.

The second idea was to add some functionalities, especially filters because there were only 3, now there are 11 !

The code still requires at least iOS 4.2, and is fully ARC enabled. The license has not changed and is Simplified BSD.

So, what’s new ?!

I. UIImage+Enchancing

This is a new category which works only on iOS 5 because it uses Core Image. It is composed of 2 methods :

-(UIImage*)autoEnhance;
-(UIImage*)redEyeCorrection;

The names are pretty straitforward, to guess what these methods do.

II. New filters

There are 8 new filters, let’s review them with Sarah Shahi as a sample image (click to enlarge).

1. Brighten

This filter allow you to brighten or darken an image.

UIImage* brightened = [myImage brightenWithValue:13.0f];

The value should be in the range -255, 255.

2. Contrast adjustment

UIImage* contrasted = [myImage contrastAdjustmentWithValue:37.0f];

The value should be in the range -255, 255.

3. Edge detection

This filter is used to detect edges on an image.

UIImage* edge = [myImage edgeDetectionWithBias:0];

The bias value is only used on iOS 5.

4. Emboss

UIImage* emboss = [myImage embossWithBias:0];

The bias value is only used on iOS 5.

5. Gamma correction

UIImage* gammaCorrected = [myImage gammaCorrectionWithValue:2.0f];

Good values for the gamma correction are in the range 0.01, 8

6. Invert

This filter invert the colors of an image.

UIImage* inverted = [myImage invert];

7. Sharpen

UIImage* sharpened = [myImage sharpenWithBias:0];

The bias value is only used on iOS 5.

8. Unsharpen

UIImage* unsharpened = [myImage unsharpenWithBias:0];

The bias value is only used on iOS 5.

III. New rotation methods

There are 2 new methods to rotate an image but there are only availabe on iOS 5 because they use vImage.

-(UIImage*)rotateImagePixelsInDegrees:(float)degrees;
-(UIImage*)rotateImagePixelsInRadians:(float)radians;

The difference between the other rotation methods is that the dimensions of the image won’t change (here 640×960), it’s the content that is being rotated, so the image is being truncated.

IV. Saving to Photos.app

I added a simple method in UIImage+Saving to save an UIImage to the Photos application.

[myImage saveToPhotosAlbum];

What changed ?

So now let’s look at what as changed.

I. Blurring

I’m no longer using Jeff’s code to perform the gaussian blur, instead I rewrote the method using vDSP for iOS 4, and vImage for iOS 5.

Here is a quick benchmark on an iPhone 4S with the same image.

With the old method the average time to blur the image was 4.0s, so it was very very slow.

On iOS 4 with vDSP it took about 0.67s, 6x times faster.

On iOS 5 with vImage it took about 0.19s, 21x times faster.

So it’s a very big win for this method.

II. Sepia filter

For iOS 4, I rewrote it using vDSP, it is more than 1.6x faster than before, so it’s a bit better.

The big win is on iOS 5, because it uses Core Image. As a result it is 1.6x faster than the iOS 4 method, that’s 2.5x faster than my original method.
The other great thing is that the sepia tone from Core Image are nicer than with the manual method.

Conclusion

I hope you ‘ll like this new release, and feel free to contribute !

As before, you can get the code on github.

Keeping the Network Activity Indicator in sync

I’m pretty sure you encountered this problem, how can you keep the indicator synced in a multithreaded application ? Showing it when an operation start is easy, but how do we know when to hide it ?
We can easily solve this problem with a category on UIApplication that counts the number of active connections and show the indicator when this number is positive.

So let’s begin with the header

@interface UIApplication (NYX_NetworkActivityIndicator)

-(void)nyx_pushNetworkActivity;
-(void)nyx_popNetworkActivity;

@end

We just declare two methods, one to increase the counter and the other to decrease it.

Now the implementation.

#import "UIApplication+NetworkActivity.h"

static NSInteger __nyxNetworkActivityCount = 0;

@implementation UIApplication (NYX_NetworkActivityIndicator)

-(void)nyxRefreshNetworkActivityIndicator
{
	if (![NSThread isMainThread])
	{
		[self performSelectorOnMainThread:@selector(nyxRefreshNetworkActivityIndicator) withObject:nil waitUntilDone:NO];
		return;
	}
	self.networkActivityIndicatorVisible = (__nyxNetworkActivityCount > 0);
}

-(void)nyx_pushNetworkActivity
{
	@synchronized(self)
	{
		__nyxNetworkActivityCount++;
	}
	[self nyxRefreshNetworkActivityIndicator];
}

-(void)nyx_popNetworkActivity
{
	@synchronized(self)
	{
		if (__nyxNetworkActivityCount > 0)
			__nyxNetworkActivityCount--;
		else
			__nyxNetworkActivityCount = 0;
		[self nyxRefreshNetworkActivityIndicator];
	}
}

@end

First we need to declare a static variable to hold the count. Then, the push and pop methods just increment or decrement this variable and call a private method that show or hide the network activity indicator accordingly.

Add the header in your Prefix.pch so that you can access these methods everywhere in your project.

Now before starting a NSURLConnection you call

[[UIApplication sharedApplication] nyx_pushNetworkActivity];

and when you are done

[[UIApplication sharedApplication] nyx_popNetworkActivity];

No more trouble managing this activity indicator across multiple threads, but wouldn’t it be great if the indicator just showed up when a NSURLConnection start, without the need for us to do it ?

Automatically showing the Network Activity Indicator when a connection start

This part is a bit more tricky, in order to achieve this we are gonna use method swizzling, if you are not familiar with this you can read this great post by Mike Ash.

We are gonna swizzle two NSURLConnection‘s method :

- initWithRequest:delegate:startImmediately: to start the indicator.
- dealloc to stop the indicator. ARC forbids us to use a selector on dealloc, so we must trick it with NSSelectorFromString().

Create a new category on NSURLConnection, there is nothing in the header so we skip directly to the implementation.

First we include the proper header and then we just take the Swizzle function in Mike’s post.

#import "NSURLConnection+AutomaticIndicator.h"
#import <objc/runtime.h>

void swizzle_instance_method(Class c, SEL origSEL, SEL overrideSEL)
{
	Method origMethod = class_getInstanceMethod(c, origSEL);
	Method overrideMethod = class_getInstanceMethod(c, overrideSEL);
	if (class_addMethod(c, origSEL, method_getImplementation(overrideMethod), method_getTypeEncoding(overrideMethod)))
		class_replaceMethod(c, overrideSEL, method_getImplementation(origMethod), method_getTypeEncoding(origMethod));
	else
		method_exchangeImplementations(origMethod, overrideMethod);
}

Then we need to create our two custom methods.

-(id)nyxInitWithRequest:(NSURLRequest*)request delegate:(id)delegate startImmediately:(BOOL)startImmediately
{
	[[UIApplication sharedApplication] nyx_pushNetworkActivity];
	return [self nyxInitWithRequest:request delegate:delegate startImmediately:startImmediately];
}

-(void)nyxDealloc
{
	[[UIApplication sharedApplication] nyx_popNetworkActivity];
	[self nyxDealloc];
}

Finally in the +(void)load method we swizzle.

+(void)load
{
	swizzle_instance_method(self, @selector(initWithRequest:delegate:startImmediately:), @selector(nyxInitWithRequest:delegate:startImmediately:));
	swizzle_instance_method(self, NSSelectorFromString(@"dealloc"), @selector(nyxDealloc));
}

Now just try to use a NSURLConnection with the method we just swizzled, you will see that the indicator shows up and disappears as you expect.

So, here is a link to those.

Consider the licence to something like Do what the fuck you want.

1. Launch Quickly / Avoid Blocking Work
2. Minimize Memory Usage
3. Draw Efficiently

I’m not going to talk about the 2 firsts because they were pretty straightforward, and I didn’t learn much that I already knew here, but if you are interested you can check this great post by Ole Begemann and this one by Cyril Godefroy.

So let’s jump directly to the third topic, In the Core Animation instruments in the Debug options area there is a checkbox called Color Misaligned Images.

This option does 2 things :

1. It highlights scaled and stretched content in yellow. So UIKit elements (like UIToolBar, UINavigationBar…) will be highlighted, but no worry here, Apple uses stretching a lot for UIKit in order to consume less memory and reduce its size. You should look at YOUR things here.

2. It highlights misaligned images in magenta. But what the hell is a misaligned image ?

To put it simply, your screen has a resolution of 960×640 pixels (or 480×320 depending on your device), but UIKit and Core Graphics uses floating points values.
When it comes time to render the content, these coordinates have to be mapped to the pixel grid of the screen before they are displayed.
If your content is not aligned on integral coordinates it will require much more work from the GPU, and there is a big chance that your content will be aliased and looks really ugly.

So if you do some calculations to display, for example, an image gallery, always cast the coordinates to integer values to avoid these kind of trouble.

Let’s finish with a quote from Michael Jurewitz.

“If you have a label that is aliased, I guarantee you at 100% that it is misaligned.”

-(CGImageRef)createTransitoryImage:(CGImageRef)partialImg
{
	const size_t height = CGImageGetHeight(partialImg);
	CGColorSpaceRef colorSpace = CGColorSpaceCreateDeviceRGB();
	CGContextRef bmContext = CGBitmapContextCreate(NULL, _fullWidth, _fullHeight, 8, _fullWidth * 4, colorSpace, kCGBitmapByteOrderDefault | kCGImageAlphaPremultipliedFirst);
	CGColorSpaceRelease(colorSpace);
	if (!bmContext)
	{
		NSLog(@"fail creating context");
		return NULL;
	}
	CGContextDrawImage(bmContext, (CGRect){.origin.x = 0.0f, .origin.y = 0.0f, .size.width = _fullWidth, .size.height = height}, partialImg);
	CGImageRef goodImageRef = CGBitmapContextCreateImage(bmContext);
	CGContextRelease(bmContext);
	return goodImageRef;
}

And corrected this problem :

It appears to be fixed on iOS 5, we don’t need to render other image types in a bitmap context, so it’s a pretty good thing.

The few lines of code you need to write look like this :

-(void)tweetAction
{
	Class twClass = NSClassFromString(@"TWTweetComposeViewController");
	if (!twClass) // Framework not available, older iOS
		return;
	if ([TWTweetComposeViewController canSendTweet]) // Check if twitter is setup and reachable
	{
		TWTweetComposeViewController* twc = [[TWTweetComposeViewController alloc] init];
		[twc addURL:[NSURL URLWithString:@"http://www.cocoabyss.com/"]];
		[twc addImage:[UIImage imageNamed:@"Some image.png"]]
		[twc setInitialText:@"iOS 5 Twitter tutorial"];
		[_viewController presentViewController:twc animated:YES completion:^{
			// Optional
		}];
		// Assume twc is ARC released or call [twc release];
	}
	else
	{
		// Twitter account not configured, inform the user
	}
}

• You don’t need to shorten url(s), it will be done automatically by the framework.
• You can add several images or URLs.

The addImage:, addURL: and setInitialText: methods return booleans values to indicate if the operations were successful. The reason of failure are :

• The Image / URL / Text doesn’t fit in the character space (> 140)
• The view was presented to the user

And… that’s all there is to know ! Pretty neat no ?

Bad idea. Why ?

Let’s say you have 13 images to display of the size of an iPhone screen (320*480).
On iOS 1 pixel = 4bytes.
So in memory, a single picture takes 600Kb. Multiply this by 13 and you are at 7.8Mb used.

And this, wasn’t the worst case scenario. Because often people doesn’t take the time to reduce their pictures to the size of the device and end up displaying, for example, 6 Mega Pixel image (That’s 24Mb in memory for a single image !) or even more, and that’s dramatic.

Good practices

Here the good practices are obvious.

• First, reduce your pictures size with, for example, ImageIO.
• Then to build a gallery, 3 UIImageView are enough, really. One for the current displayed image, one for the previous and one for the next.

Knowing this, I’ll show you some simple code to illustrate this.

So first let’s create our view (I don’t use IB)

-(void)loadView
{
	UIView* view = [[UIView alloc] initWithFrame:(CGRect){.origin.x = 0.0f, .origin.y = 0.0f, .size.width = kPageWidth, .size.height = 320.0f}];

	UIScrollView* scrollView = [[UIScrollView alloc] initWithFrame:(CGRect){.origin.x = 0.0f, .origin.y = 0.0f, .size.width = kPageWidth, .size.height = 320.0f}];
	scrollView.delegate = self;
	scrollView.backgroundColor = [UIColor blackColor];
	scrollView.showsVerticalScrollIndicator = NO;
	scrollView.showsHorizontalScrollIndicator = NO;
	scrollView.alwaysBounceVertical = NO;
	scrollView.alwaysBounceHorizontal = YES;
	scrollView.scrollsToTop = NO;
	scrollView.pagingEnabled = YES;
	scrollView.directionalLockEnabled = YES;
	scrollView.contentSize = (CGSize){.width = kPageWidth * _picturesCount, .height = 320.0f};
	scrollView.contentOffset = (CGPoint){.x = kPageWidth * _index, .y = 0.0f};
	[view addSubview:scrollView];

	_imageView1 = [[UIImageView alloc] initWithFrame:(CGRect){.origin.x = scrollView.contentOffset.x, .origin.y = 0.0f, .size.width = kPageWidth, .size.height = 320.0f}];
	_imageView1.tag = 1;
	[scrollView addSubview:_imageView1];

	_imageView2 = [[UIImageView alloc] initWithFrame:(CGRect){.origin.x = kPageWidth, .origin.y = 0.0f, .size.width = kPageWidth, .size.height = 320.0f}];
	_imageView2.tag = 2;
	[scrollView addSubview:_imageView2];

	_imageView3 = [[UIImageView alloc] initWithFrame:(CGRect){.origin.x = kPageWidth + kPageWidth, .origin.y = 0.0f, .size.width = kPageWidth, .size.height = 320.0f}];
	_imageView3.tag = 3;
	[scrollView addSubview:_imageView3];

	self.view = view;

	[scrollView release];
	[view release];
}

– kPageWidth has a value of 480.0f.
– _picturesCount, as the name implies, is an integer that represents the number of pictures (ivar).
– _index is the index of the current displayed picture (ivar), starting at 0.

Then we need to implement the -(void)scrollViewDidScroll:(UIScrollView*)scrollView method.

-(void)scrollViewDidScroll:(UIScrollView*)scrollView
{
	const CGFloat currPos = scrollView.contentOffset.x; // Get current X scrollview position
	const NSInteger selectedPage = lroundf(currPos * (1.0f / kPageWidth)); // Compute selected page
	const NSInteger zone = 1 + (selectedPage % 3); // Current zone : 0 - 1 - 2

	const NSInteger nextPage = selectedPage + 1;
	const NSInteger prevPage = selectedPage - 1;

	/// Next page
	if (nextPage < (NSInteger)_picturesCount)
	{
		NSInteger nextViewTag = zone + 1;
		if (nextViewTag == 4)
			nextViewTag = 1;
		UIImageView* nextView = (UIImageView*)[scrollView viewWithTag:nextViewTag];
		nextView.frame = (CGRect){.origin.x = nextPage * kPageWidth, .origin.y = 0.0f, .size = nextView.frame.size};
		Picture* nextPic = [_pictures objectAtIndex:nextPage];
		UIImage* img = [[UIImage alloc] initWithContentsOfFile:nextPic.Path];
		nextView.image = img;
		[img release];
	}
	/// Prev page
	if (prevPage >= 0)
	{
		NSInteger prevViewTag = zone - 1;
		if (!prevViewTag)
			prevViewTag = 3;
		UIImageView* prevView = (UIImageView*)[scrollView viewWithTag:prevViewTag];
		prevView.frame = (CGRect){.origin.x = prevPage * kPageWidth, .origin.y = 0.0f, .size = prevView.frame.size};
		Picture* prevPic = [_pictures objectAtIndex:prevPage];
		UIImage* img = [[UIImage alloc] initWithContentsOfFile:prevPic.Path];
		prevView.image = img;
		[img release];
	}

	if (_index != selectedPage && selectedPage >= 0 && selectedPage < _picturesCount)
	{
		Picture* currentPic = [_pictures objectAtIndex:selectedPage];
		self.navigationItem.title = currentPic.Title;
		_index = selectedPage;
	}
}

– Picture is a class to encapsulate an image path, a title for the image and description.
– I assume your images are already at the good size, you can find how to do this in the link I gave above.

That’s all the mechanisms for the gallery, after that it’s mainly UI customization.