Wednesday, 28 May 2008

Flickr Groopy

The Groupie Look, originally uploaded by Me (?).

I have released the first cut of my pet mini-project that I have called Flickr Groopy.

Flickr Groopy exists because of a set of Flickr Groups called Views 25 through to Views 25000. The idea is that once one of your photos reaches 25 views you can add it into the Views 25 group. As soon as your photo reaches 50 views you remove it from the Views 25 group and add it into the Views 50 group and so on.

The group rules state that a single photo should only ever be in one Views nn group at a time. The Flickr GUI is a bit clunky for swapping pictures between groups quickly so I decided to learn PHP, CSS and the Flickr API to create a tool for viewing your photos, highlighting the photos that are eligible for promotion into the next group and providing a one click update of the groups that the photo is in.

The result was Flickr Groopy:

Flickr Groopy, originally uploaded by Me (?).

How it works:
Based on a search string the code uses the API call to get a list of the user's photos that match the search criteria.

For each photo in the response:
  • Call to get the number of views
  • Call to get the groups the photo is in
  • Find out if the photo is already in a Views nn group
  • Using the number of views and group list work out if the photo is in the correct group
  • If the photo could be added to a Views nn group then highlight the photo
If the user clicks on a highlighted photo that kicks off an Ajax call to a PHP script to switch the photo into the correct group.

It is all implemented with HTML DIV elements and some CSS fun powered by PHP and phpFlickr behind the scenes.

Current features:
  • Text search for a user's photos
  • Grid display (restricted to 16 pics for performance) of the output
  • Colour coded highlighting of pictures eligible for moving groups
  • One click group update for eligible pictures

Planned features:
  • Search for user's photos already in a Views group
  • Tag cloud to inspire searches
  • Search by Flickr set
  • Notification of photos existing in more than one group with one click fix
  • Support for the sister Faves set of groups

Known problems with the current version:

  • Internet Explorer does not render CSS the same as Firefox and Safari so I need to work out how to get the CSS to look the same on all three browsers
  • The drawing is quite slow - I have added some timing trace to the code and it shows that almost 0.6 seconds per picture is taken up with two Flickr API calls. There is not much I can do about this I am afraid. I am investigating whether I can make the calls in parallel to speed things up a bit but that involves Ajax threading and is a bit scary!
  • The page should draw before it attempts to do the lengthy photo processing - working on a prototype Ajax version of the grid rendering
  • There is a 1 second pause between clicking on an image and anything happening - also clicking on multiple pictures breaks the UI slightly as update responses get lost - need a wait icon and a way to disable additional clicks whilst a response is pending

Flickr Groopy is here: