Nigel Parker's Outside Line : deepzoom

Air New Zealand Fashion Week Finale!

nparker — Fri, 25 Sep 2009 08:27:00 GMT

I convinced Michael Ng (the official photographer) for Air New Zealand Fashion week to attempt a photosynth at last nights Stolen Girlfriends show. I think he did a great job! Showing the models and the who’s who celebs in the front row.

Add this with some super high resolution beauty shots

in the MSN “wall of fashion” and the kooky Pamela Anderson (warning semi nudity on the link) below

With that we round out Air New Zealand Fashion Week with a photo wall that contains 593 photos, 156,680 files, 2.68GB.

I previously released the source code and talked about how I built the viewer.

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

nparker — Thu, 24 Sep 2009 01:37:00 GMT

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.

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.

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.

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.

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!).

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 :)

NZsynth – How It Was Done

nparker — Fri, 15 May 2009 15:10:26 GMT

Previously I wrote and demoed the NZsynth application that was built for the WEB09 keynote. This post is detailing how it was made and introducing version two (Zoom all the way in using mouse wheel then double-click for popup image).

WATCH THE VIDEO that goes end-to-end on the development of the application (mainly building the mosaic and the extension that Tim Tate created to make the tiles clickable).

The video is also downloadable from Channel9

The Code

It goes without saying that this code is provided "AS IS" with no warranties, and confers no rights it is demo ware and should be treated as such.

Flickr Image Download Code

Mosaic WCF REST Service (Including Flickr Database File)

NZsynth

Demo at http://possi.bility.co.nz/ Hot keys in previous post

Tim’s Silverlight 3 Code and Demo

There is no “go live” for Silverlight 3 yet so what I’m going to do next is for “informational/ testing purposes only”. If you are a developer and happen to have either the Silverlight 3 Beta - Windows Developer Runtime or the Silverlight 3 Beta - Mac Developer Runtime installed pop over to http://possi.bility.co.nz/timtate/ to look at a running version of Tim’s solution.

NZsynth V2 Source (excluding image tiles)

Demo at http://possi.bility.co.nz/nzsynth (Zoom right in using mouse wheel then double-click for popup image)

Key tools

WEBPI to install Visual Studio Silverlight Development Tools & SQL Server 2008 Express
AndreaMosaic
HD Make
Deep Zoom Composer
WCF REST Starter Kit
FlickrNet

Other Resources/ Examples

Jellyfish Deep Zoom
Deep Zoom Image Generation with DeepZoomTools.DLL
My post DeepZoom-Tastic
http://tr.im/photosEFAS (DeepZoom Pix Photos from Expression for Art’s Sake)
Miss March and Other Distractions (Parental Advisory)
Deep Zoom++ : Build Dynamic Deep Zoom Applications with Open Source

All this got me thinking how this idea could be extended further?

National Geographic have been doing some interesting work with photosynth recently. Check out the Sphinx below.

This is why I was intrigued to see they too have developed a mosaic experience called Infinite Photograph. It is not as smooth or free flowing as the nzsynth mosaic demo but it has a great touch that it repeats on itself after a few layers giving you a “feeling” that you can zoom forever. Also double-clicking images brings up more details like in Tim and my examples.

I guess beyond this we then need to think about video and using dynamic frames in a form of “massive” stop motion animation. If you haven’t seen it yet the YouTube Mosaic Music Video may give you some insight into where my mind is heading.

NZsynth and WEB09

nparker — Tue, 12 May 2009 07:56:00 GMT

It started as a conversation I was having with Brett Roberts regarding options for promoting NZ online at a time when tourism was taking a hit from the current economic climate. From there we discussed the proposed National Cycleway and this lead to a conversation about “crowd sourcing” images that people have already tagged as New Zealand to construct a demo from our shipping Silverlight 2 technology.

This conversation tied in well with a looming keynote slot at WEB09 where I had a 5-10 minute demo slot. The biggest problem was that I only had three days to build the “demo-ware” prototype and present it to a room full of web influential's!

Needless to say after a nervous period fighting with the failing conference WiFi. I switched to the hotel wireless and pulled it off!

Watch a 6 1/2 minute video of the demo I showed at the conference (this time the video is hosted on a US based server so the experience won’t be as good for Kiwis as the demo further down this post).

