mpetroff/pannellum

Pannellum is a lightweight, free, and open source panorama viewer for the web.

Pannellum

About

Pannellum is a lightweight, free, and open source panorama viewer for the web. Built using HTML5, CSS3, JavaScript, and WebGL, it is plug-in free. It can be deployed easily as a single file, just 21kB gzipped, and then embedded into pages as an <iframe>. A configuration utility is included to generate the required code for embedding. An API is included for more advanced integrations.

Getting started

Hosted examples

A set of examples that demonstrate the viewer's various functionality is hosted on pannellum.org. This is the best place to start if you want an overview of Pannellum's functionality. They also provide helpful starting points for creating custom configurations.

Simple tutorial and configuration utility

If you are just looking to display a single panorama without any advanced functionality, the steps for doing so are covered on the simple tutorial page. Said page also includes a utility for easily creating the necessary Pannellum configuration.

Local testing and self-hosting

If you would like to locally test or self-host Pannellum, continue to the How to use section below.

How to use

1. Upload build/pannellum.htm and a full equirectangular panorama to a web server or run a development web server locally.
   • Due to browser security restrictions, a web server must be used locally as well. With Python 3, one can use python3 -m http.server, but any other web server should also work.
2. Use the included multi-resolution generator (utils/multires/generate.py), the configuration tool (utils/config/configuration.htm), or create a configuration from scratch or based on an example.
3. Insert the generated <iframe> code into a page, or create a more advanced configuration with JSON or the API.

Configuration parameters are documented in the doc/json-config-parameters.md file, which is also available at pannellum.org/documentation/reference/. API methods are documented inline with JSDoc comments, and generated documentation is available at pannellum.org/documentation/api/. For the standalone viewer, configuration parameters are preferably specified using a location hash instead of a location search query, e.g., pannellum.htm#panorama=... instead of pannellum.htm?panorama=..., since this does not unnecessarily send the query parameters to the server.

Using a minified copy

For final deployment, it is recommended that one use a minified copy of Pannellum instead of using the source files in src directly. The easiest method is to download the most recent release and use the pre-built copy of either pannellum.htm or pannellum.js & pannellum.css. If you wish to make changes to Pannellum or use the latest development copy of the code, follow the instructions in the Building section below to create build/pannellum.htm, build/pannellum.js, and build/pannellum.css.

Using generate.py to create multires panoramas

To be able to create multiresolution panoramas, you need to have the nona program installed, which is available as part of Hugin, as well as Python 3 with the Pillow and NumPy packages. The pyshtools Python package is also recommended. Then, run

python3 generate.py pano_image.jpg

in the utils/multires directory. This will generate all the image tiles and the config.json file in the ./output folder by default. For this to work, nona needs to be on the system path; otherwise, the location of nona can be specified using the -n flag. On a Unix-like platform, with nona already on the system path use:

$ cd utils/multires
$ python3 generate.py pano_image.jpg

where pano_image.jpg is the filename of your equirectangular panorama. If nona is not on the system path, use:

$ cd utils/multires
$ python3 generate.py -n /path/to/nona pano_image.jpg

For a complete list of options, run:

$ python3 generate.py --help

To view the generated configuration, run:

$ cd ../..
$ python3 -m http.server

This goes back to the root directory of the repository and starts a local development web server. Then open http://localhost:8000/src/standalone/pannellum.htm#config=../../utils/multires/output/config.json in your web browser of choice.

Bundled examples

Examples using both the minified version and the version in the src directory are included in the examples directory. These can be viewed by starting a local web server in the root of the repository, e.g., by running:

$ python3 -m http.server

in the directory containing this readme file, and then navigating to the hosted HTML files using a web browser; note that the examples use files from the src directory, so the web server must be started from the repository root, not the examples directory. For the example-minified.htm example to work, a minified copy of Pannellum must first be built; see the Building section below for details.

Additional examples are available at pannellum.org.

Browser Compatibility

Since Pannellum is built with web standards, it requires a modern browser to function.

Full support (with appropriate graphics drivers):

• Firefox 23+
• Chrome 24+
• Safari 8+
• Internet Explorer 11+
• Edge

The support list is based on feature support. As only recent browsers are tested, there may be regressions in older browsers.

Not officially supported:

Mobile / app / web frameworks are not officially supported. They may work, but they're not tested and are not the targeted platform.

Translations

All user-facing strings can be changed using the strings configuration parameter. There exists a third-party respository of user-contributed translations that can be used with this configuration option.

Building

The utils folder contains the required build tools, with the exception of Python 3.2+ and Java installations. To build a minified version of Pannellum, run either build.sh or build.bat depending on your platform. On a Unix-like platform:

$ cd utils/build
$ ./build.sh

If successful, this should create build/pannellum.htm, build/pannellum.js, and build/pannellum.css, relative to the root directory of the repository.

Tests

A minimal Selenium-based test suite is located in the tests directory. The tests can be executed by running:

python3 run_tests.py

A Selenium-driven web browser (with a Chrome driver, by default) is created, and screenshots are generated and compared against previously generated ones in tests. For example, to regenerate the screenshots one can run:

$ python3 tests/run_tests.py --create-ref

