Sie sind nicht angemeldet.

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

Lieber Besucher, herzlich willkommen bei: krpano.com Forum. Falls dies Ihr erster Besuch auf dieser Seite ist, lesen Sie sich bitte die Hilfe durch. Dort wird Ihnen die Bedienung dieser Seite näher erläutert. Darüber hinaus sollten Sie sich registrieren, um alle Funktionen dieser Seite nutzen zu können. Benutzen Sie das Registrierungsformular, um sich zu registrieren oder informieren Sie sich ausführlich über den Registrierungsvorgang. Falls Sie sich bereits zu einem früheren Zeitpunkt registriert haben, können Sie sich hier anmelden.

rey

Schüler

Beiträge: 48

Wohnort: Tallinn, Estonia

Beruf: 360VR photographer

  • Nachricht senden

21

Donnerstag, 8. April 2010, 11:04

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

Quellcode

 
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

Fortgeschrittener

Beiträge: 390

Wohnort: Malaysia

  • Nachricht senden

22

Dienstag, 13. April 2010, 08:32

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

michel

Profi

Beiträge: 1 153

Wohnort: ANDORRA

Beruf: TV

  • Nachricht senden

23

Mittwoch, 21. April 2010, 20:51

Hi rey,

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

SAlut.

fedaro

Anfänger

Beiträge: 3

Wohnort: Uruguay

Beruf: Professor at the University of the Republic

  • Nachricht senden

24

Freitag, 25. Februar 2011, 11:16

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« ist der Autor dieses Themas

Beiträge: 13 499

  • Nachricht senden

25

Freitag, 25. Februar 2011, 22:38

Hi,

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

best regards,
Klaus

fedaro

Anfänger

Beiträge: 3

Wohnort: Uruguay

Beruf: Professor at the University of the Republic

  • Nachricht senden

26

Samstag, 26. Februar 2011, 10:27

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

Anfänger

Beiträge: 3

Wohnort: Uruguay

Beruf: Professor at the University of the Republic

  • Nachricht senden

27

Montag, 28. Februar 2011, 15:00

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

Dieser Beitrag wurde bereits 1 mal editiert, zuletzt von »fedaro« (28. Februar 2011, 15:42)

martinlbb

Anfänger

Beiträge: 11

Wohnort: France

Beruf: Pro photographer

  • Nachricht senden

28

Freitag, 10. Juni 2011, 13:53

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

Anfänger

Beiträge: 6

  • Nachricht senden

29

Freitag, 30. Dezember 2011, 15:52

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« hat folgendes Bild angehängt:
  • img.jpg

sachagriffin

Meister

Beiträge: 1 857

Beruf: Virtual Tours - Photography - Krpano developer

  • Nachricht senden

30

Freitag, 30. Dezember 2011, 17:04

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

Anfänger

Beiträge: 11

  • Nachricht senden

31

Sonntag, 8. Januar 2012, 12:56

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

Profi

Beiträge: 1 003

Wohnort: Netherlands

Beruf: Web developer

  • Nachricht senden

32

Dienstag, 10. Januar 2012, 15:48

Zitat von »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

Meister

Beiträge: 1 857

Beruf: Virtual Tours - Photography - Krpano developer

  • Nachricht senden

33

Dienstag, 10. Januar 2012, 16:29

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

Anfänger

Beiträge: 11

  • Nachricht senden

34

Mittwoch, 11. Januar 2012, 00:29

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

maaike

Schüler

Beiträge: 143

  • Nachricht senden

35

Dienstag, 21. Februar 2012, 15:02

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:

Quellcode

 
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:

Quellcode

 
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

Schüler

Beiträge: 143

  • Nachricht senden

36

Montag, 27. Februar 2012, 13:00

Zitat von »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« ist der Autor dieses Themas

Beiträge: 13 499

  • Nachricht senden

37

Montag, 27. Februar 2012, 17:47

Hi,

Zitat von »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

Schüler

Beiträge: 143

  • Nachricht senden

38

Montag, 27. Februar 2012, 17:48

Oh, oops. Thanks for your answer!

Time to get a tablet to try ;).

maaike

Schüler

Beiträge: 143

  • Nachricht senden

39

Montag, 14. Mai 2012, 16:41

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:

Quellcode

 
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« ist der Autor dieses Themas

Beiträge: 13 499

  • Nachricht senden

40

Montag, 14. Mai 2012, 19:24

Hi,

Zitat von »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

Ähnliche Themen