logo-pivotLes données au sens large ont été à l’honneur à la conférence MIX10: après avoir touché du doigt le protocole OData, je vous propose de découvrir comment publier vos données afin qu’elles puissent être explorées de façon interactive avec Live Labs Pivot.

L’idée n’est pas ici de vous présenter l’expérience utilisateur de Pivot, mais si vous ne connaissez pas cette technologie ou souhaitez vous rafraîchir la mémoire, voici quelques ressources:

SDLogoEn bref, Pivot est une des applicatons de la technologie Seadragon, qui est également utilisée par Photosynth et surtout par Silverlight Deep Zoom. Cette technologie permet fondamentalement de naviguer de façon très fluide dans des ensembles d’images très haute résolution, et ce en optimisant au maximum les flux réseau. Pivot utilise Seadragon pour faciliter la navigation au sein d’une collection d’images décrite par des méta-données, permettant à l’utilisateur de trier, filtrer, zoomer et naviguer de façon intuitive dans cette collection.

Ce qui a été annoncé à MIX10 est que Pivot fera son apparition dans Silverlight 4 comme un contrôle standard, ce qui veut dire que tout site Web pourra intégrer une navigation de site Pivot (aujourd’hui, il est nécessaire de télécharger l’application avant de pouvoir visualiser une collection).

Comment exposer ses données au format Pivot

Exposer ses données au format Pivot n’exige pas de développement particulier: il ne s’agit que de données, que l’on doit organiser selon des formats bien spécifiques. La page dédiée aux développeurs sur le site Pivot expose les grands principes et les outils typiquement utilisés.

  • Pour des collections simples et/ou pour explorer les formats de données Pivot (du prototypage), l’équipe Pivot propose de télécharger une extension Excel qui se charge de toutes les étapes. Nous allons explorer cette extension dans ce billet.
  • Pour des collections plus complexes, un fournisseur de données va probablement se créer un outillage plus robuste pour générer les données Pivot; ces données étant dans des formats parfaitement ouverts, on peut imaginer tous types d’outils, depuis du code (.NET ou autre) jusqu’au scripts type Python, en fonction de la stratégie adoptée.
    • Une stratégie “batch”, autrement dit la génération des données à intervalles réguliers puis leur mise en ligne, s’accomoderait bien de tout type d’environnement de scripting
    • Une stratégie “temps réel”, où l’on génèrerait et/ou mettrait à jour les données Pivot directement en production, s’appuierait typiquement la plateforme utilisée en production, .NET ou autre

Alors, quels sont ces fameux standard de données utilisés par Pivot? Ils sont de deux types:

C’est le deuxième point qui nécessite le plus de travail; il existe en effet plusieurs façons de convertir les images au format Deep Zoom, en voici quelques-unes par ordre croissant de complexité (mais chaque option apportant plus contrôle et de flexibilité):

  • L’extension Excel est capable de générer directement la collection d’images Deep Zoom, pour des cas simples (pas plus de quelques centaines, ou petit millier, d’images)
  • Deep Zoom Composer est une application gratuite téléchargeable sur le site Seadragon, qui permet de créer des images et des collections aux formats Deep Zoom
  • Les Deep Zoom Tools sont des outils en ligne de commande permettant de générer en batch des images et des collections; de plus, leur code source est fourni (ils s’appuient sur une DLL DeepZoomTools.dll que vous pouvez utiliser dans vos propres programmes .NET)
  • Finalement, la page Content Creation du site Seadragon liste de nombreuses implémentations d’outils Deep Zoom dans diverses technologies (Python, par exemple) permettant de générer des collections et des images Deep Zoom dans des environnements non Windows.

imageEt surtout, le contenu Deep Zoom doit faire l’objet d’une étude spécifique concernant son déploiement (voir la page Déploiement sur le site Seadragon); en effet, une collection Deep Zoom est constituée d’un très grand nombre de petits fichiers d’images et de sous-répertoires. Par exemple, ma collection de test comprenant au départ 986 images, contient une fois convertie au format Deep Zoom, 12.796 fichiers et 10.733 dossiers! Vous comprenez rapidement le type de défis que l’on peut rencontrer sur des collections de plusieurs milliers d’images.