And to simply run the tests to compare to, eliminate that argument. By default, a random port is selected, along with other arguments. One can see usage via:

$ python tests/run_tests.py --help

Continuous integration tests are run via Travis CI. Running the tests locally requires Python 3, the Selenium Python bindings, Pillow, NumPy, and either Firefox & geckodriver or Chrome & ChromeDriver.

Seeking support

If you wish to ask a question or report a bug, please open an issue at github.com/mpetroff/pannellum. See the Contributing section below for more details.

Contributing

Development takes place at github.com/mpetroff/pannellum. Issues should be opened to report bugs or suggest improvements (or ask questions), and pull requests are welcome. Please make an attempt to write in grammatically-correct English on the issue tracker; using the results of machine translation is acceptable if one in not fluent in the language, and attempts to work past language barriers will be made. When reporting a bug, please try to include a minimum reproducible example (or at least some sort of example). When proposing changes, please try to match the existing code style, e.g., four space indentation and JSHint validation. If your pull request adds an additional configuration parameter, please document it in doc/json-config-parameters.md. Pull requests should preferably be created from feature branches.

License

Pannellum is distributed under the MIT License. For more information, read the file COPYING or peruse the license online.

In the past, parts of Pannellum were based on three.js r40, which is licensed under the MIT License.

The panoramic image provided with the examples is licensed under the Creative Commons Attribution-ShareAlike 3.0 Unported License.

Credits

• Matthew Petroff, Original Author
• three.js r40, Former Underlying Framework

If used as part of academic research, please cite:

Petroff, Matthew A. "Pannellum: a lightweight web-based panorama viewer." Journal of Open Source Software 4, no. 40 (2019): 1628. doi:10.21105/joss.01628

pannellum's Issues

Current master does not work in any browser

I just tried the current master version again. None of the examples works correctly. E.g. in chrome I end up with the following JavaScript / WebGL errors:

WebGL: INVALID_VALUE: texImage2D: width or height out of range pannellum.htm?panorama=../examples/examplepano.jpg&title=Jordan%20Pond&author=Matthew%20Petroff&pre…:1
43
[.WebGLRenderingContext]RENDER WARNING: texture bound to texture unit 0 is not renderable. It maybe non-power-of-2 and have incompatible texture filtering or is not 'texture complete' pannellum.htm?panorama=../examples/examplepano.jpg&title=Jordan%20Pond&author=Matthew%20Petroff&pre…:1

OpenGL in Chrome Version 39.0.2171.71 (64-bit) Mac and Android

Really nice VR viewer, thanks for developing it.

I've tried to put it together on my site but finding that my own work will not show in Chrome Version 39.0.2171.71 (64-bit) Mac or on my Android phone Version 39.0.2171.93. Does show in Safari.

I have embedded an example from a fellow user to try and troubleshoot, and find that this other persons example does work, even alongside my non-working example. Cannot see anything different in code used. Image is hosted on my same server as holding the pannellum.htm

The page I've been working on is here: http://www.vraccess.co.uk/?p=29

The code is:

<iframe style="border-style: none;" title="pannellum panorama viewer" src="http://www.vraccess.co.uk/vr_files/pannellum.htm?panorama=http://www.vraccess.co.uk/vr_files/images/bees_nest_vr.jpg&autoload=yes" width="640" height="360" allowfullscreen="allowfullscreen"></iframe>

And the Javascript console reports problems:

pannellum.htm?panorama=http://www.vraccess.co.uk/vr_files/images/bees_nest_vr.jpg&autoload=yes:8 WebGL: INVALID_VALUE: texImage2D: width or height out of range
pannellum.htm?panorama=http://www.vraccess.co.uk/vr_files/images/bees_nest_vr.jpg&autoload=yes:10 Error: something went wrong with WebGL!

Any ideas? thanks very much, Will (Liverpool UK)

MSIE9 doesn't give error message

