DeepZoom your Office Documents!

  • Article

Technorati Tags: Silverlight

del.icio.us Tags: Silverlight

 

In a previous blog posting I showed how you could use Silverlight as an XPS renderer, so you could view your documents. This is nice, but had the drawback in that the entire document had to be downloaded before you could view it. Additionally if you have premium content, it's hard to protect the content from being redistributed against their will. This is something that I had been working on for my Silverlight 2

So, I got to thinking -- DeepZoom is really nice, not only in that it can provide a Zoomable UI, but, it slices the UI into tiles so that (a) you only download what you look at, at the resolution that you are looking at it, and (b) it's pretty difficult for someone to cache-surf and pull your document for redistribution.

But, DeepZoom is an image oriented technology, and not a document oriented one. So what's the solution?

Simple -- use a virtual printer, and print your document as a TIFF or JPEG, and then import the images to DeepZoom composer.

What I've been using is the super-cool free tool called PDFCreator which you can find here. Now, wait a minute you might say. PDF? Yes -- despite the name, this tool can produce PNG, JPG, TIFF, BMP, PCX, PS and EPS.

This application gives you a virtual printer that allows you to print to the above formats. For the purpose of this entry, I'm going to show a Word document that is printed to TIFF, and DeepZoomed using Deep Zoom Composer.

You can see the result of this here: https://www.evangelistech.com/deepzoomdocs/DeepZoomProjectTestPage.html

 

So how do you build this? Follow these simple steps:

Step 1: Print your Document

When PDFCreator is installed, take your document and print it in the usual manner, using PDFCreator as the printer type:

image

This will launchthe PDFCreator executible.

image

Do not SAVE yet. First, select 'Options'. Select the 'Document' link and make sure that you have the 'One Page per File' checkbox checked. You can also tweak the settings for the output formats. I'm using TIFF at 600DPI.

image

Click Save, and then on the PDF Creator dialog click Save. Remember to select TIFF (or JPG or whatever format you want) on the 'Save As' dialog. It defaults to PDF (which you can override in the options dialog too if you like). This will write out a number of files, one for each page, as you selected in the Options dialog.

Now that you have the files, it's time to Deep Zoom them.

Step 2. Deep Zoom your documents with Deep Zoom Composer

Start Deep Zoom composer and create a New Project. Give it a name (for example DeepZoomWord)

image

Use the 'Import' tab to add each of the images that you've just created using the virtual printer.

Next, use the 'Compose' tab to lay them out. Deep Zoom composer provides some nice layout tools to allow you to snap them either side by side or vertically. I'm using side-by-side.

image

Next, it's just a case of exporting your work. Select the 'Export' tab, and then either the PhotoZoom or Silverlight Export. PhotoZoom will default to using a Silverligt Beta 2 site. If you want to override this, you can select the Silverlight Export tab.

You can then 'Export Images and Silverlight Project', to get a Visual Studio project containing everything you need.

image

After exporting, you'll get a number of options ('Preview in Browser', 'View Image Folder', 'View Project Folder' and 'Learn More'), so select 'View Project Folder'.

This will allow you to view the Visual Studio Solution file in its directory. Until Deep Zoom composer gets updated for RTW (right now as of 10/6/08 it exports Beta 2 code), you'll need to make 1 simple change if you want to view it in RC0 bits.

image

The Deep Zoom Composer template generates an HTML page that contains the Silverlight Object within the ClientBin directory.

Take a look at the <Object> tag, near the bottom of this page, and you'll see the 'type' attribute. If you want to view the content with RC0, simple change this to 'application/x-silverlight-2', otherwise have 'application/x-silverlight-2-b2' to view with Beta bits.

Or, while we're waiting for RTW, there's a neat little trick you can try -- embedding a RC0 definition within a B2 one like this:

 

         <object data="data:application/x-silverlight," type="application/x-silverlight-2-b2" width="100%" height="100%">

             <param name="source" value="DeepZoomProject.xap"/>

             <param name="onerror" value="onSilverlightError" />

             <param name="background" value="white" />

         

             <object data="data:application/x-silverlight," type="application/x-silverlight-2" width="100%" height="100%">

                 <param name="source" value="DeepZoomProject.xap"/>

                 <param name="onerror" value="onSilverlightError" />

                 <param name="background" value="white" />

             

                 <a href="https://go.microsoft.com/fwlink/?LinkID=115261" style="text-decoration: none;">

                      <img src="https://go.microsoft.com/fwlink/?LinkId=108181" alt="Get Microsoft Silverlight" style="border-style: none"/>

                 </a>

             </object>

         </object>