Notre première collection Pivot

Après cette exploration de la structure des données Pivot, voyons comment créer notre première collection à l’aide de l’extension Excel.

Une fois l’extension téléchargée, elle va ajouter un onglet dans Excel:

image

Cliquons sur “New Collection”, et une nouvelle feuille Excel s’ouvre:

image

L’onglet “Collection Properties” permet de nommer votre collection, de lui associer une image, etc. L’onglet “Collection Items” permet quant à lui de décrire l’ensemble de vos objets, ainsi que les images associées.

La colonne “Image Location” indique l’endroit où se trouve l’image source. Vous pouvez mettre un URL ou un chemin local, mais je vous conseille si possible de prendre un chemin local: les performances seront bien meilleures! Par ailleurs, vous pouvez si vous voulez supprimer la colonne “Preview” pour accélérer l’affichage.

La colonne “Name” vous permet d’indiquer le nom de l’objete (par exemple le titre de l’image).

La colonne “HREF” vous permet de pointer sur une page Web, qui pourra être ouverte depuis Pivot.

Enfin, “Description” et les colonnes suivantes vous permettent de lister l’ensemble des proppriétés qui seront exposées par Pivot pour naviguer dans les données. Vous pouvez ajouter autant de colonnes que vous le souhaitez.

Voici par exemple un aperçu de ma feuille remplie:

image

Il reste plus qu’à cliquer sur “Publish Collection” pour générer la collection Pivot, qui s’ouvrira automatiquement dans l’application. Voici un aperçu du résultat:

image

L’on voit ici que mes propriétés (Manufacturer, Country, Year, CPU) ont été exposées sous forme de filtres et de tris, me permettant de naviguer facilement dans l’information. Je peux maintenant naviguer dans l’information, par exemple en cliquant dans les colonnes, pour zoomer peu à peu dans l’ensemble des constructeurs. A chaque niveau, les images zoomeront de façon fluide.

Explorons les fichiers générés

Vous trouverez dans l’emplacement que vous avez choisi pour publier la collection, deux éléments:

  • Le fichier CXML, par exemple <Collection>.cxml

Le fichier a la format général suivant:

<?xml version="1.0" encoding="utf-8"?>
<Collection Name="">
  <FacetCategories>
    <FacetCategory Name="" Type="" Format="" />
  </FacetCategories>
  <Items ImgBase="*.dzc">
    <Item Name="" Img="">
      <Facets>
        <Facet Name="">
          <String Value=""/>
        </Facet>
      </Facets>
    </Item>
  </Items>
</Collection>

Ce format XML est globalement assez simple à générer, et le principal point à creuser est la bonne utilisation des FacetCategory, qui déterminent quelles propriétés seront utilisables pour quel type de navigation, ainsi que le type de contrôle qui sera affiché.

  • La collection d’images Deep Zoom, un répertoire <Collection>_files
    • En termes Deep Zoom, l’on trouve dans ce répertoire le fichier DZC (Deep Zoom Collection)
    • Au sein de cette collection, les images Deep Zoom proprement dites sont dans le sous-répertoire “images”
      • Chaque image Deep Zoom (DZI pour Deep Zoom Image) est à son tour constituée d’un fichier XML de description, puis d’un répertoire du type <image>_files
        • Chaque répertoire image contient à son tour un certain nombre de sous-dossiers, contenant les “carreaux” d’images au différentes résolutions, permettant le zoom fluide

Bien entendu, la complexité de la collection Deep Zoom est normalement masquée par l’outil de génération.

La prochaine étape sera d’explorer une chaîne de production de ces éléments, ne passant pas par l’extension Excel!

Et pour en savoir plus…

… la session “Building Pivot Collections” du MIX10 (en anglais) détaille le processus de création de collections Pivot.