Silverlight2009.07.28 11:39

 안녕하세요.

 지난 10일 Silverlight 3 RTW (정식버전)이 런칭 되면서, Deepzoom Composer 도 함께 새 버전이 나왔는데요. 새로운 Deepzoom Composer 를 열심히 분석 해 본 결과, 놀라운 기능(Sildershow, Navigation, Hyperlink)이 추가 된 것 처럼 보이지만, 실상 Export 해 보면 지난 버전과 크게 차이나는 게 없고, scene.xml 이란 파일이 생성되는데 도통 어떻게 써먹는 것인지도 모르겠더라고요. 그래서 미 완성된 버전이라 생각하고 차후 버전을 기다려 왔습니다.
 헌데, 지난 22일 차후 버전이 드디어 나왔더군요!! +_+

New Deepzoom 다운로드

 우선, 놀랍고 쉽게 구현 할 수 있는 Sildershow, Menu, Hyperlink 세 가지 기능에 관해 설명 드리겠습니다.
 

 새 버전의 Deepzoom Composer에서 Compose 메뉴를 가보시면, Laysers 좌측에 새로 생긴 Slidershow, Menu, Internal Links, External Links 메뉴가 생겼습니다. 각각은 Slidershow, Menu, Hyperlink 를 디자인 할 수 있도록 지원합니다. :D

Slidershow

 Slidershow 의 경우에는,
Layers 에서 Image를 선택해서 Slidershow에 Drag and Drop으로 추가를 하시는데요, 이 때 순서를 정하시는 대로 Slidershow 를 실행하게 됩니다.

 물론, Slidershow 내에서 추가 된 Image의 순서를 마찬가지로 Drag and Drop으로 변경 하실 수 있습니다.

 나중에 Export 하게 되면, Slidershow가 기능이 추가 됩니다. +_+




















Menu

 Menu 도 Slidershow와 마찬가지로 Layers 에서 메뉴가 될.. (정확히는 메뉴를 Click시 보여지게 될 Image) Image를 Drag and Drop으로 추가 하실 수 있습니다.























 또,  Menu 를 디자인 하기 위해 상단에 7가지 기능을 제공 하는 버튼이 있습니다.
 마우스 우클릭을 통해서, 메뉴 이름을 수정할 수도 있습니다.

 저는 이 기능들을 이용해서 메뉴를 이렇게 수정하였습니다.

Hyperlink
Internal Links
Internal Links 는 MultiScaleImage 내에서 SubImage를 선택했을 경우, 다른 SubImage로 이동할 수 있도록 하는 기능을 디자인 할 수 있게 합니다.

 Layers 에서 Internal link 될 이미지를 선택 하신 후, Drag and Drop을 통해 Internal links 에 추가 하시면, Direct Link 팝업 창이 뜨는데요, 여기서 Link 될 이미지를 선택하시면 됩니다.

Internal link를 디자인 하게 되면, 좌측의 이미지처럼, Hyperlink 이미지와 Hyperlink 이미지를 선택 시, Link 될 이미지가 보이게 됩니다.

우클릭을 통해서 Link를 수정하시거나 삭제하실 수 있습니다.












External Links

External Links 는 MultiScaleImage 내에서 SubImage를 선택했을 경우, 새 브라우저를 띄워 지정된 URL로 이동하거나 하는 기능을 디자인 할 수 있게 합니다.

 Layers 에서 External link 될 이미지를 선택 하신 후, Drag and Drop을 통해 External links 에 추가 하시면, External Links Management 팝업 창이 뜨는데요, 여기서 Name, URL, Description을 입력하시면 됩니다.
Name : External link 명
URL : External link 될 사이트 URL
Description : 입력 시 External Image에서 Tooltip 표시

모든 디자인이 완료 되셨다면, Export 하셔서 결과물을 확인 하실 수 있습니다.
 Export 에서도 몇가지 추가 된 사항이 있는데요, Templates 를 보시면, Deep Zoom Navigation (Default) 가 있습니다. 이것을 선택 하신 후, 하단에 추가된 Preview 버튼을 클릭 하시면 바로 결과물을 확인 하실 수도 있습니다 :D

샘플
Posted by Min-gu, Kim
Silverlight2009.06.10 17:18

AspectRatio
MultiScaleImage 의 Source Image의 가로 세로 비율.
the width of the image divided by its height. ( 이미지의 가로를 세로로 나눈 )
Readonly Property.    

AspectRatio Property의 활용 : ?  

ViewPort
ViewPort 란 MultiScaleImage Control의 Source Image를 보는 창이다.
(Source Image의 특정 영역을 보는 데 사용하는 사각형 영역) Source Image를 삼차원으로 다루는 하나의 방식이라고 생각할 수 있다.

