Monday, November 24, 2008

DeepZoom with PhotoZoom and Silverlight.live.com

I have already wrote article on How to build DeepZoom with DeepZoom Composer, I know after that another version of DeepZoom came up, but changes are not that much to discuss,still you can see old one for reference, This is now the depolyment part or you can say extension to my old article at :

http://pendsevikram.blogspot.com/2008/07/deep-zoom-with-silverlight-2.html

First thing to note that, we are discussing first "PhotoZoom" which practically don't require any DeepZoom Composer and even those users who are not aware of DeepZoom, now even they are getting empower with PhotoZoom, so they will be also now able to create DeepZoom on fly.

What is PhotoZoom??

"PhotoZoom makes it easy for anyone to create zooming albums from their uploaded photos. It is an experimental site, developed at Microsoft, that uses the Deep Zoom technology in Silverlight 2."

PhotoZoom is FREE !! :)

Step 1: Visit http://photozoom.mslivelabs.com/ ,hope you already have Live ID, if not please get one, its worth doing so.

Step 2: Once you sign-in with your Live ID, you will get :

zoom1

Step 3: Upload Snaps/Photos using Browse button,Note on thing over here that You may need Silverlight Runtime, since I saw that Once you click on "Browse" button,it loads Silverlight File Upload app, so you may need runtime here if you don't have it.

Also PhotoZoom have provided facility to get snaps from RSS feeds/Atom, you can also Email or even Delete Album.

zoom2

Step 4: Upload all the snaps, if you wish to give title to each snap, you can simply click on any of the snap and give caption/details over there like :

zoom3

One thing to note here which I have highlighted in Red box, Can you see it creates what?? ..yes DeepZoom Image file. see extention  is 1.xml, so each images goes to collection like we have it in DeepZoom [ I don't mind to say this PhotoZoom is nothing but Web Version of DeepZoom Composer ;-) , Great job Microsoft !! :-) ] 

Step 5 : You are ready with DeepZoom, can't see that? ok, then just you need to click on "View Zooming Album" option on right side of the template and you are totally ready with DeepZoom!!

zoom4

You can see output instantly on the same page :

zoom5

This is how it looks like, Observe topmost section with "+ -"  sign for zooming and it also shows how much it has zoom with third button next to "-", If you observe bottom most red block, Yes ! you get <iframe> so you can plug and play it anywhere you want, isn't this much simpler and friendly? do let me know your feedback !

[Between, snaps which you looking at in above snaps are from my 1st Session on Silverlight at Pune Developer Conference 2008 :) ]

DeepZoom with Silverlight.live.com

Now in second section of this article as we started with Silverlight streaming and DeepZoom, so with referecne to that,here I assume that you have already followed all steps of my previous article at :

http://pendsevikram.blogspot.com/2008/07/deep-zoom-with-silverlight-2.html

So once you have set of images ready, go to Silverlight.live.com site to host that DeepZoom and to stream it across.

If you are not aware of Silverlight.live.com, you can read my old article at :

http://pendsevikram.blogspot.com/2008/10/silverlight-live-streaming.html

Here you need to follow same procedure, but this time with xap, you need to also copy "GeneratedImages" folder from DeepZoom along with one Manifest.xml file whose contents are like :

<SilverlightApp>
  <version>2.0</version>
  <source>VikramDeepZoom.xap</source>
  <width>400</width>
  <height>400</height>
  <background>gray</background>
  <isWindowless>false</isWindowless>
</SilverlightApp>

Zip this xap,xml file and GeneratedImages folder and directly upload it as Application on Silverlight.live.com, then follow the same old procedure of editing it there, again you will get scripts and iframe code generated over there, so you can plug that and you are ready with your DeepZoom Streaming application.

Hope this will be useful for you and encourage you to convert all your photos which you store on drive to a classy Online DeepZoom Album !!

Vikram.

3 comments:

Vasudev said...

Nice!
Now it has also been called as 'Seadragon Ajax' released by Livelabs
http://livelabs.com/blog/new-seadragon-ajax/

Seadragon was there since long from Livelabs, but now they released again recently.

Vikram Pendse said...

Hello Vasudev !

Thanks for updates, i will do look at the URL which you had mentioned over here.

Vikram.

Aashish.....The Pro said...

Sir U R a great blogger .....

After the DevCon this year u have continously blogged much about the Silverlight ...

I attended ur seesion at the DevCon on Silverlight .... It was very nice ......

I continuosly visit ur blog to keep me updated about Silverlight ...

Sir I was unable to attend teh VTD this month due 2 our examination schedule .... but I want to know about PHOTOSURU .... It was discussed under the category "Hidden Gems Of Microsoft ..."

There is very little detail of photosuru on net.

I want to know more ..

Is it related to Silverlight ...

Sir Pls put some light upon the topic .....

Thanks

-Aashish Singh Negi
SIT Lonavla
http://sites.google.com/site/aashishthepro