A javascript viewer for displaying spherical panoramas. An alternative to Java and QuickTime technology.
Based on the last work of Helmut Dersch about Moving Panoramas, this viewer doesn’t require any browser plugin such as quicktime or java.
Views generation
First, you need to generate views from your spherical panoramic image. Download and install MPRemap from Helmut Dersch website
Adapt script_panorama2grid script according to quality you want, then generate views in a new directory with an output name, for example : img_%d.jpg.
Very important restriction for jquery.panorama.js : You need to prefix the %d with an underscore character and image path should not have any other underscore.
Default Use
Simply insert one view from the panoramic image with width and height and the class ’panorama’, example :
And insert jquery.js and jquery.panorama.js calls in the head section :
Advanced Use
You can also start the viewer with some advanced parameters. First, apply another class to the view (not class='panorama'), for example : class="advancedPanorama".
Then add in your head section :
- <script type="text/javascript">
- $(document).ready(function(){
- $("img.advancedPanorama").panorama({views_number: 300, views_columns: 20});
- });
- </script>
views_number : number of views generated by MPRemap views_columns : number of views for each row of the grid
Download (beta version)
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 January 2008
16 Forum posts
20 September 2012, 15:21, by Ademoh
Good day nice tutorial how can i create hotspot selection on the panorama spherical image? Thank you
24 August 2012, 13:19, by 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 March 2012, 15:58, by 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 March 2012, 18:29, by furkan
Where is the link to download the file and run the fully understand how to do it: s
16 August 2011, 00:42, by Waldemir
download..?, thks!
4 March 2011, 16:54, by Arnault Pachot
demo is now here : http://www.openstudio.fr/jquery.sph...
18 February 2011, 08:35, by giraffezw
Hi,
i would like to see a working demo? can you fix it?? please, thx
8 April 2010, 19:17, by 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 April 2009, 15:47, by 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 November 2008, 09:17, by 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 November 2008, 15:00, by 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 November 2008, 14:57, by 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 August 2008, 11:56, by Didier
Vraiment impressionnant. Mais peux-t-on combiner avec des hotspots un peu comme dans le pano viewer?
17 June 2008, 00:54, by xav
ne fonctionne pas
24 March 2008, 18:29, by 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 March 2008, 15:04, by leyeti
Bonjour,
la démo fonctionnait il y a environ 1 mois, mais maintenant cela ne fonctionne plus...
Que se passe-t-il ?
Merci