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.
Roll was already supported in the equirectangular renderer to handle Ricoh Theta S images. ↩
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.
You could build something like this using the API’s
loadScenemethod.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!
This is supported using the
clickHandlerFuncandclickHandlerArgshot spot configuration parameters.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,
Bale
You need to set the
clickHandlerArgsparameter in addition to theclickHandlerFuncparameter. The contents ofclickHandlerArgsis what is passed to the function.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!
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"); }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)
You can’t use the standalone version; you have to use the API. You can’t put a JavaScript function in a JSON file.
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 :)
You can, but your CSS syntax is wrong. It should be
background: url("images/jet_icon.png");.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…
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.
Thank You for Your answer. I will try the three ways in the next days.
Hi, Matthew. Now a short response about my cube-tests. To convert an image in a cube-map isn’t so easy as it seems. For privat purposes nobody will spent a lot of money ;-) At least I found the website of Sergey Gonchar (http://gonchar.me/panorama/), where you can convert your image online. Another solution is the Bixorama-Tool (https://www.outerspace-software.com/bixoramamanual#download). It is not so expensive and has many possibilities. May be these tips are helpful for other users. I’m satisfied with my cubemap-results (http://www.motourist.de/Webschnipsel/Panorama.html). But I have no plan how to convert the image to the multiresolution format. I’m not a profi, so what cubemap works ;-) Best regards from Germany.
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)
This has a lot more to do with web servers than Pannellum. However, I did write something for doing this: https://mpetroff.net/2015/09/an-efficient-method-of-serving-many-small-files/.
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!
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
loadScenemethod to change the viewer’s scene to the appropriate panorama.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.
It’s a multiresolution panorama created from a full equirectangular image that’s ~26000px across. Here’s the page source: https://github.com/mpetroff/pannellum.org/blob/master/layouts/index.html