Affichage local des images panoramiques

07 juin 2011 - Mots-clés : Liens Linux Photographie

Cet article détaille les possibilités de visualisation des images panoramiques sans avoir besoin de les transférer sur un site Internet. C'est en général le cas sur un lieu de vacances !

Installation des packages

$ yaourt panini
$ yaourt panoglview

Visualisation de l'image équirectangulaire

Une fois les images assemblée avec Hugin, on a obtenu une image équirectangulaire. Elle a pour caractéristique : largeur = 2 * hauteur.

Ce type d'image peut être visualisé directement par Panini ou panoglview :

$ Panini &
$ panoglview &

Cette visualisation constitue une première vérification du panorama avant d'effectuer la décomposition en mosaïque de tuiles (cf l'article Décomposition d’une image panoramique en mosaïque de "tuiles").

Visualisation d'une mosaïque de tuiles

Ce découpage a été conçu pour diminuer les transferts inutiles d'images par le navigateur à partir d'Internet. Seules les parties visibles au facteur de zoom désiré sont chargées par le navigateur. En conséquence, il n'existe pas encore de lecteur indépendant du navigateur. On doit donc recourir au stratagème du serveur http local (apache ou lighttpd). Puisque la contrainte est de ne pas transférer les images sur Internet, c'est un serveur http qu'il faut installer localement !

L'installation et le paramètrage d'un serveur Internet pour une utilisation locale n'entrent pas dans le champ de cet article. Je vous donnerai juste une petite astuce (cf la fin de l'article). J'utilise personnellement le serveur lighttpd (Slackbuild disponible pour Slackware pour faire le package soi-même). Je vous explique juste comment installer vos fichiers dans le répertoire /home/user/public_html. C'est usuellement dans ce répertoire que l'on place les pages html pour la consultation à partir de l'adresse http://localhost/~user où user est votre nom d'utilisateur.

Créez un répertoire panoramas (par exemple) dans le répertoire public_html. Copiez y le fichier panorama.xml et le répertoire panorama obtenus au moment de la génération de la mosaïque de tuiles.

Récupérez l'application Flash SaladoPlayer, décompressez là et organisez les fichiers dans le répertoire panoramas comme ceci :

.
+-- embed
|   +-- expressInstall.swf
|   +-- get_flash_player.gif
|   +-- SaladoPlayer-1.1.swf
|   +-- style.css
|   +-- swffit.js
|   +-- swfobject.js
+-- modules
|   +-- ButtonBar-1.1.swf
|   +-- DropDown-1.0.swf
|   +-- ExampleModule-1.0.swf
|   +-- ImageButton-1.1.swf
|   +-- ImageMap-1.1.swf
|   +-- images
|   |   +-- buttonbar
|   |   |   +-- bar
|   |   |   |   +-- bar_30_white.png
|   |   |   |   +-- bar_350x35_green.png
|   |   |   |   +-- bar_40_green.png
|   |   |   |   +-- blob_blue.png
|   |   |   +-- buttons
|   |   |       +-- buttons_25x25_green.png
|   |   |       +-- buttons_30x30_blue.png
|   |   |       +-- buttons_30x30_green.png
|   |   |       +-- hans_hermans_30x30.png
|   |   |       +-- hans_hermans_40x40.png
|   |   +-- help.png
|   |   +-- imagemap
|   |   |   +-- map_1.jpg
|   |   +-- imagemap_icon.png
|   |   +-- infobubble
|   |   |   +-- blue.jpg
|   |   |   +-- green.jpg
|   |   |   +-- kortrijk.jpg
|   |   |   +-- park.jpg
|   |   |   +-- red.jpg
|   |   |   +-- yellow.jpg
|   |   +-- mousecursor
|   |   |   +-- cursors_21x21.png
|   |   |   +-- cursors_31x31.png
|   |   +-- off.png
|   |   +-- on.png
|   |   +-- panozona_logo.png
|   +-- InfoBubble-1.1.swf
|   +-- JSGateway-1.0.swf
|   +-- MouseCursor-1.0.swf
|   +-- ViewFinder-1.1.swf
+-- panorama
+-- panorama.html
+-- panorama.xml

Les version des fichiers peuvent être différentes suivant la version de SaladoPlayer utilisée. Adaptez à votre cas !

Le fichier panorama.html (à adapter) :

<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
        <head>
                <title>Exemple de panorama</title>
                <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
                <META HTTP-EQUIV="PRAGMA" CONTENT="NO-CACHE">
                <link href="embed/style.css" rel="stylesheet" type="text/css">
                <script type="text/javascript" src="embed/swfobject.js"></script>
                <script type="text/javascript">
                        var flashvars = {};
                        flashvars.xml = "panorama.xml"
                        var params = {};
                        params.play = "true";
                        params.loop = "false";
                        params.menu = "false";
                        params.quality = "high";
                        params.scale = "showall";
                        params.wmode = "window";
                        params.bgcolor = "#FFFFFF";
                        params.devicefont = "false";
                        params.allowfullscreen = "true";
                        params.allowscriptaccess = "sameDomain";
                        var attributes = {};
                        swfobject.embedSWF("embed/SaladoPlayer-1.1.swf", "SaladoPlayer", "100%", "100%", "10.0.0", "embed/expressInstall.swf", flashvars, params, attributes);
                </script>
        </head>
        <body bgcolor="#000000">
                <div id="SaladoPlayer">
                        <a href="http://www.adobe.com/go/getflashplayer">
                                <img src="embed/get_flash_player.gif" alt="Get Adobe Flash player" />
                        </a>
                </div>
        </body>
</html>

Le fichier panorama.xml (à adapter) :

<iframe src="http://pastebin.com/embed_iframe.php?i=CVsivvL9" style="border:none;width:100%"></iframe>
<?xml version="1.0" encoding="utf-8"?>
<SaladoPlayer>
    <global debug="true">
      <control autorotation="enabled:false"/>
      <control mouseWheelTrap="true"/>
      <trace open="false"/>
    </global>
   <panoramas>
           <panorama id="panorama" path="panorama/face_f.xml"/>
   </panoramas>
   <modules>
           <ButtonBar path="modules/ButtonBar-1.1.swf">
         <bar color="#FF0000" visible="false" />
         <buttons path="modules/images/buttonbar/buttons/buttons_30x30_green.png">
             <button name="up"/>
            <button name="down"/>
            <button name="left"/>
            <button name="right"/>
            <button name="in"/>
             <button name="out"/>
            <button name="drag"/>
            <button name="fullscreen"/>
         </buttons>
      </ButtonBar>
      <MouseCursor path="modules/MouseCursor-1.0.swf">
              <settings path="modules/images/mousecursor/cursors_31x31.png"/>
      </MouseCursor>
   </modules>
</SaladoPlayer>

Astuce de création du répertoire public_html

Le répertoire public_html n'est pas créé en même temps que le compte de l'utilisateur. Il vous faudra le créer vous même. L'astuce consiste à mettre public_html dans le groupe apache (ou le groupe donné dans le fichier de configuration du serveur) et de mettre le bit SGID à 1 ce qui aura pour conséquence de faire appartenir tous les fichiers et répertoires créés dans ce répertoire au groupe apache. Le serveur s'exécutant dans le groupe apache, cela diminuera le risque de problème d'accès aux fichiers.

$ cd /home/user
$ mkdir public_hml
$ chown user.apache
$ chmod g+s public_html

user est à remplacer par votre nom d'utilisateur !


Comments