Chapter 15

Image Recipes

Often times a developer is faced with an all-too common problem: Too much information to display with not enough space to show it. For this, you turn to images. Pictures and graphics allow you to convey a variety of information far beyond simple text, combining emotion, information, and style. In iOS, you have multiple different methods with which to create, utilize, manipulate, and display images. New to iOS 5.0 even is the ability to apply filters to images, allowing for drastic alteration of display with very little actual code. By understanding these inherent functionalities and techniques in iOS, you are able to more easily implement stronger, more powerful, and more informative applications.

Recipe 15–1: Drawing Simple Shapes

From the youngest age, every person is taught the most basic of images, dealing with shapes, colors, and pictures. In iOS too, you can start off with the basics of drawing simple shapes in a view. Many concepts dealt with in these first implementations will end up returning in more complex image-based recipes.

Start by creating a new project called “ShapesAndSizes”. Select the Single View Application template, as in Figure 15–1, in order to build the simplest, ready-to-run pre-configured application, and make sure the device family is set to “iPhone”. The box marked “Use Automatic Reference Counting” should also be checked. Figure 15–1.

Figure 15–1. Creating a single view application

Next, before building your user interface, you will start by implementing your custom drawing code in a subclass of UIView.

Start by adding QuartzCore.framework and CoreGraphics.framework to your project by navigating to your project’s Target settings. Under the Build Phases tab, in the Link Binary With Libraries section, click the + button. Find the Quartz Core and Core Graphics frameworks in the window resembling Figure 15–2, and add them both separately.

Figure 15–2. Adding the Core Graphics and Quartz Core frameworks

Next, create new file called “MyView” using the “Objective-C class” template. When you enter the name, make sure the “Subclass of” field is set to “UIView”.

In the header file of this new class, add the required two import statements for your extra frameworks.

Now, to provide a simple view displaying a drawn rectangle and square, you will implement the -drawRect: method as such:

This method makes use of the following steps to draw basic shapes:

1. Obtain a reference to the current “context,” represented by a CGContextRef.
2. Define a CGRect in which to draw.
3. Acquire color components for the desired color to fill each shape with.
4. Set the Fill Color.
5. Fill the specified shape using the CGContextFillRect() and CGContextFillEllipseInRect() functions.

In order to actually display this in your pre-configured view, you must add an instance of this class to your user interface. This can be done programmatically or through Interface Builder (the latter of which you will demonstrate).

In your view controller’s XIB file, drag a UIView out from the utilities pane into your view, placing it with 20-point margins on each edge, as shown in Figure 15–3.

Figure 15–3. Building your XIB file with a UIView

While your UIView is selected, navigate to the third tab in the right-hand panel. Under the Custom Class section, make sure the Class field is changed from “UIView” to “MyView”, in order to specify the custom UIView subclass to be used, resembling Figure 15–4.

Figure 15–4. Configuring the class of your UIView to MyView

Upon running this application, you will see the output of your drawing commands converted into a visual display, resulting in your simulated view in Figure 15–5.

Figure 15–5. Your simple application drawing a rectangle and an ellipse

Thankfully, you are not at all limited to drawing only rectangles and ellipses! You are able to use a few other functions to draw custom objects by creating “paths.” These paths consist of a movement from point to point, connected by lines, in order to draw a custom shape. Add the following code to your -drawRect: method to draw a gray parallelogram.

It is important to note that when creating these paths, you do not have to add a final line back to your last point. By calling the CGContextClosePath() function, your shape will automatically be closed between its ending point and starting point.

When you run your application now, you will see your view with a new parallelogram created from your path, as in Figure 15–6.

Figure 15–6. Your application with a shape created from a custom path

Programming Screenshots

Just as you are able to put things into a CGContext, you are also quite easily able to take them out. By making use of the UIGraphicsGetImageFromCurrentImageContext() function, you can extract an image from whatever is currently drawn.

In the MyView class, add a UIImage property, making sure to synthesize it.

Now at the end of your -drawRect: method, append the following code to draw the image if it is non-nil.

Add the same two import statements as earlier to your view controller, as well as a third for your MyView class.

