Deep Zoom Composer in production
Recently Konstantin Kishinsky (Microsoft Russia) presented in his blog Deep Zoom Composer 1.0 (in russian), which everyone can download from Microsoft site. What is it and how it works - you can find in user guide.
And now i want to show you how we can use it in production.
First of all pay your attention on export: Deep Zoom Composer can export project to Silverlight Deep Zoom and to Seadragon Ajax. Using Silverlight the main question is: on how many PCs Silverlight is installed? In comparison with Flash a very small percentage (statistic from http://www.riastats.com/):
So when it isn’t possible to use Silverlight it’s better to use the same functionality with JavaScript + Ajax (most users are afraid of installing new software). And why can’t we just use only JavaScript. It’s simple: Deep Zoom by Silverlight looks better and is more interactive then Seadragon. In comparison with Flash, Silverlight scales bitmaps better. You may export one project to Silverlight and Seadragon Ajax and compare them. By the way Deep Zoom Composer lets you to do it simple.
Lets take a look at it. After creating and preparing project in Deep Zoom Composer you’ll see the third tab “Export”. First – make export to Silverlight and then to Seadragon Ajax to the same folder.
Then you’ll see some files and folders in export folder. Pay your attention to file GeneratedImages/scene.xml: this file contains the main style of Silverlight application. You can correct it if needed. For example, you may change styles of tooltips and toolbar.
Next step: open to edit file test.html. When you open it you’ll see the Silverlight object declaration. There are parameters and presentation: how it might look if Silverlight isn’t installed on users PC. By default a picture with the request of installing the latest version of Silverlight. We can change presentation: place div container from file seadragonajax.html, you’ll see:
<object data="data:application/x-silverlight-2," type="application/x-silverlight-2"
width="800" height="500">
<param name="minRuntimeVersion" value="3.0.40307.0" />
<param name="autoUpgrade" value="false" />
<param name="source" value="Default.xap"/>
<param name="onerror" value="onSilverlightError" />
<param name="background" value="white" />
<param name="initParams" value="adFile=GeneratedImages" />
<div id="container">
</div>
</object>
From seadragonajax.html we also get the script, which initializing Seadragon Ajax on load. A little correction: place check, whether div container is presented on the page:
<script src="http://seadragon.com/ajax/0.8/seadragon-min.js" type="text/javascript"></script>
<script type="text/javascript">
Seadragon.Config.imagePath = "img/";
function start() {
var container = document.getElementById("container");
if (container != null) {
var viewer = new Seadragon.Viewer("container");
viewer.openDzi("GeneratedImages/dzc_output.xml");
}
}
</script>
Next we can place dynamic script load for Seadragon Ajax. It’s easy. First of all check whether element container exists on the page, and if true we load the script and initialize Seadragon object:
function start() {
var container = document.getElementById("container");
if (container != null) {
var script = document.getElementById('seadragon_javascript');
script.src = 'http://seadragon.com/ajax/0.8/seadragon-min.js';
script.onreadystatechange = function() {
Seadragon.Config.imagePath = "img/";
var viewer = new Seadragon.Viewer("container");
viewer.openDzi("GeneratedImages/dzc_output.xml");
}
}
}
And of course good practice is to show message “You may install Silverlight to see more interactive gallery.” with hyperlink to Silverlight installer.
By the end you can see result like this http://4g-soft.com/etpGallery.aspx
