Bienvenue !

Implantés dans le Midi de l’Auvergne et spécialistes des technologies libres et accessibles, nous vous accompagnons dans votre communication sur internet.

Accueil     Entreprise     Portfolio     Offre    

> Logiciels libres > 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.

Exemple avec un panorama de qualité moyenne

Exemple avec un panorama de haute qualité

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 :

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

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 :

- 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.

jeudi 24 janvier 2008

Laisser un commentaire

9 Messages de forum

  • les démo ne fonctionnent plus

    8 avril 19:17, par antony

    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.

    Répondre à ce message

  • Afficher des panoramas sphériques avec jQuery

    22 avril 2009 15:47, par medi

    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 ^^

    Répondre à ce message

  • Afficher des panoramas sphériques avec jQuery

    3 novembre 2008 15:00, par RP

    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

    Répondre à ce message

  • Compilation de MpreM en erreur

    3 novembre 2008 14:57, par 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

    Répondre à ce message

  • panoramas sphériques et hotspots

    12 août 2008 11:56, par Didier

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

    Répondre à ce message

  • La démo ne fonctionne plus ?

    17 mars 2008 15:04, par leyeti

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

    Répondre à ce message


Suivre la vie du site :: Plan du site :: Mentions légales :: Contact :: SPIP :: OpenStudio - 10, rue Chènebouterie 43000 Le Puy en Velay - +33 (0) 4 82 53 02 01