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

azuma@2ndfactory.comhttp://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

kuramoto@2ndfactory.comMicrosoft 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

EmailAllan.Li@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