Part 3 of 3 - Creating a Custom Silverlight Pivot View application

 

This series of articles cover the process from concept to release of how RoomSeeker.eu integrated visual search using Pivot Viewer for Silverlight:

Part 1 – What is Pivot?

Part 2 – Creating a Pivot Collection

Part 3 – Creating a custom Silverlight Pivot View application (this article)

---

Part 3 of 3  Pivot View Silverlight App, Deployment and Summary

Create Silverlight Pivot App

The screen shot below shows how we’ve integrated a Pivot collection based on the Silverlight Pivot Viewer Control into our site in the form of a visual search page, you can try it out here.

RoomSeeker.eu Visual Search page

The app is a simple host for the Pivot Silverlight Control, with the addition of some buttons in the top right to select the collection ( East, South East, South West England etc.) and a back button in the left hand side to enable the user to see a previous query.

When the user zooms in we’ve added two custom buttons in the top right hand corner

• Hotel Rates & Availability – Navigate the user to hotel info web page
• Hotels nearby – Navigate user to hotels for the given tow (Histon in this case)

 

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”

 

Future improvements:

• Deep linking – Currently I cannot share links via social networks e.g. click here for a list of golfing hotels in Suffolk
• Browser navigation button integration – Make use of browsers back and forward buttons to flip between filters.
• Dynamic pivot collections to overcome regional search limitations e.g. “Show me all hotels in England with golf courses”
• Silverlight hotel information pages, rather than navigating to a separate web page
• Analytics
• Improved search panel
• Custom loading page – % loading plus some help
• Help for first time user, online video help (would be good if Microsoft had an intro to Pivot video we could embed in the app)
• Use of MEF for custom search / branding options

Issues: Even though the app doesn’t do a lot the Pivot control and it’s dependences (including System.Xml.Serialization) result in a 800K xap file (2.5MB unzipped!). I’m sure this could be reduced by removing the decency on the Silverlight 4 Toolkit (April 2010).

 

 

Deployment

Creating the deep zoom images is very CPU/IO intensive so these tasks were performed on a local PC. The files were then zipped up and uploaded to the server and unzipped. The pivot metadata is relatively small, so could be created either locally or on the server. On IIS I made the following changes

• Add text/xml mime types for .cxml , .dzc , .dzi
• Add compression for .cxml , dzc , .dzi
• Add never expires HTTP headers for deepzoom folders

Note: If you client and collections are on different domains you will need to add a clientaccesspolicy.xml file to the root directory of hosting the collection.

Summary

Creating a prototype solution was quick and simple, by refactoring the NetFlix demo code from blog.smartx.com , using basic hotel photos with some simple search criteria.

But with most things it’s the final 20% that takes the time. Creating the composite images to include the hotels location on a map, getting the balance right on image quality vs download size, to what information to display on screen, and colours all took longer than expected.

Then the design of the search panel also took some time, deciding what data to display and how to group the data. This still isn’t perfect and will probably be refined over the coming weeks.

Finally the images are currently hosted on the west coast of America, this isn’t ideal as most of my customers are in the UK, so will probably need to look into use of a CDN / UK hosting to improve download speeds, possibly hosting on multiple sub domains to increase concurrent downloads and optimisation of the DeepZoom collections to share common low res images (e.g. generic green , yellow , blue images for images less than 16 pixels would reduce the file count significantly).

The Silverlight app is very basic, providing a host for the Pivot Silverlight control and directing the user to a RoomSeeker web page. In the future would be good to extend the app to support dynamic collections based on room availability.

 

This is part 3 of 3:

Part 1 – What is Pivot?

Part 2 – Creating a Pivot Collection

Part 3 – Creating a custom Silverlight Pivot View application (this article)

Part 2 of 3 - Creating a Pivot Collection

 

This series of articles cover the process from concept to release of how RoomSeeker.eu integrated visual search using Pivot Viewer for Silverlight:

This is part 1 of a 3 part series:

Part 1 – What is Pivot

Part 2 – Creating a Pivot Collection (this article)

Part 3 – Creating a custom Silverlight Pivot View application

Creating a Pivot View Collection

For a deep dive on general collection design check out the article on silverlght.net, in this post we look at the steps required to create a pivot collection.

1. Create composite images for input to deep zoom
2. Create deep zoom data
3. Create Pivot meta data

Step 1 - Create composite images

To keep things simple, pivot view only displays static images, so any text overlays, borders etc need to be burnt into an image.

Key things to consider are aspect ratio, size, borders, and image quality along with the information you want to overlay. For RoomSeeker.eu we decide on the following info:

• Hotel Name, Town, County (State), Star rating, Star accreditor
• Hotel Photo
• Room Price from
• Location

A sample composite image taken from the site is shown below containing the text overlays and location information on a map.

So knowing what we want, how do we go about creating these 7000 images? Options include:

1. Manual via Paint
2. 3^rd party tool such as Photoshop which allows for a data merge functionality
3. Create a custom app

Option 1 is clearly a non-starter, but depending on your in house skills options 2 and 3 are the way to go.

