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.
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 :
- <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 :
- <script type="text/javascript" src="js/jquery.js"></script>
- <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 :
.
Dans ce cas il faut faire un appel spécifique au plugin dans la section head, et lui indiquez les nouveaux paramètres :
- <script type="text/javascript">
- $(document).ready(function(){
- $("img.advancedPanorama").panorama({views_number: 300, views_columns: 20});
- });
- </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
16 Messages
20 septembre 2012, 15:21, par Ademoh
Good day nice tutorial how can i create hotspot selection on the panorama spherical image ? Thank you
24 août 2012, 13:19, par Jean-François Bourhis
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
30 mars 2012, 15:58, par giantz
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
24 mars 2012, 18:29, par furkan
Where is the link to download the file and run the fully understand how to do it : s
16 août 2011, 00:42, par Waldemir
download..?, thks !
4 mars 2011, 16:54, par Arnault Pachot
demo is now here : http://www.openstudio.fr/jquery.sph...
18 février 2011, 08:35, par giraffezw
Hi,
i would like to see a working demo ? can you fix it ?? please, thx
8 avril 2010, 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.
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 ^^
4 novembre 2008, 09:17, par Arnault
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…
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
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
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 ?
17 juin 2008, 00:54, par xav
ne fonctionne pas
24 mars 2008, 18:29, par Arnault
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
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