(C) 2009 - 2014 by Mourad Louha · All rights reserved

Tutorial for using Deep Zoom Composer and Silverlight

Do you also know this problem? When taking screenshots of an application for including the images in one of your blog posts, it is very often necessary to rescale the images so that they fit into the layout of the blog. However, after resizing the images, they become blurred and some texts illegible. The following picture, taken from Microsoft Excel 2010 in German, shows the problem.

Microsoft Office 2010

In my first posts on this blog, I had uploaded two versions of the pictures. First, I created a smaller version of the original screenshot and then I linked to it in my article. Then I uploaded the picture in its original size and I added some JavaScript code to each previously inserted image link. The user then could view the larger picture by clicking on the smaller one. You may know, I’m also publishing my german articles on two other blogs, one blog is located on a Windows Live account and another one is a joint project with my good friend Andreas Entenmann, MVP for Excel. All three blogs are based on different systems. So, it was very time consuming to setup the JavaScripts for all blogs.

However I’m not really satisfied with this state. I have visited some websites presenting some image albums, where you can see the pictures in one window and also zoom in and out the pictures. In most cases, this sites are using an Adobe Flash or a Silverlight application. In this article I will focus on Silverlight, as with Silverlight I will be able to use „Deep Zoom“, a technology where graphics and photos can be smoothly browsed, regardless of the amount of data or the bandwidth of the network.

At this point, I must say, I’m not an expert for Microsoft Blend and the development of Silverlight applications. My main goal is to be able to create image collections in a simple and efficient way and to be able to use the collections on my blog. And I don’t know if the presented procedures later will be suitable for me, but they seem very promising.

Ok, the first thing we need to build an Silverlight application using Deep Zoom, is an appropriate tool. The Microsoft Live Labs can help here again. On the website of the Seadragon Project, you will find some samples for Silverlight applications using Deep Zoom. And you can also download some tools there. So, I downloaded the „Deep Zoom Composer“ application, which already promises in advance to be able to quickly and easily create and manage albums.

Deep Zoom Composer

After launching the setup programm, I kept all default settings in the install wizard and the installation was done in a few minutes.

Deep Zoom Composer

Please note, I installed the application on my Windows Server 2008 German, Expression Studio 2 and 3 are also installed. I have not verified if the presence of Expression Studio has any impact on „Deep Zoom Composer“ or vice-versa. You may prefer to install „Deep Zoom Composer“ on a virtual machine. After its first launch, „Deep Zoom Composer“ welcomes you with this screen:

Deep Zoom Composer

The software is in English, I don’t know if a German version is or will be available. And the layout and appearance of the software is similar to the apps contained in Expression Studio. Well, I created a project by clicking on „New Project“. I had to input a project name and optionally select a folder before „Deep Zoom Composer“ creates a project. The app creates a new folder in the previously selected folder and stores all data there. After creating the project, I had to add some images to my project. For this, I selected the screenshots I had taken when writing my german article how to install Microsoft Office 2010 Plus on my computer. (For those, who are speaking german and would like to read the article, you can find it here „Anleitung zur Installation von Office 2010 Plus Beta“).
The images have different sizes, so this pool may be suitable for testing Deep Zoom Composer.

Deep Zoom Composer

After selecting all images, they are imported to the project (in fact they are copied) as shown in the following picture:

Deep Zoom Composer

You can then see thumbnails of the imported images on the right of the main application window of „Deep Zoom Composer“. The next thing, we should do, is to switch to the composition mode by clicking on „Compose“. You will reach a new view:

Deep Zoom Composer

The thumbnails of the imported images are now shown on the bottom of the window. In addition, you can see the buttons „Slideshow“, „Menu“, „Internal Links“ and „External Links“ on the right of the main window. I’ll talk about them later. You can drag and drop the thumbnails to the stage very easily.

Deep Zoom Composer

After dragging the images to and moving them in the stage, you may see some guide lines helping you to better align the images each one to each other. I searched an option for reordering the thumbnails because they have been imported in another order as they appear in my article. Unfortunately I did not find a such function. So, I dragged each image to the stage and ordered them manually, beginning on the upper left corner to the lower right and row per row. Please note, you can use the scrool wheel to zoom in or out the stage view. Here a screenshot after I finished to insert the images.

Deep Zoom Composer

