Building the MSN Silverlight "Wall of Fashion" for Air New Zealand Fashion Week

Building the MSN Silverlight "Wall of Fashion" for Air New Zealand Fashion Week

  • Comments 1

Anyone that has been reading my blog for a while will know that I have been working with DeepZoom for some time now.

I have been very keen to get Silverlight onto MSN.co.nz for a while. An opportunity presented itself for me to build a DeepZoom viewer and purchase 700 photos from Michael Ng (the official event photographer for Air New Zealand Fashion Week). MSN came to the party by featuring the “Wall of Fashion” and promoting it from their homepage and Fashion Week mini site.

image

image

The challenge that I faced was two-fold.

1) I needed to bypass the MSN CMS system due to the share number of files required to publish a large DeepZoom.

2) I needed a system that could handle large demand and be updated in a timely fashion throughout the week.

What I came up with is not completely automated like DeepZoomPix but does leverage a number of open source projects and stores the tiles on Windows Azure.

Given that Windows Azure is becoming commercially available at PDC (17-19 Nov) in 21 countries including New Zealand I thought I’d run the stats to see what a project like this would actually cost (the service is free until launch). 

We are half way through the event and I have already published 380 photos, 98,922 files (1.67 GB) into the Windows Azure Blog Storage.

Take the stats from the first day before the official launch 582 people spent on average 1:09 mins on the gallery. This served ~34MB per person or about 19GB of content downloaded.

On current preliminary Windows Azure pricing this first day of activity would have cost.

Storage – 1.67 GB @ $0.15USD / GB / month - 0.25 USD

Bandwidth in - 1.67 GB @ $0.10USD / GB - 0.167 USD

Bandwidth out – ~19GB @ $0.15USD / GB - 2.85 USD

Storage Transactions – ~1,455,000 @ $0.01 / 10K – 1.46 USD

Total ~ 4.73 USD or <1c per user.

What I Built:

First of all I looked at the eventr project on Codeplex, built by Jordan from Readify who was over for Tech.Ed NZ last week to deliver some killer Silverlight sessions.

Eventr is a Silverlight deep zoom reference application. The interesting bits are implemented in the SuperDeepZoom control, which may be either dropped straight in to your project (turnkey) or you can open it up and see what makes it tick.

I did end up using the DeepZoom Collection Creator from eventr to slice new images as they arrive on our FTP server but I didn’t leverage the rest of the code base.

Although it was excellently written an leverages an MVC pattern, eventr just wasn’t suitable for static blob hosting on Windows Azure. To host eventr on Windows Azure both Services and Compute would be required thus increasing the overall cost of hosting the solution.

Secondly I looked at the SpaceBlock project on Codeplex this is what Michael used for the Sydney Mardi Gras  project.

Also check out this great post on Hosting Silverlight Applications in Azure Blob Storage.

In the end I actually chose to extend a project that I had created previously in Nov 2008 that was based on Wilfred Pinto’s previous work.

The source code is wrapped up and available (minus the images) at http://kiwi.blob.core.windows.net/code/FashionWeek.zip 

Also I can’t forget the legal bit (This posting is provided "AS IS" with no warranties, and confers no rights. )

I have added a rudimentary Silverlight Tag Cloud for the filter on the right based on Mark Monster’s work. Again there is a much better Silverlight Tag Cloud project on codeplex but it uses WCF services and therefore couldn’t live in Azure Blob Storage alone.

I first presented the player during the Tech.Ed NZ Keynote last week on stage with Chris Liddell.

TechEd09 

And published it on the Tech.Ed NZ website to take it for a test run before fashion week.

During this test I realised that it is not easy to publish additional images after the fact if they are not named in descending order.

To achieve this I wrote a c# app some time ago that renames photos based on timedate info in the EXIF tags. You can grab this from http://kiwi.blob.core.windows.net/code/PhotoSorta.zip

Also I can’t forget the legal bit (This posting is provided "AS IS" with no warranties, and confers no rights. )

Running this before slicing the images meant that ordering in the metadata remained chronological

I have also been asked why there is a slight leather texture behind the images. This is an agreement I made with the photographer. The photos that we are posting from Air New Zealand Fashion Week are highest quality available. The way DeepZoom works is that each image is sliced into thousands of small jpgs at a range of different zoom levels and is reconstructed on the fly making it impossible for people to access high resolution images from their browser cache. That it this doesn’t stop people zooming and taking screen captures to copy images. This is where the subtle texture comes in so that we (and the photographer) can tell if an image is posted elsewhere that has been taken from our site.

image

All in all to round things off I wanted to add some enhancements to the player.

The first is a feature of Silverlight 3 that enables the user to launch the player “Out of Browser” either right click and install or click the select designer tab and the download icon in the bottom left.

image

This then enables you to launch the viewer from the start menu on your PC or Mac.

Also in the same location I have added the option for IE8 users to add the viewer as a Web Slice, this way as new photos are added each day users can be notified and access the slide show directly from their favourites bar without leaving their current web page. Giorgio has a detailed post on building a webslice for the Imagine Cup. Incidentally 4.5% of the traffic (16% of IE users) to the site is now coming via the WebSlice and the average time spent in the viewer is 3:22 mins  (almost triple that on the viewers that hit the site directly!).

image

I had fun putting this all together and I hope by sharing the code and the opportunity with Windows Azure you may consider doing something similar for the next large event you are asked to cover.

FYI there are a number approaches to get analytics working for tracking Silverlight applications

I didn’t get time to implement this fully but it does give you some data as long as your users aren't using IE8 InPrivate Filtering to block the prying Googley eyes :)

  • Cool. The Eventr app looks like it has some interesting features

Page 1 of 1 (1 items)