I know IE9 isn't supported, but it would be great if it displayed an error message plus fallback link (e.g. the IE10 I tried says that WebGL support is missing). Instead it's just stuck on the "Loading" screen. If you need a browser to test it, Open Source projects get free access to SauceLabs where you can select any browser/OS (https://saucelabs.com/opensauce).

several generate.py errors

under linux you get several errors using generate.py.

first error is a cast problem from float to int

Traceback (most recent call last):
File "./generate.py", line 84, in
for level in range(levels, 0, -1):
TypeError: range() integer start argument expected, got float.

you can fix this by cast var levels to int in line 84.
some thing like

for level in range(int(levels), 0, -1):

second error is
Generating tiles...
Traceback (most recent call last):
File "./generate.py", line 85, in
os.makedirs(os.path.join(args.output, str(level)), exist_ok=True)
TypeError: makedirs() got an unexpected keyword argument 'exist_ok'

"exist_ok" is not a valid argument for makedirs() under linux python2.7.5+

you can fix this using "try catch"
for example
try:
os.makedirs(os.path.join(args.output, str(level)))
except OSError as e:
if e.errno != errno.EEXIST:

raise # raises the error again

error 3&4 are also casting float to int problems
Traceback (most recent call last):
File "./generate.py", line 99, in
for i in range(0, tiles):
TypeError: range() integer end argument expected, got float.

cast it like this
for i in range(0, int(tiles)):
for j in range(0, int(tiles)):

---

the last error was a tile size problem if using -s option.
there was size 512 hard coded in the script.
Traceback (most recent call last):
File "./generate.py", line 108, in
tile.save(os.path.join(args.output, str(level), faceLetters[f] + str(i) + '_' + str(j) + extension))
File "/usr/lib/python2.7/dist-packages/PIL/Image.py", line 1439, in save
save_handler(self, fp, filename)
File "/usr/lib/python2.7/dist-packages/PIL/JpegImagePlugin.py", line 471, in _save
ImageFile._save(im, fp, [("jpeg", (0,0)+im.size, 0, rawmode)])
File "/usr/lib/python2.7/dist-packages/PIL/ImageFile.py", line 498, in _save
e.setimage(im.im, b)
SystemError: tile cannot extend outside image

i fix this in this way
for j in range(0, int(tiles)):
left = j * args.tileSize
upper = i * args.tileSize
right = min(j * args.tileSize + args.tileSize, size)
lower = min(i * args.tileSize + args.tileSize, size)
tile = face.crop([left, upper, right, lower])

tile.load()

after this modifications the script run fine here. tiles will generated in most modulo 8 formats. (64,128,256,512,1024 and so on)

thx
wolke

No WebGL fallback only working for multiRes

Hello.

As far as I can see, fallback for non-WebGL is only working for multiRes type (libpannellum.js line 65).

There is a reason why this check is done !gl && this.imageType == 'multires'? Would not work the CSS 3D transform renderer for cubemap?

Ignoring "vaov" & "vOffset" parameters in JSON tour

I've been creating some real estate tours and have had spheres that aren't displaying properly. It seems that when using a JSON tour Pannellum is ignoring the "vaov" and "vOffset" parameters within a scene. I've tried both using an integer as well as a string and in both cases the value is ignored with the image being displayed in the centre of the scene with identical black spots appearing above and beneath the image.

Example can be seen here: www.evolutionsmc.com/real-estate/204Alton/pannellum.htm?tour=assets/tour.json

Thanks.

Edit: I'm using the 2.1.0 release.

cube faces not well aligned and wrong size

Hi Matthew,

I'm experimenting with pannellum, and, despite the multiresolution example worked
as it should, I can't manage to have my own multiresolution pano going OK.
I modified generate.py in order to work with Python 2.7.9 (Debian testing "jessie"),
but the issues here were about errors when trying to save files in directories already
existing and math.ceil returning a float instead of int.

The problem with the panorama is: the cube faces do not join - sometimes some faces
do join, but - I can see that the faces are not properly aligned.

I have pannellum 2.0.1.

Also I noticed that the config.json is always created with "extension": "jpg" ;)

thanks!

PS: Attached file shows the left (right side in picture), back (left in pic), top and bottom faces

Zoom not working on Android 4.x and 5

From the example in the website, the zoon is not working in Android devices. Not double finger zoom or even double click zoom.

Keeping pitch and yaw during transition

The current implementation allows us to set the pitch and yaw of the initial camera upon entering the scene only, thus providing a jarring experience if we wish to back out of a dead-end (Turning the camera all the way around, clicking transitioning scene, repeat).
I propose we store the current pitch and yaw in the scene and attempt to maintain it into the next scene, mimicking google street view. Inheriting orientation such as this should be optional, as not all scenes will maintain direction in this way.

equirectangular images on mobile

Equirectangular images are rendering incorretly on mobile devices - including in the provided examples. Specifically iOS 8.2. It almost looks as if they're being rendered as shearicle images instead.

Cube images work ok everywhere. Equirectangular images work ok on desktop.

Any quick fix for this?

Additional Mobile Controls

on mobile screen, is it possible to add up, left, right ,down button (like google map) and disable dragging using touch ? Currently, when embedded on a page, the page unable to scroll.

Perspective

This is not so much an issue as a request. I'm in the process of making a tour of a factory. And so I made a quick diagram to show something that could possibly be implemented.
Let's say you had a hallway with 4 rooms. And each room was linked via hotspot so that the next door you open, the default view of the pano would open facing the next door. As shown in the picture, the default view or orientation of the pano would open facing the door of the next room (shown in red). But once you reach the end of the hall and start returning to previous rooms, the pano would open with the view that would be facing the wrong direction. Instead, you would want the next room to open with the yellow perspective or default view.

I'm not a programmer or tech guy at all but would it be possible to have the perspective elements for the next room load with the hotspot? Then the perceived tour would be more natural... as if you were 'walking' into the next room with the correct orientation already in place. Cheers

Option to log pitch and yaw of mouse click to console to aid with positioning hot spots

Currently, positioning hot spots is rather inconvenient, often devolving to trial and error. To make this process easier, a configuration option should be added that logs the mouse's pitch and yaw position values when the mouse button is clicked. Obviously, this option shouldn't be used in production.

doesn't recognize chrome Version 39.0.2171.71 (64-bit) as having webGL support

I can use webGL with google's examples and i'm running mac chrome version 39. I'm thinking something's broken.

event when scene is loaded

I'd like to be notified when a scene is loaded. What about adding very simple events like this? I guess there's a better approach...