ViewPort 를 제어 할 수 있는 Property로 ViewportWidth와 ViewportOrigin 가 있다.
ViewportWidth property는 크기를, ViewportOrigin property는 위치를 제어한다.

ViewportWidth
Default로 ViewPort는 MultiScaleImage컨트롤의 크기와 같지만, ViewportWidth property를 통해 변경 할 수도 있다.
ViewportWidth property(double value)를 1.0로 설정하면, ViewPort는 MultiScaleImage control과 동일한 크기가 된다.
ViewportWidth property를 1.0보다 크게 변경하면, MultiScaleImage control 보다 사이즈가 더 커지고, 이것은 사용자가 볼 때는 Source Image를 축소한 것과 같은 효과를 보인다.
반대로 ViewportWidth property를 1.0보다 작게 변경하면, MultiScaleImage control 보다 사이즈가 더 작아지고, 사용자가 볼 때는 Source Image를 확대한 것과 같은 효과를 보이게 된다.

ViewportOrigin
ViewportOrigin property는 ViewPort의 최상단 좌측의 좌표이다.   

좌표계
좌표계란 어떤 공간 내의 한 점의 위치를 기준점(원점)과 비교하여 거리를 설명하는 방법을 말한다.
MultiScaleImage Control에서 좌표를 표현하는 방법은 ElementPoint와 LogicalPoint 두 가지가 있다.


ElementPoint
ElementPoint는 컨트롤의 좌측 최상단을 원점으로 하여,
임의의 지점을 X(수평), Y(수직) Point로 하여 X,Y를 픽셀로 표시하는 것을 말한다.
예를 들어, Width, Height 가 각각 500, 300 인 MultiScaleImage Control이 있다면,
MultiScaleImage Control 내 임의의 지점의 ElementPoint는 위 그림과 같이 (300, 150) 이다.

LogicalPoint
LogicalPoint는 컨트롤의 좌측 최상단(0,0)을 원점으로 하고,
컨트롤의 Width, Height 를 각각 1이라고 정의 한 뒤 임의의 지점을
0과 1사이의 논리적인 좌표로 표시하는 것을 말한다. (LogicalPoint를 논리 좌표계라고 한다.)
 
ElementPoint 의 예와 같은 MultiScaleImage Control의 임의의 지점을 LogicalPoint로 표시한다면,
그림과 같이 (0.6, 0.5)가 된다. 
   
MultiScaleImage Control은 ElementPoint와 LogicalPoint의 좌표 시스템을 상호 변환하는 함수를 제공한다.
ElementToLogicalPoint : ElementPoint를 LogicalPoint로 변환
LogicalToElementPoint : LogicalPoint를 ElementPoint로 변환 

두 함수를 반드시 숙지해야 하는 이유는, MultiScaleImage Control 의 Source Image를 축소, 확대 할 경우와,
축소, 확대 시 어떤 부분의 Source Image를 축소, 확대할 것인지를 선택하는데 중요하기 때문이다.

MultiScaleImage Control 을 제외한 대부분의 Silverlight Control은 ElementLogical을 사용한다.
예를 들어, Mouse Point 지점을 축소, 확대 하고자 한다면,
MultiScaleImage Control 상의 Mouse Point (ElementPoint)를 Logical Point로 변환 한 뒤,
ZoomAboutLogicalPoint 메서드의 파라미터 인자로 넘겨야 한다.
(ZoomAboutLogicalPoint는 MutiScaleImage Control 의 함수이며, 축소, 확대할 것인지와, 축소 또는 확대할 지점을 LogicalPoint로 받아서 처리한다.)

'Silverlight' 카테고리의 다른 글

Style 정의하기  (0) 2009.06.16
VisualStateManager  (0) 2009.06.15
Storyboard (Animation in Silverlight)  (0) 2009.06.15
Layout Panel #5 (WrapPanel)  (0) 2009.06.12
Layout Panel #4 (DockPanel)  (0) 2009.06.12
Layout Panel #3 (StackPanel)  (0) 2009.06.12
Layout Panel #2 (Grid)  (0) 2009.06.11
Layout Panel #1 (Canvas)  (0) 2009.06.11
Coposition에서의 ViewPort, AspectRatio, 좌표계, ElementalPoint, LogicalPoint  (0) 2009.06.10
Deepzoom Composer로 Export 된 결과물  (0) 2009.06.09
Deepzoom  (0) 2009.06.09
Posted by Min-gu, Kim
Silverlight2009.06.09 17:07

Deepzoom Composer 를 사용하여 Export 된 폴더 

- Composition으로 Export 했을 경우

