panoVisu - le Monde à 360°

Créez vos visites virtuelles

Site Optimisé pour Firefox, Chrome & Safari
Imprimer cette page

Syntaxe du fichier XML

Même s'il est préférable d'utiliser l'éditeur pour générer vos visites, il est tout à fait possible de le faire en utilisant uniquement un éditeur de texte et en écrivant vous même vos fichiers XML de description. Cette page est là pour vous aider dans cette tâche.

Structure générale

Les éléments constitutifs de la structure dans l'encart suivant sont cliquables.



Conventions

attribut={valeur1|valeur2|valeur3} indique que l'attribut peut prendre les valeurs valeur1, valeur2 ou valeur3

attribut=[valeur1...valeur2] indique que l'attribut peut prendre toutes les valeurs comprises entre valeur1 et valeur2

Balise <scene>...</scene> : Balise principale

   <scene>
         <balise1 .../>
         <balise2 .../>
         ...
         <baliseN .../>
   </scene>

Il s'agit de la balise principale de définition de la scene. Elle ne comprend aucun attribut et elle engloble toutes les autres balises.

balise <pano /> : Définition du panoramique & du titre

   <pano 
      image="panos/piscine1"
      type="sphere"
      multiReso="oui"
      nombreNiveaux="4.0"
      zeroNord="-39.0"
      regardX="-279.0"
      regardY="-11"
      affinfo="oui"
      afftitre="oui"
      titre="Roubaix - la piscine : le Bassin Vue 1"
      titrePolice="Segoe Print"
      titreTaillePolice="22px"
      titreTaille="100%"
      titreFond="rgba(153,204,204,0.0)"
      titreCouleur="#ffff66"
      diaporamaCouleur="rgba(179,230,230,0.84)"
   />

Les éléments constitutifs de la balise sont :

image= le lien vers le panoramique que vous souhaitez afficher sans l'extention ".jpg" . S'il s'agit d'un cube il faut omettre le suffixe (_b,_u,_f,...).

type={sphere|cube} en fonction du type de panoramique

