[Tutorial] Pour afficher ses pano sur internet : Zoomify

[gibie]

Introduction

Pour afficher ses panoramiques en haute définition sur internet, il existe un logiciel incontournable : il s'agit de Zoomify.

Un petit exemple pour commencer : un panoramique de la ville de Davos du photographe suisse Peter Nyfeler :

Pour zoomer sur plusieurs niveaux, il suffit de cliquer sur un point de l'image. Les icones aussi en bas de l'écran peuvent servir pour zoomer/dézoomer ou se déplacer dans l'image.

Le logiciel est facile à utiliser : vous pouvez le télécharger ici (version gratuite 'Zoomifyer EZ')
http://www.zoomify.com/

Un autre exemple d'utilisation : panoramique de la ville de Harlem réalisé à partir de 2045 photos assemblées à l'aide du logiciel Autopano Pro pour faire une image de 13,6 giga pixels (279689 pixels × 46901 pixels). Temps de calcul pour le positionnement des photos : 1 journée plus 46 heures pour produire l'image finale sur une puissante machine Dual Xeon quadri processeur avec 8Gb de RAM tournant sur un Linux 64 bit.


Quelques explications techniques

Tout d'abord, une petite vidéo qui explique le principe de Zoomify.

Bref rappel du principe de fonctionnement de Zoomify

L'inconvénient majeur des images haute définition est leur taille (en Mo ou To) ce qui rend difficile leur visualisation sur internet même avec ADSL. La technologie 'Zoomify' permet de visualiser ces images de très grande taille avec d'excellents temps de réponse.

Le principe est de découper l'image en petits carrés de 256 x 256 pixels pour ne pas avoir à télécharger l'intégralité de l'image (qui peut peser de quelques centaines de mégaoctets jusqu'à quelques dizaines de téraoctets) mais uniquement les carrés que veut visualiser à un moment donné l'utilisateur.

Photo d'origine


Découpage de l'image par Zoomify en utilisant le format de fichier pyramidal inventé par Zoomify (Zoomify Pyramidal File Format)



Petit tutorial

Ci-joint un petit tutorial sur Zoomify EZ sous forme d'un fichier pdf.

Note :
- le logiciel Zoomifier EZ accepte en entrée des fichiers .jpeg, .tiff, .psd, .png, .bmp.
- utiliser l'éditeur de texte le plus simple possible pour modifier le script .html (à éviter Word !!). Par exemple sur Windows : NotePad ou sur Mac OS X : TextEdit.

Vos remarques ou commentaires pour améliorer ce document sont les bienvenus.


Exemples d'utilisation de Zoomify

Pour commencer 3 exemples de panoramiques en haute définition réalisés par Scott Howard avec son boitier 10D et un objectif 100-400L.
- Sydney de nuit : panoramique de 720 Méga pixels fait à partir de 169 photos (taille du fichier 1,3 Go),
- Site de Machu Picchu : panoramique de 1500 Méga pixels fait à partir de 404 photos (taille du fichier 13,5 Go),
- Chicago de nuit : panoramique de 1000 Méga pixels fait à partir de 194 photos (taille du fichier 7 Go).

