# 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:

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:

have fun

best regards,
Klaus

• impressive example
these calculations are true only for the <front url="pano_f.jpg"/>
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

• thanks michel and klaus
this is my inattention
wanted to quickly test
I repeat, an excellent example.

• Great post Klaus ! This is really exciting stuff - I can imagine a pirates treasure hunt panorama :) and all sort of other uses.

Many thanks for the continued inspiration and education.

Best wishes,

tom

• I'm just discovering this topic. Thanks for this wonderfull example !

I've a question : Does it works the same with multi res hotspot ? I've just have to use the original cube, make all the calcul, and then use the tiles ?

• I've a question : Does it works the same with multi res hotspot ? I've just have to use the original cube, make all the calcul, and then use the tiles ?

yes, of course
the calculated values itself are independent of the pano resolution

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 ?

• is this method compatible with spherical panoramas?

I wish my Blood was Blue

S.M.Taheri

• is this method compatible with spherical panoramas?

Hi, not this method works only for cube faces,

best regards,
Klaus

• 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).

• 0100011101101100011001010110100101100011 0110100000100000011010110110110001100001 0111010001110011011000110110100001110100 0110010101110100001011000010000001001010 0111010101101110011001110110010100101110 0010000001000101011000110110100001110100 0010000001101010011001010111010001111010 0111010000101110

• 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.

• Hi,

great work!

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

this limitation will be removed in the next release,
then you can use up to 99 parameters

best regards,
Klaus

## Participate now!

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