Call the normal krpano actions in javascript krpano actions

Nikkben · February 15, 2024 at 12:59 PM

Hello everyone, maybe someone knows how to call the normal krpano actions in javascript krpano actions.
Here are the normal krpano actions:

Code

<action name="calculatedistance" scope="local" args="x1, y1, x2, y2"> pow(a, calc(x2-x1), 2); pow(b, calc(y2-y1), 2); set(global.distance, calc(sqrt(a+b))); </action>
<action name="gotoclosesthotspot" scope="local"> getclosesthotspot(); calc(closesths, hotspot[get(global.closesthsname)]); tween(view.tx, get(closesths.tx)); tween(view.tz, get(closesths.tz));  </action>
<action name="getclosesthotspot" scope="local"> set(lowestdistance, 100000); set(global.closesthsname, ""); for(set(i,0), i LE hotspot.count, inc(i), calc(hs, hotspot[get(i)]); if (hs.clickablehotspot == true, set (x1, get(hs.tx)); set (y1, get(hs.tz)); set (x2, get(caller.tx)); set (y2, get(caller.tz)); calculatedistance(get(x1), get(y1), get(x2), get(y2)); if(global.distance LT lowestdistance, set(lowestdistance, get(global.distance)); set(global.closesthsname, get(hs.name)); ); ); ); </action>
<action name="mouse_3d_click" scope="local">
    getclosesthotspot(); 
    calc(closesths, hotspot[get(global.closesthsname)]);
    tour_loadscene(get(closesths.linkedscene), null, MERGE|KEEPVIEW|KEEPMOVING, BLEND(1));
</action>

I want to call action "mouse_3d_click" in the function ondoubleclick() of javascript krpano actions. Here is the action itself:

ActionScript

<action name="mouse_3d_cursor" type="js" autorun="true" if="device.desktop"><![CDATA[
	
	var mouse3d = null;
	var normal = null;
	var normal_l = 100.0;
	var hit = null;
	var renderloop_id = null;
	
	krpano.have_mouse_3d_cursor = false;
	
	krpano.actions.add_mouse_3d_cursor = function()
	{
		krpano.have_mouse_3d_cursor = true;
	
		mouse3d = krpano.addhotspot("mouse3d_cursor","webgl");
		
		mouse3d.type = "text";
		mouse3d.width = mouse3d.height = 50;
		mouse3d.bgcolor = 0xFFFFFF;
		mouse3d.bgalpha = 0.5;
		mouse3d.bgroundedge = 25;
		mouse3d.css = "font-size:2px;"
		mouse3d.textalign = "center";
		mouse3d.distorted = true;
		mouse3d.depth = 0;
		mouse3d.enabled = false;
		mouse3d.oversampling = 3;
		
		normal = krpano.addhotspot("mouse3d_cursor_normal","webgl");
		normal.polyline = true;
		normal.bordercolor = 0xFFFFFF;
		normal.depth = 0;
		normal.enabled = false;
		
		renderloop_id = krpano.actions.renderloop( renderloop );

		krpano.events.addListener("ondoubleclick", ondoubleclick);
				
	}
	
	krpano.actions.remove_mouse_3d_cursor = function()
	{
		if (mouse3d)
		{
			mouse3d.remove();
			mouse3d = null;
		}
		
		if (normal)
		{
			normal.remove();
			normal = null;
		}
		
		if (renderloop_id)
		{
			krpano.actions.stoprenderloop(renderloop_id);
			renderloop_id = null;
		}
		
		krpano.events.removeListener("ondoubleclick", ondoubleclick);
		
		krpano.have_mouse_3d_cursor = false;
	}

	function ondoubleclick() // Enter an action "mouse_3d_click" here : 
	{
		
	}
			
	
	function renderloop()
	{
		if (krpano.hoveringelement)
		{
			mouse3d.alpha = normal.alpha = 0;
			hit = null;
		}
		else
		{
			hit = krpano.actions.screentodepth(krpano.mouse.x, krpano.mouse.y);
			
			if(hit)
			{
				mouse3d.alpha = 1;
			
				mouse3d.rx = hit.rx;
				mouse3d.ry = hit.ry;
				mouse3d.rz = hit.rz;

				mouse3d.tx = hit.x;
				mouse3d.ty = hit.y;
				mouse3d.tz = hit.z;
				
				mouse3d.rotationorder = "zxy";
				
				normal.alpha = 1;
				normal.points3d = [hit.x, hit.y, hit.z, hit.x + normal_l*hit.nx, hit.y + normal_l*hit.ny, hit.z + normal_l*hit.nz].join(",");
			}
			else
			{
				mouse3d.alpha = 0;
			}
		}
	}
		
]]></action>

