'DeepZoom'에 해당되는 글 8건
- 2008/07/27 Deep Zoom Composer Online (PHP 버전) 제작기 (4)
- 2008/07/01 MSDN Premium Subscription + VSTS 2008
- 2008/06/16 DeepView Lite 1.4 Update (for Silverlight 2 Beta 2)
- 2008/06/07 [SL2 B2] Beta2 이전 시대의 DeepZoom 데이터를 위한 심폐소생술
- 2008/05/03 [딥줌] 공신 '악당마녀'의 오답노트 샘플 (2)
- 2008/04/28 Deep Zoom Viewer Lite - Silverlight.net 갤러리에 등록 (2)
- 2008/04/22 Deep Zoom의 Thumbnail에 대해서
- 2008/03/25 DeepZoom Viewer Lite (9)
ScreenShot
Intro
하는 생각에서 PHP로 딥줌 컴포저를 만들기 시작하였습니다.
일단 목표기능은 Composition 타입의 딥줌 데이터를 생성하는 것!
다행히 그동안 DeepView Lite 등을 개발하면서 Deep Zoom Data Structure는
어느 정도 빠삭하게 알고 있어서 컴포징하는 Core 부분 구현은 그렇게 시간이 오래 걸리지 않았습니다.
200라인짜리 PHP프로그램이 완성되는데, 3시간 정도 걸린 것 같습니다.
오히려 라이브 데모 사이트 꾸미는데 시간이 더 걸렸네요. ^^;;
Live Demo
아래 링크를 방문하셔서
딥줌 사진 구경도 하시고, 사진올리기도 해 보십시오.
아참! 잊지마시고 전체화면 기능도 사용해 보십시오.
(대형 와이드 모니터에서 보면 간지가...^^)
http://hugeflow.com/DZCPHP/
주의!
현재 삭제 기능은 관리자에게만 있으므로, 잘못 올린 사진은 직접 지우실 수가 없습니다.
'위험한' 사진은 절대 올리지 마세요. 무슨 말씀인지 알겠죠????
Issue
작업을 하다 보니 앞으로 넘어야 할 산들이 좀 있습니다.
1. 업로드 용량제한
세들어 사는 웹호스팅 환경이다 보니, 보통 10MB 정도의 Upload 제한이 있습니다.
각자의 서버에서는 phpinfo를 수행하면 PHP Core파트의 upload_max_filesize 변수로 확인하실 수 있습니다.
컴포저의 작동 한계에 도달하기 전에 업로드 용량제한에 먼저 부딪힙니다.
그래도 디카가 찍어내는 이미지들을 대상으로 해서 사용하기에는 부족함이 없어 보입니다.
2. 축소 알고리즘이 열악함
단계별 축소 이미지를 만들어 내기 위해
imagecopyresampled, imagecopyresize 따위의 함수를 사용하게 되는데,
이때 축소된 이미지에 만족할 수 없었습니다.
| Microsoft Deep Zoom Composer | PHP Deep Zoom Composer |
| 8/0_0.jpg | |
| 11/3_2.jpg | |
| 12/8_4.jpg | |
맨 마지막의 12/8_4.jpg 파일은 원본 사이즈를 축소 과정 없이 타일링한 파일로서,
퀄리티 차이나 느낌차이가 크게 나지 않습니다.
나머지 축소 과정을 거친 파일들은 Microsoft의 것은 Blur를 준 느낌이 나는 반면,
PHP에 의한 것은 Sharpen을 과도하게 먹인 느낌이 나는군요.
두 output 모두 맘에는 딱 안들지만 PHP 쪽의 결과물이 더 눈에 거슬립니다.
(DeepView Lite로 볼 때 느낌이 그렇습니다.)
개선할 방법이 있는지 생각해 봐야겠습니다.
3. Speed
컴포징 속도는 개인 PC와 웹호스팅 환경에 따라 느낌의 차이가 많이 나실 겁니다.
컴포징 전에 업로드하는 시간도 존재하구요.
일단 Live Demo 사이트에서는 업로드 시간과 컴포징 소요 시간을 분리한 뒤,
컴포징 소요 시간을 저장해 놓았으므로 열람하실 수 있습니다.
Composition Type의 Deep Zoom Data를 얻는데 있어서는
제 노트북에서 Microsoft Deep Zoom Composer를 통하는 것보다
빠르게 작업할 수 있다고 느꼈습니다.
무엇보다 그 과정의 간결함이 크게 작용하였습니다.
사진만 선택해서 업로드 하면, DeepView Lite로 바로 볼 수 있고,
바로 퍼가기도 가능하다는 것 말이죠.
Epilogue
브로드밴드 서비스를 위해서는 Deep Zoom 컴포징 서버가 따로 존재해야 하겠지만,
개인적으로 가볍게 사용할 목적으로는 Deep Zoom은 그렇게 멀기만 한 기술이 아닙니다.
(서버 버전의 컴포저는 이과장님이 전문이십니다.)
위 시도를 통해서, 제로보드, 태터툴즈(or 텍스트 큐브) 등 PHP 기반의 프로그램에서도
손쉽게 Deep Zoom 컴포징 & View 기능을 내장할 수 있다는 가능성을 확인하였습니다.
PHP는 제가 오래 사용해 왔던 언어라서 이번 실험에 사용했습니다만,
Image Handling이 가능한 수많은 서버 언어에서도 비슷한 시도가 가능하겠습니다.
감사합니다.
얼마전 마이크로소프트의 깜짝선물 for MVP란 포스트로 궁금증을 유발했던 선물을 공개합니다.
봉투 안을 열어보면, 까만 카드가 나옵니다.
뒷면은 내용을 읽어보실 수 있게 딥줌 데이터를 제공해 드리는 센스!!
아무튼 3개씩 보내준 것은 감동이었습니다.
DeepView Lite 1.4 Update (for Silverlight 2 Beta 2)

