Overlay an image in a polygonal hotspot

  • Hi,

    I'm new to the KRPano stuff and wonder whether the following use case is possible.

    I want to define a polygonal hotspot and embed an image into it (image overlay). Taking an example from the krpano download, in the demotour-weingut virtual tour, there are a couple paintings on the wall which are polygonal hotspots, when clicked, a 2D image will popup. Is it possible to show that 2D image in the polygonal area within the panorama scene. And if the polygon is in irregular shape (not square or rectangular), image needs to be stretched (with distortion) to fit into the polygonal area. Can this be done? If so, how?

    Thanks,

  • Hi,

    that would be possible using using a 'distorted hotspot' and using the rx, ry, rz rotation values to rotate the hotspot in 3d space,

    e.g. try using the editor plugin for that, there you can drag and rotate the hotspots by mouse,

    an automatic aligned of a distorted hotspot inside 4 point coordinates is currently not possible,

    best regards,
    Klaus

  • Hi,

    you have tried enabling the hotspot distortion and the rotation?
    finding a correct alignment is difficult this way, but it should be possible,

    but if you mean that:

    Quote

    an automatic aligned of a distorted hotspot inside 4 point coordinates

    this is currently not possible.

    best regards,
    Klaus

  • Klaus,

    First of all, thanks a lot for your patience answering all my questions. I still have questions that need to be clarified if you don't mind.

    Quote

    you have tried enabling the hotspot distortion and the rotation?

    Could you please show me how? I couldn't find any documentation on the editor plugin in the following page: https://krpano.com/plugins/editor/#top
    Is the documentation somewhere else?

    Quote

    an automatic aligned of a distorted hotspot inside 4 point coordinates is currently not possible,

    I'm not sure what "automatic" means here so I don't know whether we are talking about the same thing. What I need to achieve is:
    1. After drawing a polygonal hotspot in the edit mode, I want to embed an image into the hotspot area. I don't know how to embed the image, the editor plugin example page doesn't have this option.
    https://krpano.com/examples/10814…ns-plugins.html
    2. Once the hotspot is defined, if I go back to the edit mode, I want to be able to drag and move individual vertices of the polygon to change the shape of the polygon. And when I'm done with moving vertices. I would like to have the embedded image re-drawn to fill up the new polygonal area. If the polygon is irregular (not rectangular), the image needs to be distorted to fill up the area. I don't need the image to update in real time when I'm moving a vertex. Only a redraw afterwards is sufficient.

    So is this possible?

    Also, there're a few things in the editor online example which don't seem to work for me (I'm using a Mac and I've tried both chrome and firefox). Am I doing something wrong?
    1. In edit mode, I can't click a point and move it as the instruction says. Nothing happens when I tried that.
    2. In edit mode, I can't double click a point and delete that point. Well, it seems that the points got deleted, just that the page doesn't refresh. If I double click to create a new hotspot, the deleted points in the old polygonal hotspot will be gone.
    3. Out of the edit mode, The "rotate XY", "rotate Z" and "distortion" don't do anything for me. I clicked on the hotspot first. While keep my mouse button down, I pressed the space, R or D key and dragged the hotspot around. But I don't see any difference versus the effect when I simply click and drag the hotspot around without pressing any keys.

    Thanks,
    Quan

  • Hi,

    1. After drawing a polygonal hotspot in the edit mode, I want to embed an image into the hotspot area.

    that's not possible.


    The only thing that would work yet, is:

    1. click [editor]
    2. click [hotspots]
    3. click [add image hotspot]
    4. select the image you want to display
    5. click that image and hold the mouse button down
    6. press the 'D' key on the keyboard to switch the hotspot to distorted mode
    7. move the hotspot around to place it
    8. hold the SPACE bar down while dragging to rotate the hotspot around the X/Y axis
    9. hold the 'R' key down while dragging to rotate the hotspot around the Z axis
    10. press CTRL or SHIFT during dragging to change the scale of the hotspot


    Best regards,
    Klaus

  • I see. Thank you so much for your detailed explanation!

    Hi,

    that's not possible.


    The only thing that would work yet, is:

    1. click [editor]
    2. click [hotspots]
    3. click [add image hotspot]
    4. select the image you want to display
    5. click that image and hold the mouse button down
    6. press the 'D' key on the keyboard to switch the hotspot to distorted mode
    7. move the hotspot around to place it
    8. hold the SPACE bar down while dragging to rotate the hotspot around the X/Y axis
    9. hold the 'R' key down while dragging to rotate the hotspot around the Z axis
    10. press CTRL or SHIFT during dragging to change the scale of the hotspot


    Best regards,
    Klaus

  • Did you guys able to solve that ... Over laying an image in between 4 or more points.
    Adding image hot spot is not a good solution because :
    1. once you start zooming in or out it got disturbed.
    2. its never so easy to keep image under exact position as we can do easily in polygons.

    Any one Got succeeded in doing so.

    Regards
    ADeeL Sadaqat *confused*

Participate now!

Don’t have an account yet? Register yourself now and be a part of our community!