mpetroff / pannellum

Pannellum is a lightweight, free, and open source panorama viewer for the web.
https://pannellum.org/
MIT License
4.15k stars 710 forks source link

hotspot behaviour on mobile devices #1158

Closed almarass1 closed 11 months ago

almarass1 commented 1 year ago

Hi, I have tried to use hotspots on mobile devices. As known, hovering is not applicable on mobile; if you want to read the hotspot associated text, you have to keep your finger on the hotspot, but when you stop the hotspot associated action (open a new link, load another image,...) is immediately executed. Is it possible to, let's say, tap once in order to read the text and tap twice to execute the action? Or something like that?

Thanks, Alex

almarass1 commented 1 year ago

Hi, I succeeded in opening an alert window using clickHandlerFunc. Unfortunately I could not find any documentation. Is there any example to show how to properly use clickHandlerFunc?

Thanks, Alex

mpetroff commented 1 year ago

There isn't currently a full example for it, but the following code snippet should hopefully help:

function aCustomClickHandler(event, handlerArgs) {
    console.log(event, handlerArgs);
}

pannellum.viewer('panorama', {
    "type": "equirectangular",
    "panorama": "./examplepano.jpg",
    "hotSpots": [
        {
            "pitch": -0.9,
            "yaw": 144.4,
            "type": "info",
            "clickHandlerFunc": aCustomClickHandler,
            "clickHandlerArgs": "example string"
        }
    ]
});

When the hot spot is clicked, the click event itself followed by the string example string will be logged to the developer console. Instead of a string, you can pass whatever else you need, such as an array or object.

mpetroff commented 1 year ago

Is it possible to, let's say, tap once in order to read the text and tap twice to execute the action? Or something like that?

You seem to have the right idea. The way to do something like this would be to implement your own logic using clickHandlerFunc / clickHandlerArgs.

almarass1 commented 11 months ago

Hi, I succeeded in implementing a clickHandlerFunc/clickHandlerArgs to click once in order to read the text and tap twice to execute the action.

The text appears/disappears setting visibility visible/hidden in div.pnlm-tooltip span {visibility: visible !important;}. This setting causes all the hotspots text to appear/disappear.

Is it possible to make visible just the clicked hotspot text, letting all the others unchanged? Thanks, Alex