Pannellum 2.3

With eight months elapsed since the release of Pannellum 2.2, it was time to release a new version of Pannellum. Actually, the release was well past due considering the plethora of bugfixes since the previous release, but there was a bug blocking the release, and it took me a while to find time to fix it. Now that I fixed the bug, I was able to release Pannellum 2.3 today. The major new feature in the release is support for the device orientation API such that panoramas can be explored on mobile devices by moving the device itself; this involved adding some quaternion-based calculations to determine where the device was pointing and extending viewer roll support to the cubemap and multi-resolution renderers.1 The other area that saw considerable improvement was the API, with an events framework and numerous new methods added. However, the bulk of the changes were small, consisting of a number of minor improvements and dozens of bugfixes. For a more complete list of improvements, see the changelog.

  1. Roll was already supported in the equirectangular renderer to handle Ricoh Theta S images.  

This entry was posted in and tagged , , . Bookmark the permalink.

22 Responses to Pannellum 2.3

  1. Viktor Uneus says:

    Thanks for some amazing functions that you have created with the panorama and tour function. One thing I was wondering is if it’s possible to add a map? This map will be a normal picture with several hotspots to the different panoramas.

  2. John Patten says:

    Hi Matthew,

    Thanks for writing and updating Pannellum!

    Quick question, is it possible to allow hotspots to trigger javascript?

    I have been experimenting with and their browser widget component for panoramas. Their development tool and the browser object can intercept Javascript functions send by embedded web content. For example, a hotspot may be able to trigger a block of text in the application, or a video to play in a media object, or a new windows that appears with questions for students to answer. I was hoping to use the hotspots to launch events in the LiveCode.

    Is it possible for hot spots in Pannnellum to launch javascript commands?

    Thank you!

    • Matthew Petroff says:

      This is supported using the clickHandlerFunc and clickHandlerArgs hot spot configuration parameters.

      • Bale says:

        Hi Matthew,

        Pannellum is amazing!

        Just a very simple question: how do I pass some parameter (like hotspot’s text) through the clickHandlerFunc ?

        I tried to do it like you showed in the example:

        function hotspot(hotSpotDiv, args) {

        However, I cannot extract the parameter from the args, hope you can help me.

        Best Regards,

        • Matthew Petroff says:

          You need to set the clickHandlerArgs parameter in addition to the clickHandlerFunc parameter. The contents of clickHandlerArgs is what is passed to the function.

  3. John Patten says:

    Hi Matthew,

    Forgive my ignorance on the use of the clickHandlerFunc and clickHandlerArg. How would I implement the code to make that work?

    I tried:

    “hotSpots”: [
    “pitch”: 14.1,
    “yaw”: 1.5,
    “type”: “info”,
    “text”: “Baltimore Museum of Art”,
    “clickHandlerFunc()”: “console.log(‘hello world’);”

    Thank for your patience!

    • Matthew Petroff says:

      First, there shouldn’t be parentheses in the parameter name. The value then needs to be a function object, not a string, e.g.

      "clickHandlerFunc": function() {
        console.log("hello world");
      • Jan says:

        I tried to do it (including copy-paste), but got
        Uncaught SyntaxError: Unexpected token u in JSON at position 631
        at JSON.parse ()
        at XMLHttpRequest.request.onload (standalone.js:64)
        Just at “clickHandlerFunc”.
        What’s wrong? Browser JSON.parse? (Chromium)

        • Matthew Petroff says:

          You can’t use the standalone version; you have to use the API. You can’t put a JavaScript function in a JSON file.

  4. John Patten says:

    Thanks Matthew!

    That works like a charm. I know just enough javascript to waste lots of my time :)

    One last question, on the custom hotspots, can you set the hotspot background to an image?

    .custom-hotspot {
    height: 50px;
    width: 50px;
    //background: #f00;
    background: “images/jet_icon.png”

    Thank you!

    P.S. I’m giving a workshop for some teachers who are learning to use Theta S, etc. and interested in creating their own “Google Expeditions like” resources. I am going to spend most of my time sharing Pannellum. Great tool for teachers, and I think pretty straightforward once you get how it works :)

  5. Hi Matthew,

    Pannellum is a great script. I love it. But there is one problem: When I open a (large) panorama-picture on a Surface-tablet or a LG-smartphone I get the error “The image is too big”. It isn’t right, because both displays can show the whole picture. Otherwise this German viewer ( hasn’t this problem. Okay, it is not easy to navigate through the panorama on a 5-inch-smartphone, but it works. It would be fine when Pannellum will do the same or – better – it will be responsive…

    • Matthew Petroff says:

      A particular image being supported has nothing to do with whether or not the display can show it; it depends on the maximum resolution the graphics hardware supports for WebGL textures. The viewer you mention appears to use a non-hardware-accelerated fallback renderer when the image isn’t supported, which, while functional, isn’t nearly as efficient as WebGL. To get the image to work, you have three options: scale the image down, convert the image to a cube map, or convert the image to Pannellum’s multiresolution format. The first two options are the easiest, while the last option produces the best results, since the image is loaded incrementally.

  6. David Clarke says:

    Matthew, I know others have said it, but your work on Pannellum is impressive and much appreciated. Thank you.
    My question pertains to image file organization. Is there a way to essentially create an RAR, ZIP or other compressed file with an organized collection of pano images stored within a folder structure, and then access the files without decompressing that file? (and also display them, of course, using Pannellum as directed by the end-user)

  7. Vaughan says:

    Hi Matthew, loving this utility of yours, it works beautifully. I’m a little stumped about how to go about loading new panoramas into the viewer – essentially, I’d like to have one instance of the viewer on the page, with several text links below it, that would allow the user to load a new photo into the viewer by clicking a corresponding link. I can’t quite work out how this is done via the API – do you have any tutorials or examples that would help? Thank you!

    • Matthew Petroff says:

      Add all of the panoramas to one configuration file as different scenes, as is done for a tour. Instead of linking them with hot spots, add click handlers to the text links and use the API’s loadScene method to change the viewer’s scene to the appropriate panorama.

  8. jackye says:

    Good morning and thanks. Just a small question.
    Which pano resolution or dimensions did you use in your Pannellum home page sample? I can see it in the iPad and phone perfectly.
    I am having issues with mobile devices.