You are not logged in.

Dear visitor, welcome to krpano.com Forum. If this is your first visit here, please read the Help. It explains in detail how this page works. To use all features of this page, you should consider registering. Please use the registration form, to register here or read more information about the registration process. If you are already registered, please login here.

  • "360gradenfotografie" started this thread

Posts: 59

Location: Tilburg, The Netherlands

  • Send private message

1

Wednesday, October 30th 2019, 8:44am

Flying arrow pointing towards hotspot

I'm creating an arrow (hotspot[arrow]) that points to a hotspot (hotspot[cross]). Right now, using the code below, it looks like this:



The arrow should always be pointing to the center of the cross, but it doesn't. I guess I'm over complicating things in my code. So, do you have any suggestions how to approach this?

Thanks!

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
<hotspot name="cross" ath="102.017" atv="13.112" url="cross.png" distorted="true" scale="0.3" />

<hotspot name="arrow" edge="left" ath="0" atv="0" url="arrow.png>" distorted="true" scale="0.1" alpha="0.7" />

<events onviewchange="arrow()" />

<action name="arrow">

	if(view.hlookat != last_view_hlookat OR view.vlookat != last_view_vlookat,
		
		copy(last_view_hlookat, view.hlookat);
		copy(last_view_vlookat, view.vlookat);


		mod(cross_ath,hotspot[cross].ath,360);
		add(cross_ath,360);
		mod(cross_ath,360);

		mod(hlookat,view.hlookat,360);
		add(hlookat,360);
		mod(hlookat,360);

		sub(residue,hlookat,cross_ath);

		copy(cross_atv,hotspot[cross].atv);
		copy(vlookat,view.vlookat);
		sub(vdiff,cross_atv,vlookat);
		div(vdiff,90);

		if((hlookat GT cross_ath) AND residue LT 180,
			
			set(rot,0);
			Math.abs(residue);
			sub(residue,180,residue);
			div(residue,2);
			mul(vdiff,residue);

			sub(rot,vdiff);
			,

			if(residue GT 180,
				sub(residue,360);
			);

			set(rot,180);
			Math.abs(residue);
			sub(residue,180,residue);
			div(residue,2);
			mul(vdiff,residue);

			add(rot,vdiff);
		);

		set(hotspot[arrow].rotate,get(rot));

		set(hotspot[arrow].ath,get(hlookat));
		set(hotspot[arrow].atv,get(vlookat));

	);

</action>

  • "360gradenfotografie" started this thread

Posts: 59

Location: Tilburg, The Netherlands

  • Send private message

2

Wednesday, October 30th 2019, 4:59pm

I found a approach: There's a excellent tutorial on how to calculate bearing and distance from one point to another on the globe. Using longitues and latitudes. I'll take those scripts as inspiration *thumbup*

https://www.movable-type.co.uk/scripts/latlong.html

light_line

Trainee

Posts: 92

Occupation: krpano freelancer || creating ideas & coding them || krpano developer

  • Send private message

3

Thursday, October 31st 2019, 10:06am

Hi,
can you share the final code with us?

  • "360gradenfotografie" started this thread

Posts: 59

Location: Tilburg, The Netherlands

  • Send private message

4

Thursday, November 21st 2019, 1:51pm

Hi,
can you share the final code with us?

Sure!

I added this JS function to the page krpano is embedded on:

Source code

1
2
3
4
5
6
7
8
9
10
function bearing(hlookat,vlookat,ath,atv) {
	const phi_1 = vlookat * ( Math.PI / 180 );
	const phi_2 = atv * ( Math.PI / 180 );
	const delta_lambda = (ath - hlookat) * ( Math.PI / 180 );
	const x = Math.cos(phi_1) * Math.sin(phi_2) - Math.sin(phi_1) * Math.cos(phi_2) * Math.cos(delta_lambda);
	const y = Math.sin(delta_lambda) * Math.cos(phi_2);
	const theta = Math.atan2(y, x);
	const bearing = theta * (180/Math.PI);
	return -bearing;
}


... and accessed the function in krpano this way:

Source code

1
2
3
4
5
6
7
8
9
<events onviewchange="arrow()" keep="true" />

<action name="arrow">

	txtadd(jsget_bearing,'bearing(',get(view.hlookat),',',get(view.vlookat),',',get(hotspot[get(global.point_to)].ath),',',get(hotspot[get(global.point_to)].atv),')');
	jsget(bearing, get(jsget_bearing) );
	set(hotspot[arrow].rotate,get(bearing));

</action>


Cheers

5

Friday, November 22nd 2019, 7:09am

thanks *thumbsup*
This code I made in krpano without JS:

Source code

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<events onviewchange="arrow_rotate(target, arrow)" keep="true" />

<action name="arrow_rotate" scope="local" args="target, arrow"> 
	calc(phi_1,global.view.vlookat * ( Math.PI / 180 ) ); 
	calc(phi_2, global.hotspot[get(target)].atv * ( Math.PI / 180 ));
	calc(delta_lambda, (global.hotspot[get(target)].ath - global.view.hlookat) * ( Math.PI / 180 ));
	Math.cos(cos1,get(phi_1));  
	Math.sin(sin,get(phi_2));
	Math.sin(sin2,get(phi_1));
	Math.cos(cos2,get(phi_2));
	Math.cos(cos3,get(delta_lambda));
	Math.sin(sin3,get(delta_lambda));
	calc(x, cos1 * sin - sin2 * cos2 * cos3 );  
	calc(y, sin3 * cos2); 
	Math.atan2(theta,y, x);
	calc(bearing, -1 * theta * (180/Math.PI) + 180);  
	set(global.hotspot[get(arrow)].rotate,get(bearing));
</action>
	

This post has been edited 3 times, last edit by "San7" (Nov 22nd 2019, 9:59am)


light_line

Trainee

Posts: 92

Occupation: krpano freelancer || creating ideas & coding them || krpano developer

  • Send private message