Example/Tutorial - interactive area in the pano (aligned distorted hotspot)

  • One more code for animate set of frames with different size and positions. This code need to be modified if it's necessary to animate not one object.

    Action animate parameters:
    %1 - delay of delayedcall
    %2 - time in seconds for tween

  • Klaus:

    Very interesting example. But i ask myself, when a hotspot area is clearly marked. Can you use a mask to change the color of the original image or some other property that makes visible the hotspot ?. Without having to include another picture, with all the work involved.

    I guess that should be possible, but I'm not familiar enough with the possibilities of Krpano to know how to do it now.

    Maybe you or someone on the forum already has the answer for this.


  • Klaus:

    I found the solution by myself, using the following variable:


    I use the following code to achieve a superposition of a yellow area without border on the hotspot, as the cursor moves over it.
    borderwidth="0.0" borderwidthhover="0.0"
    borderalpha="0.0" borderalphahover="0.0"
    fillalpha="0.0" fillalphahover="0.2"

    Thanks anyway
    Best regards

    Edited once, last by fedaro (February 28, 2011 at 3:42 PM).

  • Thanks Clauss for this usefull howto! It work like a charm! Even for calculating ox,oy values :)

    To allow using distorded hotspots between two faces, I found a simple trick. Two distorded hotspots, one per face.

    Here is an example:
    First (on front face):

    Second (on down face):

    And then, you got this:

  • Hi all,

    i have a problem with this type of hotspot.
    I have one big hotspot to add but i can't figure the way to get the job done...
    Tiles are 3472 x 3472px and the hotspot to add is 3472 x 3472 and is, infact, a cubeface (CUBE2_r and CUBE2_r_hs).
    I tried to apply the calculation i read before from Klaus but the hotspot appears bigger and i can't align it. It is sheared or squeezed depending on the value i tried.

    What i'm tring to do is to overlap CUBE2_r_hs to its correspondant cubeface CUBE2_r.

    Any advice?

    Thank you very much

  • Well that tutorial is based by NOT having to use complete cubefaces.. so I'd crop everything that you don't possibly need redo the tutorial , I think you can also half size the hotspot to save some space and I don't think it affects the calculations.
    This is to not have this crazy sized hotspot.

    I'd recommend going through the tutorial with the example provided in the examples folder, so you are sure you are duplicating the results perfectly.

  • Hello guys,
    I have read the tutorial and made a panorama with this kind of hotspot. My question is does this work on Iphone and Ipad? It's urgent!

    since the latest version there is support for distorted hotspot, but there is no polygonal hotspot. So you cant have a exact hit area like this, it would be a the size of the hotspot you used. Alsoo distorted hotspots are a bit heavy (not tested on ipad, but if you have many in flash, it tends to go slow)

  • I'm trying to make a ikea-wooden-man move every x seconds, but I'm doing it wrong (and there should be a way to make it shorter). It kind of works (the image changes), but after the fifth change (i GT 6) it doesn't change in the right amount of time with the right order.

    Here is my code:

    I also want to stop the action on 'onout', how to do that? Then also the plugin has to get invisible:

    <action name="action_hidemannetje">

    I would really like some help with this. I read the above code, but I don't understand everything of it (what is for example %i?). Thanks in advance!

  • You could easily duplicate the polygonal hotspot behavior by making the shape in photoshop and then use the distorted hotspot tutorial to place it.

    Edit: maybe this shouldn't be classified as easy.. *unsure* reclassifying: doable

    But the list also says iPad doesn't support:

    Then, how to do this? Because if it's not possible to 'hide' a hotspot, it's not possible to make such an 'interactive area'?

    And about my post above: I still didn't manage to do this.

  • Hi,


    please don't mix up plugin.visible with plugin[name].visible !

    with "plugin.visible" the visibility of whole plugins layer can be changed, and that is currently not supported in krpanoJS, but the changing the attributes of the normal plugin or hotspot elements is possible of course,

    best regards,

  • I think I'm doing something wrong. When looking to the example above it's still possible to move the panorama when clicking on the car. I have huge interactive area's / hotspots and I still want to move my panorama by mouse, but I'm afraid I'm doing something wrong. It's not possible to move the panorama when I click on the interactive area.

    I have the following code:

    And on onstart, the action hotspot_data is executed.
    When deleting 'capture,false' from the action make_hotspots, there is no difference. What's going wrong? When comparing to https://krpano.com/examples/inter…ractivearea.xml, it looks like the same code to me.

Participate now!

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