West, Donavon West

Microsoft's Scott Hanselman has put together a cool Deep Zoom project with 700 Obama newspaper covers from November 5th, the day after his historic Presidential victory. Scott even takes the time to explain the whole process. Very interesting.

Read more

Brazilian website and television show Olar Digital recently produced a video segment on Microsoft’s Silverlight called Silverlight, the 'rival' Flash. I don’t speak Portuguese, but featured prominently in the 5 minute piece are Silverlight powered sites such as my own Deep Zoom Obama. Look for Deep Zoom Obama at the 0:57 and 2:45 time mark (watch the video).

Silverlight sites featured in the video are:

• Deep Zoom Obama
• NBC Olympics
• HSN TV
• Photo Synth
• Hard Rock Cafe Memorabilia

I came across a strange website while on silverlight.net. It appears to be a Slovenian demo for Windows Vista written in Silverlight 2. Slovenia? Why Slovenia?

It is basically a simulator that mimics the behavior of Windows Vista online and is actually pretty cool. But because the UI is not exactly the same as the real Windows Vista, I’m certain that the UI police at Microsoft would not have allowed it had it been published in the United States.

You can try it out at: WindowsVista.si.

I’ve put together this YouTube video to help demonstrate Deep Zoom Obama and get the word out to “the kids” (they love their YouTubes).

Thanks to Keith for saving me the time of recording my own screen cast (sorry you didn’t make the credits in the video).

The Deep Zoom Obama project was featured today on the Microsoft website Silverlight.net. Sweet!

In this article, I will explain how I built the Deep Zoom Obama project. It was developed in Silverlight 2 Beta2, uses Deep Zoom and is hosted on Silverlight Streaming (Microsoft’s free 10GB hosting service). It uses, of course, Deep Zoom to display a very large mosaic image of Barack Obama constructed from over 12,000 individual images of his supporters.

So how was it done? Read on young Skywalker.

Step 1: Get 12,000 supporter images

That reminds me of that old Steve Martin bit about how to be a millionaire and never pay taxes. “First…”, he says “get a million dollars”. When you build a mosaic as large as the one I wanted to built, you need a lot of images. Maybe not a million, but I figured I would need many many thousands. I decided to use avatar images of Barack Obama supporters from the campaign’s web site. But navigating to a supporter page, right clicking on the avatar and selecting “Save Picture as” would take forever. But as luck would have it, the image files are nice and safe in Internet Explorer’s browser cache folder.

The filenames we need end in “@mx_150@my_150” but to get these, you must visit each individual supporter’s page and I was not about to visit 12,000 individual supporter’s pages. However, each supporter has “friends” and their smaller images are displayed on a particular supporter’s page. These smaller image filenames end with “@mx_30@my_100”.

This is where I used the power of Fiddler, Microsoft’s free debugging proxy. I simply inserted the following code into the OnBeforeRequest function in Fiddler’s CustomRules.js file.

if (oSession.uriContains("@mx_30@my_100")){
    oSession.url = oSession.url.replace("@mx_30@my_100","@mx_150@my_150");
}

What does this do? When a request is made to download the smaller image, Fiddler alters the request to download the larger image (i.e. the one we need). This allowed me to visit a lot fewer pages to fill up my cache. I found a few supporters with 3000+ friends and viola, I had 12,000 images before I knew it!

Step 2: Build the 10,000 x 10,000 Mosaic

This is the cool part and I can’t take the credit for the find. I read a post on Microsoft’s Channel 10 about a mosaic of the Sydney Opera House made up of Virtual Earth images. It was made by the Australian firm SoulSolutions. They used a free mosaic generator called AndreaMosaic to generate their image. It’s not the most visual appealing user interface in the world, but what it lacks in aesthetics, it more than makes up for in raw power.

I played around with the settings until I found some that worked for my project. The result was a 10,000 x 10,000 pixel file. I was surprised at how fast the mosaic was generated (less than 20 minutes).

Step 3: Build the Multi Scale Images

First a little background on the Deep Zoom file format. An image is broken into many small pieces of varying resolutions. As you can see, only a small piece of the hi resolution image is downloaded (shown highlighted in the example above) as one zooms into an image. More detail of the Deep Zoom file format can be found on MSDN.