https://github.com/danielnaber/pannellum/commit/dec4ab95a171cc51ca3f1bdd1e34f349cbbfb73d

As a user, I can then do:

    $(document).ready(function() {
        document.getElementById('pannellumFrame').contentWindow.sceneLoaded = function(sceneId) {
            alert(sceneId);
        }
    });

Multires artifacts on tile edges

Hi,
I have tested your multi-resolution example and noticed that there are artifacts on tiles edges as you can see on the attached screenshot.

You can find it here : http://experiments.benvii.com/pannellum-master/examples/example-multires.htm
If you want to download tiles : http://experiments.benvii.com/pannellum-master/examples/multires_pic.tar.gz

I'm not good in webGL, I found on the web that this problem could be solved using a 'margin' factor, here : http://blog.tojicode.com/2012/07/sprite-tile-maps-on-gpu.html?showComment=1344343442346#c7247639294688682721

Hope you will find a solution.

Support for non-360 degree panoramas

Please add parameters to support panoramas that weren't shot with with a full 360 degree rotation.

Unable to open in Safari

I've been exploring using Pannellum in order to display real estate house tours. Unfortunately I've consistently encountered an issue with it displaying in Safari.

I don't use Mac's myself and have never had any issues with Pannellum on either Chrome, Firefox, Opera, or Internet Explore on Windows.

Thanks.

Edit: I'm using the 2.1.0 release.

Images transition

This is a style issue. It would be quite nice to have an animation effect when an image is loaded. Just the regular fadeIn (like Jquery) would be fair enough. There is an example with canvas here.

I was trying to implement it myself but I found out that this actually happens in libpannellum.js and is quite complex.

small visual glitch with inertia

• click left mouse button
• move mouse quite fast
• before releasing the button, wait a second or two
• the image now moves a bit, it would be more natural if it didn't

Ipad Pannellum viewing skewed

First of all, I'm not a techhead by any stretch but I absolutely love Pannellum. I'm done with using flash and this is perfect. So I've been working with a few spheres on my website... turning into tours and having fun. I grabbed my ipad to view the images and they seem to be loading fine but rendering them skewed. At first I thot it was just my own panos and started looking into resolution and size limitations as well as resizing issues etc but then i came upon this thread (#25). On that thread, the example has a pano here: http://www.vraccess.co.uk/?p=29 which works perfectly on computer but on ipad the image has grainy lines - the same that's happening with my spheres. So I decided to take a screenshot (http://pianopricepoint.com/pannellum-ipad-screen.png). As mentioned, everything seems to be loading properly, it's just that the view is skewed and the image has only a narrow rotation of what appear to be the top of the image. Any thoughts around this? Cheers

it's difficult to use a dynamic tour with parameters

A script that creates the tour JSON might be called like tour?id=1&param=2. The complete embedding URL would then be pannellum.htm?tour.php?id=1&param=2, but this confuses the parseURLParameters function. Changing the script URL to use slashes (tour/1/2) doesn’t help, because then you’ll end up with a wrong tourConfig.basePath that’s prepended to the panorama images. I'm not sure how to fix this in a clean way.

Feature Request - multiview from cubic

Is it possible to use generate.py in such a way that it can create multiview images from a series of 6 cubic images. This would enable the tripod to be photoshopped out, for example in just one place.
Ta, Steve C

Changing fast from panorama crashes the actual image

Hello,

Changing too fast from panoramas is causing the the player to crash. I fixed some small undefined errors in the setTimeout: #72

but it wasn't only that.

Load button hover

Hi there !

At first, I want to thank you for this awesome viewer !

I try to customize it, and I have an issue with the "load_button" : when my mouse is hover, sometimes it's working background color change one time and stay freeze even if my mouse is out, and a lot of times nothing happens.

Do you have a solution for this ?

NB : This issue is with Chrome browser, Firefox is okay

Thank you for reading,

Peter (sorry for my bad english)

Types of panoramas?

I'm really noob on this topic so sorry in advance for the nonsense I can say.

I still don't know very well which are the differences between: equirectangular, cubemap and multires images.

I don't know either if it is related with the differences between those pictures for example:
http://rauljimenez.info/dev/nerja-tour/examples/nerja-tour/R0010004.jpg (taken using Ricoh Theta camera)
http://rauljimenez.info/dev/nerja-tour/examples/examplepano.jpg

Is it possible to transform a panorama like the first one (taken with Ricoh = ¿fish eye?) to a rectilinear panorama?, something like this?
http://photo.net/learn/fisheye/

panorama not displayed with ignoreGPanoXMP=false

Something seems to have been broken(?) by this commit: e90d65b. I cannot get a simple equirectangular panorama to display anymore after that change. My test tour is this:

{   
    "default": {
        "firstScene": "library"
    },

    "scenes": {
        "library": {
            "panorama": "R0010216-stacked.JPG"
        }        
    }
}

Instead of the image (which is loaded correctly according to Firebug), I only see a grey area. Setting ignoreGPanoXMP to true makes everything work again - so maybe the default should be set to true? I can send you the affected image by email if needed.

Starting in some specified position

If I specify yaw and pitch at some scene in the config.json it doesn't start on this pre-configuration. I tried to change somethings on pannellum.js but it didn't worked out. Example:

"banheiro8": {
            "title": "Banheiro",
            "type": "multires",
            "multiRes": {
                "basePath": "./banheiro8",
                "path": "/%l/%s%y_%x",
                "fallbackPath": "./fallback/%s",
                "extension": "jpg",
                "tileResolution": 512,
                "maxLevel": 3,
                "cubeResolution": 1792
            },
            "yaw": 90,
            "pitch": 0,
            "hotSpots": [
                {
                    "yaw": -176,
                    "pitch": -10,
                    "type": "scene",
                    "text": "Ir para Quarto",
                    "sceneId": "quarto8"
                }
            ]
        }

rotate not working

I'm using a JSON configuration as follows:

default: {
    minHfov: 50,
    maxHfov: 145,
    hfov: 122,
    autoRotateInactivityDelay: 5000,
    autorotate: 5,
    firstScene: "R0010178-_-JPG",
    autoLoad: true,
},
    ....

And using scenes with type cubemap
And it actually does not autorotate. Did I understand something wrong?

Multires viewer uses suboptimal zoom levels

The multires viewer uses suboptimal zoom levels, particularly when the viewer is in a portrait aspect ratio. The checkZoom function of libpannellum.js needs to be improved and should probably use the diagonal field of view.

Full Screen Button doesn't appear on iPhone 6

Hello Matt,

the full screen button disappear on iPhone for Safari and Chrome. On normal Safari on my iMac works fine.

Is this normal?

Cheers,
adam

Adding more hotspots types

Hello there,

I'd like to add some more capabilities, such as displaying a video when clicking a hotspot. I've forked your repository, and have started to play around...

I am adding some behaviour in the createHotSpots() from panellum.js. My plan is to add (for the video case) a

Do you have any recommendation before I start ?

Thanks :)

