To start with, there are many ways how Deep Zoom application can be created. As I have written before here, easiest way is to use Deep Zoom Composer. However, I want to use it as a part of my application, so any outside application is not a choice.

Microsoft has released independent Deep Zoom library, but documentation is very limited, so I mostly used various MSDN blogs. For example, only in this article I have found list of available classes (with some useful comments). My first try was to use this Bryan Like’s example (at the end of post you can find a link to a working application).

Given code works just fine, but it can be improved. It allows doing a lot of post-processing modifications inside Silverligt client application, but in most cases such approach is very slow. Problem is, for every zoom level it loads not “grouped” image like this but required size copies of all visible images.

If, for example, there are 1000 images in a window, it will load all of them even if a single image size is just some pixels. What correct application should do is to load “grouped” images – downloaded amount of data is the same, but required HTTP calls is minimal. I only recommend using that code if you need to have dynamic layout or something like that. As I said before, in most cases, different approach should be chosen.

For my tests I downloaded big collection (>5000) of books covers from my project ManoKnyga.lt and when tried to show them in one screen. Working demo (requires Silverlight installed), JavaScript example:

After doing some in-depth analysis of Composer generated files I almost ended up witting my own Deep Zoom implementation, because I couldn’t find any flexible solution. However, later I found out that SparseImageCreator class is the only thing I need. It works almost the same as previously discussed CollectionCreator class, but generated output is exactly what I need. Code:

string source = @"C:\tests\Books";
string dest = @"C:\tests\GeneratedImages";
 
List images = GetImagesInDirectory(source);
List<Image> data = new List<Image>();
 
int start = 200;
int limit = start;
 
double x = 0.0;
double y = 0.0;
 
double rows = Math.Sqrt(start);
 
foreach (var image in images)
{
    if (limit < 0)
        break;
 
    limit--;
 
    Image img = new Image(image);
 
    img.ViewportWidth = rows+1;
    img.ViewportOrigin = new System.Windows.Point(-x, -y);
 
    x += 1;
 
    if (x >= rows)
    {
        y += 1.333;
        x = 0.0;
    }
 
    data.Add(img);
}
 
SparseImageCreator cc = new SparseImageCreator();
 
cc.TileSize = 256;
cc.TileFormat = ImageFormat.Jpg;
cc.ImageQuality = 0.95;
cc.TileOverlap = 1;
 
cc.Create(data, dest + "\\output");

This code loops through all images (with limit) in folder and adds them to a list of Images. Also it sets the ViewportOrigin property, which is used to position Image in space. Last step is to create a collection, what is done by SparseImageCreator class. Depending on images count this takes a while and consumes quite a lot of memory, so for using in a web application I need to create a scheduler too.

Another part of Deep Zoom is creating a Silverlight application. It can be easily done with Composer (just create a project with one image, and then customize generated source code for your needs). However, I’m not going to explain how to do it, because there are lots of examples online and I’m going to write another article about Silverlight only.

Currently I have some problems with library throwing Exceptions with big collections, nevertheless another milestone is reached (first was using .NET assemblies in PHP). Now I need to work on front-end part.

My project will allow people to upload huge collections of photos (probably archived in one zip file) and get nice online gallery. Users will have selection of Ajax or Silverlight version and password protection for galleries. If I have time, I will also add ability to select different photos shuffle style, background theme and/or music, and maybe even automatic tour with captions.

PHP will work as front-end language (with Zend Framework), and C# will be responsible for all Deep Zoom work (which I haven’t tried/tested yet, but I believe it will work). Not only it’s quite useful app, but also showcases a lot of cool technologies. Leaseweb, sponsor of this competition, provided us with dedicated servers so I will hopefully publish alpha version in some weeks.

Why I chose to participate? Firstly, it’s good experience, because I do a lot of PHP, but also more and more C#, so it’s great opportunity to learn more. Secondly, in my belief, such competitions are really useful for portfolios and CV’s – I’m currently looking for a job, so it can help. Lastly, competitions are fun, so, I’m in.

Part of competition requirements is “blog about your experiences with Windows Server 2008 during the contest” so I’ll write around 2-3 posts every week about project status, problems with switching from Linux back to Windows and more. Also, I’m really bad in designing websites, so if anyone would like to help me – please feel free to contact.

There are multiple implementations of Seadragon: Ajax or Silverlight based, mobile version and maybe more. All of them works the same – loads only that part of image which is now visible. What you need to do as developer is to create collection of images parts which will later be used to create zoom effect.

Creating Deep zoom images is not hard at all – Deep Zoom Composer does all the work for you. I chose simplest way – imported one image and exported project as Seadragon Ajax application, but Composer allows you to create zoom-able galleries, group images to layers, upload project to PhotoZoom gallery, etc. Ajax version uses Xml index and thousands of small images, so I see possibility to create it dynamically.

My test project was using huge image from my university project named “RayTraced 3D Fractal”. I had only one very big image (10′000 x 10′000) which wasn’t from final version so it lacks proper antialising and because I compressed it (raw original was 1Gb size), smallest particles aren’t detailed enough. I will probably regenerate it someday to show full power of Seadragon.

Smoothness of transitions depends on Internet speed, but somehow whole application lags a little bit for me (especially when viewed in full-screen). I tried creating Silverligh version and it works much more smoother, so it probably has to do something with browser performance. However, embedded viewer is good enough to use in websites – JavaScript version is not as smooth as Silverlight one, but works in all browsers and doesn’t require any plug-ins.

In conclusion, Microsoft Seadragon is really nice technology and can be really helpful displaying very big images (maps? GPix photos?..). Maybe it’s practical only in rare cases, but it still shows how normal user interfaces can be used to manipulate huge amounts of data. I really like seeing Microsoft releasing such products.