iPhone, HTML5, Flash, Game Design and Interactivity
September 2nd, 2012

Easy Face Detection with iOS5

Face detection is something I’ve been interested in for a while now. Previously to get it working on the iPhone we had to use Open CV but with iOS5 Apple have included native face detection as a part of the Core Image framework. It’s very simple to get FD up and running without any fuss, as I’m going to show you in this tut, and there’s a whole lot more you can do with it such as eye and mouth detection and hooking it up to a video stream from the camera. However to keep it simple I’m going to detect a face from an image that’s already in the app.

So here it is, one simple method. First we need to convert our image into a CIImage. Then we create a CIDetector and parse our image into it. The CIDetector returns an array of all the face features contained within our image. Then we run a for loop to cycle through and extract the faces. Now we can get the frame of each face and do whatever we like with it, I’m putting a black border around it and then adding an image of a cat over the top. In the example code I’ve added a UIButton that toggles the cat on and off. Don’t forget to import CoreImage. Simple. Download the example project here



-(void)detectFacesFromImage:(UIImageView*)aUIImageView{
    
     
    CIImage* image = [CIImage imageWithCGImage:aUIImageView.image.CGImage];
    
    
    CIDetector* detector = [CIDetector detectorOfType:CIDetectorTypeFace
                                              context:nil options:[NSDictionary dictionaryWithObject:CIDetectorAccuracyHigh forKey:CIDetectorAccuracy]];
    
    NSArray* features = [detector featuresInImage:image];
    
    for(CIFaceFeature* faceFeature in features)
    {
   
    UIView* faceDetectView = [[UIView alloc] initWithFrame:faceFeature.bounds];
    
        //create a border around the detected face
    faceDetectView.layer.borderWidth = 1;
    faceDetectView.layer.borderColor = [[UIColor blackColor] CGColor];
    [self.faceView addSubview:faceDetectView];
        
    //place cat over the face
    self.catFaceView.frame = faceFeature.bounds;
        
    }
}

May 11th, 2012

Multithreading and Concurrency On The iPhone, the easy way

iPhone developers seem to treat concurrency as a dark art, secret knowledge that only a select few can handle. The forums are full of responses frightening people about the complexity of multithreading, when there’s generally a simple solution that solves the problem.
I’m no computer scientist, and I don’t pretend to know a lot about the low level goings on when it comes to concurrency. I do however know that I don’t want my UI locking up when I make a webservice call, and I want a simple solution that will do this.
So in the spirit of getting shit working the quick and dirty way here’s a simple solution that I use for handling multiple threads. Specifically when loading/parsing a bunch of data in the background without the UI locking up.

-(void)loadSomeReallyLargeFile {
	
	NSOperationQueue *queue = [NSOperationQueue new];
	
	NSInvocationOperation *operation = [[NSInvocationOperation alloc] initWithTarget:self 
																			selector:@selector(loadDataWithOperation) 
																			  object:nil];
	[queue addOperation:operation];
	[operation release];
}

- (void) loadDataWithOperation {
    
	//instantiate and run your XML/JSON load and parsing classes here
	// everything that happens here is running on a secondary thread
	
	//trigger a method on the main thread when everything's done
	[self performSelectorOnMainThread:@selector(doStuffOnMainThread) withObject:nil waitUntilDone:YES];
}

-(void)doStuffOnMainThread{
    
    //reload a your table, display the loaded data or whatever
    
}

First thing to do is create an NSOperationQueue, it takes care of all of threads for us. Then create an NSInvocationOperation, this is essentially our thread, we parse it an initial method to run on the thread. Then simply add the operation to the queue. This method will now run on a sperate thread to the UI and we can instantiate our JSON or XML parser, and after that trigger a function on the main thread by calling performSelectorOnMainThread and setting waitUntilDone boolean to YES.
Concurrency done!

December 1st, 2011

NSNotificationCenter Tutorial

So I come from a Flash background (I know, I know) and one of the things I really like about coding in AS3 is the event based system. AS3 allows custom events that bubble through the hierarchy of objects and only those objects listening to the event need respond. It’s very elegant solution that conforms to the autonomy of classes in OOP design.
Obj C has a similar solution, or at least I use it in a similar way. It’s called NSNotification and we use the NSNotifictionCenter to add observers to listen for notifications. Notifications essentially being events and the NSNotificationCenter is a singleton object that manages all the Notifications.

- (void)viewDidLoad
{
    [super viewDidLoad];
    NSLog(@"view did load");
	// Do any additional setup after loading the view, typically from a nib.
    [[NSNotificationCenter defaultCenter] addObserver:self selector:@selector(shitWorkedBitches) name:@"myEventBitches" object:nil];
    
    [[NSNotificationCenter defaultCenter] postNotificationName:@"myEventBitches" object:nil];
}

-(void)shitWorkedBitches{
    //[[ NSNotificationCenter defaultCenter]removeObject:self];
    [[NSNotificationCenter defaultCenter] removeObserver:self name:@"mySelector" object:nil];
    NSLog(@"Shit worked yo");
}  

