Tuesday 6 July 2010

Part 1 of 3 - How RoomSeeker.eu integrated visual search using Pivot Viewer for Silverlight

 

In this series of 3 posts we will cover the process of adding visual search to RoomSeeker.eu integrated visual search using Pivot Viewer for Silverlight:

Part 1 – What is Pivot (this article)

Part 2 – Creating a Pivot Collection

Part 3 – Creating a custom Silverlight Pivot View application

 

RoomSeeker.eu provides details on late room availability for hotel rooms across Europe. The site is built on MVC 2.0 using ASP.NET 4.0 and supported by Microsoft BizSpark Programme. Currently the site integrates mapping and text search for users to find hotels.

As it stands the site is similar to a lot of other hotel sites, so we were looking for something to help us stand out from the crowd, so decided to integrate a Pivot collection based on the Silverlight Pivot Viewer Control into our site in the form of a visual search page, as shown below or you can try it out here.

clip_image002

RoomSeeker.eu Visual Search page

Even though the app is quite basic and probably needs a few more iterations, it’s already provided useful for queries such as:

  • “Show me all the AA rated hotels that take pets and cost less than £150 in the South East of England”
  • “Show me all beach hotels group by town in Suffolk”

 


Part  1 of 3 Introduction to Pivot

Quoting Microsoft “Pivot makes it easier to interact with massive amounts of data in ways that are powerful, informative, and fun.” The data in this case is a mixture of images and metadata associated with the image. This metadata could include:

  • How we allow the user to filter or search the information via the filter panel e.g. Number of rooms, Location, price.
  • How we group the results via the sort drop down, e.g. by city, user ratings.
  • What information is displayed in the information panel for a given image e.g. hotel description, contact details etc.
  • Collection Name provides the ability to give the collection a name and (in Silverlight) a custom logo.

clip_image002[4]

Once we’ve created a collection we can then view the collection via a Pivot Viewer, currently Microsoft offers two viewers:

WPF Client (via getpivot.com ) This only works on Windows 7 or Vista, requires .NET 3.5 SP1 and IE8, but once installed you can browse many public pivot collections including our e.g. for rooms in the east of England past the following into the navigation bar http://roomseeker.eu/content/pivot/v2/e/collection.cxml

Pivot Viewer for Silverlight Control – Developers can use this control to embed Pivot collections into their Silverlight applications / websites on both Windows and Mac devices.

Note: As a Pivot Collection is just a few XML files mapping to deep zoom collection I wouldn’t be surprised to see clients for other devices (we already have the excellent Seadragon, a deep zoom client, on the iPhone) and perhaps a HTML 5 client making use of the hardware acceleration of IE9?

 

This is part 1 of a 3 part series:

Part 1 – What is Pivot (this article)

Part 2 – Creating a Pivot Collection

Part 3 – Creating a custom Silverlight Pivot View application

No comments: