Deepzoom details and development

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.
You can go to http://memorabilia.hardrock.com/experience this cutting-edge technology:
Note that a total of 257 images are loaded, and each image is a high-resolution big image. Downloading these 257 images to the client may cause a mental breakdown of the customer, however, using the deepzoom technology to download and display the image below is as fast as displaying a small image (as to why, this series will be discussed later)

Then, you can scale and drag any part of the image to View Details. Take the photos of several books as an example, we can observe it with the mouse:

A little closer:

Closer:

Note: The entire series of operations are completed by clicking the mouse or clicking the scroll wheel. The results are very smooth and smooth, but there is no page refresh, when using some existing online maps, You need to resize the maps to refresh the whole or part of the page. The user experience is completely different.

As developers, we can use deepzoomcomposer to help us and add it to the silverlight2 application. Next I will talk about how to apply the deepzoom Technology in silverlight2.

 

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, 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.Article: Use Silverlight 2 and vs 2008 to create "Hello World"Program
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 are now referred to as "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 an XML file, a BIN file, and a set of numbered folders, each folder contains a part of the final picture arrangement. The XAML used to reference a BIN file 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 outputSourceimages "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 images 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.

 

Today we will introduce how to create a deepzoom application. If you have used deepzoomcomposer, you will find the "createcollection" option when exporting in deepzoomcomposer. It is determined whether you export an integral graph or an image set. For details about how to export an integral graph, refer to deep zoom composer (Step by Step | more pictures) (cool + must try) This article is well written (I suggest you read it, because I will omit the duplicate content.). The image set is described below.
Unlike exporting an integer, you cannot use the following method:

 

   
   
 
    
  
 
    
 X: Name =  "Msi"  
 
    
 viewportwidth =  "1.0"  
 
    
 source =  "/xxxx/info. bin " mouseleftbuttondown = " msi_mouseleftbuttondown " mouseleftbuttonup = " msi_mouseleftbuttonup " mousemove = " msi_mousemove "/> 
 
   
  

Replace info. bin with items. bin. You will find this file in the exported file, which indicates that you export a collection.
Then you can run your program and you will see a collection of images displayed there, but unfortunately there is no interaction. Before that, let's take a look at several important attributes of multiscaleimage (I don't know if my Silverlight SDK version is incorrect, and there are no comments on the key attributes, methods, and events of multiscaleimage, so it is necessary to list my understanding of these attributes, methods, and events)
Source: The file exported by deepzoomcomposer (a single file is info. Bin and the collection is items. Bin)
Subimages: A subimage. If deepzoomcomposer exports a set, it stores each element in the set as a multiscalesubimage object. The sub-image operation depends on it.
Usingsprings: whether to enable the default animation (that is, the feeling of being elegant, cancellation is relatively stiff)
Viewport: the position of the view (which can be simply understood as the position of the eye, which is easier to understand with experience in 3D programming)
Viewportwidth: the width of the view. The wider the view, the closer the view is (the farther the picture is, or the image is reduced)
Aspectratio: aspect ratio.
Elementtologicpoint (): converts an element coordinate (physical coordinate) to a logical coordinate (the element coordinate is the normal coordinate we usually call, and the logical coordinate is the 0, 0 point in the upper left corner of the element, 1 in the lower right corner and 1 in the relative coordinates)
Logictoelementpoint (): opposite to the above.
Zoomaboutlogicpoint (Double, double, double): scales by logical coordinates. The first parameter specifies the scaling increment, and the last two Parameters specify the scaling center.
Motionfinished event: the animation ends (or the animation ends after you operate an image or subgraph)

Subgraphs:
Each subgraph is a multiscalesubimage object, which is in the subimages attribute of multiscaleimage

How to move the subgraph position:
You can specify the position of a sub-graph by specifying the viportorgin attribute. For example
Subimage. viportorgin = new point (x, y );
So if you want to arrange the sub-image in WPF as a grid element, you can't do it. Calculate X, Y, and specify them one by one.

How to scale a subgraph:
You can control it through the viewportwidth attribute of the subgraph. The larger the value, the smaller the subgraph.

How to show or hide a subgraph:
There is no visibility or related properties, but you can achieve it by setting its opacity (opacity.

How to obtain the position and size of a specified subgraph (rect)
Refer to this method:

  
  
 
   
 
   
PrivateRect getsubimagerect (multiscaleimage MSI,IntIndex)
  
   
 
   
{
  
   
 
   
If(Index <0| Index> = MSI. subimages. Count)
  
   

   
{
  
   
 
   
ReturnRect. empty;
  
   
 
   
}
  
   
 
   
 
  
   
 
   
Multiscalesubimage image = MSI. subimages [Index];
  
   
 
   
DoubleScaleby =1/Image. viewportwidth;
  
   
 
   
 
  
   

   
Return NewRect (-image. viewportorigin. x * scaleby,
  
   
 
   
-Image. viewportorigin. y * scaleby,
  
   
 
   
Scaleby,
  
   
 
   
(1/Image. aspectratio) * scaleby );
  
   
 
   
}
  
  

How to obtain the subgraph at the corresponding position based on the X and Y coordinates:
Refer to this method:

  
  
 
   

   
Private IntGetimageindexfromposition (multiscaleimage MSI, point pt)
  
   
 
   
{
  
   
 
   
PT = MSI. elementtologicalpoint (PT );
  
   
 
   
 
  
   
 
   
For(IntI =0; I <MSI. subimages. Count; I ++)
  
   
 
   
{
  
   

   
Multiscalesubimage image = MSI. subimages [I];
  
   
 
   
DoubleScaleby =1/Image. viewportwidth;
  
   
 
   
Rect imagerect =This. Getsubimagerect (MSI, I );
  
   
 
   
If(Imagerect. Contains (PT ))
  
   

   
{
  
   
 
   
ReturnI;
  
   
 
   
}
  
   
 
   
}
  
   
 
   
 
  
   
 
   
Return-1;
  
   
 
   
}
  
  

I believe that with this knowledge, we can make a good result. Haha: How to group subgraphs will be explained in the subsequent articles in this series. Thank you!