Insérer des panoramas 360° dans les articles

Ceci est une ARCHIVE, peut-être périmée. Vérifiez bien les compatibilités !

Attention : cette contribution basée sur les filtres spip a été remplacée par une version plugin : Plugin Panoramas 360°

Présentation

Ce filtre pour Spip 1.9 et 1.9.1 permet d’afficher sous forme de panoramas interactifs les images insérées dans les articles dont le nom d’image contient « 360 ». Exemple : Panorama-paris360degres.jpg
L’affichage est basé sur la librairie Cross Browser JavaScript Library X sous licence LGPL et ne nécessite pas de plugin Java, Quicktime ou Flash.

Pour voir en ligne à quoi ressemble ce filtre, rendez-vous à cette adresse.

contexte
Actuellement la majorité des visites virtuelles sont proposées sur le net avec des viewer sous Flash ou QuickTime. Les viewers libres sont écrits en Java et sont de moins en moins présents. En plus ils nécessitent d’utiliser le plugin Java de Sun qui n’est pas libre.
L’affichage sans plugin des visites virtuelles avec des viewers libres est un point important marqué contre les logiciels propriétaires. C’est également un combat sur lequel ils ne peuvent lutter puisque justement, toute leur stratégie commerciale est basée sur l’utilisation de plugins. N’hésitez donc pas à intégrer des vues panoramiques « sans plugin » dans vos articles !

Fonctionnalités


-  Affichage d’images panoramiques à 360 degrès sans plugin. Il suffit d’activer JavaScript.
-  Affichage animé : la rotation démarre automatiquement.
-  Affichage interactif : on peut utiliser les deux flèches gauche et droite pour changer le sens de rotation et s’arrêter.

Limitations actuelles


-  On ne peut insérer qu’un panorama par article maximum. (solution : écrire les n appels ’onload=’ dans body.html)
-  La largeur de la fenêtre de visualisation est positionnée arbitrairement au tiers de la largeur du panorama. Exemple : un panorama de 1190*150 pixels sera affiché dans une fenêtre de 396*150 pixels.
-  Si deux visiteurs du site tentent de visualiser en même temps deux articles différents comportant chacuns un panorama différent, il peut y avoir un problème d’affichage dû à une écriture et lecture simultanée dans les mêmes fichiers temporaires utilisés dans ce filtre.(solution : peut-on utiliser le répertoire CACHE de spip ?)

Fichiers requis

Décompressez l’archive fournie en pièce jointe.