These multi scale images are built with a free tool from Microsoft called Deep Zoom Composer (shown below). Armed with the mosaic image and a few other hi-resolution images, it was time to built the images, but I wanted to add a bit of a twist. Deep Zoom has the concept of sparse images where parts of an image has a higher resolution that others. I would use this to place hi resolutions tiles into the mosaic. For example, if you zoom into the pupil in either eye, a completely different hi resolution picture can be zoomed into even further.

You can think of sparse images as the spec of dust from Dr. Seuss’s Horton Hears a Who! In the book we learn that when you look at it from a far, the spec appears as just that, a spec of dust. But if you zoom in deep, you find a whole other world living on that spec. This is the concept behind sparse images.

I’m not going into great detail on how to use Deep Zoom Composer (as a great tutorial can be found on the Expression Blend blog). But, in the screen shot above, you can see how you can arrange images on top of other images at different zoom levels. The Image of Obama waving is actually a spec in Obama’s left eye when viewed from a far.

Step 3: Build the Silverlight Application

This is where the new version of Deep Zoom Composer was a lot of help. Not only does it slice up your images into tasty browser sized morsels, it actually generates a Visual Studio solution with two projects: the actual Silverlight application (i.e. your XAP file) and a web project test bed.

If you are satisfied with the generated XAML, and it is probably fine for some applications, you are done. The generated code-behind now has support for mouse scroll-wheel zooming, but you may want to tweak the code and/or XAML to suit your needs. For example, I removed from the XAML the pesky border and 10 pixel white margin as well as any height and width as I wanted the hosting application to be able to specify these values.

The key to Deep Zoom is the MultiScaleImage object defined in the XAML.

<MultiScaleImage x:Name="msi"/>

The code generated by Deep Zoom Composer is not the most elegant in the world. I’ve streamlined it a bit and modified it to capture the mouse when the user is dragging. This allows the user to move the mouse outside of the application area and retain the drag state.

Here is my modified code in the constructor of Page.xaml.cs. Pay attention to the calls to CaptureMouse and ReleaseMouseCapture.

this.MouseLeftButtonDown += delegate(object sender, MouseButtonEventArgs e)
{
    mouseButtonPressed = true;
    mouseIsDragging = false;
    dragOffset = e.GetPosition(this);
    currentPosition = msi.ViewportOrigin;
};

this.MouseLeftButtonUp += delegate(object sender, MouseButtonEventArgs e)
{
    mouseButtonPressed = false;
    if (mouseIsDragging == false)
    {
        if ((Keyboard.Modifiers & ModifierKeys.Shift) == ModifierKeys.Shift)
            ZoomFactor = 0.5;
        else
            ZoomFactor = 2.0;

        Zoom(ZoomFactor, this.lastMousePos);
    }
    else
    {
        mouseIsDragging = false;
        this.ReleaseMouseCapture();
    }
};

this.MouseMove += delegate(object sender, MouseEventArgs e)
{
    if (mouseButtonPressed)
    {
        if (!mouseIsDragging)
        {
            this.CaptureMouse();
            mouseIsDragging = true;
        }
    }
    this.lastMousePos = e.GetPosition(this.msi);

    if (mouseIsDragging)
    {
        Point newOrigin = new Point();
        newOrigin.X = currentPosition.X - (((e.GetPosition(msi).X - dragOffset.X) / msi.ActualWidth) * msi.ViewportWidth);
        newOrigin.Y = currentPosition.Y - (((e.GetPosition(msi).Y - dragOffset.Y) / msi.ActualHeight) * msi.ViewportWidth);
        msi.ViewportOrigin = newOrigin;
    }
};

new MouseWheelHelper(this).Moved += delegate(object sender, MouseWheelEventArgs e)
{
    e.Handled = true;
    if (e.Delta > 0)
        ZoomFactor = 1.2;
    else
        ZoomFactor = .80;

    Zoom(ZoomFactor, this.lastMousePos);
};

Step 4: Place the Application on Silverlight Streaming

Now that you have your application, where will you host it? Remember that it could go viral and get millions of hits and even more in image downloads. Microsoft has a free service to host your Silverlight applications. It’s called Silverlight Streaming.

