Pics With Friends

Pics with Friends was an iOS application developed for the Photo Hack Day 3 2012 and won the First Prize.

The PhotoHack Day 3 was held on July 14 and 15, 2012 at the DropBox HQ. I team up with Sean and Art for the event. The theme of the hackathon was to create an application that was centered around photos, and we created pics with friends.

Pics with Friends is a mobile guessing game that lets a user take a picture, and ask a friend to guess what it is. The picture has various filters applied to it, making the guess harder. The images below is the typical workflow.

Game Concept:
This is the welcome screen, where a user is asked to connect using Facebook. Facebook auth is required since you invite your facebook friends to play with you. Nothing is posted on the wall without approval. After authentication, you see the list of active games, or can start a new game with a friend.

If it is your turn in the game, you are required to select a picture. This can be a picture using the camera, or something from the album. Once a picture is taken, you can give it a caption, the single word that your friend is required to guess.

This picture is sent to your friend, and they now need to guess the caption you gave it.To spice up things a little bit, the picture has a set of filters applied to it; these filters make it hard to recognize the picture.

Users can peel filters, one at a time, but will lose points everytime they peel out a filter. Once the caption is guessed, the friend can challange you back.

 

The game itself is simple, but the fun starts when you are outdoors and start clicking pictures and ask their friends to guess. The filters make it fun, since they transform a familiar place to something you could not recognize.

APIs Used:
Since it was a hackathon, we could use some really cool APIs.

• We used FlashFoto APIs to store out images, and do some initial processing like cropping and rotation
• Aviary filters were used to apply the bizzare filter effects. 
• The beautiful sample images were from 500px. 
• Facebook Open Graph for friends, and optionally post those pics and guesses to your FB timeline. 

Press

• https://developers.facebook.com/blog/post/2012/07/25/photo-hack-day-winner/
• http://thenextweb.com/dd/2012/07/18/san-francisco-showed-photo-hack-day-love-as-300-developers-churned-out-70-hacks-in-24-hours/
• http://www.youtube.com/watch?v=23kffX82imM
• http://allfacebook.com/photo-hack-day-3-pics-with-friends_b95141
• http://youthenter.blog.com/2012/07/25/facebook-photo-hack-day-winner/

Its been a while since we worked on it, but we have plans to continue working on it. Would love you hear your suggestions, etc. Do you think you would play this game ? 

Introducing - Jasmine tests on Grunt using Saucelabs

The Grunt plugin for Jasmine(1.3.0) tests on Saucelabs services 

https://npmjs.org/package/grunt-saucelabs

For using it in your project, see the README

A few posts ago, I had written about a grunt plugin for running qunit tests on cloudified Saucelabs browsers. This is an open source that I worked on (would have loved to work on it in exchange for some Saucelabs goodies :P) to change the pouchdb build system. One of the comments to that post was by the author of the awesome IndexedDB library called db.js, and I volunteered to migrate db.js to a similar mechanism.
The tests for db.js were basically run using an node-express server. The express server basically converted the index.jade file to a HTML file that could run jasmine tests.
Since most of the code for integrating with saucelabs was the same, I decided to enhance the grunt-saucelabs-qunit plugin to include this too. As a result, I renamed (never rename a project !!) to grunt-saucelabs, a generic grunt interface to run tests on saucelabs, and moved it to a new location. I also created a new npm package, and all dependents are now using this. I will soon be deprecating the older package.
The jasmine tests are very similar to the qunit tests - the same process of setting up a tunnel to the local server, loading the pages, and waiting for an element to indicate a success or a failure. The only difference was the actual element, which was a class with name 'alert'.
Using it is very similar to using qunit tests, it takes the exact same parameters. With the Jasmine tests now running on grunt, here is how the new build system for db.js looks like. You may notice that the express servlet is gone, and grunt-jade converts the jade files to their HTML format.

For next steps, I am looking at ways to expose the actual test URLs to the grunt file tasks so that the callbacks could use those for reporting. Watch out this space for more updates on this project.