Openstudio

Nos contributions > Afficher des panoramas sphériques avec jQuery

Afficher des panoramas sphériques avec jQuery

Une alternative JavaScript aux viewers habituels en Java ou QuickTime

Basé sur les derniers travaux de Helmut Dersch sur les panoramas animés, cette solution uniquement en javascript ne nécessite pas d’installer QuickTime ou Java pour visualiser les panoramas sphériques.

Démonstration

Génération des vues

Dans un premier temps, vous devez générer l’ensemble des vues de votre image sphérique. Téléchargez et installez le logiciel MPRemap depuis le site web d’Helmut Dersch

Adaptez éventuellement script_panorama2grid en fonction de la qualité souhaitée, puis générez les vues dans un nouveau répertoire et précisez un nom de sortie pour les vues, du type img_%d.jpg.

Note importante pour l’utilisation de jquery.panorama.js : vous devez préfixer %d avec un caractère ’_’ et le reste du nom de l’image ne doit pas contenir d’autre ’_’.

Utilisation par défaut

Insérez dans votre page une vue panoramique parmi les vues générée (celle que vous souhaitez afficher en premier) en précisant largeur et hauteur et en lui donnant la classe ’panorama’, exemple :

  1. <img src="rm1200/view_50.jpg" class="panorama" width="600" height="400" />

Appelez jquery.js et jquery.panorama.js dans la section head de la page :

  1. <script type="text/javascript" src="js/jquery.js"></script>
  2. <script type="text/javascript" src="js/jquery.panorama.js"></script>

Utilisation avancée

Vous pouvez :

- préciser le nombre de vues générées
- nombre de vues en largeur
- utiliser une autre classe que ’panorama’ sur l’image, par exemple :

class="advancedPanorama"

.

Dans ce cas il faut faire un appel spécifique au plugin dans la section head, et lui indiquez les nouveaux paramètres :

  1. <script type="text/javascript">
  2. $(document).ready(function(){
  3.          $("img.advancedPanorama").panorama({views_number: 300, views_columns: 20});
  4. });
  5. </script>

- views_number : nombre de vues générées par MPRemap
- views_columns : nombre de vues pour chaque ligne de la grille

Téléchargement (version beta)

jquery.panorama.js & circle_animation.gif

This program is free software ; you can redistribute it and/or modify it under the terms of the GNU General Public License as published by the Free Software Foundation ; either version 2 of the License, or any later version.

Le 24 janvier 2008


modération a priori

Attention, votre message n'apparaîtra qu'après avoir été relu et approuvé.

Qui êtes-vous ?
Ajoutez votre commentaire ici
  • Ce formulaire accepte les raccourcis SPIP [->url] {{gras}} {italique} <quote> <code> et le code HTML <q> <del> <ins>. Pour créer des paragraphes, laissez simplement des lignes vides.