I have also posted this video on Vimeo (download available).

The demo app is hosted on a development server at Swizzle in their Telstra Albany datacenter. The fact that server was only 1 hop away from the conference venue meant that I could stream video via wireless at 2.4 MBS over the hotel wifi using smooth streaming with NO CACHE! I would go as far as saying that this was the Best Quality Internet Video that people in the room had ever seen stream over the Internet and all this in an environment when no other presenter could get their “US” based video to play without buffering! Goes to show the importance of peering for local content!

As mentioned at the event the “Excellent" video was generously provided by Making Movies for use as stock footage in the demo.

If you are in New Zealand and have a direct connection to the Auckland Peering Exchange I recommend that you try the demo steps for yourself by navigating to http://possi.bility.co.nz.

WEB09 Demo V1

1) Use the mouse wheel to zoom in and out of the Mosaic and the slider to switch between Mosaics with more or less tiles.

Needless to say there was some smoke and mirrors in play during the demo…

Key combinations to try

SPACE bring up photo, mouse click on the image to hide again.
Q to show my photo collection (click on faded background then W to hide)
A to show a photosynth of museum S to hide
Z to show a photosynth of statue (P inside the photosynth to hide photos and show 3d model) S to hide
X to show a photosynth of blackout protest
V to show smooth stream video B to hide (needs to be done last)

In retrospect I didn’t like the way that the watermarked text that I applied to each individual photo tile looked after it was added to the mosaic. Also the tiles were being cut when they were being laid out in the Mosaic so in some cases (like below) the watermark attribution was being partly obscured or not visible at all!

For stage two I wanted to figure out a way to get rid of the watermark all together and work out a way to make individual photos in the Mosaic clickable.

I hadn’t been able to solve this problem in my demo so I used SPACE to bring up a single photo to show my thinking but not having it working.

Tim Tait came up to me after the keynote and we started discussing how I had built the demo and how he could look at productionizing the code for an upcoming exhibition at Te Papa museum in Wellington. Following our conversation I invited Tim to the Expression For Art’s Sake event in Wellington the following week and the rest as you say is history. Tim was able to solve the big problem I had above and this lead to me building a V2 of my demo which I will show you soon.

Tim wrote:

Before this week I had hardly touched Silverlight and now I don’t think I can live without it. Even though Silverlight is very different from Flash, I think having that Flash background let me pick it up fairly quickly.

I will post again shortly with a more detailed description of how I built the demo above including source code and a preview of Version 2 inspired by Tim’s work. But in the meantime it worth calling out the great piece of software Andrea Mosaic that I purchased to pull the base 3 Gigapixel tile sets.

Read Part Two about how it was done…

DeepZoom-Tastic

nparker — Wed, 18 Mar 2009 07:42:00 GMT

I have been blogging since MIX last year about DeepZoom as a killer feature inside of Silverlight 2.

After a user group tour I saw a number of commercial websites start to experiment and deploy Silverlight 2 DeepZoom projects. I even wrote a simple DeepZoom magazine viewer for the New Zealand Microsoft Dynamics Team.

The team at ACP Media have released a new car search that leverages DeepZoom - http://www.autotrader.co.nz/New/Search they have a fall back to an AJAX experience as well for those users who don’t have Silverlight installed.

Grant Archibald who worked on the ACP new car project is up at MIX09 in Las Vegas this week and has been very active on his blog regarding his recent Silverlight development projects. He even won a pass to MIX for his Three Little Pigs – Silverlight E-Book.

Another nice DeepZoom that I have seen recently is Pretty-In-Ink on MSN. This one has a similar feel to the touch interface that I produced for the Louis Vuitton Pacific Series in Jan.

The Pretty In Ink site loads an arbitrary collection of images, allows for filtering them based on various criteria (lots of LINQ), interaction in a Surface-like ScatterView style, and inspection of the details of an image with Deep Zoom.

You can join a live webcast to learn more about how it was built. The webcast is being conducted by Sumeet Wilankar, Creative Director @ Idealake, at 9:30pm tonight (18th March NZ time).

It would also be remiss of me not to call out the great work of the Aussie DPE, Showcasing the Sydney Mardi Gras using DeepZoom on the homepage of the Sydney Morning Herald.

