Panosalado

J’ai écrit ce modèle qui vous permettra d’afficher des images panoramiques sphériques (360° x 180°) ou cylindriques (360°).

Le panorama sphérique est constitué de 6 images rectilinéaires représentant les 6 faces d’un cube et d’une image de prévisualisation.

Le panorama cylindrique est constitué d’une seule image couvrant les 360° d’angle de champ horizontal et d’angle de champ vertical inférieur à 180°. La projection peut être cylindrique ou équirectangulaire.

Pour afficher le panorama, j’utilise l’outil open source Panosalado. Ce dernier utilise la technologie Flash.

Installation

Téléchargez le plugins sur la zone.

Décompressez l’archive dans le répertoire /plugins puis suivez les indications de cet article.

Version

0.3.2

Etat

dev

Copie d’écran

-  bouton « AR » : autorotation, permet de faire défiler horizontalement l’image sans l’usage de la souris ;
-  bouton « FS » : full screen, le panorama occupe tout l’écran ;
-  flêche de direction pour aller dans une direction particulière ;
-  autre possibilité de navigation : cliquez dans l’image, maintenez le bouton de la souris enfoncé et déplacez le curseur pour faire défiler le panorama dans la direction voulue ;
-  « + » : zoom avant ;
-  « + » : zoom arrière ;

Utilisation du modèle pour un panorama sphérique

Téléchargez les 7 images (6 faces + prévisualisation) en pièces jointes de l’article.

Paramètres :

-  nom : nom unique du panorama. Utilisé pour nommer de façon unique le fichier Panosalado_<nom>.xml qui est donné en entrée à panosalado. Ces fichiers sont stockés dans le répertoire /local ;
-  largeur : la largeur en pixel, valeur par défaut en cas d’absence : 400 ;
-  hauteur : la hauteur en pixel, valeur par défaut en cas d’absence : 300 ;
-  avant : numéro du document contenant l’image avant ;
-  droite : numéro du document contenant l’image droite ;
-  arriere : numéro du document contenant l’image arriere ;
-  gauche : numéro du document contenant l’image gauche ;
-  haut : numéro du document contenant l’image haute ;
-  bas : numéro du document contenant l’image basse ;
-  prevue : numéro du document contenant l’image de prévisualisation ;
-  pleinecran (facultatif) : si présent autorise l’action du bouton « FS » (Full Screen) pour afficher le panorama en mode plein écran ;
-  grille (facultatif) : si présent affiche quelques graduations pour aider au positionnement des hotspots ;

Exemple :

Code à insérer dans un article :

<panosalado|center|largeur=550|hauteur=300|nom=bissy|
avant=48|droite=49|arriere=50|gauche=51|haut=52|bas=53|prevue=54|pleinecran>

Utilisation du modèle pour un panorama cylindrique

Téléchargez l’image du panorama en projection cylindrique.

Paramètres :

-  nom : nom unique du panorama. Utilisé pour nommer de façon unique le fichier Panosalado_<nom>.xml qui est donné en entrée à panosalado. Ces fichiers sont stockés dans le répertoire /local ;
-  largeur : la largeur en pixel, valeur par défaut en cas d’absence : 400 ;
-  hauteur : la hauteur en pixel, valeur par défaut en cas d’absence : 300 ;
-  image : image du panorama en projection cylindrique ;
-  pleinecran (facultatif) : si présent autorise l’action du bouton « FS » (Full Screen) pour afficher le panorama en mode plein écran. Option pas souhaitable du fait de l’absence de « plafond » et de « plancher » ;
-  grille (facultatif) : si présent affiche quelques graduations pour aider au positionnement des hotspots ;

Exemple :

Code à insérer dans un article :

<panosalado|center|largeur=550|hauteur=300|nom=superbagnere|image=103>

A faire

-  afficher des hotspots. Nécessite probablement le passage de ce modèle en vrai plugin ;
-  utilisation de la version 2 de Panasalodo. Elle manque un peu de maturité pour le moment. On pourra donner une unique image en projection équirectangulaire pour les panos sphériques ce qui sera plus simple à manipuler que les 6 faces ;
-  ...

Limitations

-  Une fois que le fichier Panosalado_<nom>.xml est généré, il n’est plus réécrit. Je l’ai fait comme cela pour ne pas avoir à gérer les accès concurrents à ce fichier sur un site en production. Cependant, pour faciliter la mise en ligne, j’ai ajouté le paramètre « test » (|test) qui réécrit systématiquement ce fichier. Une fois la mise au point terminée, enlevez le paramètre test ;
-  Ne fonctionne dans l’interface d’administration une fois que l’article est publié ;
-  Affichage d’un seul panorama par article.

Note

Je ne maintiens plus ce plugin, lui préférant maintenant le player SaladoPlayer : exemple.

D’autre part, l’usage d’un modèle spécifique n’est peut être pas utile. Maintenant, je paramètre mon pano avec le .xml et le .html et j’inclus le .html dans l’article grâce à une balise iframe (cf cet article). Ce plugins permet toutefois de ne pas avoir à créer ni .xml, ni .xml mais il ne permet pas d’implémenter un interface utilisateur développée.