You will also need to reference your MyView object, so connect the one you already added into the user interface to your view controller’s header file with the property customView.

Add a UIButton labeled “Snapshot” to the bottom of your user interface. Connect it to an IBAction method called -snapShotPressed:.

This method will then be implemented like so:

This method makes use of the -setNeedsDisplay method in the UIView class to instruct a UIView to re-call its -drawRect method in order to incorporate any recent changes.

Now, after testing the application again, upon pressing the Snapshot button, you should see a smaller screenshot of your own screen appear on the right side of the view, as in Figure 15–7.

Figure 15–7. Your application having taken a screenshot, then scaled it into the view

While most of the functionalities you’ve built into this application have been pretty basic, you will see a variety of them come back in more complex forms in the later, more complex image recipes.

Recipe 15–2: Using UIImageViews

The absolutely simplest way of displaying an image in your application is by use of the UIImageView class. You will start off by creating a simple application that can display an image chosen by the user, and then build on top of it to take full advantage of iOS’s image processing power.

In order to enhance the functionality of your application, you will specifically design it for the iPad, and then make use of the UISplitViewController. Create a new project, and select the Master-Detail Application template. On the next screen, after entering the project name “ImageRecipes”, make sure the application’s device-family is set to “iPad”, and that the box marked “Use Automatic Reference Counting” is checked. No other boxes should be marked, so that your dialog resembles Figure 15–8.

Figure 15–8. Configuring project settings

Upon creating your application, you will be given a nicely configured project with a UISplitViewController already set up with master and detail view controllers. If your simulator or device is in portrait mode, you will see only the view of the detail view controller, but if you rotate to landscape then you will get a nice mix of both views. You will not see both views when working in Interface Builder, but if you simulate the app, the generic view will resemble Figure 15–9.

Figure 15–9. An empty UISplitViewController

Now, you will configure the detail view controller to include a bit more content. Add a UIImageView, as well as two UIButtons to your XIB’s interface so that your simulated application will look like Figure 15–10.

Figure 15–10. A simulated view of your configured user interface

In order to make sure that both your buttons and image view will be correctly centered in your final display, first set them to the center of your XIB’s view as you normally would. Then, you will set the “autosizing” options for each element. Open up the utilities pane on the right side of your screen, and navigate to the fifth tab where you can set an element’s frame, shown in Figure 15–11.

Figure 15–11. Configuring autosizing to customize resizing behavior

Make sure that for each element, the Autosizing box, with its various red lines and arrows, is configured exactly as shown in Figure 15–11. This will specify that each element will, if the view changes, maintain its relative position to the top of the view and stretch horizontally to maintain its general position.

Connect each element to your header file using the property names selectImageButton, clearImageButton, and imageViewContent. Each UIButton will have its respective action, -selectImagePressed: and -clearImagePressed:.

You will be configuring your application to display a UIPopoverController containing a UIImagePickerController in order to allow users to select an image from their phone. To do this, you will need your detail view controller to conform to several extra protocols: UIImagePickerControllerDelegate, UINavigationControllerDelegate and UIPopoverControllerDelegate.

You will also create two extra properties in order to store your selected image, as well as a reference to your UIPopoverController that you will use. Make sure both of these are properly synthesized, as well as properly nullified in the -viewDidUnload method.

At this point, with your basic user interface configured, your overall detail view controller’s header file should resemble the following.

Now you can implement your -selectImagePressed: method to present an interface to select a saved image to display.

You can then implement your UIImagePickerControllerDelegate protocol methods to properly handle the selection of an image or cancellation.

As you can see, you configure your selected image to be displayed in your UIImageView by using the image property. You also set the contentMode property to UIViewContentModeScaleAspectFill, in order to ensure that the bounds of your UIImageView are always filled by at least most of the image.

Finally, you can implement a simple method for -clearImagePressed: to allow your view to be reset:

At this point, you can run your application, select an image, and display it in a UIImageView, as in Figure 15–12!

Figure 15–12. Your application displaying an image in a UIImageView

If you are testing this application on the iOS simulator, you will need to actually have some images saved to display. The easiest way to save images to the simulator’s photo library is to use the Safari app on the simulator, navigate to your desired image, and then click and hold the mouse on the image. You will be given an option to save the image, and after this you can use it in your application.