Guillaume

[Feature request][patch] Adding options for limiting hfov, pitch and yaw

The problem
When creating panoramas, sometimes we do not have (have not shot) the full sequence of needed images (the nadir and zenith ones for example). So the stitching software (like Hugin for example) leave black fields. The new Partial panorama option of pannellum is very convenient, but still even it leaves black fields in place of missing images (it is normal of course). I've been using pan0 for a long time and it had options of limiting the FOV, pitch etc, so adding these to pannellum would be very convenient.

Solution
Since I need this functionality, I fiddled a bit with the code of pannellum.js and implemented this feature. I use it and it works with partial panoramas and equirectangular ones. I haven't tested it with cube and multires, but they should also work I think...

The changes to the code
The Changelog shortly is:

• Added minhfov and maxhfov parameters that limit the Zoom, so if one's panorama is not quite hires, he could limit the user to a certain level of acceptable view. By default this is between 50 and 120 (as in the original code)
• Added minpitch and maxpitch parameters that limit the view from -90 to 90 (default values). This is done, so the author may center the panorama on the nadir and zenith if he likes (so the defaults -85 and 85 in the original code, have been widened a bit). These parameters could be used to limit the final user to not see the missing (and black) upper and lower parts of the panorama.
• Added minyaw and maxyaw parameters to limit the rotation of the panorama if there are some missing spots on the X axis. I deliberately made the default values from -36000 to 36000, because the code stays shorter this way and this is a good value (around 100 full rotations of the panorama)

Limitations

• I haven't tested this with multires or cubic, so I do not know if it will work
• I haven't changed autorotate at all, so it needs some fixing too because it is not working as expected.

If you want and if you like my changes you can merge them in the code.
Thanks

P.S. Great job with pannellum btw. I love it and it is my new favorite for panoramas :)

Here is the code of the patch
I am sorry I use this way of proposing a patch instead of Forking and Pull Request, but it is faster for me this way...

