{Re}Search timeline - How I Built This

Dec, 2012

Demo site coming soon..

Another proof of concept and another interesting way of viewing images. Checkout my previous yearinimages.com post. The idea behind Yearinimages was to provide a very eye candy way of representing the best images of 2011. But unfortunately mosaic layout provides no sense of navigation. {Re}search project was my attempt to avoid this pitfall of navigation while still holding the visual way of presenting data with images.

The idea behind this POC is to provide the user a timeline based navigation of events. For example, when you search Japanese Earthquake or Oscar awards which when viewed as a timeline of events, would provide more visual perspective than just displaying a grid of images.

So how did I build this? Well, I used Gettyimages connect API to extract event and image information and Timeline plugin by verite for building the timeline. Addition to above api's and plugins there were quite a few hacks that was required to make this happen. Following is how I did it:

Extracting the event information:
Thou gettyimages connect API provides the search by personality , keyword and search phrases unfortunately it only provides limited refinement options on events. Basically it's not possible to get a list of events similar to the one the gettyimages website provides like following screenshot:

I do believe that the refinement can be customized per customer basis with connect API but I am not sure. Anyways, for extracting the list of events for a particular search I screen scrapped from gettyimages.com website. Following is code snippet of screen scraping using WATIN ui automation framework:


    using (var _browser = new IE("http://www.gettyimages.com"))
{
 topCelebs.ForEach(s =>
 {
  var keywordEvent = new Keyword();
  keywordEvent.Term = s.Trim().ToLower();

  _browser.TextField(Find.ById("txtPhrase")).Clear();
  _browser.TextField(Find.ById("txtPhrase")).TypeText(keywordEvent.Term);
  var editorialChkfield = _browser.CheckBox(Find.ById("cbxEditorial"));

  if (!editorialChkfield.Checked)
   editorialChkfield.Click();

  _browser.Button(Find.ById("btnSearch")).Click();

  if (_browser.Link(Find.ById("ctl00_ctl00_ctl11_gcc_mc_re_flEvent_lnkSeeMore")).Exists)
  {
   _browser.Link(Find.ById("ctl00_ctl00_ctl11_gcc_mc_re_flEvent_lnkSeeMore")).Click();
   _browser.Div(Find.ById("ctl00_ctl00_ctl11_gcc_mc_re_flEvent_refinementContent")).WaitUntilExists();

   var filterContentDiv = _browser.Div(Find.ById("ctl00_ctl00_ctl11_gcc_mc_re_flEvent_refinementContent"));
   var eventIds = new List();

   foreach (var link in filterContentDiv.Links.Filter(Find.ByClass("refineItem")))
   {
    var splitList = link.OuterHtml.Split('\'');

    if (splitList.Length > 2)
     eventIds.Add(int.Parse(splitList[1]));
   }

   //do something with captured eventId's like save to DB
  }
 });
}

Now that we have list of event ids screen scrapped we can use gettyimages connect to get event details for displaying on UI. Following is code snippet to call connect API using my connect API library (its nothing but a helper library to call the connect API rest service)


    //get 50 events at a time instead of making individual calls to Connect API
for (int i = 0; i < eventIdList.Count; i = i + 50)
{
 var geteventRequest = new connectSv.GetEventsRequestBody();
 geteventRequest.EventIds = eventIdList.Skip(i).Take(50).ToList();

 var eventResponse = operations.GetEventInfo(geteventRequest, session.TokenResponse.Token);

 if (eventResponse != null && eventResponse.ResponseHeader.Status.Equals("success"))
 {
  eventResponse.GetEventsResult.Events.ForEach(ev =>
  {
   // save event information to DB
  });
 }
}

Setting up timeline ui:
Now that we have list of events we need to convert it to the format the timeline plugin expects. Timeline plugin takes json as its data source. I used json2csharp.com site to convert the sample json format that timeline github page provided to c# data model that can be used code behind. I used json.net to convert the timeline c# object to json string. Code snippet for converting event list to timeline object.


    var timeLine = new Timeline();
timeLine.headline = "{Re}Search - Images from GettyImages";
timeLine.type = "default";
timeLine.text = "<form class='form-wrapper cf' style='top:35%;position:absolute;'>" +
    "<input type='text' id='autoCompleteInput' placeholder='Search here...'>" + 
    "<button type='submit'>Search</button>" + 
    "</form>";

//provide a default start date
timeLine.startDate = "2010,12,29"; 
timeLine.date = new List<Date>();

var eInfos = GetEvents(); 

eInfos.ForEach(e =>
{
 if (e.StartDate > DateTime.MinValue && e.EventId > 0)
 {
  timeLine.date.Add(new Date()
  {
   startDate = e.StartDate.ToString("yyyy,MM,dd"),
   headline = e.EventName,
   eventId = e.EventId,
   text = string.IsNullOrEmpty(e.Description) ? e.EventName : e.Description,
   asset = new Asset()
   {
    //media = e.RepresentativeImageId,
    thumbnail = e.RepresentativeImageId,
    caption = e.EventName,
    credit = "GettyImages"                           
   }
  });
 }
});

Note that the hard-coded html in timeline.text property is to provide a autosuggest capability for user. The code above is just for demo purpose's to show that timeline plugin is capable of taking in Html as part of it's json data. Html rendering of the above code:

At my 1st iteration, I hooked up the events to default timeline functionality. But what I would like is to allow users to click on an event and display all images associated to that event. Since this is a custom functionality some hacks to timeline code had to be done. Like the following:
- Associating eventID to the event timeline div so when timeline is clicked the code can determine which eventID it's referencing too
- Adding a Ajax loading gif to every event
- Upon sliding to an event, do Ajax call to server to get images associated to that event
- Display the images when Ajax call is completed
- Show image information when clicked

Framework, plugins, API used:
- jQuery 1.7.1
- jQuery light box
- wookmark jQuery plugin
- Timeline by Verite.Co
- .net framework 4.0/mvc3
- Newtonsoft json.net
- WATIN ui framework
- json2csharp.com for converting the template json to c# object
- gettyimages connect API