Display More

kme · February 15, 2024 at 1:59 PM

Inside javascript, get the krpano object:

krpano = document.getElementById("krpanoSWFObject");
krpano = krpano.get("global")

Note: this is probably not needed inside an <action> as the krpano object will already be defined by krpano.

Then you can use krpano.call(), in your case

krpano.call("mouse_3d_click")

More info:

krpano.com - Documentation - Javascript Interface

krpano.com - Documentation - Plugin Interface

Nikkben · February 16, 2024 at 7:14 PM

Thank you very much for your help, but now another problem has come out. I used to have a regular floorspot on the floor:

Code

<hotspot name="floorspot" devices="mouse"
		type="image"
		url="skin/f001.svg"
		vcenter="true"
		width="150" height="150" scale="0.2"
		bgalpha="0.5" bgroundedge="100" bgborder="2 0x000000 1" 
		oversampling="2" mipmapping="true" zorder="1"
		distorted="true" depth="0" depthbuffer="true"
		torigin="world" rotationorder="xyz" rx="-90"
		capture="false" handcursor="false"
		autoalpha="true"
		floorheight_cm="155"
		onloaded="place_floorspot_at_mouse_pos();"
		onclick="floorspot_click()   "
		keep="true"
		/>

Display More

And this floorspot correctly performed the floorspot_click() function (the nearest hotspot to the click location is calculated, and a move occurs to it) :

Code

<action name="calculatedistance" scope="local" args="x1, y1, x2, y2"> pow(a, calc(x2-x1), 2); pow(b, calc(y2-y1), 2); set(global.distance, calc(sqrt(a+b))); </action>
<action name="getclosesthotspot" scope="local"> set(lowestdistance, 100000); set(global.closesthsname, ""); for(set(i,0), i LE hotspot.count, inc(i), calc(hs, hotspot[get(i)]); if (hs.clickablehotspot == true, set (x1, get(hs.tx)); set (y1, get(hs.tz)); set (x2, get(caller.tx)); set (y2, get(caller.tz)); calculatedistance(get(x1), get(y1), get(x2), get(y2)); if(global.distance LT lowestdistance, set(lowestdistance, get(global.distance)); set(global.closesthsname, get(hs.name)); ); ); ); </action>
<action name="floorspot_click" scope="local">
    getclosesthotspot(); 
    calc(closesths, hotspot[get(global.closesthsname)]);
    tour_loadscene(get(closesths.linkedscene), null, MERGE|KEEPVIEW|KEEPMOVING, BLEND(1));
</action>

Here is an example of hotspots:

Code

<style name="hotspot" type="text"  width="100" height="100" scale="1"   mipmapping="true" zorder="1" distorted="true" depth="0" depthbuffer="true" torigin="world"  capture="false" handcursor="false"  clickablehotspot="true" keep="true"/>

	<hotspot name="hotspot_001" style="hotspot" tx="-11820.78" ty="10.67" tz="8928.37" linkedscene="scene_M39_WT_001"/>
	<hotspot name="hotspot_002" style="hotspot" tx="-9649.45" ty="-58.51" tz="8928.37" linkedscene="scene_M39_WT_002"/>
	<hotspot name="hotspot_003" style="hotspot" tx="-7431.22" ty="-116.29" tz="8928.37" linkedscene="scene_M39_WT_003"/>

But when I added to the project mouse_3d_cursor.xml (I deleted the old floorspot) and prescribed the same floorspot_click action for it, as you suggested above :

Code