Recipe 15–3: Scaling Images

Often the images that your applications have to deal with can come from a variety of sources, and usually will not fit your specific view’s display perfectly. To adjust for this, you can implement methods to scale and resize your images.

You will configure your application to overall have a single image selected in your first detail view controller. Upon selecting different rows in your master view controller’s table, you will change the display in your detail view controller to a variety of images. For now, you will configure your views to display your images as they are resized differently.

You will start off by creating a method to fully adjust the content of your detail view controller. Add the following handler to your detail view controller’s header file.

You will implement this method like so:

You will add a reference to the master view controller to your detail view controller to allow your chosen image to be passed back. Add the following import statement (or your own class name for the master view controller):

Add the master view controller property, and make sure to synthesize it.

Add the following line to your -viewDidUnload method.

Next, you will add a property to your master view controller class to store the chosen image. Make sure to properly synthesize and handle it as usual.

Back in your detail view controller, you will update your -imagePickerController:didFinishPickingMediaWithInfo: method to also send the chosen image back to the master view controller.

You will also adjust the implementation of your -clearImagePressed: method accordingly.

In your master view controller, you will later implement code to utilize your images in the actual table, so you will implement a custom setter method for the mainImage property to reload the UITableView’s data.

Next, you will create two different methods to resize an image. Add the following two handlers to your detail view controller’s header file.

The first method will simply recreate the image within a specified size, completely ignoring the aspect ratio of the image.

The second will, with a little calculation, determine the best way to resize the image in order to both preserve the aspect ratio and fit inside the given size.

To make sure your view controllers are properly interacting, add the following two lines to your application delegate’s -application:didFinishLaunchingWithOptions: after both view controllers have been created.

Now, to finish configuring the behavior of the master view controller, modify the following delegate methods:

Your original image, as shown previously, ended up expanding beyond the frame of the UIImageView in order to maintain its aspect ratio. Since this can cause some issues in blocking other elements, you would most likely want to use one of your resized images. Upon running this application, you can see the quite vast differences in your options in presenting differently sized images.

Figure 15–13 displays an example of the same image used previously, but resized simply to fit within your image view’s frame.

Figure 15–13. Your application displaying a resized image without scaling

As you can see, you have managed to fit the entire image into a smaller space, ensuring that no other view elements are obstructed by your image. The issue with this option, however, is that your image’s dimensions have been changed, resulting in a slightly deformed picture. This may not be quite obvious with this particular image, but when dealing with images of people, the distortion of physical features will become quite obvious and unsightly. To solve this, you make use of the “aspect-scaled” image, as displayed in Figure 15–14.

Figure 15–14. An alternative method of scaling to remove distortion, resulting in clipping

Compared to the previous and original images, you can see that this image is clearly of higher quality, as it lacks any distortion of size. Unfortunately, since you have chosen to have your image “fill” the UIImageView, you end up with an image cropped from your original. This kind of resizing works incredibly well if you need to create small thumbnails from larger images, as the issue of cropping the image becomes fairly negligible with more miniscule sizes.

Obviously, if you are not dealing with thumbnails, but instead with presenting large pictures, then the above cropping is significantly less than ideal. You can hone your image scaling method to allow your image to “fit” the image view, and simply give the rest of the view a black background. With this change, your previous “thumbnail creation method” will no longer be functional, so be sure to save a new copy of your project if you want to keep a copy of the previous setup.

First, adjust your configuration method to the following code in order to change the contentMode property of your UIImageView.

Your image scaling method will require a slightly different method of calculation to correctly scale your images this way. The following code shows the new implementation. Pay careful attention to the fact that you have changed the CGSize with which you are creating your image context.

With the newest changes, your images can now appear scaled down in size without being clipped! By adding the black background to your UIImageView, you provide a simple backdrop for your images to go on, allowing a very general, all-encompassing functionality for displaying resized images, as in Figure 15–15.

Figure 15–15. Fitting your scaled image helps avoid clipping, but introduces background visibility of the UIImageView.

In Review

You have covered three simple yet different methods for resizing a UIImage, each with their own advantages and issues.

