Saturday, June 21, 2008

Understanding Deep Zoom - Part 6

My previous post was on the code that is generated by the Deep Zoom Composer. I finally downloaded the new upgraded version of Deep Zoom Composer from here. The upgraded version has XML support. It allows the tagging of images. One can also select the images and right click the selection to "Arrange into a Grid".









The SparseImageTool.exe now generates dzc_output.xml file instead of items.bin file. The other output files that are generated are
dzc_output_file
dzc_output_images
Metadata.xml

Metadata.xml has the metadata information about all the images. These include the x,y position and height, width of the images. The earlier versions of the Deep Zoom Composer flattened the images on the artboard as a JPEG image. The upgraded version allows flattening the images in PNG format as well.

Check out the Expression Team Blog for more detailed information on What's new in the upgraded version of Deep Zoom Composer.

Sunday, June 15, 2008

Understanding Deep Zoom - Part 5

My last post was on using Deep Zoom Composer.

dz51

Notice that now I have selected "Export Images and Silverlight Project". You get

dz52

When "View Project Folder" is clicked,

dz53

Deep Zoom Composer generates code for the Deep Zoom Collection. It adds Web for hosting the Silverlight control. The ClientBin folder now has the Deep Zoom generated images and the SparseImageSceneGraph.xml file.

The Deep Zoom Image can be accessed using MultiScaleImage control in Silverlight. It is accessed in XAML as

<MultiScaleImage Source="GeneratedImages/dzc_output/items.bin" Height="440" x:Name="msi" />

The Deep Zoom Composer adds a button named "Randomize". This is used to randomly arrange the images in a grid. Notice that there is no dependence on Javascript code here. All the events are in managed code. The MouseWheelHelper class had methods to handle MouseWheel event for the MultiScaleImage. Zooming is provided based on the movement of the mouse wheel direction. The Mouse Wheel event is called by the browser and not by Silverlight. The Worker method initialises a new instance that listens to the mouse wheel events fired by the HTML document.

The MouseMove event saves the current position and pans to the new position when mouse is dragged. The MouseLeftButtonDown saves the inital dragOffset and currentPosition in case the user pans. It is the MouseLeftButtonUp that zooms into the image in case the user is not completing a pan. It also resets the mouse. MouseWheelHelper(msi).Moved zooms in or out depending on the mouse wheel direction.

ArrangeIntoGrid method arranges the images into a grid provided they are all of same size. It gets a randomised list of images and arranges them into a grid of 4 columns. The number of rows is calculated based on number of images in the collection. Hit on F5 and you should see a grid of images into which you can zoom in and out. You can pan the images as well. In addition, you can hit on Randomize button to rearrange the images in a different fashion.

There! This should get one started on programming more functionality using this wonderful technology.

Have fun coding! :-)


Saturday, June 14, 2008

Understanding Deep Zoom - Part 4

I had been blogging on Deep Zoom, but there's no entry on how to use Deep Zoom Composer. So in this blog entry, I am going to take you through the usage of Deep Zoom Composer.

Note: I have still not used the most recent version of Deep Zoom Composer (0.9.000.3)....the one that was released along with Silverlight 2 Beta 2. This blog entry corresponds to the previous version of Deep Zoom Composer. I don't think it is available online. You can get it from here. I will blog on this update to the Deep Zoom Composer in my next post.

On successful install and on starting up the screen looks like this

dz41

For generating a Composition or a Collection, you need to go through 3 steps:

  • Import
  • Compose
  • Export

Import stage involves adding as many images as you want.

dzp21

Compose stage is where you work on the art board. The images can be placed anywhere depending on the requirement.

dz22

The last step involves exporting as a Collection or as a Composition.

dz23

Notice that Deep Zoom Composer allows you to choose between a Composition or a Collection. Also, it allows selection of Output type. Selecting "Export Images and Silverlight Project" generates a Visual Studio Project accompanying the Collection or Composition. We will deal with this in next blog entry. Selecting "Export Images" will generate the Output folder containing images along with the Composition or Collection.

dz42

There! Deep Zoom Image is now ready for use in a Silverlight project. If you had selected "Export Images", then you will have to code explicitly for MouseWheel movement. Check out Scott Hanselman's blog for code.

You can get the Deep Zoom Composer User guide from here.

Not got the idea yet? Check out http://memorabilia.hardrock.com/ for a live example and then come back.

Back?  Now this is technology right! Wow!

Understanding Deep Zoom - Part 3

My previous post was on Collection and Composition. Let's try and understand the tool that generates a collection or a composition.

Deep Zoom Composer has a tool named SparseImageTool.exe that is used to produce the final composition or collection. It can be accessed from command prompt as

C:\Program Files\Microsoft\Deep Zoom Composer\SparseImageTool.exe

Giving the above command generates the usage pattern for the tool

deepzoomcmd

The basic usage pattern is SparseImageTool.exe <command> <SceneGraphFileName> [parameters]