This is the first example I have seen when the photo tiles are stored on Windows Azure Storage Services.

Michael Kordahi - SMH Mardi Gras Photo coverage in Silverlight Deep Zoom
Greg Willis - Software + Services meets Sydney Mardi Gras

(originally prototyped by the always yellow Chris Auld).

Michael also wrote:

I will share the source (on codeplex) when it’s ready.

I very much look forward to seeing where DeepZoom is going with MIX09 kicking off tomorrow morning in Las Vegas.

Watch the keynote live at http://2009.visitmix.com from 5AM Thursday 19th March, tomorrow morning.

Deep Zoom Photographs

nparker — Mon, 17 Nov 2008 04:56:00 GMT

Back in May I delivered a session titled “MIX08: A Developers Perspective” where I first showed the programmability of Deep Zoom in Silverlight 2. Off the back of those sessions I have seen a few large scale developments take place in NZ using Silverlight 2 and Deep Zoom. None of them have come to market just yet but I’m very much looking forward to when they do.

Following the community blogs I’ve also seen that Robert Fonseca-Ensor from Datacom in Auckland has got right down to the nitty gritty inside of Deep Zoom Composer.

Anyone that has been following me for a while will know that I’m a keen photographer and I mentioned back in May that it would be cool to take Wilfred Pinto’s work and create a simple colour picker in blend to filter some of my photographs with.

Well I finally got a chance to updgrade it to Silverlight 2 RTW and deploy it to Silverlight streaming late last week. Enjoy!

View in new page http://tr.im/deepzoom

Source code -

Build A 10,000 x 10,000 Mosaic of Images with DeepZoom

nparker — Tue, 08 Jul 2008 00:50:00 GMT

Donavon West has created a killer deep zoom using tens of thousands of images making up the face of Barack Obama.

It is very cool and available to view at http://www.deepzoomobama.com

The great part is that Donavon has also released a "how to" build your own mosaic and host it on us for free using Silverlight Streaming.

Donavon picked up from, Soul Solutions in Brisbane who have been breaking new ground combining Deep Zoom in Silverlight 2 with Virtual Earth as a MultiScaleTileSource check out their DeepEarth project.

http://deepzoom.soulclients.com/VE/

They have Open Source'd it - http://www.codeplex.com/deepearth

Also their mosaic of the Sydney Opera House made up of Virtual Earth images used a free mosaic generator called AndreaMosaic to generate their image.

So you have all you need go make your own Mosaic and post it in the comments below.

ENJOY!

MIX08: A Developers Perspective... IT'S A WRAP!

nparker — Thu, 15 May 2008 13:25:00 GMT

Thanks all for coming out and participating in the conversation surrounding future web technologies and Silverlight 2 over the last week and a half.

As promised this is my post outlining the various things that I presented including source code when available and all that other good stuff!

Remember dozens of detailed session on all the cool new web stuff is available at http://sessions.visitmix.com. You can watch the "Olympic NBC Demo" as part of the MIX Keynote Video.

VIDEO

IIS 7.0 Bit Rate Throttling Module

EXPRESSION VERSION 2 - HAS LAUNCHED

http://www.microsoft.com/expression/

"ARROWHEAD"

ScottGu has the lowdown on Visual Studio 2008 and .NET Framework 3.5 Service Pack 1 Beta and the other Scott (who is coming to Tech.Ed NZ) asks the question of whether you should fear this release?

Scott also chips in with a 7 video Introduction to ASP.NET Dynamic Data.

Ivan Towlson, from Mindscape asked me a question during the Auckland session that I promised to publish the answer here. He asked: "Are we treating .NET 3.5 SP1 as a separate project type when it ships as part of multi-targeting in VS2008?"

Scott Guthrie responded:

No – you will still target it using the .NET 3.5 drop down in VS 2008. There is a separate checkbox though for whether you want to target the client-profile setup (which will allow you to get compile errors if you try and reference an assembly not in the client subset).

For the next release of VS we are hoping to expand multi-targeting so that you can target not just big versions of frameworks, but also individual SPs as well.

"DEEP ZOOM"

View the Hard Rock Cafe memorabilia site.

Take a look at BigPicture.

Check out the updated Deep Zoom Composer and the PhotoZoom service.