16 Messages

  • Good day nice tutorial how can i create hotspot selection on the panorama spherical image ? Thank you

  • Bonjour Arnault,
    Tout d’abord merci pour ce tutoriel.
    Je me permets de vous demander quelques précisions sur l’image d’origine, c’est à dire celle que vous avez utilisée en entrée dans MPRemap pour obtenir les 300 images :
    comment avez vous fait pour la bâtir ? utilisez-vous un appareil à plusieurs objectifs ? Comment peut-on obtenir un résultat d’un telle qualité professionnelle avec un plafond et un plancher aussi parfaitement ajustés ?
    Merci d’avance pour vos conseils,
    cordialement,
    Jean-François Bourhis
    jf.bourhis@gmail.com

  • hello..
    i dont understand about your tutorial here..
    i have follow the instructions at the top of this page until the bottom..
    i change the image with my image..
    but when i click start it’s just "loading" without any % shown..
    can tell me why ?
    should i convert the image ?
    u can help me by send me the email at giantzft@yahoo.com
    thanks alot

  • Where is the link to download the file and run the fully understand how to do it : s

  • Hi,
    i would like to see a working demo ? can you fix it ?? please, thx

  • Bonjour, je crois me souvenir qu’il y avait un panoramique 360-180 (sphérique) de l’intérieur d’un bateau et j’aimerais en savoir plus sur comment réaliser la photo.

    S’il serait envisageable de développer une application web qu’on alimenterait d’une photo panoramique et qui génèrerait la vue tournante et interactive.

    d’avance merci.

  • Bonjour,
    c’est très beau... et c’est vraiment impressionnant, mais ce script marche seulement avec SPIP ?
    parceque j’aimerais beaucoup L’utiliser sur mon site vitrine, qui lui est en HTML.
    merci ^^

  • Bonjour,

    Le module ne propose pas encore d’interactions. Vous pouvez regarder du côté du jQuery virtual tour pour une visite virtuelle, mais c’est vrai que l’affichage se fait en 2d…

  • Bonjour,

    Dans le panoramique, l’utilisateur peut-il faire un zoom sur un détail, déclencher sur ce détail une info complémentaire.....

    Merci de votre réponse

    RP

  • Bonjour,

    Je suis sous Linux,En compilant le logiciel Mprem
    Ci-dessous le log de l’erreur.

    Avez-vous une idée de correction.

    Merci d’avance
    RP

    pierre@pierre : /Bureau/DEVELOP/OUTILS/JQUERY.PANORAMA/mpremap/src$ make
    gcc -Wall -O2 -o mpremap mpremap.o preprocess.o spline.o string2.o ppmstream.o
    mpremap.o : In function `stitchImages’ :
    mpremap.c :(.text+0x238b) : warning : the use of `tmpnam’ is dangerous, better use `mkstemp’
    mpremap.o : In function `SetMakeParams2’ :
    mpremap.c :(.text+0x7a5) : undefined reference to `SetMatrix’
    mpremap.c :(.text+0x8e4) : undefined reference to `erect_rect’
    mpremap.c :(.text+0x924) : undefined reference to `rotate_erect’
    mpremap.c :(.text+0x930) : undefined reference to `sphere_tp_erect’
    mpremap.c :(.text+0x942) : undefined reference to `persp_sphere’
    mpremap.c :(.text+0x960) : undefined reference to `rect_sphere_tp’
    mpremap.c :(.text+0x96f) : undefined reference to `resize’
    mpremap.c :(.text+0x9bf) : undefined reference to `vert’
    mpremap.c :(.text+0x9e5) : undefined reference to `horiz’
    mpremap.c :(.text+0xa05) : undefined reference to `shear’
    mpremap.c :(.text+0xabb) : undefined reference to `tan’
    mpremap.c :(.text+0xb2f) : undefined reference to `tan’
    mpremap.c :(.text+0xb4d) : undefined reference to `radial’
    mpremap.c :(.text+0xb8e) : undefined reference to `erect_sphere_tp’
    mpremap.c :(.text+0xbb3) : undefined reference to `mirror_sphere’
    mpremap.c :(.text+0xbdb) : undefined reference to `sin’
    mpremap.c :(.text+0xc22) : undefined reference to `sin’
    mpremap.c :(.text+0xc43) : undefined reference to `pano_sphere_tp’
    mpremap.c :(.text+0xc54) : undefined reference to `erect_pano’
    mpremap.c :(.text+0xc6b) : undefined reference to `vertical’
    mpremap.c :(.text+0xc89) : undefined reference to `deregister’
    mpremap.c :(.text+0xca2) : undefined reference to `sin’
    mpremap.c :(.text+0xd17) : undefined reference to `erect_sphere_tp’
    mpremap.c :(.text+0xd3f) : undefined reference to `tan’
    mpremap.c :(.text+0xd4f) : undefined reference to `erect_sphere_tp’
    mpremap.c :(.text+0xd95) : undefined reference to `sin’
    mpremap.c :(.text+0xde6) : undefined reference to `tan’
    mpremap.o : In function `MakePano2’ :
    mpremap.c :(.text+0xe36) : undefined reference to `isColorSpecific’
    mpremap.c :(.text+0xf46) : undefined reference to `tmorph’
    mpremap.c :(.text+0xf62) : undefined reference to `execute_stack’
    mpremap.c :(.text+0xf71) : undefined reference to `transForm’
    mpremap.o : In function `SetInvMakeParams2’ :
    mpremap.c :(.text+0xff7) : undefined reference to `SetMatrix’
    mpremap.c :(.text+0x1198) : undefined reference to `horiz’
    mpremap.c :(.text+0x11f3) : undefined reference to `vert’
    mpremap.c :(.text+0x125e) : undefined reference to `inv_radial’
    mpremap.c :(.text+0x1298) : undefined reference to `resize’
    mpremap.c :(.text+0x12bf) : undefined reference to `sphere_tp_rect’
    mpremap.c :(.text+0x12d7) : undefined reference to `persp_sphere’
    mpremap.c :(.text+0x12ec) : undefined reference to `erect_sphere_tp’
    mpremap.c :(.text+0x12fb) : undefined reference to `rotate_erect’
    mpremap.c :(.text+0x1311) : undefined reference to `rect_erect’
    mpremap.c :(.text+0x1354) : undefined reference to `shear’
    mpremap.c :(.text+0x13e2) : undefined reference to `sphere_tp_erect’
    mpremap.c :(.text+0x1454) : undefined reference to `tan’
    mpremap.c :(.text+0x1507) : undefined reference to `tan’
    mpremap.c :(.text+0x1539) : undefined reference to `inv_vertical’
    mpremap.c :(.text+0x1582) : undefined reference to `sphere_mirror’
    mpremap.c :(.text+0x15aa) : undefined reference to `sin’
    mpremap.c :(.text+0x15f1) : undefined reference to `sin’
    mpremap.c :(.text+0x1615) : undefined reference to `sphere_tp_pano’
    mpremap.c :(.text+0x1632) : undefined reference to `pano_erect’
    mpremap.c :(.text+0x164b) : undefined reference to `sin’
    mpremap.c :(.text+0x16c3) : undefined reference to `sphere_tp_erect’
    mpremap.c :(.text+0x16eb) : undefined reference to `tan’
    mpremap.c :(.text+0x1707) : undefined reference to `sphere_tp_erect’
    mpremap.c :(.text+0x1750) : undefined reference to `sin’
    mpremap.c :(.text+0x17a1) : undefined reference to `tan’
    mpremap.o : In function `ExtractStill2’ :
    mpremap.c :(.text+0x17f0) : undefined reference to `isColorSpecific’
    mpremap.c :(.text+0x1872) : undefined reference to `execute_stack’
    mpremap.c :(.text+0x187e) : undefined reference to `transForm’
    mpremap.o : In function `fisheye2_sphere’ :
    mpremap.c :(.text+0x18bb) : undefined reference to `atan2’
    mpremap.c :(.text+0x18d6) : undefined reference to `sin’
    mpremap.c :(.text+0x18e7) : undefined reference to `cos’
    mpremap.c :(.text+0x18fa) : undefined reference to `sin’
    mpremap.o : In function `sphere_fisheye2’ :
    mpremap.c :(.text+0x193d) : undefined reference to `asin’
    mpremap.c :(.text+0x1954) : undefined reference to `atan2’
    mpremap.c :(.text+0x196a) : undefined reference to `cos’
    mpremap.c :(.text+0x1985) : undefined reference to `sin’
    mpremap.o : In function `cutrect’ :
    mpremap.c :(.text+0x1ac2) : undefined reference to `mymalloc’
    mpremap.o : In function `insertImage’ :
    mpremap.c :(.text+0x1b72) : undefined reference to `SetImageDefaults’
    mpremap.c :(.text+0x1bbf) : undefined reference to `mymalloc’
    mpremap.c :(.text+0x1c07) : undefined reference to `CopyPosition’
    mpremap.c :(.text+0x1c84) : undefined reference to `myfree’
    mpremap.o : In function `cutImage’ :
    mpremap.c :(.text+0x1d52) : undefined reference to `mymalloc’
    mpremap.o : In function `imaverage’ :
    mpremap.c :(.text+0x1e8a) : undefined reference to `mymalloc’
    mpremap.c :(.text+0x2007) : undefined reference to `floor’
    mpremap.c :(.text+0x204e) : undefined reference to `floor’
    mpremap.c :(.text+0x20bc) : undefined reference to `floor’
    mpremap.o : In function `extractImage’ :
    mpremap.c :(.text+0x2121) : undefined reference to `SetImageDefaults’
    mpremap.c :(.text+0x214b) : undefined reference to `SetDestImage’
    mpremap.c :(.text+0x216e) : undefined reference to `CopyPosition’
    mpremap.c :(.text+0x21d3) : undefined reference to `myfree’
    mpremap.o : In function `saveImage’ :
    mpremap.c :(.text+0x22ab) : undefined reference to `writeJPEG’
    mpremap.o : In function `stitchImages’ :
    mpremap.c :(.text+0x23b1) : undefined reference to `SetImageDefaults’
    mpremap.c :(.text+0x23ea) : undefined reference to `readAdjustLine’
    mpremap.c :(.text+0x254c) : undefined reference to `CopyPosition’
    mpremap.c :(.text+0x2596) : undefined reference to `myfree’
    mpremap.c :(.text+0x2676) : undefined reference to `myfree’
    mpremap.c :(.text+0x2772) : undefined reference to `readImage’
    mpremap.c :(.text+0x27d6) : undefined reference to `CropImage’
    mpremap.c :(.text+0x283f) : undefined reference to `LoadBufImage’
    mpremap.c :(.text+0x2859) : undefined reference to `HaveEqualSize’
    mpremap.c :(.text+0x2875) : undefined reference to `myfree’
    mpremap.c :(.text+0x28a3) : undefined reference to `SaveBufImage’
    mpremap.c :(.text+0x2929) : undefined reference to `myfree’
    mpremap.c :(.text+0x2975) : undefined reference to `readImage’
    mpremap.c :(.text+0x29cc) : undefined reference to `readAdjustLine’
    mpremap.c :(.text+0x2a1e) : undefined reference to `DoColorCorrection’
    mpremap.c :(.text+0x2a4c) : undefined reference to `merge’
    mpremap.o : In function `extractImages’ :
    mpremap.c :(.text+0x2be0) : undefined reference to `SetImageDefaults’
    mpremap.c :(.text+0x2c0c) : undefined reference to `readAdjustLine’
    mpremap.c :(.text+0x2cef) : undefined reference to `CopyPosition’
    mpremap.c :(.text+0x2e0a) : undefined reference to `myfree’
    mpremap.c :(.text+0x2e39) : undefined reference to `myfree’
    mpremap.c :(.text+0x2e86) : undefined reference to `myfree’
    mpremap.c :(.text+0x2fef) : undefined reference to `myfree’
    mpremap.c :(.text+0x30ed) : undefined reference to `readImage’
    mpremap.c :(.text+0x3173) : undefined reference to `readImage’
    mpremap.c :(.text+0x31d2) : undefined reference to `readAdjustLine’
    preprocess.o : In function `schwenk’ :
    preprocess.c :(.text+0x395) : undefined reference to `exp’
    preprocess.c :(.text+0x403) : undefined reference to `exp’
    preprocess.o : In function `ReadImageDescription’ :
    preprocess.c :(.text+0x626) : undefined reference to `SetEquColor’
    preprocess.c :(.text+0x62e) : undefined reference to `SetCorrectionRadius’
    preprocess.o : In function `preprocess’ :
    preprocess.c :(.text+0xe12) : undefined reference to `SetImageDefaults’
    preprocess.c :(.text+0x1266) : undefined reference to `SetImageDefaults’
    preprocess.c :(.text+0x1274) : undefined reference to `SetImageDefaults’
    preprocess.c :(.text+0x154e) : undefined reference to `SetImageDefaults’
    preprocess.c :(.text+0x156d) : undefined reference to `SetStitchDefaults’
    preprocess.c :(.text+0x176b) : undefined reference to `SetImageDefaults’
    ppmstream.o : In function `readPPMFileHeader’ :
    ppmstream.c :(.text+0xfb) : undefined reference to `PrintError’
    ppmstream.c :(.text+0x140) : undefined reference to `PrintError’
    ppmstream.c :(.text+0x381) : undefined reference to `PrintError’
    ppmstream.o : In function `getImageFromPPMStream’ :
    ppmstream.c :(.text+0x690) : undefined reference to `mymalloc’
    ppmstream.c :(.text+0x70b) : undefined reference to `ThreeToFourBPP’
    ppmstream.c :(.text+0x753) : undefined reference to `PrintError’
    ppmstream.c :(.text+0x769) : undefined reference to `PrintError’
    ppmstream.c :(.text+0x77f) : undefined reference to `PrintError’
    collect2 : ld a retourné 1 code d’état d’exécution
    make : *** [mpremap] Erreur 1

  • Vraiment impressionnant. Mais peux-t-on combiner avec des hotspots un peu comme dans le pano viewer ?

  • bonjour,

    voilà j’ai remis en ordre, il y avait une petite interférence entre le plugin et une réduction automatique des images que j’avais paramétré dans SPIP.

    merci pour l’info,

    a+
    Arnault

  • Bonjour,
    la démo fonctionnait il y a environ 1 mois, mais maintenant cela ne fonctionne plus...
    Que se passe-t-il ?
    Merci

A propos de l'auteur

Arnault PACHOT

Co-fondateur et Directeur Technique, Arnault apporte son expertise unique sur les solutions libres.

Il assure une veille technologique régulière, et supervise les phases techniques des développements tout au long du déroulement du projet.