Используем Deep Zoom Composer

^{2009-09-18

JavaScript

Deep Zoom Composer

Seadragon

Deep Zoom

Silverlight

modified: 2009-09-18

reading: 3 minutes}

Недавно Константин Кичинский в своем блоге представил Deep Zoom Composer 1.0, скачать который можно с сайта Microsoft. Что это такое и как работает я предлагаю прочитать в его блоге. А сейчас я хотел бы продемонстрировать как это можно использовать.

Первое на что следует обратить внимание – это то, что экспорт в Deep Zoom Composer может осуществляться как в Silverlight Deep Zoom, так и в Seadragon Ajax. Главный вопрос при использовании Silverlight на сайте встает о процентном соотношении пользователей, у которых установлен Silverlight – он достаточно мал, в особенности в сравнении с Flash (http://www.riastats.com/):

Следовательно, лучший вариант – это использовать Silverlight когда это возможно, а когда нет – не мучать пользователя просьбой установки, а показать тот же функционал на JavaScript + Ajax. Дальше должен следовать вопрос, а почему бы сразу не сделать все на JavaScript – ответ прост, картинки выглядят не очень хорошо при использовании JavaScript, а так же Flash в сравнении в том, как их отображает Silverlight (можете попробовать сделать экспорт из Deep Zoom Composer в Seadragon Ajax и Silverlight и сравнить. Притом Deep Zoom Composer позволяет делать это достаточно просто.

Итак, давайте посмотрим, как это можно сделать. После того как вы создадите проект в Deep Zoom Composer и подготовите его перед вами встанет третья вкладка – Export, сделаем экспорт сначала с типом Silverlight, а затем с типом Seadragon Ajax.

После того, как эспорт завершится вы должны увидеть в той папке, куда вы экспортировали несколько файлов и папок. Обратить стоит внимание на файл GeneratedImages/scene.xml, который содержит основные стили Silverlight приложения, там вы можете поправить как будут выглядеть tooltip’ы или toolbar вашего приложения.

Для того, чтобы показать как на странице при неустановленном Silverlight отобразить Seadragon Ajax откроем файл Test.html, там есть описание нашего Silverlight объекта - object внутри которого прописаны параметры самого объекта, а так же то, как будет выглядеть данная область, если Silverlight не установлен (по умолчанию картинка с информацией о том, что нужно скачать его). Вместо ссылки кладем туда контейнер div из сгенерированного файла seadragonajax.html <div id="container"></div>, чтобы получилось так:

<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>

Из файла seadragonajax.html нам так же потребуется забрать скрипт, который инициализирует Seadragon Ajax, немного поправив, добавив проверку, что элемент container присутствует на странице:

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");
} } }

Конечно же хорошо будет, если в случае Javascript вы напишите “You may install Silverlight to see more interactive gallery.” со ссылкой на инсталлер Silverlight.

@outcoldman

Используем Deep Zoom Composer

Скачать пример: DZCSample.zip

See Also