You are not logged in.

Image hotspot override - Close on click

andremc85

Beginner

  • "andremc85" started this thread

Posts: 4

  • Send private message

1

Monday, November 10th 2014, 2:46pm

Image hotspot override - Close on click

Hi folks,

I'm trying to create a hotspot that open an image like the example: http://krpano.com/tours/weingut/

But i can open multiple images and then they are overrided as the image above


Is there any way to simply close when another is clicked?
Didn find any topic in forum.

Thanks!

Alexey Tkachenko

Professional

Posts: 770

Location: Russian Federation

Occupation: Interpreting, Building virtual tours

  • Send private message

2

Monday, November 10th 2014, 4:05pm

Hi!

Check out Krpano download package: krpano 1.18/examples/xml-usage/flyout-hotspots/flyout-more-hotspots.xml.
Here is the exact code what you want.
Regards,

Alexey

andremc85

Beginner

  • "andremc85" started this thread

Posts: 4

  • Send private message

3

Tuesday, November 11th 2014, 1:06am

Thanks for the help

Actually i'm using not image hotspot
But hotspot to image

I'm not sure how the best way to integrate the code you gave me..
""

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
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105

  <hotspot name="spotpolygon75"
           visible="true"
           style="PolygonDefaultPolygonSpotStyle"
           descriptionid="spotpolygon75_description"
            onclick="showpic();"
           tooltip="spotpolygon75_tooltip"
           ath="-74.405156" atv="-7.717118"
		   pic="Imagem03"
           >
    <point ath="-83.268812" atv="-16.628462" />
    <point ath="-83.002383" atv="1.194226" />
    <point ath="-65.541501" atv="0.892388" />
    <point ath="-65.732176" atv="-15.957575" />
  </hotspot>
  <hotspot name="spotpolygon75" devices="flash" zorder="1"/>
  <hotspot name="spotpolygon75" devices="html5+desktop" zorder="3" zorder2="1"/>
  <hotspot name="spotpolygon75" devices="tablet|mobile" zorder2="1"/>
	  <!-- **** 2 **** -->
  <hotspot name="spotpolygon115"
           visible="true"
           style="PolygonDefaultPolygonSpotStyle"
           descriptionid="spotpolygon115_description"
            onclick="showpic();"
           tooltip="spotpolygon115_tooltip"
           ath="-72.109764" atv="-23.935150"
		   pic="imagem01"
           >
    <point ath="-78.173037" atv="-28.840006" />
    <point ath="-78.364221" atv="-28.593393" />
    <point ath="-78.473469" atv="-19.797534" />
    <point ath="-66.374235" atv="-19.030294" />
    <point ath="-66.128427" atv="-19.249505" />
    <point ath="-65.746058" atv="-27.689146" />
  </hotspot>
  <hotspot name="spotpolygon115" devices="flash" zorder="1"/>
  <hotspot name="spotpolygon115" devices="html5+desktop" zorder="3" zorder2="1"/>
  <hotspot name="spotpolygon115" devices="tablet|mobile" zorder2="1"/>

  <!-- **** 3 **** -->
  <hotspot name="spotpolygon116"
           visible="true"
           style="PolygonDefaultPolygonSpotStyle"
           descriptionid="spotpolygon116_description"
            onclick="showpic();"
           tooltip="spotpolygon116_tooltip"
           ath="-82.827676" atv="12.172363"
		   pic="Imagem02"
           >
    <point ath="-64.476429" atv="4.359404" />
    <point ath="-101.178923" atv="5.001048" />
    <point ath="-100.915957" atv="19.985322" />
    <point ath="-64.476429" atv="18.853009" />
  </hotspot>
  <hotspot name="spotpolygon116" devices="flash" zorder="1"/>
  <hotspot name="spotpolygon116" devices="html5+desktop" zorder="3" zorder2="1"/>
  <hotspot name="spotpolygon116" devices="tablet|mobile" zorder2="1"/>
  
  <!-- fly in a hotspot = show hotspot fixed at screen -->
	<action name="flyin">
		if(hotspot[%1].flying == 0.0, hotspot[%1].resetsize(); calc_flyout_size(%1); );
		if(hotspot[%1].oldscale === null, copy(hotspot[%1].oldscale, hotspot[%1].scale) );
		if(hotspot[%1].oldrx === null, copy(hotspot[%1].oldrx, hotspot[%1].rx) );
		if(hotspot[%1].oldry === null, copy(hotspot[%1].oldry, hotspot[%1].ry) );
		if(hotspot[%1].oldrz === null, copy(hotspot[%1].oldrz, hotspot[%1].rz) );
		set(hotspot[%1].enabled,true);
		set(hotspot[%1].visible,true);
		tween(hotspot[%1].alpha,  1.0);
		tween(hotspot[%1].flying, 1.0);
		tween(hotspot[%1].scale,  1.0);
		tween(hotspot[%1].rx, 0.0);
		tween(hotspot[%1].ry, 0.0);
		tween(hotspot[%1].rz, 0.0);
	</action>

	<!-- fly the hotspot out/back -->
	<action name="flyout">
		set(hotspot[%1].enabled,false);
		tween(hotspot[%1].alpha,  0.0, 0.5, default, set(hotspot[%1].visible,false); );
		tween(hotspot[%1].flying, 0.0);
		tween(hotspot[%1].scale,  get(hotspot[%1].oldscale));
		tween(hotspot[%1].rx,  get(hotspot[%1].oldrx));
		tween(hotspot[%1].ry,  get(hotspot[%1].oldry));
		tween(hotspot[%1].rz,  get(hotspot[%1].oldrz));
	</action>

	<action name="showpic">
		<!-- creates a new hotspot and fly it out -->
		if(hotspot[get(pic)] === null,
			txtadd(picfilename,'%CURRENTXML%/spots/',get(pic),'.jpg');
			addhotspot(get(pic));
			getcenter(hsath,hsatv);
			copy(hotspot[get(pic)].ath, hsath);
			copy(hotspot[get(pic)].atv, hsatv);
			set(hotspot[get(pic)].visible,false);
			set(hotspot[get(pic)].distorted,true);
			set(hotspot[get(pic)].zorder,2);
			set(hotspot[get(pic)].scale,0.1);
			set(hotspot[get(pic)].alpha,0.0);
			set(hotspot[get(pic)].onloaded, flyin(get(name)) );
			set(hotspot[get(pic)].onclick, flyout(get(name)) );
			copy(hotspot[get(pic)].url,picfilename);
		,
			flyin(get(pic));
		);
	</action>



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
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108

