I was really impressed with the deep zoom version of the Newseum newspaper frontpages from the Obama Election win in my previous blog post. I was so impressed that I had to figure out a way to do this myself. This post will guide you through this process, step by step.
Step 1, creating your Photo Mosaic
Recently Carlos mentioned he wanted to get a Photo Mosaic made by his Photographer from his wedding photos. I figured in this day and age of Information sharing there had to be low cost applications out there that would automate this process for you. (If you haven’t learned yet, everything is on the Internet)
After a quick web search, I found AndreaMosaic, a FREE application for this very purpose. (REALLY AMAZING APPLICATION)
With AndreaMosaic you take a picture you want to be the base of the mosaic:
Select a bunch of pictures you want to use to create your Mosaic (the more pictures the better):
And click a couple buttons and Presto! Photo Mosaic for free:
But you run into a problem. If you zoom into the picture moderately, you get okay photo resolution:
If you try to zoom in a lot though, you start to lose detail:
So what to do?
Step 2, Enter Silverlight Deep Zoom
From my earlier blog posts you know Microsoft’s Silverlight Deep Zoom allows you to take a bunch of high resolution images and stream them as you zoom in providing more detail on just the area you’re viewing.
The good news is that AndreaMosaic will generate a Deep Zoom application for you automatically, the bad news is to do anything with that you’re going to want to import it into a tool like Deep Zoom Composer and and start working with it. I ran into a problem here because my home PC only has 4GB of memory and quickly depleted that and Deep Zoom Composer would crash (let’s chalk it up to beta software). To get around this, I had Andrea Mosaic split my image up into 4 separate images:
I created a new Silverlight project in Deep Zoom Composer (DZC), added my 4 images to the project:
Then I zoomed in to arrange them on the palette in DZC so that they lined up I set the export options in DZC:
and had it create my new Deep Zoom project in an HTML / Silverlight project that was web ready for me. I could now go from:
To this:
All the way to this:
With plenty of detail that I could really enjoy. Best of all, the newly generated project has all the controls for zoom in, zoom out, center and even FULL SCREEN, all created automatically for you!
Step 3, uploading your new project.
Now that you’ve got your project created and tested out the next step is to upload. Now in the “New Microsoft” they’re all about hosting the content and applications for you so you can either host your new project on their site, or be uber-cool and host it on your own website like me:
https://jesscoburn.com/coburnchristmas08/
There’s a little massaging to do though to get it to display out of the gate. So here’s what I did:
- In your exported project you’ll find a folder DeepZoomProjectWeb. Let’s assume you’re going to upload your project to a new folder on your site called deepzoom. Within the DeepZoomProjectWeb folder copy the web.config file to your deepzoom folder on your website.
- In the DeepZoomProjectWeb/ClientBin Folder copy all of those files and folders (GeneratedImages, DeepZoomProject.xap, DeepZoomProjectTest.html, Silverlight.js) into your deepzoom folder on your website.
- Finally, rename your DeepZoomProjectTest.html file to default.htm (or index.html) and open your site, domain.com/deepzoom/ and the page should load fine.
That’s all there is to it. Really, just 3 simple steps and you’ll have your own Dynamic Zooming Photo Mosaic, thanks to a couple freeware apps, a little munging of data and a bit of creativity.
Here’s the cool thing. My original 4 files for my mosaic were about 25MB total. The zooming project is about 100MB but you don’t really download that full 100MB only the parts that you’re looking at and zooming into.
