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.

PouchDB on PhoneGap

PouchDB is a portable database that uses IndexedDB for storage on the client. This post demonstrates how PouchDB can be used in a Phonegap (Cordova 2.2.0) based application for storing data, and syncing it to a remote couch server - https://bitbucket.org/axemclion/pouchdb-phonegap-ios/src

I had written about using Jquery-IndexedDB as a local database solution on Cordova(Phonegap) for iOS and Android, and how it was done using the IndexedDBShim. This post extends the idea and shows how pouchdb can be used on an iOS based Phonegap application.
The enables the ability to replicate data on a remote server using a simple function call. This would effectively mean that the phonegap application can work when a device is offline, collect and work with data, and finally sync back to the server when it comes offline. Syncing to the server is one of the most common problems for mobile applications, and this example can solve it in a very simple way. In addition, the same code can also be used for desktop browsers too.
With the IndexedDBShim, most of the PouchDB functionality is supported by simply adding IndexedDBShim.js file to the main HTML file. To understand the example, you can look at www/index.html. The file include pouch.alpha.js and the IndexedDBShim.min.js. It then uses the pouchdb functions like create and delete documents.

Note that pouchDB does not allow IndexedDB databases to be created on localhost, and this had to be disabled in the generated pouch.alpha.js file. Also, to enable replication, the "External Hosts" in Cordova.plist was set to "*". Like mentioned in the previous post, the first call to IndexedDB should be made only after a timeout (in this case, a user click) to allow time for the shim to do the housekeeping. 

Here are some screenshots from the example (sorry for the bad UI)

                     

Looking at the Safari Remote Debugger, here are some screenshots

 

and here is the WebSQL database that the IndexedDBShim populates

Note that deleteDatabase method is not yet supported in the IndexedDBShim. Hence, if you hit that button in this example, you may have to delete and restart the application to get it working again.

To run this example, simply clone the project at and open the xcode file.To start this in your project, you would just have to include the IndexedDBShim file in addition to the pouch file. Let me know any questions you may have, or issues when integrating in your project, in the comments below.