KIRUPA.CHINNATHAMBI

In the previous post, I started talking about some of the collection-related improvements we made in Deep Zoom Composer. The crux of that post was describing how you can defer to the Silverlight application the task of arranging and positioning your images.

Deep Zoom Composer ships with one basic template, based on my earlier Tag Browser, that handles simple arrangement of like-sized images during runtime. Of course, there are many more things that you may want to do beyond just having items be arranged in a grid. You may want to arrange them circularly. You may even choose to go scattershot like one of the layouts you have in DeepZoomPix:

Beyond just the layout of the images, you have access to several pieces of metadata in the scene.xml and metadata.xml files!

Essentially, there are a lot of things that you can do that our default templates simply do not expose in Deep Zoom Composer (DZC). To help solve that problem, we made the process of selecting a template from within DZC extensible:

While we currently ship with three templates, you can easily add your own. This post will describe briefly the two types of templates you can add.

Template Without Source Files/Project
To simply provide your own template, all you need is an HTML file named test.html and the corresponding XAP that is used to display your Deep Zoom images. Your Deep Zoom Images will be in GeneratedImages/dzc_output.xml relative to your XAP.

Note: The test.html file needs to have the appropriate tags to actually display the XAP file.

Once you have your HTML file and XAP file, you will have to find the Deep Zoom Composer installation directory. By default, that is found under Program Files/Microsoft Expression/Deep Zoom Composer. Once there, find the folder named Export Templates. You will see three folders whose name matches the name of the templates you see in the above screenshot:

In this location, add a new folder whose name will be what you want to have showing up inside the templates drop-down in DZC. I am going to name my folder Kirupa’s Template:

Once I have created this folder, I simply paste my HTML file named test.html and corresponding XAP file into it.

After doing all of this, if I restart Deep Zoom Composer, switch to the Custom tab under Export, and expand the templates drop-down menu, notice that Kirupa’s Template now appears:

When you export with your chosen template, your HTML file and XAP will be copied along with the GeneratedImages folder that contains the various XML files and Deep Zoom image tiles:

If you find yourself stuck, you can always look at how the Tag Browser and Default templates inside your Export Templates are laid out.

Template With Source Files/Project
In the previous section, I explained how to add your own custom template with just an HTML and XAP file. There will be cases where what you want to use involves source files. For example, you may create a generic template that does something really cool with the various metadata files we generate. The actual look of the application is something that you would want a more technically/design savvy end-user to modify instead.

For those cases, an HTML file and XAP file are grossly inadequate. What you need to be able to provide is both the HTML file and XAP along with the source files associated with it. To add your custom template that includes source files, the steps are a little similar to the general XAP + HTML case. What is different is what DZC expects in terms of folder names and project locations.

Note: For reference, look at how the project under Deep Zoom Classic + Source are laid out.

Inside your Export Templates folder, create a folder whose name is what you want your template to be known as.

Next, create a new Silverlight project using Expression Blend 3 named DeepZoomProject, this solution and folder structure is created for you. When you build your application, you will basically see the following structure:

If you compare this directory with what you see in your Deep Zoom Classic + Source folder, you will see that almost everything is identical:

The only thing that is missing in what you created in Blend and what DZC expects is a GeneratedImages folder in your ClientBin directory living alongside your XAP. You can add this folder easily using Blend 3 by right-clicking on the ClientBin folder and selecting Add New Folder:

All that is left after you add your new folder is to rename it to GeneratedImages to make DZC happy:

Once you have your project done, just copy and paste your DeepZoomProject Solution file, the DeepZoomProject folder, and the DeepZoomProjectSite folder into the folder you created under DZC’s Export Templates directory. The folder you paste your source files into must contain the word Source as part of its name. For example, my folder is called Kirupa’s Template + Source:

Conclusion
This post wraps up my coverage of the new Export-related features we now have inside Deep Zoom Composer. Hopefully this post and the previous post help you create the really nice Deep Zoom collections and visuals that you had always wanted to do easily.

Cheers!
Kirupa

A couple of days ago, we released another version of Deep Zoom Composer. One of the major changes we made revolved around dealing with large collections of images, and this was something that Deep Zoom Composer never handled particularly well in the past.

