You are not logged in.

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

Dear visitor, welcome to krpano.com Forum. If this is your first visit here, please read the Help. It explains in detail how this page works. To use all features of this page, you should consider registering. Please use the registration form, to register here or read more information about the registration process. If you are already registered, please login here.

rey

Trainee

Posts: 48

Location: Tallinn, Estonia

Occupation: 360VR photographer

  • Send private message

21

Thursday, April 8th 2010, 11:04am

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

Source code

 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49

<krpano version="1.0.8" onstart="action(onstart);" >
    <action name="onstart">
        loadscene(scene1,null, MERGE);
    </action>
    <scene name="scene1" onstart="animate(3,0.3);">
        <image>
            <left  url="pano_l.jpg" />
            <front url="pano_f.jpg" />
            <right url="pano_r.jpg" />
            <back  url="pano_b.jpg" />
            <up       url="pano_u.jpg" />
            <down  url="pano_d.jpg" />
        </image>
        <hotspot name="hs1" url="frame1.jpg" style="set1" width="258.07899" height="325.40394" ox="-178.18671" oy="-75.85278" ath="0" atv="0" />
        <hotspot name="hs2" url="frame2.jpg" style="set1" width="258.07899" height="325.40394" ox="-178.18671" oy="-75.85278" ath="0" atv="0" />
        <hotspot name="hs3" url="frame3.jpg" style="set1" width="258.07899" height="325.40394" ox="-178.18671" oy="-75.85278" ath="0" atv="0" />
        <hotspot name="hs4" url="frame4.jpg" style="set1" width="258.07899" height="325.40394" ox="-178.18671" oy="-75.85278" ath="0" atv="0" />
        <hotspot name="hs5" url="frame5.jpg" style="set1" width="258.07899" height="325.40394" ox="-178.18671" oy="-75.85278" ath="0" atv="0" />
    
        <style name="set1"
             enabled="false" distorted="true" edge="lefttop" alpha="0.0"
           />
        <action name="animate">
            set(i, -1); delayedcall(%1, loop(%1,%2););
        </action>
        
        <action name="loop">
            inc(i);
            if (i EQ hotspot.count, 
                dec(i);
                set(hotspot[%i].alpha, 0);
                dec(i);
                set(hotspot[%i].alpha, 0);
                set(i, 0); 
            );
            hotspot_on(get(i),%2);
            if(i GT 1, 
                set(j, get(i));
                dec(j, 2);
                set(hotspot[%j].alpha, 0);
            );
            delayedcall(%1, loop(%1,%2););
        </action>
        
        <action name="hotspot_on">
            tween(hotspot[%1].alpha, 1.0 , %2);
        </action>  
    </scene>
</krpano>

bulp

Intermediate

Posts: 390

Location: Malaysia

  • Send private message

22

Tuesday, April 13th 2010, 8:32am

Tq Rey!!!!... *thumbsup*

michel

Professional

Posts: 1,153

Location: ANDORRA

Occupation: TV

  • Send private message

23

Wednesday, April 21st 2010, 8:51pm

Hi rey,

That's a great example *smile* . I particularly like this beautyfull bluesy vals *thumbup* . Thanks for sharing ;-) ...

SAlut.

fedaro

Beginner

Posts: 3

Location: Uruguay

Occupation: Professor at the University of the Republic

  • Send private message

24

Friday, February 25th 2011, 11:16am

Interactive area

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.

Greetings
Fernando

klaus.krpano

Administrator

  • "klaus.krpano" started this thread

Posts: 13,352

  • Send private message

25

Friday, February 25th 2011, 10:38pm

Hi,

you could use a normal polygonal hotspot to overlay the pano image with a single color...

best regards,
Klaus

fedaro

Beginner

Posts: 3

Location: Uruguay

Occupation: Professor at the University of the Republic

  • Send private message

26

Saturday, February 26th 2011, 10:27am

An example

Thanks for the quick reply. Could you give me an example of code to use? .
I understand that should be very easy, but I am new to this subject.