function ondoubleclick()
	{
		krpano.call("floorspot_click");
				
	}

With a double click, the logic of moving to the nearest hotspot from the click point disappeared somewhere, became incorrect. For example, it doesn't matter where you clicked, the movement always happens in one hotspot.
This is how it looks completely mouse_3d_cursor.xml:

Code

<krpano>

<action name="mouse_3d_cursor" type="js" autorun="true" if="device.desktop"><![CDATA[
	
	var mouse3d = null;
	var normal = null;
	var normal_l = 0;
	var hit = null;
	var renderloop_id = null;
	
	krpano.have_mouse_3d_cursor = false;
	
	krpano.actions.add_mouse_3d_cursor = function()
	{
		krpano.have_mouse_3d_cursor = true;
	
		mouse3d = krpano.addhotspot("mouse3d_cursor","webgl");
		
		mouse3d.type = "text";
		mouse3d.width = mouse3d.height = 50;
		mouse3d.bgcolor = 0xFFFFFF;
		mouse3d.bgalpha = 0.5;
		mouse3d.bgroundedge = 25;
		mouse3d.css = "font-size:2px;"
		mouse3d.textalign = "center";
		mouse3d.distorted = true;
		mouse3d.depth = 0;
		mouse3d.enabled = false;
		mouse3d.oversampling = 3;
		
		normal = krpano.addhotspot("mouse3d_cursor_normal","webgl");
		normal.polyline = true;
		normal.bordercolor = 0xFFFFFF;
		normal.depth = 0;
		normal.enabled = false;
		
		renderloop_id = krpano.actions.renderloop( renderloop );

		krpano.events.addListener("ondoubleclick", ondoubleclick);
		
		
	}
	
	krpano.actions.remove_mouse_3d_cursor = function()
	{
		if (mouse3d)
		{
			mouse3d.remove();
			mouse3d = null;
		}
		
		if (normal)
		{
			normal.remove();
			normal = null;
		}
		
		if (renderloop_id)
		{
			krpano.actions.stoprenderloop(renderloop_id);
			renderloop_id = null;
		}
		
		krpano.events.removeListener("ondoubleclick", ondoubleclick);
		
		krpano.have_mouse_3d_cursor = false;
	}

	function ondoubleclick()
	{
		krpano.call("floorspot_click");
				
	}
	
	
	
	function renderloop()
	{
		if (krpano.hoveringelement)
		{
			mouse3d.alpha = normal.alpha = 0;
			hit = null;
		}
		else
		{
			hit = krpano.actions.screentodepth(krpano.mouse.x, krpano.mouse.y);
			
			if(hit)
			{
				mouse3d.alpha = 1;
			
				mouse3d.rx = hit.rx;
				mouse3d.ry = hit.ry;
				mouse3d.rz = hit.rz;

				mouse3d.tx = hit.x;
				mouse3d.ty = hit.y;
				mouse3d.tz = hit.z;
				
				mouse3d.rotationorder = "zxy";
				
				normal.alpha = 1;
				normal.points3d = [hit.x, hit.y, hit.z, hit.x + normal_l*hit.nx, hit.y + normal_l*hit.ny, hit.z + normal_l*hit.nz].join(",");
			}
			else
			{
				mouse3d.alpha = 0;
			}
		}
	}
		
]]></action>
</krpano>

Display More

I can't figure out what the problem is.

kme · February 17, 2024 at 8:46 AM

The reason is that in the original example, the "onclick" is linked to the hotspot. Later, in the routines to calculate where to go to, there is an object used "caller".

set (x2, get(caller.tx));

More info on caller:

krpano.com - Documentation - XML Reference

The doubleclick is not bound to an object/hotspot, but is a global event, which does not hold the "caller" object and hence, the routine does not have enough information to calculate the positions and thus caller.tx will always return 0 or NaN.

Nikkben · February 17, 2024 at 9:52 AM

Shouldn't there be a solution so that mouse_3d_cursor also works like floorspot "onclick" when double-clicking?

Call the normal krpano actions in javascript krpano actions

Participate now!

Similar Threads

Using javascript exclusively