Deep Zoom Composer

User Guide
Table of Contents
Table of Contents ........................................................................................................................................... 2

I. Introduction ................................................................................................................................................... 3
2. Startup .......................................................................................................................................................... 4
Welcome Screen ............................................................................................................................................ 4

Projects.......................................................................................................................................................... 5

II. Workspaces .................................................................................................................................................. 6

Import ........................................................................................................................................................... 6

Compose........................................................................................................................................................ 7

Image Gallery ................................................................................................................................................. 7

Artboard ........................................................................................................................................................ 8

Tools................................................................................................................................................ 9
Layout Functionality ........................................................................................................................ 9
Export 10
I. Introduction

Microsoft Silverlight 2 includes support for the Deep Zoom technology created by the Live Labs
SeaDragon team. In a nutshell, the deep zoom technology allows you to view large images by only
sending to your browser the portion of the image that you will actually be viewing on your screen. You
also have the ability to pan and zoom across your image very smoothly. This is very similar to how online
maps (Live Earth, etc.) work by cutting a large image across many smaller images and only sending to
your screen the tiles of images that are relevant to what you will be seeing. The takeaway is that you
aren’t spending time downloading image data that you wouldn’t either see or notice. This technology is
pretty cool, but actually creating the series of images with the appropriate coordinate information is not
easy. This is where the Expression team comes in with a tool we are tentatively calling the Deep Zoom
Composer.

Our Expression Deep Zoom Composer allows users to take a collection of images (really large images!),
arrange them in whatever way they want, and publish their final arrangement for use inside a control
that will be shipping in Silverlight 2 called MultiScaleImage. The output of our tool will be the collection
of tiled images needed to make all of this work. What you end up seeing is an XML file, a BIN file, and a
collection of numbered folders with each folder containing a portion of your final image arrangement.
The XAML for referencing a bin file in a MultiScaleImage control is as follows:

<MultiScaleImage x:Name="deepZoomObject" Source="sample/info.bin"/>

Who can use this app? Anyone who is interested in using Silverlight 2 to take advantage of the zooming,
panning, and display of really large images that, without this technology, would be very difficult to
achieve over standard broadband connections. This tool is targeted for a very general audience. There
are several common uses of this technology. Mapping is one , another major use of this technology
might be in online banner ads where this technology is used to provide very interactive, detailed views
of a particular product.

The following is a description of how a user can create a project in the Deep Zoom Composer app,
arrange a composition of imported images, and finally output a Deep Zoom Image.
2. Startup

Welcome Screen
At startup of the Deep Zoom Composer app the user will see a splash screen followed by a Welcome
Screen. The Welcome Screen will have two tabs: Projects, and Help.

 The Projects tab provides the user with a list of recently viewed projects as well as the option to
create a New Project and Open Project.
 The Help tab provides useful information such as a User Guide.

The Deep Zoom Composer Welcome Screen provides the user with the ability to open or create a new project or
read helpful documentation.
Projects
The project system of a Deep Zoom Composer project has the following structure:

 Default Path: Projects are stored in: C:\Users\<user>\Documents\Expression\Seadragon

Projects\

 Source Images: All projects have a source images folder where all the images imported are
placed.

 Working Data: For every image imported a folder is create inside of the working data directory
which contains the files needed for zooming in the artboard.

 Project file: All projects have a .sdprj file that contains project related information.

 Output: When the user chooses to export a .sdi (Seadragon Image) is outputted to the source
images\OutputSdi folder.

Above is an example view of the contents inside of a Deep Zoom Composer project.
II. Workspaces
The workflow to create a Deep Zoom image is as follows: 1. Import, 2. Compose, 3. Export:

Import
In the Import workspace the user can import and manage images in the project.

 Image gallery
The user can import images by clicking the “Add images” button. The images are displayed in an
image gallery. Right clicking on an image and selecting Delete from project deletes the images
from the project.

 Image preview
When the user selects an image in the image gallery the image is previewed on the left side.
The file name, dimensions, and size are displayed at the bottom left of the preview.

Users can specify any folder they want, but the Deep Zoom Composer imports only valid image files –
namely the ones the Composer supports: PNG, JPEG, TIFF, BMP. Currently, all other files and image
formats will be ignored. Note: the Deep Zoom Composer currently does not support importing two
images with the same name.

Compose
The Compose workspace provides the user with the functionality to position and arrange images in a
composition.

Image Gallery
The images that the user imported in the Import workspace are displayed in an image gallery in the
Compose workspace. The user can drag and drop the images onto the artboard. The image gallery
provides the user with some basic additional functionality:
 All Images Tab

This section of the image gallery displays all of the images

imported to the project. The images that are being used in the
composition have a lower opacity. In the image to the left the top
images is transparent meaning it is currently being used in the
composition. The bottom image on the other hand is not.

Layer View Tab

The second tab displays only the images used in the composition.
The image on the left shows the Layer View tab. The user can use
the arrow buttons to change the z order of the images on the
artboard.

Visibility
The eye icon represents the visibility property set for each image
on the artboard. This visibility setting can be set in the Layer View
Tab.

Artboard
The user can create and edit compositions on the artboard in the Compose workspace. This workspace
provides the user with a design area with the ability to position and arrange the images, also has a basic
set of tools (selection, pan, zoom), as well as basic alignment features (align & distribute). The images in
the composition are added to the artboard by dragging/dropping via the image gallery. The user has the
ability to arrange elements on the artboard and be able to view the contents through a keyhole
navigator and modify with three different tools. The user is also able to manipulate the images with
adorners and modify the layout/alignment with the layout buttons described below.
Tools

The user can use the following tools on the artboard.

 The Selection tool will allow user to select and manipulate the images. The user will be able to
manipulate the images with adorners.
 The Pan tool allows the user to scroll the view area around by clicking and dragging.
 When the user selects the Zoom tool, they can click anywhere in the view area to zoom in on
that position. By holding down the ALT key they can click to zoom out and use the CTRL+= and
CTRL+- shortcuts to zoom in and out. If the user clicks on the last zoom tool icon the elements
on the artboard will zoom and fit to screen.

Layout Functionality
The Deep Zoom Encoder also supports align and distribute as well as make same height/width layout
functionality as part of its alignment and layout features.

When the user clicks on the “Align/Distribute” and “Make Same” icons on the bar below the artboard
(top image) the following choices are presented:

 Align Left
 Align Center
 Align Right
 Align Top
 Align Middle
 Align Bottom
 Distribute Horizontally
 Distribute Vertically
 Make Same Width
 Make Same Height
Export
The Export workspace provides the user with the ability to export a Deep Zoom image or collection.

 Output Preview
The final composition is displayed in the Export tab.

 Export Settings
The user can set the export setting including the name of the Seadragon image, and location. A
checkbox is provided that also allows the user to set the option for exporting to a Deep Zoom
Collection.