It is possible to align you images in a grid and also define a padding between the images, this looks a little bit better. For this, just select all your images on the stage (for example by using Strg+A) and then select „Arrange – Arrange into Grid“ in the context menue called by a right click.

Deep Zoom Composer

As you can see in the following picture, after setting up the options in the dialogue, all images are beautifully arranged. However, they are also vertcally centered in each row. No problem, just select the images and align the to top. Please note, that the last image selected is the one to which the others are aligned.

Deep Zoom Composer

It often happened that „Deep Zoom Composer“ was continuously selecting the images in the right pane. I don’t know if this behaviour is intentional (for example for internal calculations) or a bug. You can also create slideshows with „Deep Zoom Composer“, just click on „Slideshow“ and add the images to the new pane.

Deep Zoom Composer

Something I’m missing here, is the possibility to setup the duration for each image in the slideshow. As I was checking out this functions, the slideshow was always too fast. However, it is possible to change the times later in the XML file of the exported project. Perhaps, someone from Microsoft is reading this and passes this suggestion. You can insert an menue to your project in the same manner like slideshows. And creating internal and external links is also possible.

Finally, I selected „Export“ and I created my first Silverlight application. Please also note, that the available functions in the Silverlight application are defined in the template you select. This means, for example, that the slideshow will only be available, if the template knows about it.

Deep Zoom Composer

Of course, I selected „Export as a collection“ as I’m using more than one image. And I choosed PNG as output format for my images. The „Image width“ defines the width of your app in my selected template, I setted it up to 500 px, the maximum width for images in my blog. When exporting the data, „Deep Zoom Composer“ creates a new folder in the folder „Exported Data“ of your project folder and informs you about the current operations in a status window.

Deep Zoom Composer

If all is done, you have the possibility to preview the results in your browser by clicking on „Preview in Browser“.

Deep Zoom Composer

The following image presents the result in my browser. And, as mentionned before, this depends from your template. You can find the templates in the installation folder of „Deep Zoom Composer“. This also means, that it should be possible to use own templates. Just copy them to the folder and restart „Deep Zoom Composer“. The present templates can also be edited and modified with Expression Blend. When previewing the Silverlight application, my computer started the „Microsoft Expression Development Server“. I have not tested, if the server also comes with the installation of „Deep Zoom Composer“ or if it was just recognized by „Deep Zoom Composer“. You may setup your firewall for granting access to the localhost. You can also directly open with your browser the HTML file created the export folder.

Deep Zoom Composer

As mentionned before, the duration of each slide in the slideshow was not really satisfying. You can modify these settings by opening the file „scene.xml“ in the subfolder „Exported Data\your_project_name\GeneratedImages“ in a text editor. Just search for the section „Storyboard.Children“ and modify the times, you may define the times of each slide when they should appear, starting from 00:00:00. And you may enter the total found in „Duration“.

Deep Zoom Composer

For demonstrating my results on my server, I have choosen the „Blend 3 Behaviours + Source“ template, which loans to the template used on Seadragon. The last thing I had to to, was inserting the Silverlight application to my post. In a first step, I uploaded the JavaScript file „Silverlight.js“ to my server. This file can be for example be found in your export folder. Then I modified my blog template for loading this JavaScript file per default. On a next step, I uploaded all files found in „GeneratedImages“ to a subdirectory on my server. In a last step, I copied and modified the code from the test HTML file also found in the export folder. This server hosting the Excel Ticker had in this case some problems, so I putted the files on my main server. You can see the result in my mirrored article here:

Results of my experiments on www.software.maninweb.de

Cool, isn’t it? Especially the full screen mode allows to view all images in their real size. I think, if the procedures above will be a little systematized, for example by creating some reusable templates with placeholders, it should be very easy to create image collections and use them in my posts. And, I’m sure, if I get some time, I would really like to create my own Silverlight template with its own design. And because, in my opinion, its very easy, I repeated the steps with the images for this post, the result is also available on the server mentionned above.

For this attempt, I used a total of 15 minutes! However, before writing this post, I had to search intensely the net for more info about Deep Zoom Composer, Deep Zoom and Silverlight. Unfortunately, it was difficult for me to find articles in German about Deep Zoom Composer, it’s easier in English. Some articles are centered on programming Silverlight apps. I can really recommend the following links:

This article has also been published in German and in English on the following sites:

 

 
Comments

No comments yet.

Leave a Reply