<!-- use a <style> to share the same attriubtes for all hotspots -->
	<style name="flyoutimage"
	       distorted="true"
	       backup_rx="0"
	       backup_ry="0"
	       backup_rz="0"
	       backup_scale="0"
	       backup_zorder="0"
	       flying="0.0"
	       flystate="0"
	       onclick="if(flystate == 0, flyout_by_name(get(name)), flyback_by_name(get(name)) );"
	       />

	<hotspot name="spot1" style="flyoutimage"
	         url="image1.jpg"
	         zorder="1"
	         ath="45"
	         atv="54"
	         scale="0.5"
	         rx="-22.5" ry="-26.25" rz="-50.1"
	         />

	<hotspot name="spot2" style="flyoutimage"
	         url="image2.jpg"
	         zorder="2"
	         ath="60"
	         atv="54"
	         scale="0.5"
	         rx="-22.5" ry="-26.25" rz="-50.1"
	         />

	<hotspot name="spot3" style="flyoutimage"
	         url="image3.jpg"
	         zorder="3"
	         ath="75"
	         atv="58"
	         scale="0.5"
	         rx="-22.5" ry="-26.25" rz="-50.1"
	         />


	<!--
		flyout/flyback actions
		(for more stylish in/out animations play with different tweentypes and times)
	-->

	<action name="flyout_by_name">
		<!-- make all other hotspots flying back -->
		flyback_others();

		<!--
			for best control set 4 fly states:
			0 = normal
			1 = while flying out
			2 = out
			3 = while flying back
		-->

		<!-- save original position/rotation -->
		if(hotspot[%1].flystate == 0,
		    copy(hotspot[%1].backup_rx,     hotspot[%1].rx);
		    copy(hotspot[%1].backup_ry,     hotspot[%1].ry);
		    copy(hotspot[%1].backup_rz,     hotspot[%1].rz);
		    copy(hotspot[%1].backup_scale,  hotspot[%1].scale);
		    copy(hotspot[%1].backup_zorder, hotspot[%1].zorder);
		  );

		<!-- set new state -->
		set(hotspot[%1].flystate,1);
		set(hotspot[%1].zorder,99);

		<!-- tween the rotations values to 0 for a flat screen view -->
		tween(hotspot[%1].rx, 0);
		tween(hotspot[%1].ry, 0);
		tween(hotspot[%1].rz, 0);
		tween(hotspot[%1].scale, 1.5);

		<!--
			tween 'flying' to 1.0,
			this makes the hotspot independent from the panorama rotation and scaling
		-->
		tween(hotspot[%1].flying, 1.0, 0.5, default, set(hotspot[%1].flystate,2); );
	</action>


	<action name="flyback_by_name">
		if(hotspot[%1].flystate != 3,
			set(hotspot[%1].flystate,3);

			<!-- tween back to the stored backup values -->
			tween(hotspot[%1].rx,    get(hotspot[%1].backup_rx)    );
			tween(hotspot[%1].ry,    get(hotspot[%1].backup_ry)    );
			tween(hotspot[%1].rz,    get(hotspot[%1].backup_rz)    );
			tween(hotspot[%1].scale, get(hotspot[%1].backup_scale) );

			copy(hotspot[%1].zorder, hotspot[%1].backup_zorder);

			<!-- tween 'flying' also back to 0.0 -->
			tween(hotspot[%1].flying, 0.0, 0.5, default, set(hotspot[%1].flystate,0); );
		  );
	</action>


	<action name="flyback_others">
		for(set(i,0), i LT hotspot.count, inc(i),
			if(hotspot[%i].flystate GT 0, flyback_by_name(get(hotspot[get(i)].name)); );
		  );
	</action>

andremc85

Beginner

  • "andremc85" started this thread

Posts: 4

  • Send private message

4

Tuesday, November 11th 2014, 1:38am

Yeah, they work very different!

I'm already using onclick="showpic();" to show the image.
Tried to integrate both functions but without success.

Also the images are displayed much bigger than the stagewidth and stageheight.

Any advice will be great, I'm totally lost right now. Is this a demo limitation or lack of programming skills?

andremc85

Beginner

  • "andremc85" started this thread

Posts: 4

  • Send private message

5

Wednesday, November 12th 2014, 8:43pm

Please? Any advice, im not usign rx ry and rz positioning.

Its a polygonal hotspot.

Similar threads