image-pannellum ~ vue panoramique

Un panorama 3D avec hotspots

➠ image_pannellum : Affiche un panorama 3D à partir d'une image equirectangular

Cliquer pour lire la documentation

syntaxe {up image_pannellum=chemin_image_equirectangular}
author LOMART version UP-1.6 license GNU/GPLv3 credit script pannellum de Matthew Petroff. tags image
  • image_pannellum: chemin de l'image
  • height (h,hauteur) = 400px: hauteur en px ou vh
  • width (l,largeur,w) = 100%: largeur en px ou %
  • options: liste des options supplémentaires . ex: showZoomCtrl:true,compass:true - Attention au min/maj. voir cette page
  • language: liste motclé (bylineLabel,loadButtonLabel,loadingLabel) + traduction. Exemple:bylineLabel:lang[en=by %s;fr:par %s], loadingLabel:Loading...
  • fullscreen = 0: 1 pour autoriser la vue plein écran
  • class: classe(s) ajoutées au bloc principal
  • style: style inline ajouté au bloc principal
  • css-head (base-css): règles CSS définies par le webmaster (ajout dans le head)
  • panorama: chemin image (il est rempli automatiquement)
  • preview: chemin image preview
  • type = equirectangular: type de l'image
  • title (titre): titre. pseudo BBCode et traduction acceptes
  • author: auteur. pseudo BBCode et traduction acceptes
  • authorURL: lien vers site auteur
  • autoLoad = 0: chargement auto de l'image
  • autoRotate = 0: rotation nombre de degres par seconde
  • showControls = 1: 0 pour masquer tous les boutons
  • showZoomCtrl = 1: 0 pour masquer les boutons +/- du zoom
  • showFullscreenCtrl = 1: 0 pour masquer le bouton plein ecran
  • hotSpotDebug = 0: 1 pour afficher les coordonnées hotspot dans la console

    Basé sur l'excellent script de pannellum.org, cette action ne reprend actuellement que le type de panorama 'equirectangular' et le type 'info' pour les hotspots.

    Pour afficher l'image à droite, il suffit de ce code :

    {up image-pannellum=/images/actions-demo/img360/notre-dame-paris.jpg 
    | autoLoad=1
    | autoRotate=10
    | showControls=0
    | author=Alexandre Duret-Lutz
    | authorURL=https://www.flickr.com/photos/gadl/403173357
    }

    On indique comme paramètre principal le chemin vers une image equirectangular. Cela pourrait être suffisant, mais pour la démo, j'ajoute un chargement automatique de l'image autoLoad avec rotation de 5 degrés par seconde autoRotate. Le nom de l'auteur et un lien vers la license.

    hugin.sourceforge.net/
    Ce type d'image peut être réalisé avec
    le logiciel OpenSource HUGIN.

    Un peu plus compliqué ...

    {up image-pannellum=https://upload.wikimedia.org/wikipedia/commons/d/d1/Pont_de_Bir-Hakeim_and_the_Eiffel_Tower%2C_April_2007.jpg 
    | preview=/images/actions-demo/img360//pont-bir-hakeim.jpg
    | height=600px
    | class=bd-rougeFonce bd3
    | title=Pont de [b style="color:yellow"]Bir-Hakeim[/b] Paris
    | author=[b]Alexandre Duret-Lutz[/b] - CC BY-SA 2.0 (https://creativecommons.org/licenses/by-sa/2.0)
    | authorURL=https://commons.wikimedia.org/wiki/File:Pont_de_Bir-Hakeim_and_the_Eiffel_Tower,_April_2007.jpg
    |css-head=
         #id .pnlm-panorama-info[backgroud-color:#8B0000;bottom:0]
         #id .pnlm-author-box[font-size:70%] 
    	 .upinfo:before[content:"\261A";font-size:200%;color:red]
    | hotSpotDebug=0
    | options=
         keyboardZoom:false,
         previewTitle:titre durant le preview
    | language=
         loadButtonLabel:Cliquer ici[br]pour charger[br]le panorama,
         loadingLabel:Chargement ..., 
         bylineLabel:lang[en=by %s;fr=par %s]
    }
    {hotspot=Tour Eiffel[br][small]sous-titre[/small] | Pitch=7.338314321044893 | yaw= -95.14604153772734 | type=info | URL=https://www.toureiffel.paris/fr}
    {hotspot=Beaugrenelle | Pitch=0.5519692624079513 | yaw= 30.543521082977815 | type=info | cssClass=upinfo}
    {/up image-pannellum}
    

    Note: pour faciliter la lecture, le shortcode est rédigé avec des sauts de lignes pour séparer les paramètres et les listes de valeurs. Cela est optionnel.

    ligne 1
    L'argument principal de l'action est le chemin vers le fichier 3D
    ligne 2
    preview permet de spécifier l'image qui sera affichée durant le chargement de la version haute résolution. Une astuce, faites une copie d'écran de l'image de départ. De cette façon, la vue haute résolution remplacera le preview sans changement visible
    ligne 3
    height la hauteur doit être une valeur en px ou en vh. Elle est de 400px par défaut. Je ne précise pas la largeur width qui est à 100% par défaut.
    ligne 4
    class et style agissent sur le bloc contenant l'image. Ici, un filet rouge foncé.
    ligne 5-7
    title, author et authorURL sont utilisés pour le crédit en bas à gauche de l'image. Il est possible de saisir des balises HTML en remplaçant les <> par des []. Bien entendu, cela interdit l'utilisation des crochets dans le texte. Vous pouvez adapter le style en jouant sur Les classes CSS impliquées : pnlm-panorama-info, pnlm-title-box et pnlm-author-box (voir ligne 9-10).
    ligne 8-11
    css-head permet d'écrire des règles CSS qui seront chargées dans le head de la page. si présent, #id sera remplacé par l'ID réelle de l'action. Sur la ligne 9, nous changeons la couleur de fond et la position du cartouche pour le titre et l'auteur. Ligne 10, nous réduisons la taille du texte pour l'auteur. Ligne 11, une règle qui sera utilisée par un hotspot (voir ligne 22).
    ligne 12
    hotSpotDebug est un outil pour définir les coordonnées des hotspots. Il faut le mettre sur 1 puis afficher la page sur le site et afficher l'inspecteur de code sur l'onglet console. A chaque clic, les coordonnées du point sont affichées. Il suffit de les copier pour remplir les hotspots ci-après.
    ligne 13-15
    si vous voulez utiliser des paramètres non prévus par l'action mais disponibles sur cette page, il suffit de les indiquer comme argument de options. L'option Pannellum et son argument sont séparés par 2 points et chaque groupe par une virgule. Attention, l'action ne connaissant pas les options utilisées, utiliser true et false pour les arguments booléen (O et 1 sont traité comme des nombres).
    ligne 16-19
    language permet de traduire les textes utilisés par le script Pannellum. Il est possible d'utiliser le mécanisme de traduction de UP comme pour la ligne 19. De cette façon le texte sera dans la langue du navigateur client ou par défaut en anglais ou dans la première langue indiquée. Voir Gestion des traductions.
    ligne 21-22
    Il est possible de mettre autant de points d'intérêt que désiré à l'aide de shortcodes hotspot qui prennent pour arguments : hotspot le texte de a bulle, Pitch et yam les coordonnées du point récupéré à l'aide de hotSpotDebug, type est toujours 'info', URL est le lien vers une nouvelle page, cssClass les classes pour personnaliser le hotspot.
    ligne 23
    la présence de hotspots nous oblige à fermer le shortcode. Sinon, ce n'est pas necéssaire.

    Autres paramètres

    autoRotate
    est le nombre de degrés par seconde. 0 par défaut, l'image ne bouge pas
    showControls
    permet de masquer tous les boutons
    type
    l'action ne gère (pour l'instant) que le mode d'image 3D equirectangular
    options
    permet de gérer les options de Pannellum non prise en charge par l'action. Voir le site pannellum.org
    Il faut écrire les couples option-valeur sous la forme : option1:valeur1, option2:valeur2, .... Si une option attend true ou false, il faut utiliser ces termes.

    Personnaliser les hotspots

    Par défaut, les classes de base attribuées au hotspots sont pnlm-hotspot-base pnlm-tooltip, plus les classes pnlm-hotspot pnlm-sprite pnlm-info pnlm-pointer si on n'indique pas d'autres classes avec 'cssClass'.

    Pour mettre une main rouge sur 'Beaugrenelle, j'ai défini une classe 'upinfo' à l'aide de l'option css-head :

    css-head=.upinfo:before[content:"\261A";font-size:200%;color:red]

    content est le code du caractère Unicode de la main qui est grossi de 200% et affiché en rouge