Microsoft Silverlight 3 Deep Zoom for Your Images…

12 07 2009

Deep Zoom LogoMicrosoft Deep Zoom is yet another impressive web app based technology piggybacking on the recently released Silverlight 3 which allows users to pan around and zoom in a large, high resolution image or a large collection of images.  Anyone who have checked out sites like the Hard Rock Memorabilia would surely be impressed with the way their collections have been organized. Not convinced? Just have a look at the video demo on the Hard Rock Memorabilia below:

Creating applications like what you saw above ain’t hard and the possibilities of what you can do is great. Some of the applications possible would be virtual newspapers, virtual mind maps and virtual picture galleries which are zoomable to several levels according to your liking. To create, you only require a simple drag n drop tool called the Deep Zoom Composer and some creativity to come up with your Deep Zoom app. By following this guide, you will be able to create your deep zoom applications in no time!

Step 1: Download the Deep Zoom Composer

Click here to get the latest version of the Deep Zoom Composer from Microsoft.

Step 2: Create a New Project and Add your Images

To start composing a Deep Zoom application, click on the ‘New Project‘ button. Right after that, the first step that you will need to perform is to import the pictures that you want into the project first by clicking on the ‘Add Image‘ button. In this sample, I will try to embed multiple playing card pictures into a single card. Try to keep the color tone of the images in the number to be as close as the larger picture so that it looks more natural.

Deep Zoom 01

Click on 'New Project'

Add your Selected Images after Clicking on the 'Add Image' Button

Add your Selected Images after Clicking on the 'Add Image' Button

Step 3: Composing your Deep Zoom App

Once you have added your images (you can always go back and add more if you want to), click on the ‘Compose’ button at the top center of the program to start composing your Deep Zoom application. To do so, just drag the images from the bottom of the composer into the workspace and compose the application in any way that you desire. The best practice is to of course get images of higher resolution to be used as it will provide a more clearer viewing experience. To move around your image, make use of the navigator located on the bottom left of your workspace, highlighted in red below.

Drag your Images into the Workspace and Resize them accordingly

Drag your Images into the Workspace and Resize them accordingly

Step 4: Finalize and Export your Project

The final step should not be an issue too. What you should see once you click on the ‘Export’ button would be a preview of your entire project that you have composed earlier. If you are not happy and would like to apply certain changes, just go back to the previous step by clicking on the ‘Compose’ button at the top center of the composer.

If you are happy with it however, you may choose to either export your application to the Internet through your DeepZoomPix account which you must register first OR by clicking on the Custom tab to export the project to your local computer. In this case, I will be exporting the project to my own PC so that I can view it locally.

For exporting, you may choose to export into a ‘Silverlight Deep Zoom’ application or a ‘Seadragon AJAX’ application. In this case, choose Silverlight Deep Zoom if you would like your Deep Zoom application to be viewed through the Silverlight plug in or  Seadragon AJAX if you do not want your application to be viewed by the Silverlight plugin. Do take note that Seadragon AJAX’s performance may not be as good or satisfactory as Silverlight even though it is viewable without the Silverlight plugin.

You can also choose the quality and the type of the images being exported in your project too to scale the loading time of your application. Once you are done, press ‘Export’. All steps are listed down below

Set the settings of your Exported project on the Right hand side of the Composer and click on the Preview in Browser button to check out your application!

Set the settings of your Exported project on the Right hand side of the Composer and click on the Preview in Browser button to check out your application!

After completing the previous step, you should get a dialog box telling you that your export have been completed. In this case, select ‘Preview in Browser’ to view your Silverlight Deep Zoom application in your browser.

Step 5: Mission Accomplished

If your preview works well, you may now publish your Silverlight application into your IIS server. Just copy the exported folder into IIS and everything should work as what you have seen in your preview.

Hint: Do check out the toolbar at the top of your Deep Zoom app as it has many functions, most notibly zooming to highlighted areas/images in your project.

That’s it for today’s tutorial. Come back to my blog for more on Silverlight and ASP.NET application development!





Fixing Silverlight Applications that Requires East Asian Languages Installed

6 04 2009

Recently, when working on CRSM’s Computer-Based Training Silverlight application, I have encountered quite a big problem where people whose PC does not have East Asian Language installed are unable to view it. Basically, the problem started because we have used a video carousel control which has globalization applied. Globalization allows programmers to localize and create their software in multiple languages.

Upon the loading of the XAP file, if a file under certain language is not found, Silverlight somehow disable the showing of the application altogether unless East Asian languages are installed. The error which was displayed is  “Unhandled Error in Silverlight 2 Application” with code 2105 as shown below.

silverlighteastasianlanguageerror

As our application do not require Chinese language that has been utilized by the video carousel, the chinese language DLL file which should be loaded is unnecessary for PCs without East Asian languages installed. However, Silverlight 2 automatically loads it even after knowing that the computer do not have support for East Asian Languages. This is basically a bug which has already been fixed for the next version of Silverlight, which is Silverlight 3. To temporarily fix this problem, all we need to do is to ensure that Silverlight does not load other language’s DLL file.

To do so, simply use any zipping program (i.e. Winzip or Winrar) to open the XAP file. Inside the zipped XAP file, you should get a set of files which looks like this:

xapcontentWhat we would like to do is to edit the AppManifest.xml file which is located inside this XAP file (not the one which is located in the same folder as your XAP file). After opening it, all I did was to remove the languages DLL Assembly Parts which were causing me problems. i.e:

<AssemblyPart Source=”zh-Hans/System.Windows.Controls.resources.dll” />
<AssemblyPart Source=”zh-Hans/Cokkiy.Display.VideoCarousel.resources.dll” />

Once I have taken these 2 lines ouf of the AppManifest.xml file, my Silverlight application could now run on any system whether they have East Asian languages installed or not.

However, this temporary hack won’t help in globalization because what we have basically done above will delete any initialization to different language resources. As I have mentioned before above however, this will be fixed come Silverlight 3. There are more advanced hacks available out there to allow your AppManifest.xml to load based on the language that is available in the PC if you still require globalization to be done on your application. You can find it here at http://wpf-e.spaces.live.com/blog/cns!2B248D261D0E0035!407.entry