fedaro

Beginner

Posts: 3

Location: Uruguay

Occupation: Professor at the University of the Republic

  • Send private message

27

Monday, February 28th 2011, 3:00pm

Interactive area

Klaus:

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

fillcolorhover





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

Thanks anyway
Best regards
Fernando

This post has been edited 1 times, last edit by "fedaro" (Feb 28th 2011, 3:42pm)

martinlbb

Beginner

Posts: 11

Location: France

Occupation: Pro photographer

  • Send private message

28

Friday, June 10th 2011, 1:53pm

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:
http://www.martinloyer.fr/en/virtual-vis…ractive-sounds/
Reveal hidden or unreachable beauty: http://www.martinloyer.fr/en/

Ema

Beginner

Posts: 6

  • Send private message

29

Friday, December 30th 2011, 3:52pm

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
Ema
Ema has attached the following image:
  • img.jpg

sachagriffin

Master

Posts: 1,857

Occupation: Virtual Tours - Photography - Krpano developer

  • Send private message

30

Friday, December 30th 2011, 5:04pm

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.
KRPano Developer: Portfolio ::Gigapixel Tagging Solutions - Porfolio 2 :: Facebook :: Twitter :: reddit.com/r/VirtualTour

duke

Beginner

Posts: 11

  • Send private message

31

Sunday, January 8th 2012, 12:56pm

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!

Zephyr

Professional

Posts: 1,003

Location: Netherlands

Occupation: Web developer

  • Send private message

32

Tuesday, January 10th 2012, 3:48pm

Quoted from "duke"

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)

sachagriffin

Master

Posts: 1,857

Occupation: Virtual Tours - Photography - Krpano developer

  • Send private message

33

Tuesday, January 10th 2012, 4:29pm

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
KRPano Developer: Portfolio ::Gigapixel Tagging Solutions - Porfolio 2 :: Facebook :: Twitter :: reddit.com/r/VirtualTour

duke

Beginner

Posts: 11

  • Send private message

34

Wednesday, January 11th 2012, 12:29am

Thanks for the explanations! Looks like I'll avoid implementing these hotspots in the Ipad/Iphone panos for now.

maaike

Trainee

Posts: 143

  • Send private message

35

Tuesday, February 21st 2012, 3:02pm

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:

Source code

 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42

<action name="start_actions">
        set(i,1);
        set(j,2);
</action>

<action name="action_hotspot_mannetje">
        addhotspot(hs_mannetje_%1);
        set(hotspot[hs_mannetje_%1].width,141.3824057);
        set(hotspot[hs_mannetje_%1].height,208.7073609);
        set(hotspot[hs_mannetje_%1].edge,lefttop);
        set(hotspot[hs_mannetje_%1].ox,0.448833034);
        set(hotspot[hs_mannetje_%1].oy,222.6211849);
        set(hotspot[hs_mannetje_%1].ath,180);
        set(hotspot[hs_mannetje_%1].atv,0);
        set(hotspot[hs_mannetje_%1].enabled,false);
        set(hotspot[hs_mannetje_%1].visible,true);
        set(hotspot[hs_mannetje_%1].alpha,1.0);
        set(hotspot[hs_mannetje_%1].url,"images/mannetje%1_l.jpg");
        set(hotspot[hs_mannetje_%1].distorted,true);
        addhotspot(hs_mannetje_%2);
        set(hotspot[hs_mannetje_%2].enabled,false);
        set(hotspot[hs_mannetje_%2].visible,false);
        set(hotspot[hs_mannetje_%2].alpha,0.0);
</action>

<action name="action_mannetje">
        inc(i);
        inc(j);
        delayedcall(0.5, action_hotspot_mannetje(get(i),get(j)););
        delayedcall(1.0, if (mannetje_teller GT 6, set(i,1);set(j2,2));action_mannetje(););
</action>