For us a custom app seemed the most flexible, as it could pull data direct from the database and integrate future changes via our content management system. So the only question now is what sort of app, options considered were:

1. Create images via .NET bitmap APIs
2. Create images via embedded IE web control
3. Create images via XAML using WPF app

For simple image templates option 1 would be the simplest solution, but we wanted to have the image driven via a content template which pushed us into the direction of either being HTML based or XAML based. In the end we went for XAML as we could then create the templates in Expression Blend and incorporate smart controls such as our hotel map.

So we ended up with a WPF app that pulled the data from the database and then created a custom Bitmap for each hotel based on a XAML template and inject the hotel data. Once we had our custom XAML this was then loaded into a canvas object using the code below:

   1: Canvas oCanvas = (Canvas) XamlReader.Parse(

   2:                 InjectData(xamlTemplate,hotel));

   3: int  iWidth  =  (int)oCanvas.Width;

   4: int  iHeight  =  (int)oCanvas.Height;

   5:  

   6: oCanvas.Arrange(new  Rect(0,  0,  iWidth,  iHeight));

   7:  

   8: RenderTargetBitmap  oRenderTargetBitmap  =  new  RenderTargetBitmap(iWidth,  iHeight,  96,  96, PixelFormats.Default);

   9:      

  10: oRenderTargetBitmap.Render(oCanvas);

  11:  

  12: // Save image using JpegBitmapEncoder 

Xaml to Bitmap code

So the end result is a direct with 7,000 custom images which can now be used to create the deep zoom collections.

Step 2 - Create deep zoom data

Creating the deep zoom data is the easiest part of this project thanks to the DeepZoom.dll library. A deep zoom collection consists of image tiles and collection meta data.

Using the .NET4 parallel extension the following code will kick off 4 threads to create the deep zoom imagery via the DeepZoom API ImageCreator

   1: Parallel.ForEach(titles, new ParallelOptions { MaxDegreeOfParallelism = 4 }, (title) =>

   2:      {

   3:       new ImageCreator{ MaxLevel = 9 }.Create( imagePath, 

   4:     string.Format(@"{0}\{1}.xml", outputDirectory, title.Id));  

   5:      });

   6:  

   7: Once the images have been produced we then create the meta data, via the CollectionCreator API:

   8:  

   9:   new CollectionCreator().Create(titles.Select(t => string.Format(@"{0}\{1}.xml", outputDirectory, t.Id)).ToList(), string.Format(@"{0}\collection.dzc", outputDirectory));

Thanks to blog.smartx.com for this code, used as part of his NetFlix browsing article.

And that’s pretty much it, though using the DeepZoom.dll I couldn’t figure out how to set a minimium zoom level as the tool wanted to create 9 zoom levels, of which levels 0 to 4 are very small and <1k in size, ( need a MinLevel = 3 option)?

Note: Word of warning my 7,000 files (400MB) now went up to 100,000 files (575MB size / 842MB size on disk) and 78,000 folders.

Step 3 of 3 - Create Pivot metadata

In the previous steps we created the deep zoom data, now we need to create Pivot metadata to inform the viewer:

• 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.

For a deep dive on the Pivot meta data see the Collection XML Schema article on Silverlight.net.

Filter panel For us this is still a work in progress, we’ve got the basics such as price, ratings, location, but are still iterating with attention to group of data e.g. hotel features / room features.

Sort Dropdown Care should be taken to not overload the user with irrelevant sort groups, e.g. is group by hotel name really useful? At present we’ve got most of the filter panel appearing in the sort dropdown, but may remove some after testing / user feedback.

Item panel I need to investigate this further, but currently my item panel will only display a button to link to an external URL via the Pivot app, but for the Silverlight control we have to option to multiple buttons and custom event handlers, e.g. to display a Silverlight dialog box. Note: For this release of the Silverlight control you cannot change the size / color of the buttons.

Info Panel Displays data related to the hotel, including extended information pulled from a secondary.cxml data file that holds the hotel descriptions which can be quite large.

The key part of the design here is to decide what information is important to your users. You may want to group things to help the user find the correct info, for example our database has a list of hotel features, but for this panel we broke down the features into groups for hotel and room features to keep the options brief as the panels are quite narrow so text needs to be concise.

Issues:

• To reduce the size of downloads I split the collection into 7 collections of ~1000 hotels each. This has the negative effect of searches in the filter panel being restricted to items in the current collection, e.g. if the user is viewing hotels in the South East of England they won’t see any search results for the South West unless they switch collections.
• Do you want your collection to be consumed by both your Silverlight control, other Silverlight apps, WFP Pivot App? If so then you may want to ensure core functionality does not rely on logic built into your custom Silverlight Pivot Viewer app.
• The secondary file can be quite large, would be good if that was split into multiple files, not sure if this is possible or not?
• In the future I may also support dynamic collections e.g. based on search / availability.

 

 

This is part 2 of a 3 part series:

Part 1 – What is Pivot

Part 2 – Creating a Pivot Collection (this article)

Part 3 – Creating a custom Silverlight Pivot View application

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.

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.

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