There’s three important steps:
1. Create the observer to listen for the notification (event) to happen.
2. Post the notification when our event happens.
3. remove the observer when we no longer need it.

1.I’ve done everything in the viewDidLoad method.
Create the observer by adding “self” as the new observer, pass in a function name as the selector. Then pass in a string as the name of the notification the NotificationCenter listens for: @”myEventBitches”.
2. Post the notification by passing the notification name to the postNotificationName method.
3. Create the method we want to trigger, remove the observer and do something…

So there it is, quick and dirty.
What we’ve done here is create a custom notification. There are some other options that allow you to parse params and you’ll notice there are many internal notifications used by iOS frameworks, the MPMediaPlayer framework comes to mind.

November 6th, 2011

Creating a Map Based Application on the iPhone Part 2

The next thing I’m going to go through is how to push a new view onto the stack when the user taps the annotation’s call out button. This is relatively straight forward with one annotation, but is a little bit more complicated when it comes to multiple annotations that have all been created dynamically. In this tutorial we’re just going to start out with one and then move onto multiple annotations in the next one. As with all my tutorials you can download the final project to play around with. I’ve also included a second project download mid way through, just because this is a long tutorial.

The first thing we need to do is take a step back and pull apart what we’ve done so far by adding in a Navigation View Controller. Without the navigation controller we won’t be able push and pop the UIViews in and out.

Step 1.
Create a new file, a UIViewController subclass, make sure you have “with Xib for user interface” selected and name it MapNavViewController.

Step 2.
Open the MapNavViewController and make it extend UINavigationController:

#import <UIKit/UIKit.h>


@interface NewsNavViewController : UINavigationController {
    
}

@end

Step 3.
Now we need to update the update our application delegate to load in the navigation controller. Open the MapKitTutorialAppDelegate.h file and get it looking something like this:

#import <UIKit/UIKit.h>
@class MapKitTutorialViewController;
@class MapNavViewController;

@interface MapKitTutorialAppDelegate : NSObject <UIApplicationDelegate> {
    IBOutlet MapNavViewController *mapNavViewController;
}

@property (nonatomic, retain) IBOutlet UIWindow *window;
@property (nonatomic, retain) IBOutlet MapNavViewController *mapNavViewController;
@property (nonatomic, retain) IBOutlet MapKitTutorialViewController *viewController;

@end

Read the rest of this entry »

October 16th, 2011

My Two Latest Apps Just Went Live On The App Store

Things have been pretty quiet here on the blog over the last couple of weeks, mainly because I’ve been flat out working on some client iOS projects. I’m happy to say that two of these apps are now live on the app store and I’ll be writing some complimentary tutorials in the coming weeks explaining how I went about developing them. In the mean time check them out:

Taggr (free)
Taggr allows users to view, find, geo-tag and upload images of street art from around Sydney and Melbourne.

Sound Summit 2011 official iPhone app (free)
Sound Summit is an annual music festival in Newcastle, Australia. It showcases independent and innovative music from Australia and the world.

September 22nd, 2011

UITextViews can automatically detect URLs and phone numbers

Quick tip: Everyone knows that when you create a UITextView in Interface Builder you can easily switch it to automatically detect URLs, but recently I was looking for the code to do this dynamically and all I code find was a 15 line REG EX. So here’s how to set text fields to dynamically detect URLs natively in UIKit:

//allows your textView to detect all types
myTextView.dataDetectorTypes = UIDataDetectorTypeAll
//or if you just want links use: UIDataDetectorTypeLink
//or just phone numbers use: UIDataDetectorTypePhoneNumber

So that’s it, nice and simple.

August 18th, 2011

Creating a Map Based Application on the iPhone Part 1

Everybody seems to want a map based mobile application these days. It’s like the late 90s all over again but with mobile devices instead of Netscape. So to lighten my work load a bit I’m going to show you how to go about making your own, and a few tricks I’ve learnt along the way.

I’m not going to go into detail on how to hook up the IBOutlets or add frameworks to your project, so if you don’t know how to do that this tutorial might be too advanced. Apple have some great sample code for working with the MapKit framework, so as well as doing this tut I suggest you download Apple’s example from here.

I’ve included the project files with this tut at the end, so feel free to download and have a play around. In this tut we’re going to get a map view displaying an annotation (pin) on the map and a map callout popping up with some text on user tap.
The first thing we want to do is create a new view based application in the XCode templates. I’ve called mine MapKitTutorial. We need to add the MapKit framework to our project, this is a very important step and very easy to overlook (trust me, I’ve spent a fair share of hours banging my head against the table). So in your Build Phases under Link Binary With Libraries add MapKit.framework. Now open the MapKitTutorialViewController.h file, the view controller that is visible when the app loads, and get it looking something like this:

#import <UIKit/UIKit.h>
#import <MapKit/MapKit.h>

