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.

14 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 Livecode.org 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!

  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:

        Hello
        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 (https://www.panorado.com/de/PanoradoJs.php) 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.

Leave a Reply

Your email address will not be published. Required fields are marked *