Installation

  • copier les fichiers x.js, aller_gauche_15.gif (flèche gauche), aller_droite_15.gif (flèche droite), header.html et body.html dans le dossier squelette de votre site.
  • ajoutez le contenu du fichier téléchargé mes_fonctions.php (correspondant à votre version de SPIP : 1.9 ou 1.9.1) dans mes_fonctions.php, à la racine de votre site (ou copiez le tel quel si mes_fonctions.php à la racine de votre site n’existe pas).
  • Ensuite il vous faut ajouter :
    • la ligne <INCLURE{fond=header}> entre les balises <head> et </head> du fichier “article.html” de votre squelette.
    • la ligne <INCLURE{fond=body}> à l’intérieur de la balise <body> du fichier “article.html” de votre squelette. Ce qui donnera en général la ligne suivante : <body class="page_article" <INCLURE{fond=body}>>
    • la fonction panoramas dans le fichier “article.html” de votre squelette : (#TEXTE|panoramas). Ne pas utiliser en même temps qu’un filtre de type image_reduire.
    • en haut du fichier article.html mettre #CACHE{0}

Licence

Logiciel libre sous licence GNU/GPL.
Copyright 2006 Arnault Pachot - OpenStudio

Discussion

4 discussions

  • 4
    ludovic

    Bonsoir,

    désolé pour cette question de novice, mais est-il indispensable de faire tout son site avec spip pour bénéficier de ce type d’utilitaire ?
    Je ne doute pas que Spip soit très bien mais je suis complètement débutant dans le domaine et j’avais déjà mis pas mal de temps à programmer une petit page en html pour visionner les photos d’un appartement. J’aurais aimé ne pas avoir à tout recommencer pour insérer juste un panorama interactif (en apprenant à faire fonctionner un nouveau logiciel).

    Répondre à ce message

  • Voici une version qui tourne sous spip 1.9.1 :

    http://www.clefsdeforge.com/-L-Atelier-.html

    pour SPIP 1.9.1 il faut modifier légèrement le filtre utilisé dans mes_fonctions.php

    remplacer ligne 31

    $chaine_recherche = "/<img(\s+)src='(\S+)360(\S+)'(\s+)?width='(\S+)'(\s+)?height='(\S+)'(.*?)\/>/ims";

    par

    $chaine_recherche = "/<img(\s+)src='(\S+)360(\S+)'(\s+)?width=\"(\S+)\"(\s+)?height=\"(\S+)\"(.*?)\/>/ims";

    Répondre à ce message

  • 4

    Bonjour,
    Cet article est TRES intéressant, je suis un Panoramiste invétéré...

    Mais en revanche je ne suis que Spipiste débutant, et j’ai galéré pour faire fonctionner ce filtre...
    Il faut donner un exemple précis de balise à insérer car il fonctionne au slash près...

    Pour les Néo-Spipistes (comme moi) voici un aperçu de ce qu’il faut taper dans la fenêtre texte de l’article :

    <#html><#img src=’IMG/jpg/ainsa_p_mayor360.jpg’ width=’1145’ height=’200’/>

    • Merci pour tes remarques, mais tu peux faire plus simple pour inserer le panorama dans l’article :

      -  ajoute l’image avec le menu « ajouter une image »,

      -  colle la balise Spip dans l’article, à l’endroit ou tu veux afficher le panorama, par exemple pour l’image numéro 5 :

      <img5|center>

    • Ah oui !
      C’est pas intuitif... J’ai découvert ça aujourd’hui par hasard...
      Je n’avais trouvé cette information nulle part dans l’aide SPIP.
      En tout cas ça marche du tonnerre !
      Merci !

    • hé bien moi je suis un panoramiste débutant. J’ai pu voir dans le portofolio à quoi cela ressemble. Un appareil photo classique ne fait pas ce type de photo.... comment faites vous alors ? photoshop, un soft spécial...

      Merci d’avance,

      Vins

    • Les photos sont réalisées par assemblage de plusieurs photos avec le logiciel Hugin. C’est un logiciel libre très puissant mais un peu délicat à prendre en main. Il existe des tutoriels en français sur le site.

      Pour les prises de vues, un simple appareil numérique peut convenir.

      Mais on peut chercher à améliorer la qualité des photographies en jouant sur plusieurs paramètres :
      -  utiliser un trépied stable avec niveau
      -  utiliser une tête panoramique (la Panosaurus est une tête panoramique bon marché). La tête panoramique permet de conserver sur l’ensemble des vues le même point nodal (centre de l’objectif où les faisceaux se croisent) et donc d’éviter les erreurs de paralaxe.
      -  bloquer l’exposition pour toutes les vues (trouver une valeur moyenne)
      -  régler l’ouverture au min pour augmenter la profondeur de champ
      -  mise au point manuelle et identique sur toutes les vues
      -  bloquer la balance des blancs
      -  pas de filtre polarisant (qui réagit différement selon l’orientation par rapport au soleil)
      -  choisir le moment de la journée ou le soleil est le plus haut
      -  si une valeur d’exposition « moyenne » pour le panorama n’est pas satisfaisante, on peut éventuellement réaliser 2 panoramas d’une même scène, avec deux expositions différentes (par exemple en intérieur : exposition pour l’intérieur d’une pièce puis exposition pour l’extérieur vu à travers les fenêtres) puis faire un collage avec the Gimp.
      -  ajouter éventuellement un effet sur l’image finale pour augmenter le contraste. dans The Gimp : filtres -> amélioration -> augmenter les contrastes

      Il existe aussi des solutions pour réaliser une photographie 360° en une seule prise de vue. je possède cet objectif par exemple, mais il y a d’autres fabricants. La qualité du résultat est moins bonne et la mise au point est difficile. Par contre ce système permet de « saisir » des personnages ou objets « en mouvement » dans une scène ce que ne permet pas le système par assemblage. il a aussi l’avantage de produire des images très rapidement. tout dépend de l’utilisation qu’on veut faire.

      a+
      Arnault

    Répondre à ce message

  • Mais c’est génial ce javascript ! Depuis le temps que je cherches un truc qui soit ni flash ni java ! Bravo pour cette contrib !

    Répondre à ce message

Ajouter un commentaire

Avant de faire part d’un problème sur un plugin X, merci de lire ce qui suit :

  • Désactiver tous les plugins que vous ne voulez pas tester afin de vous assurer que le bug vient bien du plugin X. Cela vous évitera d’écrire sur le forum d’une contribution qui n’est finalement pas en cause.
  • Cherchez et notez les numéros de version de tout ce qui est en place au moment du test :
    • version de SPIP, en bas de la partie privée
    • version du plugin testé et des éventuels plugins nécessités
    • version de PHP (exec=info en partie privée)
    • version de MySQL / SQLite
  • Si votre problème concerne la partie publique de votre site, donnez une URL où le bug est visible, pour que les gens puissent voir par eux-mêmes.
  • En cas de page blanche, merci d’activer l’affichage des erreurs, et d’indiquer ensuite l’erreur qui apparaît.

Merci d’avance pour les personnes qui vous aideront !

Par ailleurs, n’oubliez pas que les contributeurs et contributrices ont une vie en dehors de SPIP.

Qui êtes-vous ?
[Se connecter]

Pour afficher votre trombine avec votre message, enregistrez-la d’abord sur gravatar.com (gratuit et indolore) et n’oubliez pas d’indiquer votre adresse e-mail ici.

Ajoutez votre commentaire ici

Ce champ accepte les raccourcis SPIP {{gras}} {italique} -*liste [texte->url] <quote> <code> et le code HTML <q> <del> <ins>. Pour créer des paragraphes, laissez simplement des lignes vides.

Ajouter un document

Suivre les commentaires : RSS 2.0 | Atom