Feed Icon  

Contact

  • Bryant Likes
  • Send mail to the author(s) E-mail
  • twitter
  • View Bryant Likes's profile on LinkedIn
  • del.icio.us
Get Microsoft Silverlight
by clicking "Install Microsoft Silverlight" you accept the
Silverlight license agreement

Hosting By

Hot Topics

Tags

Open Source Projects

Archives

Ads

Deep Zoom Image Generation with DeepZoomTools.DLL

Posted in Silverlight | Deep Zoom at Wednesday, November 26, 2008 10:49 PM Pacific Standard Time

Yesterday I saw that the Expression Blend and Design team had blogged about the new DeepZoomTool.dll:

In our most recent release of Deep Zoom Composer, one of the major changes we made was to change how we generated the image tiles both for designing as well as exporting your Deep Zoom Content. In the past, ever since our first release at MIX, our image encoding was done using a combination of SparseImageTool.exe and ImageTool.exe command line tools. Starting with this release, we have retired those tools and have shifted to a preview version of a .NET based DLL that provides image generation capabilities.

Building Deep Zoom Images via code is something that I’ve wanted to do for some time. I’ve tried to figure out how to do this many different ways, but I’ve never gotten it to work. So I was pretty excited to try out this new API for Deep Zoom. I still don’t fully understand it all, but I was able to create a very simple program to generate a deep zoom image based on a bunch of photos.

First, I read all the image files into a List of strings. I created my code so that it will go into subfolders as well:

private static List<string> GetImagesInDirectory(string path)

{

    return GetImagesInDirectory(new DirectoryInfo(path));

}

 

private static List<string> GetImagesInDirectory(DirectoryInfo di)

{

    List<string> images = new List<string>();

 

    // get all the images in this directory first

    foreach (var fi in di.GetFiles("*.jpg"))

    {

        images.Add(fi.FullName);

    }

 

    // get all the directories with their images

    foreach (var sub in di.GetDirectories())

    {

        images.AddRange(GetImagesInDirectory(sub));

    }

 

    return images;

}

 

Next, once you have the list of Images, you need to generate all the Deep Zoom images which are folders containing tiles of the image at different zoom levels. We generate these images using the ImageCreator. For a great overview on Deep Zoom and Tiles, check out Jaime Rodriguez: A deepzoom primer.

List<string> images = GetImagesInDirectory(source);

List<string> data = new List<string>();

 

foreach (var image in images)

{

    ImageCreator ic = new ImageCreator();

 

    ic.TileSize = 256;

    ic.TileFormat = ImageFormat.Jpg;

    ic.ImageQuality = 0.95;

    ic.TileOverlap = 0;

 

    string target = dest + "\\output_images\\" + Path.GetFileNameWithoutExtension(image);

 

    ic.Create(image, target);

    data.Add(Path.ChangeExtension(target, ".xml"));

}

Now we should have a bunch of folders and xml files in our “output_images” folder in our destination. Now that we’ve created all the images and their tiles we need to create the collection using the CollectionCreator. The collection creator takes in the list of xml files that we generated and creates another xml file plus some more image tiles.

CollectionCreator cc = new CollectionCreator();

 

cc.TileSize = 256;

cc.TileFormat = ImageFormat.Jpg;

cc.MaxLevel = 8;

cc.ImageQuality = 0.95;

 

cc.Create(data, dest + "\\output");

 

Now we can actually start to use our Deep Zoom image. However, we will need a Silverlight Deep Zoom project in order to display the images. To do this just create a Deep Zoom project, add an image or two, and then export it to a Silverlight Project. In that project delete the contents of the GeneratedImages folder inside of the client bin and then set the dest variable in the above code to the path of the GeneratedImages folder you just cleaned out. Point the source variable to a folder containing the folder you want to load the images from and run it. You should get an output.xml file in the GeneratedImages folder.

You will need to make a couple of changes to the Silverlight project once you’ve done all that. First, we need to position our images since right now they are just a collection. We do this by setting the ViewportWidth and ViewportOrigin. I’m still trying to fully understand these, but the best explanation I’ve seen so far is also on Jaime Rodriguez’s blog: Working with Collections in Deep Zoom.

void msi_ImageOpenSucceeded(object sender, RoutedEventArgs e)

{

    //If collection, this gets you a list of all of the MultiScaleSubImages

    //

    var x = 0.0;

    var y = 0.0;

    foreach (MultiScaleSubImage subImage in msi.SubImages)

    {

        subImage.ViewportWidth = 5.333;

        subImage.ViewportOrigin = new Point(-x, -y);

        x += 1;

 

        if (x >= 5)

        {

            y += 1.333;

            x = 0.0;

        }

    }

 

    msi.ViewportWidth = 1;

}

Now we’ve arranged out images on the viewport, but we also need to point the MultiScaleImage to our output.xml instead of what it was before (do that in the page.xaml file). Once we’ve done that we should be able to run and see our generated deep zoom!

deepzoom

