Microsoft ends its fiscal year on June 30th each year. The result of this is that July tends to be a time for some vacation and offers a great opportunity to "sharpen the saw" a bit. Like many of you, I really thought the Hard Rock Cafe memorabilia site done with Silverlight and Deep Zoom was a really cool application, so I decided to dig and learn as much as I could about it.
The result was an application I built for a new blog site I also started in July called DrummBlog.com. As many of you know, I'm a pretty active musician and have been for most of my life. It turns out that I enjoy writing about drums and percussion about as much as I do about technology, so I started this site up to serve as an outlet for my other passion outside of Microsoft. I decided that I would pay homage to my favorite drummers by making a photo collage using Deep Zoom.
First, I downloaded the free Deep Zoom Composer tool. I first had a look at this tool early this year and, frankly, it was pretty difficult to use and the output was very raw. The most recent version has made leaps and bounds in usability and performance.
Creating my collage was a three step process.
First, I imported all the photos I wanted to use. Deep Zoom Composer allows you to do this individually or as a group, which is a nice time-saver. Imported photos appear in a column to the right of the design face with the detailed photo in the center.
Once you've imported all the photos you want to use in your project, you need select the Compose option at the top of the screen and begin clicking-and-dragging the photos onto the design surface. You can resize and layer photos to your heart's content. Remember that if you have a large number of photos, you can reduce the picture size as much as you like to fit them in the available space -- your user will be able to zoom in to see the detail. I only had thirty-four photos in my project, so I could leave several of them large while reducing some of them for fun and effect.
Also, you can switch your photo column to a layer view, which gives you a little more control over how the images are presented on the screen, as well as letting you do custom sizing and tagging for each individual photo in the composition.
When you think you have the design the way you want it, you come to the final phase which is exporting the project. You have two options here: You can export it to PhotoZoom if you have an account there or you can export it as a Silverlight project. I went for option number two and created a Silverlight project.
Once the export is complete, you are presented with a few options for moving forward. You can preview the application locally in the browser, view the image folder or look at the project folder. I previewed the collage in the browser a couple of time, observing that there were some noticeable gaps between photos when I zoomed. This preview capability gave me the chance to fix those before putting it online.
When I was done tweaking the design, it was time for me to move the project to a hosting server so I could show it off on DrummBlog. The Export Location field in Deep Zoom Composer is not exactly accurate if you need to grab all the application files for packaging. The full path to what you need is here:
[project name]\source images\OutputSdi\[project name]\DeepZoomProjectWeb\ClientBin
You'll find an HTML file, and XAP file and a directory will all the images stored in it. This is all you need to show the application online.
My original intent was to host the application using the Silverlight Streaming service. As Deep Zoom doesn't have the ability to automatically publish the project to this service (and yes, please consider that a feature request), I needed to try and package the application for manual upload. I tried this a couple of times, but the service kept throwing errors, telling me that the manifest included in the archive wasn't valid.
I ran out of patience for this very quickly and decided I would upload the project to my own web server. I uploaded everything in the ClientBin directory to my web server. However, when the upload was complete and I went to load the HTML page hosting the applications, I got an error telling me that file extension was not recognized by the web server.
This was easy enough to fix. Since I have remote access to my hosting web server, I logged in, fired up IIS admin and added a MIME type for the XAP file extension, the syntax being application/x-silverlight-app:
I navigated to the HTML page that was part of the output for the project to make sure that I could view the application in the browser. I then added a link to the HTML page that reloaded the page. I put this in to allow folks to reset the page back to its original state.
The only thing left to do after that was to add some HTML to my blog post to imbed an IFrame to host the project web page and there it was. I was all done.
Here is the result:
I should also point out that, with the exception of a little HTML tweaking here and there, I didn't have to write any code at all to produce this. Don't get me wrong, I'm a fan of coding, but in this case I wanted to focus on the look and feel of what I as producing and I honestly think code would have gotten in the way of that. What's more, had I been able to get the application to load into Silverlight Streaming, I could have used the free plug-in for Windows Live Writer to automatically embed that application for me, thus requiring no coding at all.
If you're interested in building your own Deep Zoom project, I highly recommend grabbing the latest bits for Deep Zoom Composer and give it a try. My next project? Doing a Deep Zoom class reunion album for my wife's high school class. Fun stuff.
Subscribe