폴더 안에는 dzc_output_files 폴더와
dzc_output.xml, SparseImageSceneGraph.xml 두 개의 파일이 생성 된다. 
dzc_output.xml은 Silverlight Control에서 MultiScaleImage 의 Source 가 되며,

  <?xml version="1.0" encoding="utf-8" ?>
- <Image TileSize="256" Overlap="1" Format="jpg" xmlns="http://schemas.microsoft.com/deepzoom/2008"> 
     <Size Width="3872" Height="2592" /> 
  </Image>
이미지의 사이즈 정보를 가지고 있다.

   

dzc_output_files 폴더 안에는
Deep Zoom Composer 로 Export 된 이미지 피라미드가 생성 되 있으며,
MultiScaleImage 컨트롤에서 로드 시 이 폴더의 이미지 피라미드를 로드하게 된다.
 
12부터 원본이미지의 타일이 각 수준별로 저장 되 있으며,
0 폴더안에는 1픽셀까지 축소 된 이미지가 저장 되 있다.


- Collection으로 Export 했을 경우

폴더 안에는 dzc_output_files, dzc_output_images 두 개의 폴더와
dzc_output.xml, Metadata.xml, SparseImageSceneGraph.xml 세 개의 파일이 생성 된다. 

또한, dzc_output_images 폴더 안에는
 
컬렉션 내 개별 이미지의 이미지 피라미드와 이미지 피라미드와 매치되는 xml파일이 생성 된다. 

마찬가지로 dzc_output.xml은 Silverlight Control에서 MultiScaleImage 의 Source 가 되며,

컬렉션 내 개별 이미지의 이미지 피라미드를 매칭 할 수 있는 xml 파일이 Source 속성에 지정 되 있다.

  <?xml version="1.0" encoding="utf-8" ?>
- <Collection MaxLevel="8" TileSize="256" Format="jpg" NextItemId="15" xmlns="http://schemas.microsoft.com/deepzoom/2008">
- <Items>
- <I Id="0" N="0" Source="dzc_output_images/forest.xml"> 
  <Size Width="1024" Height="768" /> 
  <Viewport Width="3" X="-0" Y="-0" /> 
  </I>
- <I Id="1" N="1" Source="dzc_output_images/oryx%20antelope.xml"> 
  <Size Width="1024" Height="768" /> 
  <Viewport Width="3" X="-1" Y="-0" /> 
  </I>
- <I Id="2" N="2" Source="dzc_output_images/green%20sea%20turtle.xml"> 
  <Size Width="1024" Height="768" /> 
  <Viewport Width="3" X="-0" Y="-0.75" /> 
  </I>
- <I Id="3" N="3" Source="dzc_output_images/toco%20toucan.xml"> 
  <Size Width="1024" Height="768" /> 
  <Viewport Width="3" X="-1" Y="-0.75" /> 
  </I>
- <I Id="4" N="4" Source="dzc_output_images/dock.xml"> 
  <Size Width="1024" Height="768" /> 
  <Viewport Width="3" X="-0" Y="-1.5" /> 
  </I>
- <I Id="5" N="5" Source="dzc_output_images/garden.xml"> 
  <Size Width="1024" Height="768" /> 
  <Viewport Width="3" X="-1" Y="-1.5" /> 
  </I>
- <I Id="6" N="6" Source="dzc_output_images/frangipani%20flowers.xml"> 
  <Size Width="1024" Height="768" /> 
  <Viewport Width="3" X="-2" Y="-0" /> 
  </I>
- <I Id="7" N="7" Source="dzc_output_images/humpback%20whale.xml"> 
  <Size Width="1024" Height="768" /> 
  <Viewport Width="3" X="-2" Y="-0.75" /> 
  </I>
- <I Id="8" N="8" Source="dzc_output_images/tree.xml"> 
  <Size Width="1024" Height="768" /> 
  <Viewport Width="3" X="-2" Y="-1.5" /> 
  </I> 
  </Items> 
  </Collection> 
   
단일 이미지에서는 볼 수 없었던, Metadata.xml 이 생성 되는데,
Metadata.xml은 원본 이미지의 Path와 이미지의 위치(뷰포인트)를 가리키는 X, Y, 이미지의 크기인 Width, Height, 그리고 ZOrder와 Tage 속성이 있다. 

 
<?xml version="1.0" ?>
- <Metadata version="1"> 
  <AspectRatio>1.33333333333333</AspectRatio>
- <Image> 
  <FileName>C:\Users\qordir\Desktop\UntitledProject1\Source Images\forest.jpg</FileName> 
  <x>0</x> 
  <y>0</y> 
  <Width>0.333333333333333</Width> 
  <Height>0.333333333333333</Height> 
  <ZOrder>1</ZOrder> 
  <Tag /> 
  </Image>
