Microsoft vient de mettre à disposition une librairie AJAX permettant de retrouver les fonctionnalités de DeepZoom au sein d'une page, sans pour autant avoir à utiliser Silverlight 2.0.

 seadragon_header

Intérêts

Plus de Silverlight
On peut retrouver plusieurs avantages à cette solution, tout d'abord le fait de ne pas à avoir à embarquer une application Silverlight peut déjà ravir certains.

Expérience utilisateur
Ensuite cette librairie peut vous aider à intégrer une expérience sympathique pour naviguer sur des images de haute résolution ce qui n'est clairement pas un mal.

Support multi-navigateurs
Enfin, un réel avantage que j'ai pu directement vérifié, c'est le support complet des navigateurs que j'utilise (je n'ai pas testé la gamme Safari ni Chrome, mais le script les gère), mais déjà avoir une application simili-DeepZoom qui fonctionne correctement dans Opera en plus des autres navigateurs, ça surprend même si c'est pas essentiel, au moins ça fonctionne.
 

Utilisation simple

Plusieurs tutoriaux sont présentés sur le site officiel à travers ce lien que je vous invite à consulter si vous êtes intéressés.

Observons comment mettre en oeuvre le viewer avec pour commencer une base issue de nos propres images dans une page statique (html).
 

Génération des tiles et de la scène

Tout d'abord, générons une pyramide de tiles à partir d'une image de notre choix, pour cela, on peut utiliser l'outil DeepZoom Composer qui va générer la scèen pour nous.

Une fois le tout importé et la scène générée, on souhaite obtenir une fichier dzi, pour cela l'outil SparseImageTool.exe est prévu pour généré cela, il suffit de se rendre dans le dossier d'installation de DeepZoom Composer en ligne de commande et de lancer l'outil avec les paramètres nécessaires :

    C:\Program Files\Microsoft Corporation\Deep Zoom
    Composer>SparseImageTool.exe CreateDeepZoomImage
    CHEMIN_VERS_VOTRE_COLLECTION/SparseImageSceneGraph.xml

 
Un prompt apparait pour sauvegarder le fichier dzi, le fichier et les dossiers images sont générés.

On peut alors s'occuper du code à utiliser dans la page statique.
 

Développement

Le développement est relativement simple, il suffit de référencer le script de l'API (distant ou local à vous de voir)

<!-- Seadragon script reference -->
    <script type="text/javascript" 
            src="http://seadragon.com/ajax/0.8/seadragon-min.js"></script>

Ensuite on ajoute une simple DIV qui accueuillera le contrôle.

<body onload="onLoad();">
    <div id="sea_map" style="width: 500px; height: 300px; 
        background-color: black; border: 1px solid black;
        color: white;">
    </div>
</body>

Une méthode de chargement associée à l'événement onload du body de la page permet ensuite d'initialiser le contrôle et de charger la collection :

<script type="text/javascript">
    var seaElement = null;

    function onLoad() {
        seaElement = new Seadragon.Viewer("sea_map");
        seaElement.openDzi("images/wyg_pict/wyg_dz.dzi");
    }    
</script>

Et le tout fonctionne comme vous pouvez l'observer sur cette page (pour observer le code : Voir la source) ou directement ici :

La WygTeam au moment dy Wygday dans le contrôle Seadragon.

ASTUCE : la plupart des hébergeurs n'ont pas le MIME type dzi configuré (voir bloqué), rien ne vous empêche de le renommer en .xml qui lui est configuré.

 

Allons plus loin

virtual earth_header

Présentation

Pour aller plus loin, je vous propose d'utiliser les tiles de Virtual Earth au sein de Seadragon AJAX library.

Alors j'ai réalisé un PoC qui ne présente pas de réelle architecture digne de ce nom, il n'est d'ailleurs pas recommandé d'utiliser les tiles par accès direct puisque la version 6.2 de l'API Virtual Earth propose un Web Service dédié.

Enfin, pour le moment, c'était davantage dans une logique de test plus que la création d'un réel projet.
Il va de soit que la communauté VE risque de s'y intéresser et qu'un DeepEarth-like risque de voir le jour, suffit de motiver quelques bras doigts pour coder tout ça ensemble.

Développement

Enfin trève de blabla, quels sont les éléments que j'ai modifié du premier exemple pour arriver au résultat présenté dans mon PoC.

Tout d'abord, j'ai modifié manuellement les propriétés contenues dans le fichier dzi qui sera chargé dans le viewer.

Ensuite, j'ai modifié le fichier de script de Seadragon afin de changer le comportement lors du chargement des tiles, les lignes intéressantes sont ici :

this.getTileUrl = function(level, x, y) {
    var quadKey = "";
    for (var i = level; i > 0; i--) {
        var digit = 0;
        var mask = 1 << (i - 1);
        if ((x & mask) != 0) digit++;
        if ((y & mask) != 0) digit += 2;



quadKey += digit.toString(); } if (level > 8) quadKey = quadKey.substr(quadKey.length - level + 8); return ["http://r0.ortho.tiles.virtualearth.net/tiles/r", quadKey, '.', fileFormat, "?g=209&mkt=fr-fr&shading=hill" ].join(''); };

Alors quelques explications :

  • La méthode getTileUrl() est appelé avec en paramètres le niveau de zoom et la valeur x et y correspondant à l'emplacement sur la grille des tiles. On utilise alors une technique pour récupérer la quadKey afin de faire correspondre les tiles de VE. Plus d'infos ici.
  • Je supprime les zéro inutiles (et même gênants) devant la quadKey générée.
  • L'url des tiles ici est présentés uniquement à titre expérimental, il ne faut pas utiliser cette astuce pour accèder aux tiles, un web service dédié existe depuis la version 6.2 !

Une fois les propriétés de chargement modifées dans le code JavaScript de chargement, on peut observer le résultat en fonctionnement.

Pour vous, ça se passe soit par cette page, soit directement ici :

  
Pour récupérer les sources du projet ça se passe par ici.

 

Conclusions

Cette sympathique API risque de s'enrichir et de s'améliorer, nuls doutes que de nombreux projets vont être créés autour de ce composant qui plait toujours lorsqu'on le présente en fonctionnement.

Gageons que d'ici peu on aura la possibilité de retrouver des projets divers qui offriront cette fonctionnalité au sein des contrôles habituels.

Je vois dès ce soir avec d'autres pour créer 2 projets autour de cette API sur CodePlex.
Le premier projet aura pour but d'utiliser cela comme contrôle d'affichage des cartes comme Virtual Earth ou bien d'autres.
Le second sera orienté développeur puisque ce sera le Seadragon AJAX Helper offrant l'intellisense pour ces éléments.