There is still a lot of work to do on this, like figuring out the proper ViewPortWidth based on the number of images and image size, but this is a good starting point. I’m hoping to get some more time to play with this this weekend and I’ll post more as I figure it out.

Happy Thanksgiving!

Update: Just uploaded my project which should make it a lot easier to try out. Just set the source and dest variables, run the console app, and then build and run the website. Have fun!

Saturday, November 29, 2008 6:40:23 PM (Pacific Standard Time, UTC-08:00)
Wow. No we are on the right way. You wrote "There is still a lot of work to do on this" I hope you will do it ;-) I am watching you.
Friday, January 23, 2009 10:54:42 AM (Pacific Standard Time, UTC-08:00)
Hi Bryant,

Thanks for the tutorial on using DeepZoomTools.DLL

I'm new to WPF/E, Silverlight and C# but am trying to bring myself up to speed. My project is very similar to this, except I want to work with images at multiple resolutions. I'm trying to adapt your code to achieve this.

I could follow the first part of your post - this is a .NET c# program to make use of the dll, but I'm not clear on the second part.

Can you provide a bit more background on which files need to be edited to modify the Silverlight project to align the images (i couldn't find this code in your project zip file) and what software tools I would need to have and to learn.

Many thanks

mat
Mat Tizard
Tuesday, April 14, 2009 7:37:47 PM (Pacific Daylight Time, UTC-07:00)
Hi
I have used this dll , but it not releasing all the used resource. suppose i have created image pyramid of x.jpg , if i try to delete x.jpg of tile generation complete , it show error: This file is used by other process

Can u help me how to solve it

Vijay
Tuesday, April 28, 2009 7:49:27 AM (Pacific Daylight Time, UTC-07:00)
Thanks a lot.
Great example!
Roberto
Thursday, April 30, 2009 2:12:28 AM (Pacific Daylight Time, UTC-07:00)
Hi,
Thanks a Lot for great Working code.

Just a question.
Say i want to create DZ images and want to put tag to individual image so that later on i can use this tag of subimage to filerout images.
I don't see any property named as tag to input tag value to individual image.
Please help

Thanks Again
You can mail me at vpsingh25@gmail.com

Vajinder Pal Singh
Vajinder Pal Singh
Thursday, May 21, 2009 8:07:22 PM (Pacific Daylight Time, UTC-07:00)
Hi there. I really LOVE this. Thanks a lot. I am trying to import a pdf file and then send it into DeepZoom. I think this is VERY close to what I need - now I just need to move the pdf into a jpg first. Is there a way of say putting a label on a specific part of the image, so on the head of a person and then display the person's name on the person's head... and even if you zoom out, you still see an arrow to the person's head...? (Hope this example makes sense? :))
Wednesday, July 22, 2009 7:14:44 PM (Pacific Daylight Time, UTC-07:00)
Error1 The type or namespace name 'SilverlightControls' does not exist in the namespace 'System.Web.UI' (are you missing an assembly reference?)

How to resolve this ??
varun
Thursday, August 06, 2009 8:18:15 PM (Pacific Daylight Time, UTC-07:00)
Hi this article is very cool. Though I must ask you as to how would you create the 'metadata.xml' file at runtime. I will definitely need the file to link the z-order and tag properties.
Anubandh
Monday, September 07, 2009 11:34:17 PM (Pacific Daylight Time, UTC-07:00)
I try to create a collection dynamically with DeepZoomTools DLL but I can't create the content for the "dzc_output_files" .
Have you found a solution for this issue?
lorenzo
Thursday, September 17, 2009 5:29:45 AM (Pacific Daylight Time, UTC-07:00)
After I downloaded your uploaded project I observed that you use a console application to generate the images then use them from the web application.I think this will cause two disabilities:

1-You cannot use this way if you are dealing with a Hosting Company server(not your own server).
2-You should use the console application each time you have add a new image to the source images so things doesn't go automatically as every body wish.

I hope I get comments about my comment especially if I said something wrong because I hope that we develop the article above to become better and better...

Thank you for this great article...
TheEagle
Thursday, September 17, 2009 11:07:12 PM (Pacific Daylight Time, UTC-07:00)
Seems like they have removed system.web.silverlight in 3.0, is there an updated project?
GenCode
Wednesday, September 23, 2009 3:52:46 AM (Pacific Daylight Time, UTC-07:00)
Is it possible to generate Metadata.xml file in the same way we generate output.xml file ?!

I searched in google for 4 hours but I couldn't find an answer for this question?!

If the DeepZoomTools.DLL not responsible for generating Metadata.xml file then how could we generate it dynamicaly?!

I hope that you can answer this question since you made a big success already.
TheEagle
Wednesday, September 23, 2009 6:23:57 AM (Pacific Daylight Time, UTC-07:00)
Anubandh I had the same need could not generate it at runtime.
the solution was to create the file metadata.xml manually and use <ZOrder> </ ZOrder> to tie the tag with the images of the collection
metadata.xml
v
Comments are closed.