Presenting Peekaboo

Today, we presented our final year design project, Peekaboo, to the University of Waterloo. I thought it was only fair that I post it online on the same day as well.

Peekaboo is an iOS app that lets you find out more about people around you. It accomplishes this by using facial detection and recognition. Simply snap a picture and Peekaboo tries to find out who the people in it are. You can login to the app using Facebook, and it goes through your tagged Facebook photos to create a model of your face. Don’t have or don’t want to connect with Facebook? Peekaboo can train you using your phone’s front-facing camera.

Watch the short video

I thought a video would explain it better than words can. This was taken on my iPhone 4S and recorded using AirPlay. It’s a slightly old build.

The idea

We started with the idea of wanting to know more about people in university. If you think about it, there are 10,000 like-minded students in a university campus but I only know 0.01% of them, due to a random moment that made me meet them. That 0.01% is responsible for most of the joy and friendships that I have created in the last 4 years. So what if this 0.01% was larger? We felt that there should be a better way of knowing more about people around you, so that you can meet more like-minded individuals. Is Peekaboo the right approach? I’m not totally sure, and it certainly has polarizing aspects, but it sure was fun to make.

The technology

I mentioned how I designed Peekaboo’s system architecture in an earlier post. Some things have changed since then. We found face.com provided us improved facial recognition and had a faster execution time, so we went with that. This allowed us to simplify a lot of the code on the C++ side, effectively making the system a combination of the iOS app and a Node.js server on Heroku that acted as an API that linked to the various services, Parse and Face.com.

I was responsible for coding the majority of the Node.js server and the iOS app. My goal throughout this process was to become proficient with Objective-C and the iOS SDK and I think I’ve got close.

Some pictures

Here are some screenshots and Instagrams of Peekaboo and the design symposium.

Apple’s Philosophy

From a recent interview with Jonathan Ive of Apple:

Something I found very interesting was Ive’s response to the question,”When you are coming up with product ideas such as the iPod, do you try to solve a problem?”

His reply:

There are different approaches – sometimes things can irritate you so you become aware of a problem, which is a very pragmatic approach and the least challenging.

What is more difficult is when you are intrigued by an opportunity. That, I think, really exercises the skills of a designer. It’s not a problem you’re aware of, nobody has articulated a need. But you start asking questions, what if we do this, combine it with that, would that be useful? This creates opportunities that could replace entire categories of device, rather than tactically responding to an individual problem. That’s the real challenge, and that’s what is exciting.

Now this is fascinating for me, because we are taught to always ask the question, “What’s the problem that this is trying to solve“, when designing or developing something new. Ive says revolutionary products come when you ask “What can we do with this?“.

Get absolute position of a UITableViewCell

Here’s something that helped me when I was working with WEPopover to implement a popover in my iPhone app a la the iPad.

If your popover is being instantiated from a UIViewController with a UITableView in it that does not fill up the whole window, then you may have some issues getting the popover to align properly.

To get the alignment to work, you need to get the UITableViewCell‘s absolute position on screen.

You can achieve that through the following code:


CGRect rectInTableView = [tableView rectForRowAtIndexPath:indexPath];
CGRect rectInSuperview = [tableView convertRect:rectInTableView toView:[tableView superview]];

And then…

[self.popoverController presentPopoverFromRect:rectInSuperview
inView:self.view
permittedArrowDirections:(UIPopoverArrowDirectionUp|UIPopoverArrowDirectionDown|
UIPopoverArrowDirectionLeft|UIPopoverArrowDirectionRight)
animated:YES];

Thanks to Nick Weaver at this StackOverflow question for explaining this. Took some finding.