Some Background
As you may know, Deep Zoom Composer allows you to import your images, arrange them in whatever fashion you like, and even add some cool interactions and navigation. My fellow Expression Blend colleague, office mate, and co-conspirator on Deep Zoom Composer, Janete Perez, wrote extensively about those features in her series of posts here, here, and also here.

Manually composing your layout is great for a moderate number of images, but once you cross into hundreds if not thousands of images, the workflow does not scale. Manually arranging that many images will not be fun, and it probably isn’t even what you want to really do.

When you are dealing with large quantities of images, more than likely, what you want to do is have your Silverlight application take care of arranging and positioning your content at runtime instead such as what this example highlights. This on-the-fly positioning and arranging is what most of the popular Deep Zoom examples such as Hard Rock Cafe do as well.

Deep Zoom Composer, with our recent release, now plays two roles. The first role is the one it always played. It still allows you to import your images, arrange them on the artboard, and export them:

The second role is something that is new. You still import your images. That has not changed. What is new is that you no longer have to compose your images. You can just import your images, skip the compose step altogether, and go straight to exporting:

This means that you can safely import hundreds (if not more!) images and seamlessly export them.

Using the New Features
Once you have imported your images, go straight to your Export view:

From the Export view, click on the Custom tab to go to see our more advanced Export options. Make sure you are exporting a Silverlight Deep Zoom output, give your project a name, and ensure the Export as a collection option is selected by default if it hasn’t already been selected for you.

The next step is crucial. You need to pick a project template that supports rearranging on the fly inside your browser. Currently, the only template that does that is the Tag Browser. Click on the drop-down that says Default and select the Tag Browser entry:

Your Custom tab’s various options and selections should look like the following:

Hit the Export tab to generate the Deep Zoom image tiles and associate them with the Tag Browser template that you selected. After a few moments your Export Completed dialog will appear:

Click on the Preview in Browser button to launch your browser and to see how everything looks. You will see that the images you imported automatically appear in a grid:

Notice that the Tag browser actually allows you to filter by tags. Wouldn’t it be cool if Deep Zoom Composer allowed you to do all of this as well…?

Tagging your Images
Programmatically laying your images out is cool, but being able to filter what images you see based on the tag is even cooler. To be able to do this, you will have to venture into your Compose view. In the Compose View, you will see all of your currently imported images laid out horizontally at the bottom of your screen along with a list of the properties on each image you can view or set:

You can select one or multiples images from this list and add the Tag that you want in the Properties panel you see on the bottom-right:

When working with lots of images, though, the tiny panel you are viewing all of your images may not be very helpful. You can maximize this panel by clicking on the up-arrow found on the top-right corner of the panel itself:

Once you click on that button, notice that your entire Compose view is nothing more than your list of imported images and the properties you can view or set on them:

This maximized view optimizes Deep Zoom Composer for doing nothing but pure Collection exporting with the option of tagging your images.

If you export again, using the same selections that you had before, notice that the Tag Browser now displays any tags you may have displayed with the option of clicking on a tag and viewing only the images associated with that tag:

Hopefully you find this feature as much fun to use as it was for us to implement it. You can always use Deep Zoom Composer to manually arrange and position your images, but if want to not deal with that and have your images arranged and positioned on the fly, you can now do that as well.

As you can tell, this post got pretty long, and there are a few more features that I will describe in a future posting. To give you a heads-up, the templates you see when exporting as a Collection, such as Tag Browser, are extensible. You can add your own custom templates and have it be something you can select directly from within Deep Zoom Composer.

Stay tuned to learn more about that.

Cheers!
Kirupa

Yesterday, at MIX09, we released a preview version of Expression Blend 3. Expression Blend 3 contains a lot of cool new features, and one new feature that I and a few other Blenders have been involved with is something known as Behaviors.

In this introductory post, I am not going to delve into great detail what behaviors are or how you can write them. Instead, I am going to introduce behaviors by taking a non-trivial example and comparing the workflow for completing a task without using behaviors as well as completing a task using behaviors.

Setting the Stage
After seeing all the demos of Deep Zoom in Silverlight, you realized that you wanted to create your own little Silverlight application that used the Deep Zoom technology to display some of your photos.