Also the code I based my Business Card demo (view it here - try tags "silverlight", "expression", "blue" or "card" to filter) was made available by Wilfred Pinto in his Dissecting Hard Rock Memorabilia post series.

The DeepZoom Composer Forum is great place to ask q's about this stuff.

SILVERLIGHT 2 - EXAMPLES

I showed some examples of Silverlight applications in my session.

Including the Magnify Glass demo that ships with Expression Blend 2

And the Microsoft Health Common User Interface (MSCUI) Silverlight 2 sample that uses a similar technique to magnify parts of a video of the heart.

Jaime Rodriguez has the word on the Silverlight in Financial's Demonstrator including source code.

I also showed the in some centres the Silverlight 2 Surface Demo that includes DeepZoom, with source code.

DIGG SAMPLE IN SILVERLIGHT 2

The Digg Sample that I stepped through in the session (available for you to try online thanks to "free hosting" at http://silverlight.live.com) was based on ScottGu's great 8 part tutorial series.

Dan Wahlin has taken these steps and made them available as bite sized videos.

If you want to Start Learning Silverlight 2 there are tutorials, hands on labs (Swiss End-2-End example) and videos available to help you.

Also if you are interested in design and UX Arturo has made his XAML Ready Agency training and also Silverlight Bootcamp For Designers available.

Corrina Barber does a great job of "re-skinning" the Digg Sample App, and shares some great samples of control skinning as well.

Jose from Cynergy took the demo much much further and also made his code available on codeplex.

For Silverlight 1, the Silverlight learning snacks have just been made available.

CHERRY

Oh yeah and I can't leave without giving you all a cherry!

Silverlight 1 (Moonlight) first source code release for Linux and Silverlight 2 said Hello in Linux

Bill Gates Demonstrates Touch Wall
Microsoft Chairman Bill Gates demonstrates Touch Wall, a new hardware technology from Microsoft that creates a touch-based “white board” interface that lets users interact more naturally with data and applications on their computer. Microsoft CEO Summit 2008, Redmond, Wash. May 14, 2008.
.wmv file (27.7 MB) | .mpg file (279 MB)

Just think of the Silverlight Surface Demo running on Touch Wall!

TechCrunch coverage Touch Wall and Plex

Tags: mix08, NZWC

Training on all the Latest Stuff!

nparker — Wed, 16 Apr 2008 08:39:00 GMT

Great news the .NET 3.5 Enhancements Training kit has been released containing six hands-on labs, made up of the following technologies:

ADO.NET Data Services
ADO.NET Entity Framework
ASP.NET AJAX History
ASP.NET Dynamic Data
ASP.NET MVC
ASP.NET Silverlight controls

Also available is the Kigg Starter Kit (A Digg like application developed with ASP.NET MVC Framework, LINQ to SQL and ASP.NET AJAX)

Scott Hanselman's MIX session on MVC is also well worth a look if you are that way inclined. BTW if you want to see Scott at Tech.Ed join the Bring Scott Hanselman to Tech-Ed Australia group and make some noise.

I enjoyed the DNUG talk at Ellerslie last night on MIX08 a developers perspective especially building the DeepZoom SL2 project. Check out this video and http://photozoom.mslivelabs.com/ to learn more about deepzoom.

I was asked if you could bypass the DeepZoom Composer and create your composition using code. The Answer Yes, Included as part of the Deep Zoom are command line encoding tools that allow you to generate the output files needed without having to use the Deep Zoom Composer. Also if you would like to create collections that can randomise each image's location programatically "rather than one big image" you can do that to. Also Jamie has a primer on the deepzoom technology if you would like to go deep.

As I mentioned ScotGu has a great list of Silverlight 2 resources on his blog.

In fact after lifting the lid off SL2 yesterday I was inspired to "re-work" my video reflection demo from SL1 to SL2. The video is below, code is here (minus the video)

Download a better looking WMV version (14.5MB)

Also Silverlight Streaming now supports the free hosting of Silverlight 2 applications. Check this post on the Naked XAP upload enabled in Silverlight Streaming.

P.S. Those of you who aren't subscribed to the MSDN Flash the code from my recent VS2008/ ASP.NET presentation is on skydrive and you might also find this link useful.

If you want to see me present on the new stuff in person come along to one of my MSDN Unplugged events coming up in May.