Custom Hotspot

[zeleamaaa]

I want to customize the hotspot display. When I saw several issues that had been discussed, it was suggested to use "clickhandlerfunc" but I was confused about where to apply it. Can you help me solve this problem, I want to change the "info" type hotspot view from just showing text to a card like view in bootstrap that can contain title, image and content? Below is the program that I have created

//PannellumViewer.js
import React, { useEffect } from 'react';
import { pannellum } from './pannellum';
import panoramaData from './PanoramaData';

const PanoramaViewer = ({ sceneId }) => {
  useEffect(() => {
    const viewer = pannellum.viewer('panorama', {
      default: {
        firstScene: "main",
        autoLoad: true,
      },
      scenes: {
        ...Object.keys(panoramaData).reduce((acc, key) => {
          acc[key] = {
            type: 'equirectangular',
            panorama: panoramaData[key].image,
            hotSpots: panoramaData[key].hotSpots,
          };
          return acc;
        }, {}),
        },
      controls: [
        'scene',
        'hotspots',
      ],
    });

    return () => {
      viewer.destroy();
    };
  }, [sceneId]);

  return <div id='panorama' style={{ width: '100%', height: '680px' }}></div>;
};

export default PanoramaViewer;

//PanoramaData.js
const panoramaData = {
  main: {
    image: "https://pannellum.org/images/alma.jpg",
    hotSpots: [
      {
        pitch: 20,
        yaw: 30,
        type: "scene",
        text: "change to scene 2",
        sceneId: "second",
      },
      {
        pitch: 0,
        yaw: 100,
        type: "info",
        text: "Description",
      },
    ],
  },
  second: {
    image: "https://pannellum.org/images/jfk.jpg",
    hotSpots: [
      {
        pitch: 20,
        yaw: 30,
        type: "scene",
        text: "change to scene 1",
        sceneId: "main",
      },
      {
        pitch: 0,
        yaw: 100,
        type: "info",
        text: "Description 2",
      },
    ],
  },
};

export default panoramaData;

[mpetroff]

You would start by defining your click handler function, e.g.:

function yourClickHandler(evt, args) {
    // Your logic goes here
    // `evt` is the click event
    // `args` is the contents of `clickHandlerArgs`
}

You'd then set it for your hot spot, e.g.:

    hotSpots: [
      {
        pitch: 0,
        yaw: 100,
        type: "info",
        clickHandlerFunc: yourClickHandler,
        clickHandlerArgs: "yourReferenceKey"
      },
    ],

This example sets clickHandlerArgs to a string, but it could be an object or anything else you need as input to your click handler.

[zeleamaaa]

You would start by defining your click handler function, e.g.:

function yourClickHandler(evt, args) {
    // Your logic goes here
    // `evt` is the click event
    // `args` is the contents of `clickHandlerArgs`
}

You'd then set it for your hot spot, e.g.:

    hotSpots: [
      {
        pitch: 0,
        yaw: 100,
        type: "info",
        clickHandlerFunc: yourClickHandler,
        clickHandlerArgs: "yourReferenceKey"
      },
    ],

This example sets clickHandlerArgs to a string, but it could be an object or anything else you need as input to your click handler.

Is this still possible if the image data is in a different file as above? Can you provide an example for writing the function? Sorry in advance because I'm just learning this

[mpetroff]

Is this still possible if the image data is in a different file as above?

As long as your click handler is a valid function when you define your configuration, it shouldn't matter.

Can you provide an example for writing the function?

I already provided an example function skeleton. Anything beyond that is specific to your application, so I don't know what you expect me to provide.