Since you are a regular reader of this blog (let’s pretend for a moment that such people exist!), you know enough about Deep Zoom to find your way around. You know that the MultiScaleImage control in Silverlight is what you use to create Deep Zoom content. You also know that you use Deep Zoom Composer to actually take your images and tile them up in the format Deep Zoom understands.

You put all of those pieces together by creating a new project in Blend, drawing out your MultiScaleImage control, and setting your MultiScaleImage control’s source to be the Deep Zoom content you had exported earlier. Pretty simple. When you preview your application, you will see your Deep Zoom content displayed in your browser:

So far so good. You then test your application by performing some common Deep Zoom gestures such as clicking, sliding, and rolling your mousewheel. After a few seconds, you realize that all of your clicking, sliding, and mousewheeling isn’t really doing anything to your Deep Zoom image. Nothing is happening! What is going on?

Here is what is going on. Out of the box, your MultiScaleImage control only provides you with the ability to view Deep Zoom content. Being able to interact with the view so that you can zoom and pan is something that you have to do on your own.

Adding the Deep Zoom Interactions the Hard Way
Let’s first look at the hard way of making your MultiScaleImage control support zooming and panning. You give your MultiScaleImage control a name, jump into the code behind file, and write the code that adds zooming, panning, and mousewheel support.

The code for doing all of that properly is around 600 lines. When I copied the code that we currently use in the Deep Zoom Composer project template to perform the common Deep Zoom interactions and pasted it into Microsoft Word, the pasted content spanned around 7 pages:

This is 7 pages of code you will need to write for something that would provide you with the minimum level of functionality. Unless you had access to someone who is good at writing such code, your ability to create a compelling Silverlight application using Deep Zoom will be limited. Sigh.

Adding the Deep Zoom Interactions the Easy (Fun!) Way
In the preceding paragraphs, I showed you how complex it is to add some simple interactivity to your MultiScaleImage control. With Expression Blend 3, this same task has the potential of being easier…much easier.

Just like before, let’s say you are starting off with a simple Silverlight web application that displays some Deep Zoom content. You want to add the ability to zoom and pan your content, but you certainly don’t want to write or copy and paste hundreds of lines of code.

Instead, you open or create this Deep Zoom project I’ve described in Expression Blend 3. Once your project has been opened, launch the Asset Library and click on the Behaviors tab:

You will see a collection of behaviors displayed. The behavior I want you to focus on is the one on the top-left called DeepZoomBehavior. Drag and drop that behavior onto your MultiScaleImage either via the artboard or the object tree:

Once you have dropped your DeepZoomBehavior onto your MultiScaleImage control, you will see your behavior happily attached to it:

All you have to do now is hit F5 to test your application. Just like before, your Deep Zoom content will display at its initial size. Unlike before, though, interacting with the content using your mouse will allow you to pan and zoom around.

Remember, in this approach, all of this was done without having to write any code.

Wrapping it Up – What just Happened?
What I described is an example of behaviors at work. A behavior is a little reusable piece of interactivity that you can attach to any element. Once an element has been attached with a behavior, the element’s functionality is largely under the behavior’s influence. If you are a Futurama fan, think of a behavior as a brain slug attached to a host element:

( image courtesy of The Infosphere )

In our example, I took the code that I would have normally written to interact with the MultiScaleImage control and placed it into a behavior. The amount of code needed to have my functionality exist is still on the order of 7 pages. What changed is the packaging and use of the code.

If you are not code-savvy, with behaviors, you no longer have to worry about copying and pasting code, fixing namespace names, making sure the proper assembly references exist, etc. All of that work is automatically handled by a behavior written by someone. As a user of behaviors, all you have to do is simply gain access to a library of them.

One good location to start is our recently launched Behaviors category on the Expression Gallery: I have provided a simple DLL (plus project and example) that contains all of the above behaviors you see above. Simply add a reference to the SilverlightBehaviors.dll in Expression Blend 3, and you are set.

Hopefully, this post gave you a good introduction to what is possible using behaviors. In subsequent posts, I will describe in more detail how to write and use behaviors, and I will also link to posts written by friends/colleagues who also worked on the behavior feature for Expression Blend 3.

Cheers!
Kirupa

This year’s MIX page contains several cool projects and experiments that you can play with. One of my favorites is Project Descry – an attempt at visualizing data in interesting ways: http://www.visitmix.com/Lab/Descry#visuals