Un autre exemple est le panorama de Challes les Eaux (Savoie) réalisé par Alexandre Jenny (le concepteur d'Autopano Pro) : fait à partir de 314 photos prises au 300 mm et assemblées avec Autopano pro 1.3. Pour plus de détails : voir ce lien

A noter aussi que Zoomify peut aussi servir à présenter une photo en haute définition en format classique ou carré, par exemple sur cet exemple de l'Arc de Triomphe à Paris (Image de de 76,3 millions de pixels au format de 8810 x 8660 Pixel).

Ce qui est surtout intéressant dans cette technique est la vitesse d'affichage d'une aussi grande image. A noter que une technique très voisine est utilisée par Google dans Google Maps ou Google Earth pour l'affichage des cartes ou des photos satellite.

Zoomify peut servir aussi à afficher une mosaïque de photos. Par exemple cette image de 1,5 gigapixels réalisée à partir de 210600 petites photos pour faire une mosaïque reproduisant le célèbre tableau de Van Goth "La nuit étoilée" : voir lien. Les photos de base font 100 x 75 pixels. La mosaique a été faite avec 210600 de ces photos de base. La taille de la mosaique est de 45000 x 35100 pixels soit 1,5 gigapixels. Cette mosaique a été réalisée par AndreaPlanet à l'aide d'un logiciel gratuit 'AndeaMosaic'

Dernier exemple de l'utilisation de Zoomify : il s'agit d'un panorama réalisé par TNO de la ville de Delft et ses environs pris en automne 2004 avec en premier plan le dessus de la faculté d'électrotechnique de l'université de Delft, à une hauteur d'environ 100 m. Pour réaliser ce panorama, 600 photos ont été prises avec un objectif de 600 mm de focale. Après assemblage, l'image fait une taille de 78987 x 31565 pixels soit environ 2,5 Gigapixels.
Pour information, quelques liens supplémentaires :
- sur la réalisation de cette image et 2,5 giga-pixel à Delft
- sur TNO


Limitations de la version Zoomify de Photoshop CS3 et comment la contourner

Lorsqu'on utilise la fonction d'export en format Zoomify de Photoshop CS3, la fenêtre ci-dessous s'affiche avec quelques paramètres à entrer.



Une remarque sur la taille d'affichage en pixels (largeur/hauteur) : il s'agit de la fenêtre d'affichage de l'image Zoomify avec une limitation bien gênante : taille maximum 1000 pixels en largeur ou hauteur



Donc pas du tout intéressant pour voir en plein fenêtre un panoramique avec Zoomify !!

Par contre, à signaler que l'on peut régler la compression JPEG (ce qui n'est pas possible dans le logiciel Zoomifyer EZ).

Après quelques tests, je me suis rendu compte que cette limitation de la taille d'affichage à 1000 pixels est due au fichier 'zoomifyViewer.swf' généré avec l'application Photoshop CS3.

En résumé :
- PhotoShop CS3 permet de générer de façon correcte les petits fichiers de taille 256 x 256 pixels,
- Il ne faut pas utiliser le fichier .html généré par Photoshop mais utiliser le fichier template.html qui se trouve dans le tutorial du présent post (voir plus haut),
- Il ne faut pas oublier de supprimer dans le répertoire des petits fichiers le fichier 'zoomifyViewer.swf' et utiliser à la place le fichier 'zoomifyViewer.swf' qui se trouve dans le tutorial du présent post (voir plus haut).

On a alors un affichage en plein fenêtre du panoramique avec possibilité de redimensionner la taille de la fenêtre pour agrandir ou rétrécir l'image.

[eric_s]

Un petit complément sur Zoomify pendant que je suis en train de travailler dessus. Sous Windows (XP dans mon cas), il faut l'exécuter avec des droits administrateur. Dans le cas contraire, il n'y a pas de message d'erreur et le programme semble fonctionner normalement mais à la fin, il n'y a pas de sous-dossier contenant le résultat.

[gillo]

Un petit complément sur Zoomify pendant que je suis en train de travailler dessus. Sous Windows (XP dans mon cas), il faut l'exécuter avec des droits administrateur. Dans le cas contraire, il n'y a pas de message d'erreur et le programme semble fonctionner normalement mais à la fin, il n'y a pas de sous-dossier contenant le résultat.

Salut Eric,
Tu pourrais développer, c'est quoi les droits administrateur
En fait cela fonctionne avec un de mes ordi, mais pas avec l'autre.
Comment puis je résoudre cela

[eric_s]

Les droits administrateurs, c'est quand on a le droit de faire n'importe quoi n'importe tout dans l'ordinateur. C'est la configuration par défaut de Windows. À l'inverse, un utilisateur à droits restreints, c'est quand il ne peut mettre le bazar que dans ses propres données. Par exemple, il ne peut pas installer de logiciel. Ce genre de restriction gêne aussi certains logiciels mal faits comme Zoomify qui doit essayer d'écrire des choses là où l'utilisateur n'a pas de le droit.

[gillo]

Les droits administrateurs, c'est quand on a le droit de faire n'importe quoi n'importe tout dans l'ordinateur. C'est la configuration par défaut de Windows. À l'inverse, un utilisateur à droits restreints, c'est quand il ne peut mettre le bazar que dans ses propres données. Par exemple, il ne peut pas installer de logiciel. Ce genre de restriction gêne aussi certains logiciels mal faits comme Zoomify qui doit essayer d'écrire des choses là où l'utilisateur n'a pas de le droit.

Merci de ta réponse,
Dans quelle rubrique windows, on peut vérifier et/ou modifier ces droits administrateurs ?
Deuxième intérogation, J'ai réussi à faire mon premier Zoomify, mais je ne peux le lire qu'avec mozilla et impossible via IE, existe-t-il une solution à cela ?

