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:

privatestaticList<string> GetImagesInDirectory(stringpath)

{

returnGetImagesInDirectory(newDirectoryInfo(path));

}

privatestaticList<string> GetImagesInDirectory(DirectoryInfodi)

{

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

// get all the images in this directory first

foreach (varfiindi.GetFiles("*.jpg"))

{

images.Add(fi.FullName);

}

// get all the directories with their images

foreach (varsubindi.GetDirectories())

{

images.AddRange(GetImagesInDirectory(sub));

}

returnimages;

}

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.

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.

CollectionCreatorcc = newCollectionCreator();

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.

voidmsi_ImageOpenSucceeded(objectsender, RoutedEventArgse)

{

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

//

varx = 0.0;

vary = 0.0;

foreach (MultiScaleSubImagesubImageinmsi.SubImages)

{

subImage.ViewportWidth = 5.333;

subImage.ViewportOrigin = newPoint(-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!

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!

This is something that wasn’t clear to me so I decided to blog about so that I could fully understand it. Both IValueConverters and TypeConverters are used to do conversions (imagine that!), but they are used differently.

TypeConverters are used by the Xaml parser during parse time to convert values in the Xaml into values in CLR objects. So when you set Height=”100”, height isn’t a string so it has to be converted to a double. This is done using a type converter. Type converters are also one-way since once the value has been converted from Xaml to CLR it doesn’t have to go back. Custom type converters must be placed on the class they will be used on in order for them to work since otherwise the Xaml parser doesn’t know how to convert the value. There is a good MSDN article on TypeConverters which offers much more information.

IValueConverters are used during data binding via a property path. Typically these get created as a static resource in your Xaml file and then are referenced in the binding. Unlike type converters, value converters can go both ways since bindings can be two way bindings. Since value converters are specified in the binding they are much more dynamic and don’t require any references such as the type converters do. Value converters are also more flexible in that they can be passed a parameter via the ConverterParameter. You can read this great blog post on how this works if you’re interested.

A good example of how value converters make Silverlight more extensible is this question in the Silverlight forums. Odegaard was binding to a Dictionary object and was trying to get one of the keys to show up in his TextBlock.Text property. However, even though WPF supports this property bag type of binding, there is no way to do this directly in Silverlight. To get this type of binding to work you can use an IValueConverter. In this case the value converter would get the key in the dictionary and return the proper value. You can see the code for this in the original post (although the questioner didn’t like my implementation because it was too complicated, I thought it was rather simple).

I tried to come up with a more generic approach instead of requiring the dictionary to be of type Dictionary<string,string>, however the best I was able to do was have the value type be assignable but the key still had to be a string.

About six months ago I decided to take a break from blogging without feeling bad about it. It was a nice break, but really my lack of blogging was mostly due to the type of work I was doing. I was working on an interesting project for a large media and entertainment company that combined Microsoft Excel and Project Server 2007 with lots of .NET 3.5 goodness like WCF and WF. While it was an interesting project, I wasn’t really working with the technology that really interests me: Silverlight.

But I’m excited to announce that Avanade has gotten serious about UX and has created a UX practice in the west region (where I work). I’m very fortunate to get to be a part of the leadership team for this practice and I’m excited to see where things are headed. So I’m now a User Experience Developer and I get to work with the technologies that I’m passionate about like Silverlight and WPF.

So what does it mean to be a User Experience Developer? Well, I feel like that is something that I still have to figure out. I know that putting User Experience in front of Developer doesn’t suddenly make you better at UX. However, I think it is much like when you first start out as a developer, you don’t really know what it means yet, but you’re setting out to become a developer. So hopefully by focusing on becoming better at UX I will in the process become a true UX developer and I’ll be bringing this blog along for the ride.

I’ve actually been working on a Silverlight project for the last couple of months and have some blog posts in the works already. So keep an eye out from some Silverlight related posts coming soon.

Administration

About

The posts on this weblog are provided "as is" with no warranties and confer no rights. The opinions expressed herin are the personal opinions of the individual authors and do not represent the views of Avanade in any way.

This blog theme was designed and copyrighted 2009, by Alexander Groß and is used with his explicit permission.