--- pannellum.js.orig   2014-08-31 08:22:44.000000000 +0300
+++ pannellum.js    2014-08-31 08:28:28.635404021 +0300
@@ -48,8 +48,14 @@

 var defaultConfig = {
     hfov: 100,
+    minhfov: 50,
+    maxhfov: 120,
     pitch: 0,
+    minpitch: -90,
+    maxpitch: 90,
     yaw: 0,
+    minyaw: -36000,
+    maxyaw: 36000,
     haov: 360,
     vaov: 180,
     voffset: 0,
@@ -196,9 +202,15 @@
 function onDocumentMouseMove(event) {
     if (isUserInteracting) {
         //TODO: This still isn't quite right
-        config.yaw = ((Math.atan(onPointerDownPointerX / canvas.width * 2 - 1) - Math.atan(event.clientX / canvas.width * 2 - 1)) * 180 / Math.PI * config.hfov / 90) + onPointerDownYaw;
-        var vfov = 2 * Math.atan(Math.tan(config.hfov/360*Math.PI) * canvas.height / canvas.width) * 180 / Math.PI;
-        config.pitch = ((Math.atan(event.clientY / canvas.height * 2 - 1) - Math.atan(onPointerDownPointerY / canvas.height * 2 - 1)) * 180 / Math.PI * vfov / 90) + onPointerDownPitch;
+       var yaw = ((Math.atan(onPointerDownPointerX / canvas.width * 2 - 1) - Math.atan(event.clientX / canvas.width * 2 - 1)) * 180 / Math.PI * config.hfov / 90) + onPointerDownYaw;
+       // Ensure the yaw is within min and max allowed
+       config.yaw = Math.max(config.minyaw, Math.min(config.maxyaw, yaw));
+
+       var vfov = 2 * Math.atan(Math.tan(config.hfov/360*Math.PI) * canvas.height / canvas.width) * 180 / Math.PI;
+
+        var pitch = ((Math.atan(event.clientY / canvas.height * 2 - 1) - Math.atan(onPointerDownPointerY / canvas.height * 2 - 1)) * 180 / Math.PI * vfov / 90) + onPointerDownPitch;
+       // Ensure the calculated pitch is within min and max allowed
+       config.pitch = Math.max(config.minpitch, Math.min(config.maxpitch, pitch));
     }
 }

@@ -218,10 +230,16 @@
 function onDocumentTouchMove(event) {
     // Override default action
     event.preventDefault();
-    
-    config.yaw = (onPointerDownPointerX - event.targetTouches[0].clientX) * 0.1 + onPointerDownYaw;
-    config.pitch = (event.targetTouches[0].clientY - onPointerDownPointerY) * 0.1 + onPointerDownPitch;
-    animate();
+
+    var yaw = (onPointerDownPointerX - event.targetTouches[0].clientX) * 0.1 + onPointerDownYaw;
+   // Ensure the yaw is within min and max allowed
+   config.yaw = Math.max(config.minyaw, Math.min(config.maxyaw, yaw));
+
+   var pitch = (event.targetTouches[0].clientY - onPointerDownPointerY) * 0.1 + onPointerDownPitch;
+   // Ensure the calculated pitch is within min and max allowed
+   config.pitch = Math.max(config.minpitch, Math.min(config.maxpitch, pitch));
+
+   animate();
 }

 function onDocumentTouchEnd() {
@@ -362,7 +380,10 @@
         newTime = Date.now();
     }
     var diff = (newTime - prevTime) * config.hfov / 1700;
-    
+
+   var pitch = config.pitch;
+   var yaw = config.yaw;
+
     // If minus key is down
     if (keysDown[0]) {
         zoomOut(diff);
@@ -376,25 +397,37 @@
     // If up arrow or "w" is down
     if (keysDown[2] || keysDown[6]) {
         // Pan up
-        config.pitch += diff;
+        pitch += diff;
+
+       // Ensure the calculated pitch is within min and max allowed
+       config.pitch = Math.max(config.minpitch, Math.min(config.maxpitch, pitch));
     }

     // If down arrow or "s" is down
     if (keysDown[3] || keysDown[7]) {
         // Pan down
-        config.pitch -= diff;
+        pitch -= diff;
+
+       // Ensure the calculated pitch is within min and max allowed
+       config.pitch = Math.max(config.minpitch, Math.min(config.maxpitch, pitch));
     }

     // If left arrow or "a" is down
     if (keysDown[4] || keysDown[8]) {
         // Pan left
-        config.yaw -= diff;
+        yaw -= diff;
+
+       // Ensure the yaw is within min and max allowed
+       config.yaw = Math.max(config.minyaw, Math.min(config.maxyaw, yaw));
     }

     // If right arrow or "d" is down
     if (keysDown[5] || keysDown[9]) {
         // Pan right
-        config.yaw += diff;
+        yaw += diff;
+
+       // Ensure the yaw is within min and max allowed
+       config.yaw = Math.max(config.minyaw, Math.min(config.maxyaw, yaw));
     }

     // If auto-rotate
@@ -437,8 +470,13 @@
         } else if (config.yaw < -180) {
             config.yaw += 360;
         }
-        
-        config.pitch = Math.max(-85, Math.min(85, config.pitch));
+
+       // Ensure the yaw is within min and max allowed
+       config.yaw = Math.max(config.minyaw, Math.min(config.maxyaw, config.yaw));
+
+       // Ensure the calculated pitch is within min and max allowed
+       config.pitch = Math.max(config.minpitch, Math.min(config.maxpitch, config.pitch));
+
         renderer.render(config.pitch * Math.PI / 180, config.yaw * Math.PI / 180, config.hfov * Math.PI / 180);

         renderHotSpots();
@@ -589,8 +627,10 @@
         var value = URL[i].split('=')[1];
         json += '"' + option + '":';
         switch(option) {
-            case 'hfov': case 'pitch': case 'yaw': case 'haov': case 'vaov':
-            case 'voffset':
+            case 'hfov': case 'minhfov': case 'maxhfov':
+           case 'pitch': case 'minpitch': case 'maxpitch':
+           case 'yaw': case 'minyaw': case 'maxyaw':
+           case 'haov': case 'vaov': case 'voffset':
                 json += value;
                 break;
             default:
@@ -715,11 +755,7 @@

             case 'pitch':
                 // Keep pitch within bounds
-                if (config.pitch < -85) {
-                    config.pitch = -85;
-                } else if (config.pitch > 85) {
-                    config.pitch = 85;
-                }
+                config.pitch = Math.max(config.minpitch, Math.min(config.maxpitch, config.pitch));
                 break;

             case 'autoload':
@@ -818,13 +854,13 @@

 function setHfov(i) {
     // Keep field of view within bounds
-    if (i < 50 && config.type != 'multires') {
-        config.hfov = 50;
+    if (i < config.minhfov && config.type != 'multires') {
+        config.hfov = config.minhfov;
     } else if (config.type == 'multires' && i < canvas.width
         / (config.multiRes.cubeResolution / 90 * 0.9)) {
         config.hfov = canvas.width / (config.multiRes.cubeResolution / 90 * 0.9);
-    } else if (i > 120) {
-        config.hfov = 120;
+    } else if (i > config.maxhfov) {
+        config.hfov = config.maxhfov;
     } else {
         config.hfov = i;
     }

WebGL error on IE 11 with cubemap

IE 11 (version 11.0.9600.17501) runs into the WebGL error ("Your browser does not support WebGL"), even though WebGL seems to be enabled (e.g. when visiting get.webgl.org - it says support is experimental). The console log says:

WEBGL11003: INVALID_VALUE: texImage2D

in pannellum.html line 626, Column 17 (...one of these per image...), and then

WEBGL11122: drawArrays: Texture is not cubemap complete. Alle cubemaps faces must be defined and be the same size.

in pannellum.html, line 730, column 13 (probably caused by the errors above)

Debugging show that the error code from gl.getError() is 1281 (GL_INVALID_VALUE).

Each cube is 1142x1142 pixels and it works with Firefox and Chrome. Maximum size is not the problem (maximum size is about 16,000).

Test URL: http://danielnaber.de/tmp/pannellum/ (yes, it's the same image for all six surfaces)

You can probably reproduce this with browserstack.com (saucelabs browsers don't seem to have WebGL enabled).

The documentation at https://msdn.microsoft.com/en-us/library/ie/dn302435%28v=vs.85%29.aspx has different parameters (e.g. width and height), but I have no clue about WebGL so I'm not sure if this is relevant.

Is there support for partial / cylindrical panoramas?

Does this support partial panoramas such as 270 degree panos that also don't extend completely to the top or bottom?

Subpixel Rendering of Hot Spots

When moving slowly, hot spot movement is "jumpy" without subpixel rendering. Subpixel rendering works in Chrome, but not in Firefox. Applying a very small rotation fixes this for the actual hot spot but causes rendering issues for the tooltip. A workaround needs to be devised, since it doesn't seem like Firefox's behavior is going to change.

Drag & Drop and inertia user experience on mobiles

Hello again,

The drag and drop and post-drop inertia for the tours on mobile devices is not really smooth. Actually almost as soon as you drop the finger, the image stops rotating.

I increased the friction value in pannellum.js (0.85 by default) and that works for Desktop (it keeps rotating for a bit longer) but for phones I don't appreciate any difference on the behavior. I was rising the value until 0.98 and still not visible changes.

Is it somewhere else another value which is responsible for this "intertia" effect ?

Thanks!

Performance (mainly on mobile devices)

Hello,

For this issue I cannot give you a hint where in the code it may be, or if is only due to the code (or to the Browser) but the performance - and as a result the user experience - is a bit low in some devices or even in desktop when the load is high. I know that it does happen in most of the 360 players in more or less degree that the CPU goes to almost 100% when dealing with big images and effects on them.

But in this case I can say that it happens specially on mobile devices. After a while loading the page, the drag and drop around gets quite slow. And in cases like iPhone 4 or even iPhone 5, it crashes the browser (I guess cause it does not have more memory anymore and it stops). It happens often when changing the device orientation.

I'm not sure if that can be solved easily, since is not a precise bug report.

Thanks anyway!

Hotspots image

It would be really useful to customize the hotspot image (the arrow) to some other jpg, gif... in the json. And even provide some hover event (increase/decrease size)

Right now I can override the default image taken for the hotspots but the hover is still hardcoded

Stereographic projection

Would it be possible to incorporate a stereographic projection mode to the viewer? It would add great "WOW" -effect to the viewing, when zooming out so much that a "little planet" effect would be seen. I'm not that great with maths, so better leave it to someone who can. For example Ricoh Theta viewer has this function: https://theta360.com/en/gallery/

version 2.01 cannot load

i tested this in firefox + chrome, for example.htm, i get below error after click 'click to load parano.."

Error: something went wrong with WebGL!
Error: WebGL: texImage2D: the maximum width for level 0 is 4096

Zooming out jerky on Chromium

Zooming out with the mouse wheel is jerky with Chrome. It looks like it zooms out and then in again a bit. The problem is this code in pannellum.js I think:

if (event.detail) {
    if (event.detail > 0) {
        zoomSpeed = 1;
    } else {
        zoomSpeed = -1;
    }
} else {
    if (event.detail < 0) {
        zoomSpeed = 1;
    } else {
        zoomSpeed = -1;
    }
}

Just as with the code that comes before this code in pannellum.js, I think the else part needs to check for event.wheelDelta. That improves zooming with Chrome for me (no pull request as not tested with IE).

Change the scene arrow image

Hello Matt,

Really an amazing html5 player for panorama.

Was wondering if we can change the image of the arrow to any other image as a config change?

Also the same for the info image.

Cheers,
Adam

Panning sometimes jumps with inertia

How to reproduce:

• Open panorama (tested with cubic images)
• Turn around 180°. You now look at the place where -180° meets +180°, so to speak.
• Place the mouse in the left part of the image, click and hold and move it to the right before releasing the mouse button so that inertia kicks in.
• Often the view jumps now. The reason seems to be that yawSpeed gets assigned an invalid value in onDocumentMouseMove because config.yaw is compared to yaw but only config.yaw might be normalized to the range of -180...180. Also, I think, the code (yaw - config.yaw) * 0.2 doesn't take into account that you cannot simply find the diff between two values like this if diff(-180, 180) == 0.

generate.py does not generate a proper script for nona + [fix]

Distro: ArchLinux
Hugin: extra/hugin 2014.0.0-2
Version: pannellum-2.0.1_full and trunk (rev: 3d1f934)
When I call nona command it generates: 0, 1, 4, 5 faces files only (we are missing: 2 and 3). The current nona version accepts a different scripting syntax: '+p90' instead of 'p90' or '-p90' instead of 'p-90'.

diff --git a/generate.py b/generate.py
index faf086a..babee1d 100755
--- a/generate.py
+++ b/generate.py
@@ -72,8 +72,8 @@ text.append('p E0 R0 f0 h' + str(cubeSize) + ' n"TIFF_m" u0 v90 w' + str(cubeSiz
 text.append('m g1 i0 m2 p0.00784314')
 text.append('i a0 b0 c0 d0 e0 f4 h' + origHeight + ' n"' + origFilename + '" p0 r0 v360 w' + origWidth + ' y0')
 text.append('i a0 b0 c0 d0 e0 f4 h' + origHeight + ' n"' + origFilename + '" p0 r0 v360 w' + origWidth + ' y180')
-text.append('i a0 b0 c0 d0 e0 f4 h' + origHeight + ' n"' + origFilename + '" p-90 r0 v360 w' + origWidth + ' y0')
-text.append('i a0 b0 c0 d0 e0 f4 h' + origHeight + ' n"' + origFilename + '" p90 r0 v360 w' + origWidth + ' y0')
+text.append('i a0 b0 c0 d0 e0 f4 h' + origHeight + ' n"' + origFilename + '" -p90 r0 v360 w' + origWidth + ' y0')
+text.append('i a0 b0 c0 d0 e0 f4 h' + origHeight + ' n"' + origFilename + '" +p90 r0 v360 w' + origWidth + ' y0')
 text.append('i a0 b0 c0 d0 e0 f4 h' + origHeight + ' n"' + origFilename + '" p0 r0 v360 w' + origWidth + ' y90')
 text.append('i a0 b0 c0 d0 e0 f4 h' + origHeight + ' n"' + origFilename + '" p0 r0 v360 w' + origWidth + ' y-90')
 text.append('v')

External config file can not load panorama

Using ?config= no longer seems to be able to load the pano image.

Very simple ex:

<iframe title="pannellum panorama viewer" width="400" height="350" allowfullscreen style="border-style:none;" src="/lib/pannellum/pannellum.htm?config=/panorama/test.json"></iframe>

test.json:

{
    "autoload": true,
    "panorama": "/images/panorama.jpg",
    "showFullscreenCtrl" : false
}

The config file is located, because the showFullscreenCtrl parameter is interpreted (false and the control does hide, true and it shows) but the actual image never loads, and watching the console shows the error

"Synchronous XMLHttpRequest on the main thread is deprecated because of its detrimental effects to the end user's experience. For more help, check http://xhr.spec.whatwg.org/."

at line 72 of pannellum.htm

Using URL parameters

<iframe title="pannellum panorama viewer" width="400" height="350" allowfullscreen style="border-style:none;" src="/lib/pannellum/pannellum.htm?panorama=/images/panorama.jpg&amp;amp;autoLoad=true"></iframe>

works just fine. Image auto loads. But of course I don't have control over the appearance of the Full Screen control (which, btw, does not seem to work in Chrome v.40) or the h/vaov that I need. The console does report "Resource interpreted as Image but transferred with MIME type text/html", though the image is correctly loaded.

Pannellum not working with iOS 7

The player at pannellum.org works well with iOS, but when I placed the player at my website it didn't work, as it use differents scripts/techs. If you need I can post more details (only tell me what you need).

display an image in the panorama

It would be nice if it was possible to display an image in the panorama at a given position. I guess it's somehow already possible by creating your own sprite CSS class and then set the type but an easier approach would be great. A common use case would be to hide the tripod that's still visible in the image.

video instead of still

Is it possible for this superb implementation to use a video instead of a stil image ?
The video would be pretransformed such as:
http://sphericam.com/portfolio/octocopter-in-la-720p-equirect-crop/

Let the generator optionally output a config.json file

I am currently developing a simple wordpress plugin for pannellum to embed it into my own site (https://github.com/languitar/pannellumpress). The current logic is quite simple and assumes, that each panorama is fully specified by a config.json file. So it would be quite nice if the generator utility could optionally also output such a file or its contents instead of the iframe link.