multiReso={oui|non} si vous avez plusieurs niveaux pour accélérer le chargement (ces niveaux sont automatiquement générés par l'éditeur)

nombreNiveaux= le nombre de niveaux générés

zeroNord= la position du nord de la boussole par rapport au centre du panoramique

regardX/regardY= la position du point de vue au moment du chargement du panoramique par rapport au centre de la vue

affinfo={oui|non} affiche ou non l'écran d'information lors du chargement du premier pano de la visite

afftitre={oui|non} affiche ou non la barre de titre

titre= titre du panoramique

titrePolice= nom de la police de caractère du titre

titreTaillePolice= taille de la police du titre avec son unité (px, pt, ems,...)

titreTaille= taille de la barre de titre avec son unité (px,%)

titreFond= couleur de fond de la barre de titre (#000000 ou rgb(rouge,vert,bleu) ou rgba(rouge,vert,bleu,opacité) ou couleur nommée (red,blue,...))

titreCouleur= couleur du texte du titre (#000000 ou rgb(rouge,vert,bleu) ou rgba(rouge,vert,bleu,opacité) ou couleur nommée (red,blue,...))

diaporamaCouleur= couleur de fond lors de l'affichage des images (#000000 ou rgb(rouge,vert,bleu) ou rgba(rouge,vert,bleu,opacité) ou couleur nommée (red,blue,...))

balise <boutons /> : définition de la barre de navigation

   <!--Définition de la Barre de navigation-->
   <boutons 
      visible="oui"
      styleBoutons="navigation"
      couleur="rgba(255,255,255,0)"
      bordure="rgba(255,255,255,0)"
      deplacements="oui" 
      zoom="oui" 
      outils="oui"
      fs="oui" 
      souris="oui" 
      rotation="non" 
      positionX="center"
      positionY="bottom" 
      dX="10.0" 
      dY="10.0"
      espacement="13"
   />

Les éléments constitutifs de la balise sont :

visible={oui|non} affiche ou non la barre de navigation

styleBouton= les boutons de la barre de navigation sont dans le répertoire "panovisu/images/styleBouton".

couleur= couleur de fond des boutons, mettre cette couleur avec une opacité à 0 pour ne pas afficher de fond au boutons (#000000 ou rgb(rouge,vert,bleu) ou rgba(rouge,vert,bleu,opacité) ou couleur nommée (red,blue,...))

bordure= couleur de de la bordure des boutons, mettre cette couleur avec une opacité à 0 pour ne pas afficher la bordure (#000000 ou rgb(rouge,vert,bleu) ou rgba(rouge,vert,bleu,opacité) ou couleur nommée (red,blue,...))

deplacement={oui|non} affiche ou non les boutons de déplacement (haut, bas, gauche et droite)

zoom={oui|non} affiche ou non les boutons de zoom

outils={oui|non} affiche ou non les boutons des outils (plein écran, mode souris, autorotation)

fs={oui|non} affiche ou non le bouton plein écran

souris={oui|non} affiche ou non le bouton de changement du mode de déplacement

rotation={oui|non} affiche ou non le bouton d' autorotation

positionX={left|center|right} position horizontale de la barre de navigation

positionY={top|middle|bottom} position verticale de la barre de navigation

dX/dY= décalage de position (en pixels) de la barre de navigation

espacement= écart entre les boutons de la barre de navigation

balise <boussole /> : définition de la boussole

    <boussole 
        affiche="oui"
        image="rose3.png"
        taille="102.3"
        positionX="left"
        positionY="top"
        dX="20.0"
        dY="70.0"
        aiguille="oui"
        opacite="0.78"
    />

Les éléments constitutifs de la balise sont :

affiche={oui|non} affiche ou non la boussole

image=choix de l'image de la boussole (se trouve dans le repertoire "panovisu/images/boussoles"). La taille des images est de 200x200 px.

taille=taille en px d'affichage de la largeur de la boussole (la hauteur étant calculée automatiquement)

positionX={left|right} position en X de la boussole

positionY={top|bottom} position en Y de la boussole

dX/dY= décalages en X/Y de la position de la boussole (exprimés en px)

aiguille={oui|non} définit si c'est l'aiguille (aiguille="oui") ou la fond de la boussole (aiguille="non") qui est mobile.

opacite=[0...1] opacité de la boussole

balise <suivantPrecedent /> : lien vers les panoramiques suivant/précédent de la visite

    <suivantPrecedent
        suivant="xml/piscineEntree.xml"            
        precedent="xml/piscine2.xml"            
    />
    

Les éléments constitutifs de la balise sont :

suivant= lien vers le fichier xml du panoramique suivant

précédent= lien vers le fichier xml du panoramique suivant

balise <marcheArret /> : bouton de masquage

    <marcheArret 
        affiche="oui"
        image="MA.png"
        taille="31.1"
        positionX="right"
        positionY="top"
        dX="8.0"
        dy="8.0"
        opacite="0.8"
        navigation="oui"
        boussole="oui"
        titre="oui"
        plan="oui"
        reseaux="oui"
        vignettes="oui"
    />

Les éléments constitutifs de la balise sont :

affiche={oui|non} affiche ou non le bouton

image= choix de l'image du bouton (se trouve dans le repertoire "panovisu/images/MA").

taille=taille en px d'affichage de la largeur du bouton (la hauteur étant calculée automatiquement)

positionX={left|right} position en X du bouton

positionY={top|bottom} position en Y du bouton

dX/dY= décalages en X/Y de la position du bouton (exprimés en px)

opacite=[0...1] opacité du bouton

navigation={oui|non} définit si la barre de navigation doit être masquable ou non.

titre={oui|non} définit si le titre doit être masquable ou non.

plan={oui|non} définit si le plan doit être masquable ou non.

reseaux={oui|non} définit si les réseaux sociaux doivent être masquables ou non.

vignettes={oui|non} définit si les vignettes doivent être masquables ou non.

La masquabilité des images de fond est définie individuellement pour chaque images dans la balise <imageFond ... /> .

balise <reseauxSociaux /> : lien vers les réseaux sociaux

    <reseauxSociaux 
        affiche="oui"
        taille="33.5"
        positionY="top"
        positionX="left"
        dX="10.0"
        dY="7.0"
        opacite="0.8"
        twitter="oui"
        google="oui"
        facebook="oui"
        email="oui"
    />

Les éléments constitutifs de la balise sont :

affiche={oui|non} affiche ou non les boutons des réseaux sociaux

taille=taille en px d'affichage de la largeur des boutons (la hauteur étant calculée automatiquement)

positionX={left|right} position en X des boutons

positionY={top|bottom} position en Y des boutons

dX/dY= décalages en X/Y de la position des boutons (exprimés en px)

opacite=[0...1] opacité des boutons

twitter={oui|non} définit si le bouton vers Twitter doit être affiché ou non.

google={oui|non} définit si le bouton vers Google+ doit être affiché ou non.

facebook={oui|non} définit si le bouton vers Facebook doit être affiché ou non.

email={oui|non} définit si le bouton d'envoi d'email doit être affiché ou non.

balise <imageFond /> : images de fond

    <imageFond
        fichier="images/barre2.png"
        posX="right" 
        posY="top" 
        offsetX="0.0" 
        offsetY="-31.0" 
        tailleX="3500" 
        tailleY="80" 
        opacite="0.8" 
        masquable="oui" 
        url="" 
        infobulle="" 
    />

Les images de fond peuvent être de simples éléments décoratifs de votre visite (fond de titre, de barre de navigation, ...), mais elles peuvent également servir de lien vers une autre page html.

Les éléments constitutifs de la balise sont :

fichier=lien vers le fichier image

posX={left|center|right} position en X de l'image

posY={top|middle|bottom} position en Y de l'image

offsetX/offsetY= déplacement en X/Y de l'image

tailleX/tailleY= largeur/hauteur de l'image

opacite=[0...1] opacité de l'image

masquable={oui|non} définit si un clic sur le bouton de masquage doit affecter ou non l'image

url= lien vers la page HTML lors d'un clic sur l'image. Laisser cet attribut vide "" ou omettez le si votre image n'a qu'un rôle esthétique.

infobulle= texte de l'infobulle de l'image

balise <hotspots ... > ... </hotspots> : définition des hotspots

   <hotspots>
   <!--Point type panoramique ==> déplacement vers une autre vue -->
      <point 
           type="panoramique"
           long="-71.39999999999998"
           lat="-0.30000000000001137"
           image="panovisu/images/hotspots/hotspot.png"
           xml="xml/piscineEntree.xml"
           info="Vers l'entrée"
           anime="false"
      />
   <!--Point de type image/diaporama-->
      <point 
           type="image"
           long="-228.6"
           lat="-0.30000000000001137"
           image="panovisu/images/hotspots/hotspotImage.png"
           img="images/photo2.jpg"
           info="photo2"
           anime="false"
      />
   </hotspots>

Les hotspots sont des points affichés sur la vue panoramique permettant soit de se déplacer vers une autre vue panoramique, soit d'afficher une image. Cette balise contient des sous balises <point ... /> de deux types "panoramique" ou "image".

balise <point ... /> : définition des points des hotspots

Les éléments constitutifs de la balise sont :

type={panoramique|image} définit le type du point.

long/lat= définit la longitude/latitude de positionnement du point

image= définit l'image affichée pour le point

xml= pour un point de type panoramique définit l'emplacement du fichier xml du panoramique concerné

img= pour un point de type image définit l'emplacement du fichier image concerné

info= texte de l'infoBulle du point

anime={oui|non} définit si le point est animé ou non

balise <vignettes ... > ... </vignettes> : définition de la barre de vignettes

    <vignettes 
        affiche="oui"
        tailleImage="142.0"
        position="left"
        fondCouleur="#99cccc"
        texteCouleur="#ffff4d"
        opacite="0.48"
    >
        <imageVignette 
            image="panos/piscineEntreeVignette.jpg"
            xml="xml/piscineEntree.xml"
        />
        ...
    </vignettes>

Les vignettes sont utilisées dans le cadre de visites virtuelles pour permettre un déplacement visuel et rapide entre toutes les vues de la visite, indépendamment du cheminement par hotspots.

Les éléments constitutifs de la balise sont :

affiche={oui|non} affiche ou non la barre de vignettes

tailleImage=taille en px de la largeur des vignettes

position={left|right|bottom} position de la barre des vignettes

fondCouleur= couleur de fond de la barre des vignettes (#000000 ou rgb(rouge,vert,bleu) ou rgba(rouge,vert,bleu,opacité) ou couleur nommée (red,blue,...))

texteCouleur= couleur du texte de la barre des vignettes (#000000 ou rgb(rouge,vert,bleu) ou rgba(rouge,vert,bleu,opacité) ou couleur nommée (red,blue,...))

opacite=[0...1&rbreack; opacité de la barre des vignettes

balise <imageVignette ... /> : définition des images des vignettes

La balise <vignettes ... >...</vignettes> contient une ou plusieurs sous balises <imageVignette ... /> contenant les définitions des images des vignettes. Ses éléments constitutifs sont :

image= emplacement de l'image de la vignette

xml= emplacement du fichier xml du panoramique concerné

balise <plan ... > ... </plan> : définition d'un plan de visite

    <plan
        affiche="oui" 
        image="images/planPiscine.jpg"
        largeur="274.0"
        position="right"
        couleurFond="rgba(153,204,204,0.5)"
        couleurTexte="#fefb01"
        nord="165.7142857142857"
        boussolePosition="bottom:right"
        boussoleX="20.0"
        boussoleY="20.0"
        radarAffiche="oui"
        radarTaille="37"
        radarCouleurFond="#b3e6e6"
        radarCouleurLigne="#336666"
        radarOpacite="0.54"
    >
        <pointPlan
            positX="156.17999999999998"
            positY="243.175"
            xml="xml/piscineEntree.xml"
            texte="Roubaix - la piscine : l'entrée"
            />
  ...
    </plan>

Le plan permet de positionner les panoramiques de la visite.

Les éléments constitutifs de la balise sont :

affiche={oui|non} affiche ou non le plan

image= emplacement de l'image du plan

largeur= largeur en pixel de l'image du plan

position={right|left} position du plan

couleurFond= couleur de fond du plan (#000000 ou rgb(rouge,vert,bleu) ou rgba(rouge,vert,bleu,opacité) ou couleur nommée (red,blue,...))

couleurTexte= couleur du texte du plan (#000000 ou rgb(rouge,vert,bleu) ou rgba(rouge,vert,bleu,opacité) ou couleur nommée (red,blue,...))

nord= position du nord sur le plan

boussolePosition={top|bottom}:{right|left} position de la boussole du plan

boussoleX/boussoleY= décalage en X/Y de la boussole du plan

radarAffiche={oui|non} affiche ou non le radar sur le plan

radarCouleurFond= couleur du corps du radar (#000000 ou rgb(rouge,vert,bleu) ou rgba(rouge,vert,bleu,opacité) ou couleur nommée (red,blue,...))

radarCouleurLigne= couleur de la ligne du radar (#000000 ou rgb(rouge,vert,bleu) ou rgba(rouge,vert,bleu,opacité) ou couleur nommée (red,blue,...))

radarOpacite=[0...1&rbreack; opacité du radar

balise <pointPlan ... /> : définition des hotspots sur le plan

positX/positY= emplacement du hotspot sur le plan

xml= emplacement du fichier xml du panoramique concerné

texte= texte de l'infoBulle du point

Exemple de fichier (généré automatiquement à l'aide de l'éditeur)

<?xml version="1.0" encoding="UTF-8"?>
<!--
     Visite générée par l'éditeur panoVisu 

             Création L.LANG      le monde à 360°  : http://lemondea360.fr
-->

<scene>
   <pano 
      image="panos/piscine1"
      titre="Roubaix - la piscine : le Bassin Vue 1"
      titrePolice="Segoe Print"
      titreTaillePolice="22px"
      titreTaille="100%"
      titreFond="rgba(153,204,204,0.0)"
      titreCouleur="#ffff66"
      diaporamaCouleur="rgba(179,230,230,0.84)"
      type="sphere"
      multiReso="oui"
      nombreNiveaux="4.0"
      zeroNord="-39.0"
      regardX="-279.0"
      regardY="-11"
      affinfo="non"
      afftitre="oui"
   />
   <!--Définition de la Barre de navigation-->
   <boutons 
      styleBoutons="navigation"
      couleur="rgba(255,255,255,0)"
      bordure="rgba(255,255,255,0)"
      deplacements="oui" 
      zoom="oui" 
      outils="oui"
      fs="oui" 
      souris="oui" 
      rotation="non" 
      positionX="center"
      positionY="bottom" 
      dX="10.0" 
      dY="10.0"
      espacement="13"
      visible="oui"
   />
<!--  Boussole -->
    <boussole 
        affiche="oui"
        image="rose3.png"
        taille="102.3"
        positionY="top"
        positionX="left"
        opacite="0.78"
        dX="20.0"
        dY="70.0"
        aiguille="oui"
    />
<!--  Bouton Suivant Precedent -->
    <suivantPrecedent
        suivant="xml/piscineEntree.xml"            
        precedent="xml/piscine2.xml"            
    />
    
<!--  Bouton de Masquage -->
    <marcheArret 
        affiche="oui"
        image="MA.png"
        taille="31.1"
        positionY="top"
        positionX="right"
        opacite="0.8"
        dX="8.0"
        dy="8.0"
        navigation="oui"
        boussole="oui"
        titre="oui"
        plan="oui"
        reseaux="oui"
        vignettes="oui"
    />
<!--  Réseaux Sociaux -->
    <reseauxSociaux 
        affiche="oui"
        taille="33.5"
        positionY="top"
        positionX="left"
        opacite="0.8"
        dX="10.0"
        dY="7.0"
        twitter="oui"
        google="oui"
        facebook="oui"
        email="oui"
    />
       
    <!--Définition des hotspots-->
  
   <hotspots>
      <point 
           type="panoramique"
           long="-71.39999999999998"
           lat="-0.30000000000001137"
           image="panovisu/images/hotspots/hotspot.png"
           xml="xml/piscineEntree.xml"
           info="Vers l'entrée"
           anime="false"
      />
      <point 
           type="panoramique"
           long="-226.2"
           lat="-0.9000000000000057"
           image="panovisu/images/hotspots/hotspot.png"
           xml="xml/piscine2.xml"
           info="Vers le bassin Vue 2"
           anime="false"
      />
      <point 
           type="panoramique"
           long="-249.53846153846155"
           lat="22.307692307692307"
           image="panovisu/images/hotspots/hotspot.png"
           xml="xml/piscine3.xml"
           info="Roubaix - la piscine : le Bassin Vue 3"
           anime="false"
      />
   </hotspots>
<!-- Barre des vignettes -->
    <vignettes 
        affiche="oui"
        tailleImage="142.0"
        fondCouleur="#99cccc"
        texteCouleur="#ffff4d"
        opacite="0.48"
        position="left"
    >
        <imageVignette 
            image="panos/piscineEntreeVignette.jpg"
            xml="xml/piscineEntree.xml"
        />
        <imageVignette 
            image="panos/piscine1Vignette.jpg"
            xml="xml/piscine1.xml"
        />
        <imageVignette 
            image="panos/piscine2Vignette.jpg"
            xml="xml/piscine2.xml"
        />
        <imageVignette 
            image="panos/piscine3Vignette.jpg"
            xml="xml/piscine3.xml"
        />
    </vignettes>

<!-- Définition des images de fond -->

    <imageFond
        fichier="images/barre2.png"
        posX="right" 
        posY="top" 
        offsetX="0.0" 
        offsetY="-31.0" 
        tailleX="3500" 
        tailleY="80" 
        opacite="0.8" 
        masquable="oui" 
        url="" 
        infobulle="" 
    />
    <imageFond
        fichier="images/barre.png"
        posX="center" 
        posY="bottom" 
        offsetX="0.0" 
        offsetY="6.0" 
        tailleX="900" 
        tailleY="60" 
        opacite="0.8" 
        masquable="oui" 
        url="" 
        infobulle="" 
    />
    <imageFond
        fichier="images/terreg.gif"
        posX="center" 
        posY="bottom" 
        offsetX="510.0" 
        offsetY="5.0" 
        tailleX="62" 
        tailleY="62" 
        opacite="0.8" 
        masquable="oui" 
        url="http://lemondea360.fr" 
        infobulle="Le monde à 360°" 
    />
    <plan
        affiche="oui" 
        image="images/planPiscine.jpg"
        largeur="274.0"
        position="right"
        couleurFond="rgba(153,204,204,0.5)"
        couleurTexte="#fefb01"
        nord="165.7142857142857"
        boussolePosition="bottom:right"
        boussoleX="20.0"
        boussoleY="20.0"
        radarAffiche="oui"
        radarTaille="37"
        radarCouleurFond="#b3e6e6"
        radarCouleurLigne="#336666"
        radarOpacite="0.54"
    >
        <pointPlan
            positX="156.17999999999998"
            positY="243.175"
            xml="xml/piscineEntree.xml"
            texte="Roubaix - la piscine : l'entrée"
            />
  
        <pointPlan
            positX="30.14"
            positY="144.535"
            xml="actif"
            />
  
        <pointPlan
            positX="34.935"
            positY="67.13"
            xml="xml/piscine2.xml"
            texte="Roubaix - la piscine : le Bassin Vue 2"
            />
  
        <pointPlan
            positX="21.92"
            positY="95.9"
            xml="xml/piscine3.xml"
            texte="Roubaix - la piscine : le Bassin Vue 1"
            />
  
    </plan>
</scene>