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

  • Hi,

    Update - here an updated tutorial without 'hotspot-inside-cube-face-limitations':
    Example/Tutorial - Extract a Distorted Hotspot from any kind of Pano Image (with perfect pixel alignment)


    regarding to this request - How it is possible to gain effect in KRpano? - I have made this example:

    it shows a way - how to overlay the pano with a distorted hotspots, that shows a different state of the pano:

    Example: https://krpano.com/examples/interactivearea/
    XML: https://krpano.com/examples/inter…ractivearea.xml


    the xml code is very simple - the interactive area is just a distorted hotspot, which fades in and out on mouse hovering:

    XML:

    but the most difficult thing here, to get a perfect overlay, would be to find the correct position/size and rotation for the distorted hotspot,

    but there is an easy solution:

    • use cube faces
    • the changing area should be in one cube face
    • crop out the modified/different area out
    • important - note the position and size of the cropped area
    • then calculate the position and size for the hotspot:

      • some explanations first:

        • the internal space in krpano for distorted hotspots is 1000x1000
        • that means a hotspot with a size of 1000x1000 covers the same area like a cube face
      • now with the noted sizes about the cropped area the position and size of the hotspot can be calculated:

        • hotspot.width = area-width * 1000 / original-cubeface-width
        • hotspot.height = area-height * 1000 / original-cubeface-height
        • hotspot.ox = area-x * 1000 / original-cubeface-width - 500
        • hotspot.oy = area-y * 1000 / original-cubeface-height - 500
        • the "hotspot.edge" must be set to "lefttop" for these calculations
      • finally the ath/atv position of the hotspot must be set to move the hotspot to the correct cube face:
        here are the positions for the cube sides:

        • front: ath="0" atv="0"
        • right: ath="90" atv="0"
        • left: ath="-90" atv="0"
        • back: ath="180" atv="0"
        • up: ath="0" atv="-90"
        • down: ath="0" atv="+90"


    here these calculations on the example:

    the original image:

    the image with the different area:

    the cropped area: (which is the hotspot)

    the offset to the cropped area in the original image is: x=622 y=941 and the size: w=583 h=332

    the original cubeface size is 1900x1900

    hotspot.width = 583 * 1000 / 1900 = 306.842105
    hotspot.height = 332 * 1000 / 1900 = 174.736842
    hotspot.ox = 622 * 1000 / 1900 - 500 = -172.631578
    hotspot.oy = 941 * 1000 / 1900 - 500 = -4.736842


    these values in the xml:


    this would already work, the hotspot is now perfectly aligned to fit the original pano image,
    but if the mouse should interact with hotspot, the "area" where it should become active can be a problem,
    the hotspot is a rectangle (press TAB to see it) and will already get active when the mouse comes over the area of this rectangle,

    now - to limit the interactive area to a non-regular shape:

    • create a polygonal hotspot with the editor plugin
    • disable the distored hotspot (enabled="false")
    • hide the polygonal hotspot (alpha="0.0")
    • order the hotspots - e.g. image - zorder="1", polygonal - zorder="2"
    • in the onover/onout events of the polygonal fade in/out the image hotspot

    the hit area: (in the editor plugin)


    here the example and xml again:

    Example: https://krpano.com/examples/interactivearea/
    XML: https://krpano.com/examples/inter…ractivearea.xml

    have fun

    best regards,
    Klaus

  • impressive example *thumbsup*
    these calculations are true only for the <front url="pano_f.jpg"/> *huh*
    hotspot.width = 583 * 1000 / 1900 = 306.842105

    hotspot.height = 332 * 1000 / 1900 = 174.736842
    hotspot.ox = 662 * 1000 / 1900 - 500 = -172.631578
    hotspot.oy = 941 * 1000 / 1900 - 500 = -4.736842

    if I use hotspot in another image (<left url="pano_l.jpg"/>), the calculation is not correct

  • Hi mzaa,

    Quote

    if I use hotspot in another image (<left url="pano_l.jpg"/>), the calculation is not correct

    Perhaps here is the reason why:

    Quote

    "Quoted from KlausExample/Tutorial above"

    • finally the ath/atv position of the hotspot must be set to move the hotspot to the correct cube face:
      here are the positions for the cube sides:

      • front: ath="0" atv="0"
      • right: ath="90" atv="0"
      • left: ath="-90" atv="0"
      • back: ath="180" atv="0"
      • up: ath="0" atv="-90"
      • down: ath="0" atv="+90"

    Salut.

  • Hi,

    yes, michel is right!

    here more detailed explanation about that:

    • with - ath / atv - the "origin" point in the pano for the hotspot is set
    • the edge="lefttop" aligns the hotspot with its left top edge at this point
    • and with ox and oy the hotspot is "shifted" left(-)/right(+) and up(-)/down(+) away from this point

    best regards,
    Klaus

  • what do you use to get the co-ordinates ?
    I'd like a gui to select the area of the cube face to crop but I'd like to be able to type in the numbers manually to refine the position.
    I will probably try image magik to crop a bunch once I've got the coordinates but it would be nice to have a gui that I can type in the size of the crop and see it. Photoshop doesn't seem to do it.is only controlled by mouse ?

  • Using the technic described in this thread I tried to make an animated panorama, whose cube faces change every two seconds automatically. As the pano would have to reload when I'd use set(krpano.image.left.url), I decided to use hotspots as the carrier medium for the cubefaces. A-F are the different face sets. This is my code:

    Unfortunately, this code gets my browser to crash. So I wrote this:

    0100011101101100011001010110100101100011 0110100000100000011010110110110001100001 0111010001110011011000110110100001110100 0110010101110100001011000010000001001010 0111010101101110011001110110010100101110 0010000001000101011000110110100001110100 0010000001101010011001010111010001111010 0111010000101110

  • , which actually does the same: Crashing. I've been working half the day on it. I think I regrettably will have to kill myself if no one can help me.

    0100011101101100011001010110100101100011 0110100000100000011010110110110001100001 0111010001110011011000110110100001110100 0110010101110100001011000010000001001010 0111010101101110011001110110010100101110 0010000001000101011000110110100001110100 0010000001101010011001010111010001111010 0111010000101110

  • Quote

    the changing area should be in one cube face

    It's work in two cube face....

    Code
    <hotspot name="door1" url="door1.jpg" enabled="false" zorder="1" distorted="true" ath="-90" atv="0" width="470.526316" height="971.578947" edge="lefttop" ox="-13.6842105" oy="-471.578947" alpha="0.0" /> 
    <hotspot name="door2" url="door2.jpg" enabled="false" zorder="1" distorted="true" ath="0" atv="+90" width="304.736842" height="461.052632" edge="lefttop" ox="-500" oy="-453.157894" alpha="0.0" /> 
    ...onover="tween(hotspot[door1].alpha,1.0); tween(hotspot[door2].alpha,1.0)" onout="tween(hotspot[door1].alpha,0.0); tween(hotspot[door2].alpha,0.0);"...

    Edited once, last by weddy (March 14, 2010 at 5:30 PM).

  • http://www.360pano.eu/show/?id=419

    Action animate parameters:
    %1 - unique name
    %2 - name of hotspot images sequence. Can include path. Sequence in images name need to be started from 0.
    %3 - number of images in sequence
    %4 - delay of delayedcall
    %5 - time in seconds for tween
    %6 - ox
    %7 - oy
    %8 - width
    %9 - height

    NB! We find that action have limitation for 9 parameters only, so there's no way for define ath and atv

    You can call animate action for different sets.

Participate now!

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