@interface MapKitTutorialViewController : UIViewController <MKMapViewDelegate> {
    MKMapView *mapView;
    NSMutableArray *mapAnnotations;
}

@property (nonatomic, retain) IBOutlet MKMapView *mapView;

@end

Read the rest of this entry »

July 24th, 2011

Transparent Video On The iPhone, It Can Be Done… With Flash!

The creative for a client project I worked on recently involved several video loops of actors shot on green screen. The videos needed to overlap, so the actors didn’t look like they were in discreet spaces, but in one seamless environment. The problem with this creative was that the iPhone SDK doesn’t include a video codec with alpha channel (ie animation codec with millions of colors +). I’m not aware of all the CODECs that are allowed but I have used .H264 and also .mov with PhotoJPEG.
I played around with using PNG image sequences in a UIView animation sequence, but the file size was an unacceptable 400MGs. I also had a look into some of the more complex aspects of AVFoundation using AVVideoCompositions with two layers, one for the video, and another for a video with a solid color representing the transparency. The idea was to then extract the color out, turning it into a transparent layer and combinig the layers back into a composition. However I wasn’t even sure if this would leave me with video with a transparent layer outside of the AVComposition, that could be placed on a PNG background, so I’d still be left with the same problem. It then occurred to me to test out Adobe’s AIR 2.7 for the iPhone to export using an .flv. It sounded crazy and I didn’t think it was going to work, but to my surprise it did.
Read the rest of this entry »

July 19th, 2011

Video On The iPhone Tutorial Part 4, using AVQueuePlayer to play a series of videos in sequence

AVQueuePlayer allows you to queue up a “playlist” of videos which are then automatically played one after the other. You can also set up a Notification to listen for changes in the AVQueuePlayer’s AVPlayerItems and then build custom code to repeat, skip or add new video items to the queue.
This tut follows on from the previous example Part 3 (Before you start, make sure you add the AVFoundation.framework to your project, otherwise it won’t work, it has been added to the example project), I’ve started with a view based project from the XCode default projects. Here is the .h file of the view:

#import <UIKit/UIKit.h>
#import <AVFoundation/AVFoundation.h>
@class AVPlayerDemoPlaybackView;

@interface AVFoundation_Test3ViewController : UIViewController {
    AVQueuePlayer *queuePlayer;
    IBOutlet AVPlayerDemoPlaybackView  *mPlaybackView;
}
@property (readwrite, retain) AVQueuePlayer *queuePlayer;
@property (nonatomic, retain) IBOutlet AVPlayerDemoPlaybackView *mPlaybackView;

- (void)observeValueForKeyPath:(NSString*) path ofObject:(id)object change:(NSDictionary*)change context:(void*)context;
@end

Read the rest of this entry »

July 18th, 2011

Video On The iPhone Tutorial Part 3, playing multiple videos simultaneously

I come from a Flash background and something I’m use to doing a lot of in Flash is creating video walls (playing several videos at the same time). There are a lot of situations where you might want to do this, say having multiple video thumbnails playing, or a main video with another “talking head” video composited over the top, a video wall, and for all kinds of creative, arty and special effects. For a recent client project I had to do exactly this. Initially I thought this was going to be an easy job, just smash out a few MPMoviePlayers, feed them some video and job done. But it wasn’t to be that easy, there is no way of playing multiple videos at the same time using MPMediaFramework, I really wish there was, but there’s not.
So to solve this problem we have to dig a bit deeper and use the AVFoundation Framework. It’s a lower level framework that’s used to develop Final Cut Pro and iMovie, but don’t let that scare you. In this tutorial I’m going to show you a quick and dirty way of getting multiple videos playing with the least amount of effort. I’ve included the working files at the end. This tut follows on from part 2 that can be found here

(Before you start, make sure you add the AVFoundation.framework to your project, otherwise it won’t work, it has been added to the example project)

Start by creating a view based application from the XCode default templates as we have in the previous examples and get your .h file looking like this:

#import <UIKit/UIKit.h>
#import <AVFoundation/AVFoundation.h>
@class AVPlayerDemoPlaybackView;
@class AVPlayer;

@interface AVFoundation_Test3ViewController : UIViewController {
    AVPlayer* mPlayer;
    AVPlayer* mPlayer2;
    IBOutlet AVPlayerDemoPlaybackView  *mPlaybackView;
    IBOutlet AVPlayerDemoPlaybackView  *mPlaybackView2;
}

@property (readwrite, retain) AVPlayer* mPlayer;
@property (readwrite, retain) AVPlayer* mPlayer2;
@property (nonatomic, retain) IBOutlet AVPlayerDemoPlaybackView *mPlaybackView;
@property (nonatomic, retain) IBOutlet AVPlayerDemoPlaybackView *mPlaybackView2;

- (void)observeValueForKeyPath:(NSString*) path ofObject:(id)object change:(NSDictionary*)change context:(void*)context;

@end

Read the rest of this entry »

This work is licensed under GPL - 2009 | Powered by Wordpress using the theme aav1