where command could be CreateCollection  or CreateDeepZoomImage

SceneGraphFileName is path for the SceneGraphFile.xml file

[parameters] refers to a list of other parameters that this application can take.

The SceneGraphFile.xml file has information about the images (width, height, position as x,y co-ordinates), aspect ratio and ZOrder for all images. This is generated by Deep Zoom Composer prior to calling SparseImageTool.exe.

Is it possible to access this tool programmatically? Well, let's try doing so. First, we need to create an XML file that looks similar to SceneGraphFile.xml that is generated by the Deep Zoom Composer.

The XML file looks like this:

<?xml version="1.0" encoding="utf-8"?>
<SceneGraph Version="1">
   <AspectRatio>1</AspectRatio>
   <SceneNode>
     <FileName>C:\Folder\Pic1.JPG</FileName>
     <x>0</x>
     <y>0</y>
     <Width>1</Width>
     <Height>1</Height>
     <ZOrder>0</ZOrder>
   </SceneNode>
   <SceneNode>
     <FileName>C:\Folder\Pic2.JPG</FileName>
     <x>0</x>
     <y>0</y>
     <Width>1</Width>
     <Height>1</Height>
     <ZOrder>1</ZOrder>
   </SceneNode>
</SceneGraph>

Now, let's create a C# Console Application (I think you can try doing the same using VB as well...but am not sure).

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Diagnostics;
using System.Resources;

namespace deepzoomscenario1
{
    class Program
    {
        static void Main(string[] args)
        {
            Process p = new Process();
            p.StartInfo.FileName = "C:\\Program Files\\Microsoft\\Deep Zoom Composer\\SparseImageTool.exe";
            p.StartInfo.Arguments = @"CreateCollection ""C:\\Users\\S.Preethi\\Desktop\\Folder\\test source.xml"" ""C:\\Users\\S.Preethi\\Desktop\\Folder\\result.sdc"" /XML";
            p.StartInfo.CreateNoWindow = true;
            p.StartInfo.UseShellExecute = false;
            p.StartInfo.WindowStyle = ProcessWindowStyle.Hidden;
            p.EnableRaisingEvents = true;
            p.Start();
            p.WaitForExit();
        }
    }
}

The folder contents before running the program is

dz31

Running the Console Application

dz32

Final output

dz33

Notice that the result folder has an XML file items.xml. The updated version allows generation of an XML file as against a Binary file in the previous version. We can now work with this XML file with ease. We can use this XML file to randomly position the images and do a lot of other things (Translation: More ideas coming soon).

The above operation can be done from Command Prompt as well.

SparseImageTool.exe CreateCollection "C:\Users\S.Preethi\Desktop\Folder\test source.xml" "C:\Users\S.Preethi\Desktop\Folder\result.sdc" /XML

Note: The extension .sdc has to be given correctly. Otherwise, the tool doesn't generate a collection.

Understanding Deep Zoom - Part 2

My previous post gave a more abstract view of what Deep Zoom Technology is all about. What is the back-end process? The main executable file is Mermaid.exe which allows one to import images, compose and export a Composition or a Collection. 

deepzoomcomposer 

Now what is a Composition and a Collection? In case of a Composite, Deep Zoom Composer considers the entire art board as a single image irrespective of number of images that are placed and irrespective of their position. This single image is split into tiles until the smallest tile is of size 4kb. This enables a more optimised design. However, access to a single image is absent. Well, this was the case with the first version of Deep Zoom Composer. The next update allowed creation of a Collection. This allowed creation of an image tree for each image instead of flattening the entire composition into a single image. One can now control each image individually. The only possible drawback here would be the time consumption involved in case there are a number of images.

The below image shows that Deep Zoom Composer can export both a collection and a composition based on choice.

dz23

As you can see from above, the updated version also provides code for arranging images in a Grid. You can see this if you choose "Import Images and Silverlight Project".

Friday, June 13, 2008

Understanding Deep Zoom - Part 1

Nearly 4 months since Microsoft released Silverlight 2 Beta 1 and introduced the Deep Zoom Technology to the world. What is this anyway? The technology part in Deep Zoom is an incubation project at Microsoft Live Labs code named Sea Dragon.
The Sea Dragon technology allows smooth and quick viewing of any number of images on the Web with an amazing user experience. The image size can vary in gigapixels and one can zoom in and out without seeing a pixelated effect. Also, this technology doesn't depend on the number of images in a collection.The idea is to transmit only the required minimum subset of information that is needed at a particular time of viewing. As the viewing changes when we zoom, the information for the new view is transmitted and the technology prevents one from visualizing the change in views. SeaDragon keeps dividing the images in the collection into 4 tiles continuously until it reaches a point where the smallest tile is of size 4kb. It is these tiles that are being transmitted from the server as we zoom in and out.
Check out Bill Crow's blog on a detailed explanation as to how the technology works. Also, check out John Galloway's blog on how Deep Zoom Technology is different from Google Maps or Zoomify.