[eric_s]

Gestion des utilisateurs je dirais.

Pour IE, tu as pris quoi comme source de fichier html? Est-ce que les panos des autres s'affichent bien sous IE? Celui là par exemple.

[gillo]

Gestion des utilisateurs je dirais.

Pour IE, tu as pris quoi comme source de fichier html? Est-ce que les panos des autres s'affichent bien sous IE? Celui là par exemple.

Ton exemple s'affiche sans problème, je pense qu'il y a donc qu'il s'agit d'un bug lors de la création.
Pour le test, j'ai créé un Pano assez léger que j'ai mis en ligne à l'adresse :
http://www.imagesweb.org/bnf/BNF.html
Je l'ouvre bien avec Mozilla, mais pas avec IE.

[eric_s]

Dans le code source de ta page html, je vois que tu as un chemin absolu vers un dossier de ton disque dur :

Code : Tout sélectionner

VALUE="file:///C|/Documents and Settings/gilles/Mes documents/Telechargement programmes/zoomy/template.htm/zoomifyViewer.swf"

C'est sans doute ça qui ne va pas. Regarde le code source de mon exemple. Il est plus simple et respecte normalement les normes html, ce qui fait qu'il devrait passer sans problème sur n'importe quel navigateur.

[gillo]

Merci éric, çà marche !!
Pour éviter à ceux qui ont des difficultés comme moi :
- effectuer toute la procedure dans le même répertoire,
- pour simplifier, donnez le même nom au fichier et au répertoire.
- veiller à ce que votre logiciel FTP ne modifie pas les chemins lors du chargement sur le site serveur.