In order to host your Silverlight 2 application, you need to add a manifest.xml file that describes your application. Here is the manifest file that I used:

<SilverlightApp>
  <version>2.0</version>
  <source>DeepZoomObama.xap</source>
  <width>480</width>
  <height>480</height>
  <background>white</background>
  <isWindowless>false</isWindowless>
</SilverlightApp>

You can change the source element to fit your needs. Place the manifest.xml file into the ClientBin folder of your web project. Then generate a ZIP file of the content of ClientBin.

Go to silverlight.live.com and click on Manage Applications then Upload an Application. You will be asked to give your application a name (mine was of course DeepZoomObama).

Next you will upload your application.  Browse to the ZIP files that you created and click Upload. This process will take some time depending on your Internet connection speed.

My application was about 43MB, but Silverlight Streaming gives you 10GB of storage. That’s a lot of Deep Zoom applications!

Step 5: Built a suitable presentation Web Site

This was the most trivial aspect of the while project. I hand coded the HTML, CSS and Photoshopped all of the images. The one most important items however was including the Silverlight Streaming application that we built in the last step.

Here is (basically) the HTML that I inserted. If you want to host the new Deep Zoom Obama Silverlight application on your web site or blog, copy and paste the following HTML code.

<iframe frameborder='0' scrolling='no'
style='border:solid 1px #999999; width:480px; height:480px'
src="http://silverlight.services.live.com/invoke/52059/DeepZoomObama/iframe.html">
</iframe>

Conclusion

Building a Deep Zoom application is fun and extremely easy once you’ve done it a few times. The mosaic also really enhances the “wow” effect and is not that much more work.

Here is a recap of the tools used in this project:

• AndreaMosaic
• Deep Zoom Composer
• Microsoft Silverlight Tools Beta 2 for Visual Studio 2008
• Fiddler
• Silverlight Streaming

If you want to host the new Deep Zoom Obama Silverlight application on your web site or blog, copy and paste the following HTML code.

<iframe frameborder='0' scrolling='no'
style='border:solid 1px #999999; width:480px; height:480px'
src="http://silverlight.services.live.com/invoke/52059/DeepZoomObama/iframe.html">
</iframe>

Note that you can alter the style (i.e. width, height, etc) to suit your needs.

Today I have released a new version 1.1 of the the Deep Zoom Obama Silverlight application. Here are some of the enhancements:

• You can now press F to go into full screen mode. To exit, press ESC. Unfortunately the mouse scroll wheel and other key presses do not function in full screen.
• Press Ctrl-Plus to Zoom in and Crtl-Minus to Zoom out. If you are a regular Photoshop user you will find this feature very natural.
• Ctrl-click (as well as Shift-click) will now zoom out.
• The mouse pointer is now a hand that “grabs” when you click and drag.
• There is a custom semi-transparent watermark in the lower right hand corner of the screen. Hover over it and it becomes 100%. Click on it and you are taken to www.DeepZoomObma.com (useful when the control is hosted on other web sites/blogs).

These are are small features but combined I hope you find them useful. My goal incorporate this into a generic Deep Zoom viewer that I can use of many projects in the future.

Lately I’ve been into a technology called Deep Zoom that is part of Microsoft Silverlight 2 Beta2. My first project was Deep Zoom Obama. My second project, presented here, was a bit simpler.

It is a collection of images of our home. It was designed by architectural firm Alter Urban here in Baltimore. The photos were taken by photographer Curtis Martin.

Oh, and that is our dog Merle in two of the photos. :)

(mouse wheel to zoom, click to zoom-in, shift-click to zoom-out, click and drag to move)

Today a new web site was introduced called Deep Zoom Obama. It has an interactive mosaic of Barack Obama composed from over 12,000 images of Barack Obama supporters from uploaded icons on www.BarackObama.com.

It uses new Deep Zoom feature in Silverlight from Microsoft which allows you zoom into the detailed 10,000x10,000 gigapixel image with amazing speed.

Check it out at www.DeepZoomObama.com.

Deep Zoom McCain was tried, but there were problems finding enough photos of McCain supporters. We did manage to find a few and if you really squint really hard, you can make out the image of John McCain’s face in the 20 image mosaic below.