OpenCV in iOS – An Introduction

Hello World! This is my first official blog post related to Computer Vision. I guess the title gives you the glimpse of what we are trying to achieve in this session.

What is OpenCV?

OpenCV is an open sourced BSD licensed computer vision library which is available on all major platforms (like Android, iOS, Linux, Mac OSX, Windows) and is primarily written in C++ (with bindings available for Python, Java and even MATLAB). You can check the documentation of OpenCV at http://docs.opencv.org.

In this session, we are trying to design a basic iOS app which uses OpenCV for the image processing part of the app. I will be using the XCode v7.2.1 and OpenCV v2.4.13.

  1. Download opencv2.framework from the following link. Unzip the downloaded file and keep it in your workspace.
  2. Now open Xcode and start the new project by clicking on ‘Create a new Xcode project‘ in the left column of the following image.

    Screen Shot 2016-07-21 at 6.04.27 pm

  3. This will take you to a new window where you can select the template for your new project. Make sure that you select the ‘Single View Application‘ under the iOS -> Application and click ‘Next‘.

    Screen Shot 2016-07-21 at 6.11.46 pm

  4. Choose the name you want to keep to the application and fill it in the ‘Product Name‘. Choose the ‘Language‘ as Objective-C and ‘Devices‘ as Universal. Now click ‘Next‘ and choose the location of your workspace and click on ‘Create‘. From now onwards, I will refer to the project folder location as <project_folder>.
  5. Now move the unzipped version of opencv2.framework to “<project_folder>/” . Now go to settings of your Xcode project and select General -> Linked Frameworks and Libraries -> click on ‘+’ sign (to add a new framework to the project) -> Click on ‘Add Other…’ -> browse to “<workspace>/<project_folder>/opencv2.framework” -> Select it and click ‘Open’. Now your project navigator area will look like this.

    Screen Shot 2016-07-23 at 10.51.06 am.png

  6. In this tutorial, we will be using Objective-C and C++ to design the app. For this task to achive we have to rename ‘ViewController.m‘ file to ‘ViewController.mm‘. This simple name convention will notify Xcode that we will be mixing Objective-C and C++.

    Screen Shot 2016-07-23 at 11.01.45 am.png

  7. Now lets start the Coding part 🙂 ! Right now, your ‘ViewController.mm‘ file should look like this.

    Screen Shot 2016-07-23 at 11.08.36 am

  8. Now add the following code, so that we can mix C++ code in here.

    Screen Shot 2016-07-23 at 12.42.24 pm

  9. Let us setup the view.

    Screen Shot 2016-07-23 at 12.44.33 pm

  10. Now let us implement the ViewController part. We have to setup the imageView such that it takes the entire App screen. Let us also add a small part of code to correct the aspect ratio of the image.

    Screen Shot 2016-07-23 at 12.55.33 pm

  11. Now add our imageView as a sub view.

    Screen Shot 2016-07-23 at 1.04.24 pm

  12. Before moving to next part, copy an image of your choice to “<workspace>/<project_folder>/” location and go to project navigator area in Xcode and select ‘Supporting Files‘ and click on ‘Add Files to “<your_project_name>”… ‘. Navigate to <project_folder> location and select the image and click on ‘Add‘ button. You can find the image under the ‘Supporting Files‘ folder.

    Screen Shot 2016-07-23 at 1.07.06 pm

  13. Now, let us write code to read the image and display it on the screen. If the image file is not present, let us display some error message.

    Screen Shot 2016-07-23 at 1.20.16 pm

  14. Let us run the application and see the results. I am using iPhone 6s Plus emulator to check my results. Voila! it worked 😀 (I am attaching the screenshot of the emulator). If it didn’t show anything on the screen you can check the messages in the Debug area of Xcode.

    Simulator Screen Shot 23-Jul-2016 1.25.01 pm

  15. But wait, we didn’t use any OpenCV functionality till now! Before applying any of the OpenCV functions we have to convert the image from UIImage to OpenCV’s Mat datatype. And for displaying the image on the screen we have to convert from Mat to UIImage again.
    1. Convert the image from RGB to Grayscale:

      This slideshow requires JavaScript.

    2. Apply Gaussian Blur to the above Grayscale image: (you can observe the blurred version of the above result here)

      This slideshow requires JavaScript.

    3. Apply Canny Edge detection on the above result:

      This slideshow requires JavaScript.

       

With this we are coming to an end of the very first tutorial of ‘OpenCV in iOS’. The SOURCE CODE for the following tutorial is available at the following GITHUB LINK. I hope you enjoyed this tutorial. 🙂

Where to go next?
After this tutorial, you can check my next blog post about how to use the camera inside your app using OpenCV’s CvVideoCameraDelegate at OpenCV in iOS – The Camera.

3 thoughts on “OpenCV in iOS – An Introduction

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s