Deep Zoom++ : Build Dynamic Deep Zoom Applications with Open Source

Find out about Jellyfish, a collection of modules that you can install on your server to give your customers the ability to build, modify, and create Deep Zoom collections and provide useful Silverlight functions to developers. Hear about how the service has been used on real Web sites, and learn how to build your own server-side, scalable, easy to use enterprise Deep Zoom Solution.

1. Deep Zoom ++ Build Dynamic Deep Zoom application with Open Source Ken Azuma Director/Senior Experience Architect 2ndfactory co., ltd/Japan

2. Agenda Intro: About us What is “Deep Zoom” ? How to make Deep Zoom files ? Needs for deep zoom app (and problem) What is Jellyfish? Demo

3. Agenda Developing Deep Zoom app with Jellyfish Hello world (client side only) Skinning Full screen Other features Developing dynamic generated Deep Zoom app with Jellyfish Dynamic VS “Semi-Dynamic” Semi-Dynamic Deep Zoom application Dynamic Deep Zoom application

4. Agenda Partner demo: Deep Zoom Pix Future plan of Jellyfish Conclusion

5. About us 2ndfactory , 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.

6. About us Ken Azuma ( 東　賢 ) Senior Experience Architect of 2ndfactory [email protected] http://www.syncrare.com/ Twitter / BrightKite / FriendFeed : kenazuma LinkedIn : http://www.linkedin.com/in/kenazuma Microsoft MVP https://mvp.support.microsoft.com/profile=BDE5E9FE-2703-4846-A5AA-0247C32632DA Adobe Community Expert http://www.adobe.com/communities/experts/members/KenAzuma.html

7. About us Tatsushi "TA-2-C" Kuramoto ( 蔵元　達志 ) Manager of Interaction design and development group [email protected] Microsoft Certified Solution Developer Adobe Certified Expert - Rich Internet Application Specialist -

8. 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

9. How to make Deep Zoom files? Deep Zoom Composer Structure of Deep Zoom files “Pyramid” of tiny sliced images XMLs “Single” and “Sparse” image DZC and DZI DZC = Deep Zoom Collection DZI = Deep Zoom (single) Image

10. Deep Zoom Files Every images is slicing into tiny tiles You don’t have to fetch all of image tiles but only those tiles required for the current size of the image on screen

11. Deep Zoom Pyramid Sparse image store data only where there is resolution

12. 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

13. What is Jellyfish? Jellyfish is an open source toolkit for deep zoom application that is open to public through codeplex Jellyfish has two major part Client side class library Server side image slicing tool Jellyfish also include sample server side web application for image administration

14. Ayumi Hamasaki 10th anniversary special site MSN Japan demo

15. Developing Deep Zoom Application with Jellyfish Hello World Skinning Button Full Screen Experience Implement other Jellyfish features

16. Hello World! Preparation to use Jellyfish Make static deep zoom flies Add files to Silverlight solution Add reference to jellyfish.dll Write simple XAML Hit F5 !

17. Skinning for Button Set skin for Next/Previous button

18. Full Screen Experience Leverage full screen feature of Silverlight Add support features to UI With full screen, you cannot Type anything from keyboard Control image by mouse wheel

19. Implement Other Jellyfish Features Built-in layout Slide show Subimage manipulation (position, size) Zoom level limitation Synchronize XAML with subimage

20. Developing “Dynamic” Deep Zoom Application with Jellyfish Dynamic VS “Semi-Dynamic” Semi-Dynamic DZ application Dynamic DZ application

21. Dynamic VS "Semi-Dynamic" Dynamic generation takes time dynamically If you could avoid real time file generation with your scenario, use “semi-dynamic”

22. "Dynamic" .jpg (picture) Execute SDI Converter Convert picture into DZI It has its own URL named by rule , and stored in DB Administrator - “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

23. "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 c ollection_files has merged image files which are associated with DZI c ollection.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

24. "Semi-Dynamic" .jpg (picture) Convert picture into DZI Administrator - “UPLOAD Image” SDI Converter (.exe) DZC collection.xml collection files “Semi-Dynamic Search” DZI Folder /Jellyfish/ sl /out/collection_images / Silverlight Deep Zoom I mage structure DZI Deep zoom image structure DZI Deep zoom image structure DZI Deep Zoom I mage structure DZI Semi- Dynamic Search API (ASP.NET / IIS) Pre-Generated DZC Folder /Jellyfish/ sl /out/collections / Administrator - “Image Manager” Administration API (ASP.NET / IIS) DB DZC Converter (.exe) Administration API (ASP.NET / IIS) Deep Z oom Collection structure Execute SDI Converter

25. "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 I mage structure DZI Deep zoom image structure DZI Deep zoom image structure DZI Deep Zoom I mage structure DZI Semi- Dynamic Search API (ASP.NET / IIS) Pre-Generated DZC Folder /Jellyfish/ sl /out/collections / Administrator - “Image Manager” Administration API (ASP.NET / IIS) DZC Converter (.exe) Administration API (ASP.NET / IIS) Deep Z oom Collection structure DB

26. "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 I mage structure DZI Deep zoom image structure DZI Deep zoom image structure DZI Deep Zoom I mage structure DZI Semi- Dynamic Search API (ASP.NET / IIS) Pre-Generated DZC Folder /Jellyfish/ sl /out/collections / Administrator - “Image Manager” Administration API (ASP.NET / IIS) DZC Converter (.exe) Administration API (ASP.NET / IIS) Deep Z oom Collection structure DB

27. Semi-Dynamic DZ Application Add “list” for pre-defined collections Show metadata information Other features Sort Filter Select subimage Thumbnails

28. Dynamic DZ Application Search data to make collection

29. Show case with Jellyfish "DeepZoomPix" Allan Li ( 李　超 ) Director, Creative Development NEXT.EXPERIENCE partner

30. Allan Li N EXT E X PERIENCE INTERACTIVE Beijing, China

31. Ni hao( 你好 ) Hello

32. Our office…

33. Inside…

34. Recent Silverlight Projects

35. DeepZoomPix.com

36. DeepZoomPix.com demo

37. 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

38. 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 APIs Second phase focused on UI and user experience

39. Wireframe of Mooncake demo

40. Expression Blend 3 SketchFlow Prototype demo

41. Conclusion Leveraged existing code library Jellyfish to greatly speedup implementation; focused in stead on user experience design Blend 3 provides great new prototyping features; works with our existing design process Silverlight’s DeepZoom provides a very rich user experience

42. Xie xie( 谢谢 ) Thanks! Try DeepZoomPix today http://www.DeepZoomPix.com My blog (Chinese) http://www.experience10.com NEXT EXPERIENCE INTERACTIVE http://www.nxmix.com Email [email protected]

43. Future Plan of Jellyfish . dll-ize server side New blend “behavior” integration Image blend support Today’s build will be “1.1 beta”, soon to be open at codeplex .

44. 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.

45. Questions?

46. Please Complete an Evaluation Form Your feedback is important! Evaluation forms can be found on each chair Temp Staff at the back of the room have additional evaluation form copies

47. © 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.

48. O ur Team M odel Business Domain Presentation Domain System Domain