DeepView Lite 1.4를 공개합니다.
Silverlight 2 Beta 2로 포팅 하였습니다.
이미지의 제목과 저작권자을 표시할 수 있습니다.
전에 약속드렸던 DeepZoom Image 목록 지원은 1.5로 미뤄졌습니다.
죄송합니다.
자세한 사항은 휴즈플로우 웹사이트의 DeepView 소개 페이지를 통해서 보실 수 있으시며,
xap 패키지 다운로드도 그 페이지를 통해 가능합니다.
이제 xap파일과 DeepZoom Data가 서로 다른 서버에 있어도 화면에 표시가 가능합니다.
[SL2 B2] Beta2 이전 시대의 DeepZoom 데이터를 위한 심폐소생술

CPR for DeepZoom Data of Silverlight 2 Beta1 era.
서론
Beta2가 릴리즈 되고나니 보이시던 DeepZoom Data가 보이시지 않으십니까?
새 DeepZoom Composer로 다시 Export를 하려고 했는데 원본이미지가 없으십니까?
걱정하지 마십시오! 다음과 같은 방법으로 예전 딥줌이미지를 재활용 하실 수 있습니다. :)
이 포스트는 원본이 없어져서 새로운 DeepZoom Composer로 다시 Export 하실 수 없는 분이나,
이미 대량의 이미지를 생성해 놓은 상태여서 재활용하고 싶으신 분에게 유익합니다.
주의. Composition 방식으로 Export된 데이터에 대한 변환 팁입니다.
(Collection에 대한 변환 팁이 아닙니다.)
데이터 변환
Step2. 각 레벨의 이미지가 저장되어 있는 레벨 폴더들(그림의 예를 들어 0~12)을 dzc_output_files 폴더로 복사합니다.
Step3. info.xml의 데이터를 dzc_output.xml로 변환합니다.
Step3는 변환이라기 보다 dzc_output.xml 파일 내용이 초간단 하므로,
다음의 기본형에 붉은색 글자 부분을 info.xml 파일의 내용을 참고하여 수정해서 쓰는 것을
권해드립니다.
Overlap 같은 경우는 값을 정하기가 상당히 애매합니다.
<Image TileSize="513" Overlap="2" Format="jpg" xmlns="http://schemas.microsoft.com/deepzoom/2008">
<Size Width="2496" Height="1664"/>
<DisplayRects>
<DisplayRect MinLevel="0" MaxLevel="12">
<Rect X="0" Y="0" Width="2496" Height="1664"/>
</DisplayRect>
</DisplayRects>
</Image>
dzc_output.xml 파일
변환해야하는 데이터가 많을 때는 이 과정을 자동화하시면 되겠죠?
어떤 영웅이 나와서 Converter를 곧 제공하지 않을까 생각합니다.
코드 수정
마지막으로, 만약 MultiScaleImage의 Source를 XAML이 아닌,
비하인드 코드에서 동적으로 할당해 주고 계시다면... (현실적으로 그렇게 많이 하고 계시죠)
Breaking Change에 언급된 다음과 같은 코드 수정이 필요합니다.
Beta 1
[C#]
msi.Source = new System.Uri("images/info.bin");
Beta 2
[C#]
msi.Source
= new DeepZoomImageTileSource(new System.Uri("images/dzc_output.xml"));
(단, 여기서 msi는 MultiScaleImage의 인스턴스입니다.)
xml 파일과 폴더명에 대해서
공도씨가 궁금해 하셔서 확인해 본 결과
위에서 언급한 dzc_output.xml과 dzc_output_files란 이름은 얼마든지 다른 이름을 사용할
수 있습니다.
즉 xml 파일의 이름을 hugeflow.xml이라고 하면,
MultiscaleImage는 자동으로 hugeflow_files란 폴더에서 이미지를 찾습니다.
자, 이것으로 끝.
'공신닷컴'에서 활동하고 있는 악당마녀 이원기양의 수학오답 노트를
딥줌버전으로 만들어 보았습니다. 글씨 참 이쁘게 썼네요.
더 많은 공신들의 노트 필기법 자료들이 공신닷컴의 '공신의 노트' 코너에
사진 이미지들로 공개 되어있습니다만,
딥줌을 활용한다면 더욱 효율적으로 볼 수 있는 컨텐트들이라고 생각하고 있던 차에,
실행에 옮겨 보았습니다.
Deep Zoom Viewer Lite - Silverlight.net 갤러리에 등록

휴즈플로우의 Deep Zoom Viewer Lite가 silverlight.net 갤러리에 등록되었습니다.
자축합니다. ^^
그리고 오늘 엄준일 MVP님의 포스트를 보니 MSDN Blog 중 Felix Wang의 블로그에도
Very Interesting Deep Zoom in Korean (Korea가 맞지 않나요? ^^;;)라는 제목으로
다른 서비스들과 함께 소개가 되었다고 하네요.
거기 같이 소개된 Newsbank의 Deep Zoom 서비스와, PCASO의 Deep Zoom 서비스에서 사용하고 있는
Photo Viewer의 프로토타이핑에 공도씨가 수고가 많았습니다.
조선일보에서도 Deep Zoom을 맛보실 수 있습니다. 물론 퍼가기도 가능합니다.
저희 손을 거친 실버라이트 관련된 서비스들이 국내에서 오픈해 나갈 때마다 느끼는 뿌듯함은,
계속 앞으로 나가게 하는 바람이 됩니다. (채찍이 됩니다라고 표현하려다 무서워서...)
앞으로도 계속 뿌듯함을 느껴나갈 수 있도록 더욱더 노력해야 겠습니다.
Deep Zoom 이미지를 위한 Thumbnail은 따로 만들 필요가 없는 것 같아요.
Deep Zoom Composer가 만들어준 파일 중에 이미 쓸 만한 것들이 많이 있으니까요!
알고 계신바와 같이 Deep Zoom Composer는 원본 이미지를 단계적으로 축소해가면서,
단위 이미지들로 쪼개어 위와 같은 구조로 만들어 줍니다.
0~8까지의 이미지 폴더 안에는 쪼개지지 않은 축소 이미지(0_0.jpg)들이 있습니다.
이중 폴더 8 안의 이미지가 쪼개지지 않은 축소 이미지 중 최대 크기 입니다.
그리고 파일 경로는 다음과 같습니다.
(사실 폴더 9 안의 이미지도 1개로 존재할 때가 있기는 하지만,
이미지에 따라서는 아래 이미지와 같이 쪼개져서 존재하는 경우가 있어
Thumbnail로 활용하기에 안전하지 않습니다.)
폴더0~8 안의 이미지들을 살펴 보면 대략 아래와 같습니다.
| 폴더 | 이미지 | 사이즈 |
| 0 | 1x1 | |
| 1 | 2x2 | |
| 2 | 4x3 | |
| 3 | 7x5 | |
| 4 | 14x9 | |
| 5 | 27x18 | |
| 6 | 54x36 | |
| 7 | 108x72 | |
| 8 | 216x144 |
각각의 폴더 안에 보시는 바와 같이 축소 이미지들이 존재를 하며,
그림 마다 정확한 사이즈가 보장되지는 않는 이유로,
크리티컬한 사이즈가 요구되는 경우를 제외하고는 유용하게 사용할 수 있습니다.
특히 실버라이트는 이미지 Resize 능력이 Browser에 의한 Resize보다 좋은 편이라
문제없이 사용할 수 있다고 생각합니다.
Deep Zoom Viewer Lite 1.3에서는 미니맵(Minimap)을 구현하기 위해 폴더 8의 이미지를
적극 활용하고 있으며, 앞으로 XML로 이미지 리스트를 Import할 수 있도록 지원할 예정인데,
이 때에도 적극 활용할 계획입니다.
간단한 DeepZoom 데이터 Viewer입니다.
아래와 같은 코드를 붙여넣기 하였습니다.
<param name="source" value="http://shiverlight.net/Sample/DeepZoomViewer.xap"/>
<param name="onerror" value="onSilverlightError" />
<param name="background" value="white" />
<param name="EnableHtmlAccess" value="true"/>
<param name="initParams" value="DZSource=http://shiverlight.net/MultiImage/sl2developerreference/info.bin" />
<a href="http://go.microsoft.com/fwlink/?LinkID=108182" style="text-decoration: none;">
<img src="http://go.microsoft.com/fwlink/?LinkId=108181" alt="Get Microsoft Silverlight" style="border-style: none"/>
</a>
</object>
붉은 글자 부분을 변경하여 사용가능 합니다.
initParams의 DZSource는 생략 가능합니다.
이올린에 북마크하기
이올린에 추천하기


