Deep Zoom++ : Build Dynamic Deep Zoom Applications with Open Source
-
Upload
goodfriday -
Category
Technology
-
view
3.312 -
download
0
description
Transcript of Deep Zoom++ : Build Dynamic Deep Zoom Applications with Open Source
Deep Zoom ++Build Dynamic Deep Zoom application with Open Source
Ken AzumaDirector/Senior Experience Architect2ndfactory co., ltd/Japan
Agenda
Intro: About usWhat is “Deep Zoom” ?How to make Deep Zoom files ?Needs for deep zoom app (and problem)What is Jellyfish?Demo
Agenda
Developing Deep Zoom app with Jellyfish
Hello world (client side only)SkinningFull screenOther features
Developing dynamic generated Deep Zoom app with Jellyfish
Dynamic VS “Semi-Dynamic”Semi-Dynamic Deep Zoom applicationDynamic Deep Zoom application
Agenda
Partner demo: Deep Zoom PixFuture plan of JellyfishConclusion
About us2ndfactory , Japan
We provide application with innovative interface based on our years of RIA development and our original production process.
Rich Experiences can be brought from usability and Omotenashi. We consider software and web service as a user friendly “tool”. Because they are everyday use, Rich Experience is very important.
2ndfactory will maximize your ROI and business success, and Rich Experience to the end user through RIA.
We provide “Omotenashi”, Japanese way of thinking about hospitality, into application.
About usKen Azuma (東 賢 )
Senior Experience Architect of 2ndfactory
[email protected]://www.syncrare.com/Twitter / BrightKite / FriendFeed: kenazumaLinkedIn : http://www.linkedin.com/in/kenazumaMicrosoft MVP https://mvp.support.microsoft.com/profile=BDE5E9FE-2703-4846-A5AA-0247C32632DA
Adobe Community Experthttp://www.adobe.com/communities/experts/members/KenAzuma.html
About usTatsushi "TA-2-C" Kuramoto (蔵元 達志 )
Manager of Interaction design and development group
[email protected] Certified Solution Developer Adobe Certified Expert- Rich Internet Application Specialist -
What is "Deep Zoom"?
“Deep Zoom” is “Seeing is Believing”“Deep Zoom” is technology“Deep Zoom” is one of Silverlight Features“Deep Zoom” is in UI control“Deep Zoom” is cross platform
How to make Deep Zoom files?
Deep Zoom ComposerStructure of Deep Zoom files
“Pyramid” of tiny sliced imagesXMLs“Single” and “Sparse” image
DZC and DZIDZC = Deep Zoom CollectionDZI = Deep Zoom (single) Image
Deep Zoom Files
Every images is slicing into tiny tilesYou don’t have to fetch all of image tiles but only those tiles required for the current size of the image on screen
Deep Zoom Pyramid
Sparse image store data only where there is resolution
Needs of Deep Zoom App
“We want to develop our own Hard Rock Memorabilia!”
Files are easy to slice by Deep Zoom Composer, but hard to develop smooth feature rich app
“We already have existing picture on server. Can we convert these into Deep Zoom dynamically?”
Deep Zoom Composer is client side tool. We have to prepare server side deep zoom file generator
What is Jellyfish?
Jellyfish is an open source toolkit for deep zoom application that is open to public through codeplexJellyfish has two major part1.Client side class library2.Server side image slicing toolJellyfish also include sample server side web application for image administration
Ayumi Hamasaki10th anniversary special siteMSN Japan
demo
Developing Deep Zoom Application with Jellyfish1. Hello World2. Skinning Button3. Full Screen Experience4. Implement other Jellyfish features
Hello World!
Preparation to use JellyfishMake static deep zoom fliesAdd files to Silverlight solutionAdd reference to jellyfish.dll
Write simple XAMLHit F5 !
Skinning for Button
Set skin for Next/Previous button
Full Screen Experience
Leverage full screen feature of Silverlight
Add support features to UIWith full screen, you cannot
Type anything from keyboardControl image by mouse wheel
Implement Other Jellyfish Features
Built-in layoutSlide showSubimage manipulation (position, size)Zoom level limitationSynchronize XAML with subimage
Developing “Dynamic” Deep Zoom Application with Jellyfish1. Dynamic VS “Semi-Dynamic”2. Semi-Dynamic DZ application3. Dynamic DZ application
Dynamic VS "Semi-Dynamic"
Dynamic generation takes time dynamicallyIf you could avoid real time file generation with your scenario, use “semi-dynamic”
"Dynamic"
.jpg (picture)
Execute SDI Converter
Convert picture into DZI
It has its own URL named by rule , and stored in DBAdministrator -
“UPLOAD Image”
SDI Converter(.exe)
DZI Folder/Jellyfish/sl/out/collection_images/
Deep zoom image structure
DZI
Administration API
(ASP.NET / IIS)
DZC Converter
(.exe)
Dynamic Search API(ASP.NET /
IIS)
DZC
collection.xml
collection files
“Dynamic Search”
Silverlight
Deep zoom image structure
DZI
Deep zoom image structure
DZI
Deep zoom image structure
DZI
DB
"Dynamic"
.jpg (picture)
Searching Requests from
Users
Search API queries to DB to
retrieve URLs and Info.
Administrator -“UPLOAD Image”
DZC Converter
(.exe)
Dynamic Search API(ASP.NET /
IIS)
SDI Converter(.exe)
DZC
collection.xml
collection files
collection_files has merged image files which are associated with DZI
collection.xml includes URLs of
multi DZI
“Dynamic Search”
DZI Folder/Jellyfish/sl/out/collection_images/
Search API passes these info to DZC Converter
Silverlight
Deep zoom image structure
DZI
Deep zoom image structure
DZI
Deep zoom image structure
DZI
Deep zoom image structure
DZI
Administration API
(ASP.NET / IIS)
DB
"Semi-Dynamic"
.jpg (picture)
Convert picture into DZIAdministrator -
“UPLOAD Image”
SDI Converter
(.exe)
DZC
collection.xml
collection files
“Semi-Dynamic Search”
DZI Folder/Jellyfish/sl/out/collection_images/
Silverlight
Deep Zoom Image structure
DZI
Deep zoom image structure
DZI
Deep zoom image structure
DZI
Deep Zoom Image structure
DZI
Semi-Dynamic Search API
(ASP.NET / IIS)
Pre-GeneratedDZC Folder/Jellyfish/sl/out/collections/
Administrator -“Image Manager”
Administration API
(ASP.NET / IIS)
DB
DZC Converter
(.exe)Administration API
(ASP.NET / IIS)Deep Zoom
Collection structure
Execute SDI Converter
"Semi-Dynamic"
.jpg (picture)
Administrator -“UPLOAD Image”
SDI Converter
(.exe)
DZC
collection.xml
collection files
Pre-Generated DZC
“Semi-Dynamic Search”
DZI Folder/Jellyfish/sl/out/collection_images/
Silverlight
Deep Zoom Image structure
DZI
Deep zoom image structure
DZI
Deep zoom image structure
DZI
Deep Zoom Image structure
DZI
Semi-Dynamic Search API
(ASP.NET / IIS)
Pre-GeneratedDZC Folder/Jellyfish/sl/out/collections/
Administrator -“Image Manager”
Administration API
(ASP.NET / IIS)
DZC Converter
(.exe)Administration API
(ASP.NET / IIS)Deep Zoom
Collection structure
DB
"Semi-Dynamic"
.jpg (picture)
Get Requests from Users
Search API queries to DB to retrieve DZC’S
URLs and additional Info.
Administrator -“UPLOAD Image”
SDI Converter
(.exe)
DZC
collection.xml
collection files
Pre-Generated DZC
“Semi-Dynamic Search”
DZI Folder/Jellyfish/sl/out/collection_images/
Silverlight
Deep Zoom Image structure
DZI
Deep zoom image structure
DZI
Deep zoom image structure
DZI
Deep Zoom Image structure
DZI
Semi-Dynamic Search API
(ASP.NET / IIS)
Pre-GeneratedDZC Folder/Jellyfish/sl/out/collections/
Administrator -“Image Manager”
Administration API
(ASP.NET / IIS)
DZC Converter
(.exe)Administration API
(ASP.NET / IIS)Deep Zoom
Collection structure
DB
Semi-Dynamic DZ Application
Add “list” for pre-defined collectionsShow metadata informationOther features
SortFilterSelect subimage
Thumbnails
Dynamic DZ Application
Search data to make collection
Show case with Jellyfish"DeepZoomPix"Allan Li (李 超 )Director, Creative DevelopmentNEXT.EXPERIENCE
partner
Allan LiNEXT EXPERIENCE INTERACTIVEBeijing, China
Ni hao(你好 ) Hello
Our office…
Inside…
Recent Silverlight Projects
DeepZoomPix.com
DeepZoomPix.com
demo
Tile Processor
Image
DeepZoom image tiles
DeepZoomPix.com
Client viewer: Silverlight DeepZoom
Jellyfish.dll
Image upload
RSS, Atom
DeepZoom Composer
Architecture of DeepZoomPix
Client module
Server module
Cloud storage module
Client module
The Design Process of DeepZoomPix
Code name of the application is ”Mooncake” (a traditional Chinese delicacy)First phase focused on learning jellyfish library and experimenting with web services APIsSecond phase focused on UI and user experience
Wireframe of Mooncake
demo
Expression Blend 3 SketchFlow Prototype
demo
Conclusion
Leveraged existing code library Jellyfish to greatly speedup implementation; focused in stead on user experience designBlend 3 provides great new prototyping features; works with our existing design processSilverlight’s DeepZoom provides a very rich user experience
Xie xie(谢谢 ) Thanks!
Try DeepZoomPix todayhttp://www.DeepZoomPix.com
My blog (Chinese)http://www.experience10.com
NEXT EXPERIENCE INTERACTIVEhttp://www.nxmix.com
Future Plan of Jellyfish
.dll-ize server sideNew blend “behavior” integrationImage blend supportToday’s build will be “1.1 beta”, soon to be open at codeplex.
Conclusion/note
Deep Zoom need to generate many files, so be sure about storage size and cache server like CDN
Cloud works perfectly with Deep Zoom!With Jellyfish, or anything you can use reusable component, you can focus more about UX side. UX matter.
Questions?
Please Complete an Evaluation FormYour feedback is important!
Evaluation forms can be found on each chairTemp Staff at the back of the room have additional evaluation form copies
© 2009 Microsoft Corporation. All rights reserved. Microsoft, Windows, Windows Vista and other product names are or may be registered trademarks and/or trademarks in the U.S. and/or other countries.
The information herein is for informational purposes only and represents the current view of Microsoft Corporation as of the date of this presentation. Because Microsoft must respond to changing market conditions, it should not be interpreted to be a commitment on the part of Microsoft, and Microsoft cannot guarantee the accuracy of any information provided after
the date of this presentation. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.
Our Team ModelBusiness Domain
Presentation DomainSystem Domain