Help with Adding Hotspots to Compare Panos Example in KRPano

huubao · September 27, 2024 at 4:52 AM

I’m using the latest example of Compare Panos on KRPano (https://krpano.com/releases/1.21/examples/#compare-panos), and I’m trying to add hotspots to both the before and after scenes separately. Since they are two different scenes, I thought this would be straightforward, but for some reason, the hotspots are not showing up. Everything related to the file paths is correct, but the hotspots just won’t work.

Has anyone encountered this issue or have any suggestions on how to fix it?

Thanks in advance!

huubao · September 27, 2024 at 4:55 AM

Code

<krpano>


	<!--
		Compare Panos Example
		- use krpano-layers for the pano-display and sync their view
		- any two kind of pano images can be used, multires, different resolutions
		- provide side-by-side / top-bottom / splitscreen / overlap-blending modes
		- a slider-control for the splitscreen
		- a blending-control for the overlap-mode
	-->

	<action name="skin_hotspotstyle_click" scope="local">
		if(isvalue(caller.linkedscene),
			copy(hs_linkedscene, caller.linkedscene);
			if(caller.linkedscene_lookat, txtsplit(caller.linkedscene_lookat, ',', hs_lookat_h, hs_lookat_v, hs_lookat_fov); );
			set(caller.enabled, false);
			skin_hidetooltips();
			if(caller.use3dtransition,
				skin_scene3dtransition(get(hs_linkedscene),get(caller.linkedscene_hoffset));
			  ,
				tween(caller.depth|caller.alpha|caller.oy|caller.rx, 4000|0.0|-50|-60, 0.5, default,
					skin_loadscene(get(hs_linkedscene), get(skin_settings.loadscene_blend));
					if(hs_lookat_h !== null, skin_lookat(get(hs_lookat_h), get(hs_lookat_v), get(hs_lookat_fov)); );
				);
			);
			skin_updatescroll();
		);
	</action>
	<style name="skin_hotspotstyle" url="skin/vtourskin_hotspot.png" edge="top" distorted="true" 
	tooltip="" linkedscene="" linkedscene_lookat="" linkedscene_hoffset="0" use3dtransition="false" 
	onclick="skin_hotspotstyle_click();" depth="1000" scale="0.5" onover.addevent="tween(scale,0.55);" 
	onout.addevent="tween(scale,0.5);" onloaded.addevent="skin_hotspotstyle_setup();" ondown="draghotspot();" />


	<!-- the two pano images to compare -->
	<scene name="before">
		<image>
			<preview url="panos/before.tiles/preview.jpg" />
			<cube url="panos/before.tiles/pano_%s.jpg" />
		</image>
		<hotspot name="spot1" style="skin_hotspotstyle" 
			tooltip="get:scene[scene_02].title" 
			ath="12.996" atv="24.169"
			linkedscene="scene_02" 
			onclick="scene3dtransition(scene_02);"
			scale="0.7" 
			onover.addevent="tween(scale,0.85);"
			onout.addevent="tween(scale,0.8);"
		/>
	</scene>

	<scene name="after">
		<image>
			<preview url="panos/after.tiles/preview.jpg" />
			<cube url="panos/after.tiles/pano_%s.jpg" />
		</image>
	</scene>
	...

Display More

ncarry · October 16, 2025 at 9:25 AM

Hello

Is there any tricks for this trouble ? I'm using compare pano, and hotspots still won’t work.

thanks

jeromebg · October 16, 2025 at 11:45 AM

One solution is to use includexml with hotspots in a separate xml file for example :

Code

    <action name="subkrpano_onloaded" type="js"><![CDATA[
        var subkrpano = caller.krpano;
        
        subkrpano.events.addListener("onnewpano", function(){ krpano.actions.invalidatescreen(); });
        
        function subkrpano_loadscene()
        {
            var scene_element = krpano.scene.getItem(caller.scene);
            if (scene_element)
            {
                subkrpano.actions.loadxml(('<krpano>' + scene_element.content  + '</krpano>'), "view.limitview=off&view.fovmin=0", "IMAGEONLY", "BLEND(0.5)");
                subkrpano.actions.includexml('%CURRENTXML%/hotspots.xml');
            }
            else
            {
                krpano.actions.error("scene not found: " + caller.scene); 
            }
        }
        
        // when changing the "scene" attribute, automatically load that scene
        krpano.addChangeListener(caller, "scene", subkrpano_loadscene);
        
        // load the startup scene now
        subkrpano_loadscene();
    ]]></action>

Display More

ncarry · October 16, 2025 at 12:35 PM

Thank you

it's working well

Participate now!