Pannellum: Play sound on hot spot hover?

[epignosis567]

Hi. Is it possible to play a looping sound when a user hovers over a hot spot? I don't see anything in the documentation and I've searched through google and here but found nothing.

[epignosis567]

Could I just change the clickHandlerFunc/clickHandlerArgs to a mouseOverHandlerFunc/mouseOverHandlerArgs in the minified .js file?
Or better yet is there a way for me to copy the clickHandlerFunc and create a whole new mouseOverHandlerFunc in order to have both? (And also a mouseLeaveHandlerFunc...etc...)

I'm really enjoying exploring Pannellum btw. What a great service thank you!

EDIT: I was able to swap the clickHandlerFunc's "click" (in the minified js) with "mouseover" and it seemed to work fine.
However, when I tried to duplicate what I thought was the bit of clickHandlerFunc/clickHandlerArgs code in order to create a new mouseOverHandlerFunc/mouseOverHandlerArgs I definitely broke something. I got an error telling me that a return in the last line of code was causing problems, "Unexpected token return". I'm still learning coding some I'm unable to diagnose what the problem/solution is.

[mpetroff]

What you've suggested will work. If you want to add the functionality without modifying the existing code, you can use createTooltipFunc parameter. The first parameter passed to the function is the hot spot <div>, so you can add a mouseover handler to it in the custom function. The custom hot spots example shows usage of this parameter, although not the addition of a event handler.

[epignosis567]

Thanks! I think I understand. This might be beyond my abilities but I'll work on it. Ideally I would like to maintain all the functionality that you've built in and just add a mouseOverHandlerFunc/mouseOverHandlerArgs function as well. Is that possible? Is that what you're explaining here, or that I should convert the createTooltipFunc to a mouseOverHandlerFunc?

[mpetroff]

I was suggesting something along the lines of the following (untested) code snippet, which is based on the custom hot spots example:

viewer = pannellum.viewer('panorama', {
    ...
    "hotSpots": [
        {
            "pitch": 10.0,
            "yaw": 10.0,
            "type": "info",
            "createTooltipFunc": hotspot,
            "createTooltipArgs": "Your hot spot text"
        }
    ]
});

function hotspot(hotSpotDiv, args) {
    hotSpotDiv.classList.add('pnlm-tooltip');
    hotSpotDiv.appendChild(span);
    span.style.width = span.scrollWidth - 20 + 'px';
    span.style.marginLeft = -(span.scrollWidth - div.offsetWidth) / 2 + 'px';
    span.style.marginTop = -span.scrollHeight - 12 + 'px';

    hotSpotDiv.addEventListener('mouseover', your_mouseover_func, 'false');
}

The tooltip function sets up the tooltip the same way Pannellum's default code does, but it also adds a mouseover event listener to the hot spot.

[epignosis567]

Thanks, I'm working on this. Here's what I don't understand: isn't there already a mouseover listener somewhere? Doesn't the default createTooltipFunc use a mouseover listener to make the hotspot popup and be visible? Can I not just tap into that somewhere? Sorry if this is a stupid question I'm still learning!

[mpetroff]

The tooltip is displayed using the CSS :hover selector. There's no JavaScript involved in showing it.

[epignosis567]

Right! Thank you! This all makes sense. I have more questions about other things, but this is great! I’ll do some more exploring first.

EDIT: sorry, last question on this. What is the ‘false’ for?

[mpetroff]

In addEventListener? It's the useCapture parameter. As false is the default in all current browsers, including the parameter is optional. In older browsers it was not optional, so I always include it out of habit. See the MDN addEventListener documentation.

[epignosis567]

Ah, ok thank you.