Image hotspot override - Close on click

andremc85 · November 10, 2014 at 2:46 PM

Hi folks,

I'm trying to create a hotspot that open an image like the example: https://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 · November 10, 2014 at 4:05 PM

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.

andremc85 · November 11, 2014 at 1:06 AM

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

Code

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

Display More

Code

<!-- 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>

Display More

andremc85 · November 11, 2014 at 1:38 AM

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 · November 12, 2014 at 8:43 PM

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

Its a polygonal hotspot.

Image hotspot override - Close on click

Participate now!

Users Viewing This Thread