1. Your first method simply resized the image to a given size, regardless of aspect ratio. While this kept your image from obstructing any other elements, it ended up giving you a fair bit of distortion.
2. By using a little math, you were able to scale down your image to a size while manually maintaining the aspect ratio. The issue with this approach was that it tended to crop out parts of your image in order to fill its given space. If you need to create small thumbnails of images to be displayed together, this is a decent way to implement it.
3. After reconfiguring your aspect resizing method, you were able to display an aspect-locked, smaller image to fit entirely within your UIImageView. Since this would, of course, leave blank space around the image, you applied a black background. This is an especially useful technique to use when displaying large images in an application that has no control over the original image size. It allows for any image to be comfortably fit in a given space, yet maintains a visually appealing black background no matter the case.

Recipe 15–4: Manipulating Images with Filters

The Core Image framework, a group of classes entirely new in iOS 5.0, allows you to creatively apply a great variety of different types of “filters” to images.

Start by importing the CoreImage.framework library into your project. Navigate to your application’s Build Phases tab, and then click the + button under the Link Binary With Libraries area. In the dialog resembling Figure 15–16, find the Core Image framework, and add it.

Figure 15–16. Adding the Core Image framework to your project

Add an import statement for this framework to your main view controller’s header file.

Next add an NSMutableArray property to the same controller in order to store the filtered images you will display. Make sure to properly synthesize and handle it as usual.

This property will also need a custom getter to ensure it is properly initialized.

Now, you will modify your -setMainImage: method again to include proper handling of this array.

This method, -populateImagesWithImage:, which will contain most of your Core Image code, will be implemented as follows. Remember to place the method declaration in your header file as well.

As you can see from this method, creating a CIImage requires the following steps:

1. Obtain a CIImage of the intended input image.
2. Create a filter using a specific name key. The name defines which filter will be applied, as well as its various parameters that can be used.
3. Reset all parameters of the filter to defaults for good measure.
4. Set the input image to the filter using the “inputImage” key.
5. Set any additional values related to the filter to customize output.
6. Retrieve the output CIImage using the “outputImage” key.
7. Create a UIImage from the CIImage by use of a CIContext.

Here, you have chosen to apply two different filters: a “Hue Adjustment”, and a “Straighten Filter”. The former will change the hue of your image, while the latter is used to rotate an image to straighten it out.

Now, you can specify these newly created filtered images to your view controller by modifying your -tableView:didSelectRowAtIndexPath: method again.

As you can see, you have updated all of your displays to, instead of showing differently resized examples of the same image, show the original image with its different filters. You have adopted your third method of resizing images for all these to be displayed.

You will also update your -tableView:cellForRowAtIndexPath: to include your newest implementation.

Back in your detail view controller, you must make a few extra changes to fully configure your new functionalities.

You will adjust your configuration method to a more general case, now that you are formatting all of your display images similarly.

Finally, your UIImagePickerControllerDelegate protocol method will also require some adjustment. The new code will resemble the following:

Upon running your application now, you will be able to see the outputs of your two types of filters used.

Shown in Figure 15–17 is the example of your hue adjustment. Your chosen input angle of 3.14/2.0 will drastically change the hues of your image.

Figure 15–17. Your new application applying a hue adjustment filter

In the same application, your second filter, with its specified input angle of 3.14, will rotate your given image by 180 degrees, as is done in Figure 15–18.

Figure 15–18. Applying a straightening filter to rotate an image

You are also quite easily able to combine multiple filters in series by simply specifying the output image of one filter as the input image of another. Add the following code to the -populateImagesWithImage: method to create a combination filter.

Update your -tableView:numberOfRowsInSection: method to show a fourth cell.

Add a fourth case to your -tableView:cellForRowAtIndexPath: method to display the name of this fourth cell.

Finally, add another case, directly after the others used to set label for rows 1 and 2, to your -tableView:didSelectRowAtIndexPath: to correctly set the UILabel.

Now, upon testing the application, your new double-filter will combine the effects of your previous two, resulting in a hue-adjusted and rotated image, as in Figure 15–19.

Figure 15–19. A series combination of hue adjustment and straightening filters