Best of all, the source code to all of the projects is provided. Since I am a Deep Zoom kind of person (until after MIX when I can tell you what else I’ve been working on!), you should definitely check out A Website Named Desire:

This is a Deep Zoom-based pixel representation of all the crazy things that go on in a typical web development environment. If you have ever been curious to know how to create Deep Zoom overlays where non-image content is overlaid over key parts of a Deep Zoom image, check out the source code for this project!

Mix-ing it up 09 Style
Speaking of MIX, I and a handful of Expressioners will be at MIX either presenting or causing general mayhem…or both! If you will be in attendance, feel free to drop by and say Hi.

Cheers!
Kirupa

The MultiScaleImage control is quite flexible in that it allows you to do a bit more than just zooming in and panning on images. At its core, it is basically a layout panel that allows you to view high resolution images efficiently. Everything else that it does is similar to that of a plain, boring layout panel – such as a Canvas.

This boringness is actually a good thing! It means you can take some old tricks and apply them in clever ways such as by creating a slideshow:

( click on the next, previous, and home buttons to play with the slideshow )

In the past, creating a slideshow would have required you loading the entire series of images initially or writing code to preload them on-demand. By using the MultiScaleImage control, only low-res images are downloaded for the initial thumbnail view, and only the the individual images you are focusing on get downloaded in higher-resolution. Only as you zoom in further are more detailed tiles downloaded.

Setting up the initial arrangement of your images is pretty simple using Deep Zoom Composer as well. You don’t have to settle for the standard grid layout that I used above.

You can download the source from below:

Download Deep Zoom Slide Show Source

The above code contains everything you need to get up and running. What you will need to do is use Deep Zoom Composer to export some images as a collection. Those exported images (+ xml files) should be placed in the GeneratedImages folder of the source code you extracted from above.

Looking at the Code
The code for this looks briefly as follows (thanks to Ken Perkins on the Live Labs team for helping with some of it):

private int currentImage = 0;

//
// Given a MultiScaleSubImage index, focuses in on that image
//
private void ZoomOnImage(int subImageIndex)
{
    //
    // Thanks to Ken Perkins of the Live Labs team for
    // helping me with portions of the below code
    //

    // Get current SubImage
    MultiScaleSubImage subImage = msi.SubImages[subImageIndex];

    // Get the current zoom factor to scale everything by
    double scaleBy = 1 / subImage.ViewportWidth;

    // Create a Rect of your SubImage's coordinates and size in the current zoom level
    Rect subImageRect = new Rect(-subImage.ViewportOrigin.X * scaleBy,
                                 -subImage.ViewportOrigin.Y * scaleBy,
                                 scaleBy,
                                 (1 / subImage.AspectRatio) * scaleBy);

    // Figure out how to align the image inside the MSI viewport
    if ((this.msi.Width / this.msi.Height) > subImage.AspectRatio)
    {
        double targetViewportWidth = subImageRect.Height * this.msi.AspectRatio;
        double targetPointX = (targetViewportWidth - subImageRect.Width) / 2;

        this.msi.ViewportOrigin = new Point(subImageRect.X - targetPointX, subImageRect.Y);
        this.msi.ViewportWidth = targetViewportWidth;
    }
    else
    {
        this.msi.ViewportWidth = subImageRect.Width;
        this.msi.ViewportOrigin = new Point(subImageRect.X, subImageRect.Y);
    }
}

//
// Move to the previous MultiScaleSubImage or restart
// from the end once you reach the first image
//
private void PreviousSubImage(object sender, RoutedEventArgs e)
{
    if (currentImage == 0)
    {
        currentImage = msi.SubImages.Count - 1;
    }
    else
    {
        currentImage--;
    }
    ZoomOnImage(currentImage);
}

//
// Move to the next MultiScaleSubImage or restart from
// the beginning once you reach the last image
//
private void NextSubImage(object sender, RoutedEventArgs e)
{
    if (currentImage == msi.SubImages.Count - 1)
    {
        currentImage = 0;
    }
    else
    {
        currentImage++;
    }

    ZoomOnImage(currentImage);
}

//
// Resets the view back to the starting point
//
private void ResetView(object sender, RoutedEventArgs e)
{
    this.msi.ViewportWidth = 1;
    this.msi.ViewportOrigin = new Point(0, 0);
}

