Setup of Silverlight and deep zoom Environments

As the saying goes, "to do a good job, you must first sharpen your tools." environment building is the most important step. I used to read many textbooks written by masters when I went to college. The first chapter was about Hello world, but I was so depressed when I set up the environment, so it is so difficult to display a hello World on the screen.
The software to be installed includes Visual Studio 2008, silverlight2 beta1 tools for vs2008, and expression
Blend2.5, deep zoom composer
Note: before installing silverlight2 beta1 tools for vs2008, make sure to uninstall the Silverlight plug-in, Silverlight SDK, and expression blend that you may have installed before, if you cannot install silverlight2 beta1 tools for vs2008, you cannot find the silverlight2 Project template in vs2008, and you cannot create the sliverlight2 project.
For how to use Silverlight and vs to create a hello World project, refer to an article in the Chinese version of Scott's blog: create a "hello World" program using Silverlight 2 and vs 2008.

You must be familiar with the use of blend. If you are not familiar with blend, you can watch video tutorials here.
Deep zoom composer is a small tool designed for deepzoom. I have translated its user guide and hope to help you:

-------------------------- Split line -------------------------------------

Deep zoom composer User Guide
Translated by Zhou yinhui

 

Introduction

Microsoft's silverligh2 includes support for the deep zoom technology created by the "seadargon" team. Simply put, the deep zoom technology allows you to view a large image, but only sends the part currently displayed on your screen to your browser. You can also smoothly scale and flat images. This is like online map dividing a large image into many small tiled images and then sending those you are viewing to your screen. The advantage of this is that you don't have to spend a lot of time downloading a large set of image data that you have never even read or noticed. This technology is cool, but to be honest, it is not easy to create correct coordinate information for these image sequences, and the expression team just brought us a tool, we call it "Deep zoom
Composer"

Expression deep zone composer allows us to arrange images in an image set in any way (large images ), then release their final arrangement to a control called multiscaleimage in silverlight2. The output of this tool is a set of tiled graphs. You will eventually see a collection of XML files, binfiles, and numbered folders, each folder contains a part of the final picture arrangement. The XAML used to reference A binfile in a multiscaleimage control is roughly like this:

<Multiscaleimage X: Name = "deepzoomobject" Source = "samle/info. bin"/>

Who will use such an application? Anyone who is interested in silverlight2 and wants to perform advanced operations such as zoom and tile on a large image. Without this technology, it would be very difficult to complete connections under standard bandwidth. The audience of this tool is some very common users. There are several very common scenarios that will be used. MAP is one of them, another possibility is that online advertising is used to provide a very easy-to-interact and detailed viewing angle for the product.

Next, we will describe how to create a deep zoom composer app project, arrange the imported images, and output a deep zoom image.

Start

Welcome Screen

After deep zoom composer is started, the user will see a splash screen followed by a welcome screen. On the welcome screen, we can see two tabs: Project and help.

The project tab provides you with a list of recently viewed projects and new project and open project operations.

The help tab provides useful information such as user guide.


 

Project

The project structure of deep zoom composer is as follows:

·Default path:The project is stored in:C: "users" <user> "documents" expression "Seadragon Projects"

·Source images:All projects have a source images folder to store imported images.

·Working data:Working dataThe directory contains the data used for zooming on the panel.

·Project file:Each project has a *. sdprj file to contain project-related information.

·Output:When you select to export a. SDI (Seadragon image) file, it will be outputSource images "outputsdiFolder.

 

1. Work Zone

The workflow for creating a deep zome image is as follows: 1. Import, 2. Diagram (Arrangement), 3. Output

Import:

In "Import workspace", you can import some images to the project.

Image bar:

Click "add images" to Import images. These images will be displayed in an image bar. Right-click the image and select "delete from project" to delete the image from the project.

Image preview:

When you select an image in the image bar, you can see its preview on the left. The file name, size, and size are displayed in the lower left corner.

You can specify folders, but deep zoom composer only imports valid image file types, that is, it supports PNG, JPEG, Tiff, and BMP formats. Other file formats will be ignored. Note: currently, deep zoom composer does not support importing files of the same name.

Diagram (Arrangement)

The "compose" workspace provides users with the function of locating and arranging images:

Picture bar

In the "compose" workspace, the images imported to the project are displayed in the picture bar. You can drag and drop these images to the canvas. The image Bar provides users with the following basic functions:

The "all image" tab displays all the images in the project. The translucent images indicate they are being used (that is, they are dragged to the compose workspace)

"Layer View" tab, which only displays images used by compostion. You can use arrow buttons on the panel to change the z-axis sequence of the image on the canvas.

The "visibility" Eye icon next to the image is used to set the visibility of the image on the canvas.

Canvas

You can create and edit "compositions" in the canvas of the compose workspace ". This workspace provides

A design area with the ability to locate and arrange images, a basic set of tools (selection, pan, zoom), and basic arrangement features (Align & distriign ). You can drag and drop images in the image bar to the canvas. You can arrange these images in the canvas and navigate through the navigator and modify them using several tools. Of course, you can also modify and layout by dragging the modifier (several small blocks in the selected state of the Technical image) and the following row of buttons.

Tools:

Select a tool that allows you to select and operate images. You can use adorner (modifier? I'm sorry, I don't know what the professional name is .)

The pan tool allows you to scroll the visible area by clicking and dragging.

The Zoom tool. If you select the Zoom tool, you can click any position in the visible area to zoom in and zoom in to this point. Press ALT and click zoom in or press Alt + = or Alt +. If you click the last zoom icon (the one on the right of the normal zoom icon), the current element in the canvas is scaled to fit the screen.

Layout function:

It also supports some layout and allocation functions (such as make same height)

When you click the "align/distriame" and "make same" icons, you will execute one of the following options ):

Align left, align left and right, align right, align up, center up and down, align bottom, horizontal, vertical, width, height.

Output

The output workspace provides the deep zoom image or set export function for users.

Output preview. The final composition is displayed on the export tab.

You can set the export settings, such as the file name and location. The check box allows you to set whether to export data to a deep zoom collection.