Now, you will make use of your earlier resizing functionality to create a thumbnail for each filtered image, so that it can be displayed in your master’s UITableView.

Since you ended up taking your thumbnail-resizing method out of your previous recipe, here is the method again that you will use.

Make sure also to place this method’s handler in the detail view controller’s header file, so that your master view controller is able to call it.

Now, you just need to modify your -tableView:cellForRowAtIndexPath: again to include the selection of an image for the cell’s imageView. In entirety, the method should resemble the following code.

When you test your application now, your master view controller’s cells will each have a scaled thumbnail version of the larger image they refer to, as in Figure 15–20.

Figure 15–20. Your application with scaled (clipping) thumbnails

Recipe 15–5: Detecting Features

Along with the incredibly flexible use of filters, the Core Image framework has also brought to iOS 5.0 the possibility of feature detection, allowing you to effectively “search” images for key components, such as faces.

We will develop a new, smaller project to implement your new facial detection application, rather than continuing on with your previous recipe. Create a new project for the iPhone device family, making use of the Single View Application template, shown in Figure 15–21.

Figure 15–21. Creating a single view application

Once your project is created, add the Core Image framework to your project, just as in the previous recipe.

Add two instances of UIImageView and a UIButton to your view, so as to resemble Figure 15–22.

Figure 15–22. Your view controller’s XIB setup

Connect each of the elements to your view controller. Your UIButton should have the property name findFaceButton, and perform the action -findFacePressed:. Make your upper UIImageView imageViewMain, and your lower one imageViewAlt.

Next, find an image to be displayed in your application, and add it to your project. You can do this by dragging the file from the Finder into your project’s navigation pane. When the dialog for adding files appears, make sure the box marked “Copy items into destination group’s folder (if needed)” is checked, as it is in Figure 15–23. In order to properly test this application, try to find an image with an easily visible face.

Figure 15–23. Pop-up dialog for adding files into your project

Now, you can build your -viewDidLoad method to configure your UIImageView elements, as well as set the initial image to your main image view. Make sure to change the name of the image (“testImage.JPG” in the following code) to your own file name.

Finally you can implement your -findFacePressed: method to do your feature detection. You will have this method determine the location of any faces in your given image, create a UIImage from the last face found, and then display it in your alternate image view.

This method contains the following steps:

1. Acquire a CIImage object from your initial UIImage.
2. Create a CIContext with which to analyze images.
3. Create an instance of CIDetector with type and options parameters.
   1. The type parameter specifies the specific feature to identify. Currently, the only possible value for this is CIDetectorTypeFace, which allows you to specifically look for faces.
   2. The options parameter allows you to specify the accuracy with which you want to look for features. Low accuracy will be faster, but high accuracy will be more precise.
4. Create an array of all the features found in your image. Since you specified the CIDetectorTypeFace type, these objects will all be instances of the CIFaceFeature class.
5. Create a CIImage using the -imageByCroppingToRect: method with the original image, as well as the bounds specified by the last CIFaceFeature found in the image. These bounds specify the CGRect in which the face exists.
6. Create a UIImage out of your CIImage (done exactly as in the previous recipe), and then display it in your UIImageView.

Upon running your application, you will be able to detect any faces inside your images, the latter of which will be displayed in your lower UIImageView, as in Figure 15–24.

Figure 15–24. Your application detecting and cropping a face from an image

Summary

Images create our world. From the simplest of picture books that children love to read to the massive amounts of visual data transmitted around the Internet through Twitter, e-mail, Facebook, Tumblr, and every other web service, pictures and images have certainly become one of the key foundations of modern culture. As such, by learning to create, handle, manipulate, and display images in your applications, you are able to acquire a significantly greater connection with your users, imparting a more powerful emotional response and interacting with more flexibility and control than ever. From building colored shapes to displaying photographs, to even the newest iOS 5.0 additions of manipulating images, you are able to create more interesting and useful applications. The Core Image framework even furthers this ability with the addition of image filters, to create wildly different images, and facial detection software, to provide more in-depth information from your application. At this point of technological development, it seems quite fair to say that a picture being worth a thousand words is a vast understatement.