Exemple :
- Tous mes fichiers sont dans un répertoire nommé "essai". Ce répertoire "essai" est à la racine du serveur (exemple : http://www.le nom de votre site/essai)
- mon fichier htm se nomme également "essai"
Pour afficher ma page web, je dois donc taper l'adresse : http://www.le nom de votre site/essai/essai.htm

Le code de ma page devrait donc ressembler à çà :

<HTML>
<HEAD>
<TITLE>essai</TITLE>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"><style type="text/css">
<!--
body {
margin-left: 0px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
background-color:#333333;
}

</style></HEAD>
<BODY>

<OBJECT CLASSID="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" CODEBASE="http://download.macromedia.com/pub/shoc ... n=6,0,40,0"
WIDTH="100%" HEIGHT="100%" ID="theMovie">
<PARAM NAME="FlashVars" VALUE="zoomifyImagePath=essai/">
<PARAM NAME="MENU" VALUE="FALSE">
<PARAM NAME=bgcolor VALUE="#333333">
<PARAM NAME="SRC" VALUE="zoomifyViewer.swf">
<EMBED
FlashVars="zoomifyImagePath=essai/"
SRC="zoomifyViewer.swf"
MENU="false"
PLUGINSPAGE="http://www.macromedia.com/shockwave/dow ... kwaveFlash"
WIDTH="100%"
HEIGHT="100%"
bgcolor="#333333"
NAME="essai"
></EMBED>
</OBJECT>
</BODY>
</HTML>

Voilà et encore merci à Gibie pour ce post et à eric qui m'a débloqué la situation.

[MrSoul]

Ne le prenez pas mal, mais ce n'est pas le fin du fin votre code

Je propose le code suivant, il est compatible xhtml 1.0 strict :

Code : Tout sélectionner

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr">
	<head>
		<title>titre_fenetre</title>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<meta http-equiv="Content-Script-Type" content="text/javascript" />
		<meta http-equiv="Content-Style-Type" content="text/css" />
		<style type="text/css" media="screen">
			* {margin:0;padding:0;border:0;}
			html, body {background-color: #333333; width: 100%; height: 100%;}
			div.zoomify, div.zoomify object {width: 100%; height: 100%;}
		</style>
	</head>
	<body>
		<div class="zoomify">
			<object type="application/x-shockwave-flash" data="zoomifyViewer.swf">
				<param name="movie" value="zoomifyViewer.swf" />
				<param name="flashvars" value="zoomifyImagePath=nom_fichier/" />
				<param name="menu" value="false" />
				<param name="bgcolor" value="#333333" />
				<p>Cette page web nécessite flash player pour fonctionner, <a href="http://www.adobe.com/go/BPCKN">cliquez ici pour le télécharger.</a></p>
			</object>
		</div>
	</body>
</html>

Pour les fous des standards, il est possible de le rendre compatible xhtml 1.1 pour les navigateurs le supportant (si le navigateur ne le gère pasn bien, comme IE, ça passe automatiquement en xhtml 1.0 strict) en utilisant PHP :

Code : Tout sélectionner

<?php if(stristr($_SERVER["HTTP_ACCEPT"],"application/xhtml+xml")){header("Content-Type: application/xhtml+xml; charset=utf-8");echo "<?xml version=\"1.0\" encoding=\"utf-8\" ?>\n<!DOCTYPE html PUBLIC \"-//W3C//DTD XHTML 1.1//EN\" \"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd\">\n";} else {header("Content-Type: text/html; charset=utf-8");echo "<!DOCTYPE html PUBLIC \"-//W3C//DTD XHTML 1.0 Strict//EN\" \"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd\">\n";} ?>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr">
	<head>
		<title>MrSoul.org - ???</title>
		<?php if(stristr($_SERVER["HTTP_ACCEPT"],"application/xhtml+xml")){echo "<meta http-equiv=\"Content-Type\" content=\"application/xhtml+xml; charset=utf-8\" />\n";} else {echo "<meta http-equiv=\"Content-Type\" content=\"text/html; charset=utf-8\" />\n";} ?>
		<meta http-equiv="Content-Script-Type" content="text/javascript" />
		<meta http-equiv="Content-Style-Type" content="text/css" />
		<style type="text/css" media="screen">
			* {margin:0;padding:0;border:0;}
			html, body {background-color: #333333; width: 100%; height: 100%;}
			div.zoomify, div.zoomify object {width: 100%; height: 100%;}
		</style>
	</head>
	<body>
		<div class="zoomify">
			<object type="application/x-shockwave-flash" data="zoomifyViewer.swf">
				<param name="movie" value="zoomifyViewer.swf" />
				<param name="flashvars" value="zoomifyImagePath=index_img/" />
				<param name="menu" value="false" />
				<param name="bgcolor" value="#333333" />
				<p>Cette page web nécessite flash player pour fonctionner, <a href="http://www.adobe.com/go/BPCKN">cliquez ici pour le télécharger.</a></p>
			</object>
		</div>
	</body>
</html>

Pour ces deux pages, il est impératif de coder cette page en UTF-8.

Au passage, je remercie Gibie pour m'avoir fait découvrir comment mieux m'en sortir qu'avec l'export limité de photoshop.

[Edge@51]

Je suis en train de faire le rendu d'une image de 770 MPx ... Ça fait plus de 36h que Stitcher tourne. Il n'est pas planté car des images sont créés toutes les 20 minutes dans le fichier cache. Par contre, je viens de lire l'article sur le panorama de Challes les Eaux(ICI), et le développeur annonce seulement 6h de calcul avec Autopano pour une image de 620 MPx
Il ne précise pas sa machine, donc est-ce stitcher qui est une vrai charue, ou mon ordi (MacBookPro CoreDuo 2,16 GHz / 2Go de Ram).
Bon, je vais lancer la démon d'AutopanoPro sur un autre ordi pour voir si ça va ou non plus vite.

En tout cas, zoomify est vraiment un logiciel interressant. Ses gros points forts sont sa gratuité et sa simplicité de mise en œuvre (même pour un nul comme moi e programation )

[Edge@51]

J'ai une petite question concernant le fichier html.
Pour changer la couleur de fond, j'y suis arrivé, mais mes connaissances en html se limitent à ça. Par contre, la fenêtre du navigateur est plus grande que celle de zoomiy dans le sens vertical (il y a un espace entre la barre d'état et la barre d'outil de zoomify). De même, est-il possible de faire une fenêtre plein écran, comme avec pleinpot?

Merci par avance

PS: le lien de ma page: http://www.panochrome.fr/zoomify/facade ... _reims.htm

[MrSoul]

Normal, tu utilise le player version adobe, pour l'avoir en pleine fenêtre, il faut remplacer le fichier flash par celui fournis sur le site de zoomify et le remplacer le code html ou xhtml fournis sur cette page.

[Edge@51]

Merci pour la rapidité de ta réponse
Je viens de changer le fichier html par celui que tu donne juste au dessus. Ça donne ça:

Code : Tout sélectionner

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr"> 
   <head> 
      <title>Façade de la cathédrale de Reims</title> 
      <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
      <meta http-equiv="Content-Script-Type" content="text/javascript" /> 
      <meta http-equiv="Content-Style-Type" content="text/css" /> 
      <style type="text/css" media="screen"> 
         * {margin:0;padding:0;border:0;} 
         html, body {background-color: #000000; width: 100%; height: 100%;} 
         div.zoomify, div.zoomify object {width: 100%; height: 100%;} 
      </style> 
   </head> 
   <body> 
      <div class="zoomify"> 
         <object type="application/x-shockwave-flash" data="zoomifyViewer.swf"> 
            <param name="movie" value="zoomifyViewer.swf" /> 
            <param name="flashvars" value="zoomifyImagePath=facade_cathedrale_reims/" /> 
            <param name="menu" value="false" /> 
            <param name="bgcolor" value="#000000" /> 
            <p>Cette page web nécessite flash player pour fonctionner, <a href="http://www.adobe.com/go/BPCKN">cliquez ici pour le télécharger.</a></p> 
         </object> 
      </div> 
   </body> 
</html>

Je suis retourné sur le site de zoomify, j'ai téléchargé Zoomify EZ et j'ai remplacé le fichier "zoomifyViewer.swf" par celui qui se trouvait dedans. J'ai aussi essayé avec le fichier "zoomifyViewer.swf" que l'on trouve sur le site dans la section photoshop, mais le problème est toujours là

[Edit]Ça marche, merci beaucoup En fait, comme je n'avais pas relancer mon navigateur (Safari), les réglages n'étaient pas pris en compte. Une fois relancé, tout marche bien. Merci beaucoup

[MrSoul]

Il y a quelque chose qui ne va pas, si tu utilisais le bon player flash, ça aurait cette tête : http://samsoulpc915.free.fr/panoramique ... ps-nievre/

[Edge@51]

Mes modifications et ton message ont dû se croiser, car j'ai maintenant exactement la même interface que toi
Merci pour ton aide

[fanfan]

Bonjour,
je limite un peu l'amplitude du Zoom max avec Zoomify, par exemple à 80%, car je trouve qu'en zoom total à 100%, on perd un peu de précision pour l'affichage.
Dans la doc de Zoomify, il est dit :

Code : Tout sélectionner

Use '&' to delimit parameters.

zoomifyImagePath: image folder URL
zoomifyMinZoom: 1 to 100, -1 to fit to display area
zoomifyMaxZoom: 1 to 100, -1 to fit to display area
zoomifyNavWindow: 1 to show, 0 to hide
zoomifyToolbar: 1 to show, 0 to hide
zoomifyX: initial view X, -1 to 1, 0 centers image in display
zoomifyY: initial view X, -1 to 1, 0 centers image in display
zoomifyZoom: 1 to 100, -1 to fit to display area
zoomifySlider: 1 to show, 0 to hide


Example parameters usage:

<OBJECT CLASSID="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" CODEBASE="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,40,0" WIDTH="750" HEIGHT="450" ID="theMovie">

<PARAM NAME="FlashVars" VALUE="zoomifyImagePath=http://www.zoomify.com/content/test/&zoomifyX=0.0
&zoomifyY=0.0&zoomifyZoom=-1&zoomifyToolbar=1&zoomifyNavWindow=1">
<PARAM NAME="src" VALUE="zoomifyViewer.swf">

<EMBED FlashVars="zoomifyImagePath=http://www.zoomify.com/content/test/&zoomifyX=0.0&zoomifyY=0.0
&zoomifyZoom=-1&zoomifyToolbar=1&zoomifyNavWindow=1" SRC="zoomifyViewer.swf" PLUGINSPAGE="http://www.macromedia.com/shockwave/download/index.cgi?P1_Prod_Version=ShockwaveFlash" WIDTH="750" HEIGHT="450" NAME="theMovie"></EMBED>

</OBJECT>

Peut-être le savez vous déjà mais, pour ceux qui cherchent, il suffit de rajouter dans les lignes PARAM NAME="FlashVars" et EMBED FlashVars (après le chemin de l'image) :

Code : Tout sélectionner

 &zoomifyMinZoom=-1&zoomifyMaxZoom=80

[Knurt]

Fanfan a fait un remarquable tutoriel d'installation de zoomify ICI

[gibie]

A signaler ce post interessant sur le forum d'Autopano sur un script pour Linux permettant de zoomifyer une photo en Jpeg ou Tiff : voir lien

[chris]

Bonjour,

Connaissez-vous des alternatives à zoomify ?