- <Image> 
  <FileName>C:\Users\qordir\Desktop\UntitledProject1\Source Images\oryx antelope.jpg</FileName> 
  <x>0.333333333333333</x> 
  <y>0</y> 
  <Width>0.333333333333333</Width> 
  <Height>0.333333333333333</Height> 
  <ZOrder>2</ZOrder> 
  <Tag /> 
  </Image>
.
.
.

Tag 는 비워져 있는데, 이 Tag에 값을 할당하여, 활용할 수 있다. (카테고리 등으로 활용).

'Silverlight' 카테고리의 다른 글

Style 정의하기  (0) 2009.06.16
VisualStateManager  (0) 2009.06.15
Storyboard (Animation in Silverlight)  (0) 2009.06.15
Layout Panel #5 (WrapPanel)  (0) 2009.06.12
Layout Panel #4 (DockPanel)  (0) 2009.06.12
Layout Panel #3 (StackPanel)  (0) 2009.06.12
Layout Panel #2 (Grid)  (0) 2009.06.11
Layout Panel #1 (Canvas)  (0) 2009.06.11
Coposition에서의 ViewPort, AspectRatio, 좌표계, ElementalPoint, LogicalPoint  (0) 2009.06.10
Deepzoom Composer로 Export 된 결과물  (0) 2009.06.09
Deepzoom  (0) 2009.06.09
Posted by Min-gu, Kim
Silverlight2009.06.09 17:07

Silverlight에서 고해상도의 이미지를 자유롭게 확대/축소할 수 있는 기능.


어떤 방법으로 가능한가?

Deep zoom을 이용하면, 고해상도의 이미지를 확대/축소 하면서 탐색할 수 있다.
그것이 가능하게 하기 위한 핵심은 바로 '이미지 피라미드'.    

이미지 피라미드
원본 이미지를 256x256 크기의 이미지 타일로 만들고,
원본 이미지를 1/4로 축소한 이미지를 256x256 크기의 이미지 타일로 만들고,
축소된 이미지를 다시 1/4로 축소한 이미지를 256x256 크기의 이미지 타일로 만들고를 반복하여,
최종 축소된 이미지가 1픽셀이 될 때까지 수행하여,
각 타일을 별도의 파일로 저장한 뒤, 단계(수준)별로 별도의 폴도에 저장한다.
(256x256 사이즈는 고정 된 것이 아니라, 임의의 크기이며 수정 가능하다.)
(이미지 피라미드는 BitmapImage 클래스에서 지원하는 이미지 파일만 지원.)

위와 같은 방식으로 이미지 피라미드를 만든 후,
Deep zoom에서 전체 이미지를 다운로드 하는 대신, 화면 이미지의 현재 크기에 필요한 타일만 다운로드하여 표시. 로드시간을 단축시킨다.

또한, 이미지를 로드시 고해상도인 경우 파일 사이즈가 적지 않기 때문에, 저해상도의 이미지를 미리 다운로드 한 뒤 표시하고, 고해상도의 이미지가 다운로드 될 때마다 이미지를 변경하여 준다.
유저에게는 뿌옇게 표시 된 뒤(저해상도의 이미지가 확대 되어), 시간이 지날 수록(고해상도의 이미지를 다운 받을 수록) 선명해지는 것처럼 느낄 수 있도록 표현된다.

이미지 피라미드를 사용자가 직접 만드는 것은 매우 힘든 일이며, 이를 위한 Deep zoom Composer 같은 도구를 사용하여 이미지 피라미드를 생성.

   

스프링 에니메이션
이미지 피라미드 간 축소,확대 또는 이미지 이동 의 움직임에는 스프링 에니메이션이 사용된다.
사용자에게 이미지의 이동, 확대, 축소가 자연스럽게 표시된다.

'Silverlight' 카테고리의 다른 글

Style 정의하기  (0) 2009.06.16
VisualStateManager  (0) 2009.06.15
Storyboard (Animation in Silverlight)  (0) 2009.06.15
Layout Panel #5 (WrapPanel)  (0) 2009.06.12
Layout Panel #4 (DockPanel)  (0) 2009.06.12
Layout Panel #3 (StackPanel)  (0) 2009.06.12
Layout Panel #2 (Grid)  (0) 2009.06.11
Layout Panel #1 (Canvas)  (0) 2009.06.11
Coposition에서의 ViewPort, AspectRatio, 좌표계, ElementalPoint, LogicalPoint  (0) 2009.06.10
Deepzoom Composer로 Export 된 결과물  (0) 2009.06.09
Deepzoom  (0) 2009.06.09
Posted by Min-gu, Kim

티스토리 툴바