The code that is most relevant to you is what is found in ZoomOnImage. It is here where, given a MultiScaleSubImage index, all of the necessary calculations are made to have your screen’s viewport size be set to the best fit of the subimage’s viewport size.

I may discuss this the logic behind this in a future blog post

Cheers!

Kirupa

In case you missed out on all of the news, Silverlight 2 was released late last night. A few seconds afterwards, Expression Blend 2 SP1 and the next preview of Deep Zoom Composer (DZC) were released as well.

Because I am too tired right now to go into any great detail about any of the topics above, I will just farm you out to other blogs that covered these details instead. Two great overviews of Silverlight 2 can be seen in Scott Guthrie’s post as well as Tim Heur’s post describing the launch.

To get started creating Silverlight 2 applications, I have updated my Getting Started guide from March to be more relevant.

Cheers!
Kirupa

Since Ninja Gaiden II on Path of the Mentor is ridiculously difficult, I figured I would distract myself by going through my to-do list. First up is updating the Deep Zoom Tag browser to work with the latest build of Silverlight 2.

You can download the updated source files from the following:

Download Tag Browser Source (Visual Studio 2008)

To learn more about this (and how to use it), visit my original post on this topic: http://blog.kirupa.com/?p=212

I also fixed one annoying bug where if you had only one image associated with the tag, the zooming/panning wouldn’t work to bring that single image into focus.

Cheers!
Kirupa

One of the things I am involved with on the Expression Blend team a small side-project known as Deep Zoom Composer (DZC). I’ve briefly written about both the composer and Deep Zoom in the past – mostly from a developer perspective, but in this post I’m going to talk about a feature in Deep Zoom Composer that is more general and full of, as the cool people say these days, epic win.

First of all, if you have not downloaded our latest version of Deep Zoom Composer (it’s free after all!), do so by clicking on the link below:

Download Deep Zoom Composer

In this release, one of the new features we added is called panoramic stitching! Panoramic stitching is where you take a series of images and seamlessly stitch them together into one single image. Let me show you! A couple of weeks ago, I went back home to Mobile for vacation, and I decided to take some photos of a very popular restaurant in the area:

As you can tell, all of these images were taken in a sequence, and they all have regions that overlap. There are enough variations, though, where simply arranging the images side-by-side won’t result in something that looks nice. To achieve a similar effect, you will need something such as a stitching engine.

Now, I have no idea how to create a stitching engine, but thanks to Microsoft Research, we were able to quickly get their code and integrate it into Deep Zoom Composer. With this functionality, you can import all of these images into Deep Zoom Composer and create a panoramic image very easily.

The following image shows you the final stitched version:

That looks pretty small, so why don’t you take a look at the Deep Zoom version of this instead:

Just for reference, I included the original source images that made up the stitch as well. Notice that the final stitched image isn’t simply an arrangement of the images. The stitcher is pretty clever in what it does behind the scenes. Beyond positioning and rotation, it takes care of blending similar regions together to make the final image look very seamless. You’ll be hard pressed to look at the stitch and figure out where one image ends and the other image even begins.

Because this is a Deep Zoom image, you can zoom in pretty closely to see some of the nicer details that you can’t see when zoomed out. This is one of my favorite pictures because of what it contains. While the restaurant clearly is the focus, if you zoom in and pan towards the right edge of the image, you can see the Mobile skyline as well as the battleship museum:

The city I live in, Spanish Fort, can be reached by simply driving on the road that you see on the left side of the picture (which is actually the same as the road you see on the right side!)

Best of all, you can do all of this yourself. Simply download Deep Zoom Composer, import some images, and stitch them together. There is a nice, short tutorial on how to use stitching here.

Cheers!
Kirupa

One of my side projects on the Expression Blend team is working on Deep Zoom Composer (DZC), a small application for allowing you to create Deep Zoom content. A cool feature we released in our most recent release is the ability to tag your images. You can select an image (or a group of images) and specify several tags that you want associated with your selection. The earlier link describes that process in slightly more detail.

To summarize our tagging functionality, when you export, DZC generates a file called Metadata.xml and places it in your GeneratedImages folder along with all of your image tiles and dzc_output.xml file.This Metadata.xml file contains information on each image, its X and Y position, the Tag values, and the ZOrder.