<hotspot name="hs_me" 
                style="style_hit"
                 onclick="action(cv_text,head_me,me);"
                 onover="action_mannetje();"
                 onout="action_hidemannetje(get(i));"
                >
                <point ath="-178.7163" atv=" 31.3816" />
                <point ath="-178.4519" atv=" 31.4542" />
                etc
</hotspot>



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

Source code

 
1
2
3

<action name="action_hidemannetje">
        set(hotspot[hs_mannetje_%1].visible,false);
</action>



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!

maaike

Trainee

Posts: 143

  • Send private message

36

Monday, February 27th 2012, 1:00pm

Quoted from "sachagriffin"

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:
plugin/hotspot.visible
plugin/hotspot.enabled
plugin/hotspot.alpha

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.

klaus.krpano

Administrator

  • "klaus.krpano" started this thread

Posts: 13,352

  • Send private message

37

Monday, February 27th 2012, 5:47pm

Hi,

Quoted from "maaike"

plugin/hotspot.visible
plugin/hotspot.enabled
plugin/hotspot.alpha
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,
Klaus

maaike

Trainee

Posts: 143

  • Send private message

38

Monday, February 27th 2012, 5:48pm

Oh, oops. Thanks for your answer!

Time to get a tablet to try ;).

maaike

Trainee

Posts: 143

  • Send private message

39

Monday, May 14th 2012, 4:41pm

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:

Source code

 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39

<!--  name, url, ath, atv, width, height, ox, oy -->
<action name="make_hotspots">
        addhotspot(%1);
        set(hotspot[%1].url,%2);
        set(hotspot[%1].ath,%3);
        set(hotspot[%1].atv,%4);
        set(hotspot[%1].width,%5);
        set(hotspot[%1].height,%6);
        set(hotspot[%1].ox,%7);
        set(hotspot[%1].oy,%8);
        set(hotspot[%1].enabled,false);
        set(hotspot[%1].capture,false);
        set(hotspot[%1].zorder,1);
        set(hotspot[%1].distorted,true);
        set(hotspot[%1].alpha,0.0);
        set(hotspot[%1].edge,lefttop);
</action>

        <action name="hotspot_data">
                make_hotspots(deur_l,images/deur_l.jpg, -90,0, 287.3846153846, 797.5384615385, -500, -297.5384615385);  
                make_hotspots(deur_d,images/deur_d.jpg, 0,90, 1000, 360, -500, 140);    
                make_hotspots(deur_b,images/deur_b.jpg, 180,0, 904, 832.6153846, -404, -332.6153846);   
        </action>

        <hotspot name="deur_hit" style="style_hit" capture="false" onover="tween(hotspot[deur_l].alpha,1.0);tween(hotspot[deur_d].alpha,1.0);tween(hotspot[deur_b].alpha,1.0);" 
                onout="tween(hotspot[deur_l].alpha,0.0);tween(hotspot[deur_d].alpha,0.0);tween(hotspot[deur_b].alpha,0.0);" >
                <point ath="148.9349" atv="-23.2262" />
                <point ath="-152.2219" atv="-23.7786" />
                <point ath="-119.2797" atv="-13.2651" />
                <point ath="-119.0840" atv=" 27.2732" />
                <point ath="-141.6596" atv=" 40.5337" />
                <point ath="-144.8709" atv=" 39.1428" />
                <point ath="-162.6694" atv=" 43.9696" />
                <point ath="-162.6710" atv=" 46.7441" />
                <point ath="149.1927" atv=" 44.5628" />
                <point ath="149.3135" atv=" 44.6091" />
        </hotspot>

<style name="style_hit" capture="false" zorder="2" alpha="0" />


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 http://krpano.com/examples/interactivear…ractivearea.xml, it looks like the same code to me.

klaus.krpano

Administrator

  • "klaus.krpano" started this thread

Posts: 13,352

  • Send private message

40

Monday, May 14th 2012, 7:24pm

Hi,

Quoted from "maaike"

When deleting 'capture,false' from the action make_hotspots, there is no difference. What's going wrong?
please post the example - because without seeing the example it would be difficult to say why it works different...

best regards,
Klaus

Similar threads