Because of time constraints, though, we didn’t do anything inside DZC besides exporting this XML file. There was no way for you to associate your metadata with each image and do some interesting things without writing code.

To help you use this Metadata functionality, I wrote a small Silverlight 2 app that I am calling the Deep Zoom Tag Browser:

You can see a demo of it working by clicking the above screenshot or clicking here. In case you are not familiar with Deep Zoom, you can use your mouse to pan the images around, the mouse wheel to zoom in/out, or if you do not have access to a mouse wheel, Click and Shift+Click will allow you to zoom in and out as well.

Using The Tag Browser with your own Deep Zoom Composer Projects
If you would like to use this functionality inside your own projects, it is pretty easy. First, download and extract the source files for my Deep Zoom Tag Browser by clicking the download link below:

Download Tag Browser Source (Visual Studio 2008)

Once you have downloaded and extracted the files, open the solution in Visual Studio 2008 (make sure you have the Silverlight Tools installed). You will see two projects inside it – a Silverlight 2 project and a Web Site project. Expand your Web Site project until you reach your ClientBin folder:

Inside your ClientBin folder, create a new folder called GeneratedImages. Make sure you a Windows Explorer instance showing you the the XML files and image tile folders generated by Deep Zoom Composer:

Select all of these files and folders and drag/drop them into your GeneratedImages folder in Visual Studio. This will take a good minute or two since there are many files that need to be copied over. You will see a handy progress dialog informing you of the progress:

Once all of the files have been imported into your GeneratedImages folder, you should see confirmation of that in your Solution Explorer:

Now comes the easy part. Press F6 to build your project. You should not be seeing any errors! Right click on DeepZoomMetadataTestPage.html in your Web Site project and select View in Browser:

Once you have done that, a web server instance will be fired up and your browser will display your new images and metadata files associated with it.

A major limitation in the current version is that if you have multiple tags separated by commas, the application doesn’t break them up and allow you to filter by them. It associated all tags with an image as one entity. That means, your images can only have one tag associated with them.

Don’t worry – I will fix that shortly.

Cheers!
Kirupa

EDIT: Updated above templates to use the latest version of Silverlight 2.

We just released Silverlight 2 Beta 2 a few moments ago, and of course, updated versions of the products that I work on, Expression Blend 2.5 and Deep Zoom Composer, were released as well.

You can read about some of the new changes on Scott Guthrie’s blog, so I am not going to go through a line-by-line breakdown of what is new. Instead, I will talk about is one that I was looking forward to the most: smaller XAP sizes!

What Was Going on Beta 1
In Silverlight 2 Beta 1, when you created your app and built it, your XAP files would usually be in the area of 130KB or larger. Even the most simple applications with very little in them would take up that much space when built in Blend or Visual Studio.

The reason was that your XAP archive file contained not just your compiled project but also your controls:

The two control files, System.Windows.Controls.dll and System.Windows.Controls.Extended.dll, take up a whopping 450KB in their uncompressed form. Even when compressed, the total size of your application is around 130 KB. I find that unreasonably large.

What’s New in Beta 2
In Silverlight 2 Beta 2, one of the major changes has been moving these controls into the runtime itself. This means that, when you install Silverlight 2 Beta 2, the controls are automatically installed as part of the runtime itself. This means your XAP archives no longer require your controls to be packaged inside them, and the file size of your XAP files is only a fraction of what it used to be.

Here is the exact same application shown above published in Silverlight 2 Beta 2:

This time around, the file size of your XAP is only 12KB. That is much better than the 130KB your XAP was in Beta 1.

Which Approach is Better?
There are two trains of thought (what is a train of thought anyway?!) in looking at this. One approach is where you think it is better to have a smaller runtime with the burden being placed on your output XAP file each time you view Silverlight 2 content. This is the Silverlight 2 Beta 1 and Adobe Flash approach.

The other approach is where you take the initial file size hit in downloading the runtime but subsequent views of Silverlight 2 content free you from having to download these extra additions. This is the Silverlight 2 Beta 2 approach.

I am definitely biased towards the latter approach (see my answer to #3). The way I see it, I download a runtime only once, but I view content created for that runtime many times over. There is no right or wrong answer, so I’m curious, which approach do you prefer?

Cheers!
Kirupa