Sie sind nicht angemeldet.

Tuur

Erleuchteter

  • »Tuur« ist der Autor dieses Themas

Beiträge: 3 839

Wohnort: Netherlands

Beruf: Krpano custom coding / Virtual Tours / Photography / Musician / Recording engineer

  • Nachricht senden

1

Mittwoch, 11. Oktober 2023, 13:01

removeListener

Hi,

I have a question about how to use the events.removeListener
( https://krpano.com/docu/actions/#events.removeListener )

I made a bare bone example to find out.
https://www.virtualtuur.com/krpano/121/b…no/1/index.html

xml
https://www.virtualtuur.com/krpano/121/b…pano/1/tour.xml

so, the problem/issue is the focus of the onviewchanged event. I like when I 'ondown' on the red pano, that the main and green pano turn along. When I 'ondown' the green pano I want to release/remove the onviewchanged event listener of the red and the main pano..
I seem not to be able to remove the listeners as you can see in the log.

It is easy and straight forward when you use separate xml's for each pano, I have that already.
I wonder what I am doing wrong here.

Tuur *thumbsup*

2

Mittwoch, 11. Oktober 2023, 22:57

Hi,

sorry, but I don't understand your intention in your example,
but your removeListener usage is wrong!

The removeListener function would need to be called with the SAME function that was used in addListener.

Try to think this way:
- addListener can be called multiple times and with different functions.
- So to remove the assigned function, it also need to be called with the function that should be removed.

Best regards,
Klaus

Tuur

Erleuchteter

  • »Tuur« ist der Autor dieses Themas

Beiträge: 3 839

Wohnort: Netherlands

Beruf: Krpano custom coding / Virtual Tours / Photography / Musician / Recording engineer

  • Nachricht senden

3

Mittwoch, 11. Oktober 2023, 23:40

Hi Klaus,

Quoted

sorry, but I don't understand your intention in your example,


when you turn one of the three panos I want the other two to be 'slaves'.
So, when you ondown one of them I want the others to have no onviewchanged and copy the looks to them.
I am investigating some different methodes, this one breaks my head.

Quoted

Try to think this way:
- addListener can be called multiple times and with different functions.
- So to remove the assigned function, it also need to be called with the function that should be removed.


I tried changing it and fiddling but it seems to make no difference.. can't get it.
EDIT: code changed.. still not successful.

Tuur *thumbsup*

Dieser Beitrag wurde bereits 1 mal editiert, zuletzt von »Tuur« (12. Oktober 2023, 00:39)


Tuur

Erleuchteter

  • »Tuur« ist der Autor dieses Themas

Beiträge: 3 839

Wohnort: Netherlands

Beruf: Krpano custom coding / Virtual Tours / Photography / Musician / Recording engineer

  • Nachricht senden

4

Donnerstag, 12. Oktober 2023, 10:11

Can't get it.. (sleepless night)
Should i conclude removeListener is broken, or somebody tell me what i am doing wrong here and comes up with a solution.
I really like to do all this from one xml, instead of the working version i have using for each pano it's own xml.

Tuur *thumbsup*

5

Donnerstag, 12. Oktober 2023, 11:13

Quoted

(sleepless night)
*g*
untested, but a good chance ....

Source code

1
2
3
4
5
6
7
8
if(kr == 2){
	krpano2.events.removeListener('onviewchanged', sync1);
	...
}
if(kr == 3){
	krpano3.events.removeListener('onviewchanged', sync1);
	...
}

Tuur

Erleuchteter

  • »Tuur« ist der Autor dieses Themas

Beiträge: 3 839

Wohnort: Netherlands

Beruf: Krpano custom coding / Virtual Tours / Photography / Musician / Recording engineer

  • Nachricht senden

6

Donnerstag, 12. Oktober 2023, 11:26

mm. I don't get it..

I think I already have that... or?
you say:

Source code

1
2
3
4
if(kr == 2){
	krpano2.events.removeListener('onviewchanged', sync1);
	...
}

But if kr == 2 so the red pano is being controlled I want to add the listener there and remove the other 2
krpano2 = v2 in my example:

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
    <scene name="scene_1" title="a1" onstart="showlog();"  autoload="true">
		<preview type="grid(cube,64,64,512,0x666666,0x333333,0x333333);" details="16"/>
		<view hlookat="0" limitview="off"  fovmax="140" fovmin="70"  />
	</scene>

	<layer name="p2" keep="true" type="krpano"  align="lefttop" preload="true" x="0" width="300" height="300" bgcolor="0x000000" bgalpha="1" alpha="1" ondown="DoSync(2)"  />
	<layer name="p3" keep="true" type="krpano"  align="righttop" preload="true" x="0" width="300" height="300" bgcolor="0x000000" bgalpha="1" alpha="1" ondown="DoSync(3)" onloaded="Do();" />

	
    <action name="Do" type="Javascript"><![CDATA[
		var krpano2 = krpano.get("layer[p2]").krpano;
		var krpano3 = krpano.get("layer[p3]").krpano;
		krpano2.image.reset();
		krpano2.preview = {
		  type : "grid(cube,64,64,512,0xffb108,0xff0000,0xffffff)",
		  details : "16"
		};
		krpano2.actions.loadpanoimage();


		krpano3.image.reset();
		krpano3.preview = {
		  type : "grid(cube,64,64,512,0xffb108,0x4eb74a,0xffffff)",
		  details : "16"
		};
		krpano3.actions.loadpanoimage();
	]]></action>
	

	
	
	<events name="sync" keep="true"  ondown="DoSync(1);" /> 
	

	<action name="DoSync" type="Javascript"><![CDATA[
		var v2 = krpano.get("layer[p2]").krpano;
		var v3 = krpano.get("layer[p3]").krpano;
		var kr = args[1];

		function sync1(){
			krpano.trace(1, 'sync1');
			v3.view.hlookat = v2.view.hlookat = krpano.view.hlookat;
			v3.view.vlookat = v2.view.vlookat = krpano.view.vlookat;
			v3.view.fov = v2.view.fov = krpano.view.fov;
		}
		function sync2(){
			krpano.trace(1, 'sync2');
			krpano.view.hlookat = v3.view.hlookat = v2.view.hlookat;
			krpano.view.vlookat = v3.view.vlookat = v2.view.vlookat;
			krpano.view.fov = v3.view.fov = v2.view.fov;
		}
		function sync3(){
			krpano.trace(1, 'sync3');
			krpano.view.hlookat = v2.view.hlookat = v3.view.hlookat;
			krpano.view.vlookat = v2.view.vlookat = v3.view.vlookat;
			krpano.view.fov = v2.view.fov = v3.view.fov;
		}



		if(kr == 1){

			krpano.events.addListener('onviewchanged', sync1);
			v2.events.removeListener('onviewchanged', sync2);
			v3.events.removeListener('onviewchanged', sync3);
		}
		if(kr == 2){

			krpano.events.removeListener('onviewchanged', sync1);
			v2.events.addListener('onviewchanged', sync2);
			v3.events.removeListener('onviewchanged', sync3);
		}
		if(kr == 3){

			krpano.events.removeListener('onviewchanged', sync1);
			v2.events.removeListener('onviewchanged', sync2);
			v3.events.addListener('onviewchanged', sync3);
		}

  
    ]]></action>





Tuur *thumbsup*

7

Donnerstag, 12. Oktober 2023, 12:43

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
	<scene name="scene_1" title="a1" onstart="showlog();"  autoload="true">
		<view hlookat="0" limitview="off"  fovmax="140" fovmin="70"  />
	</scene>

	<layer name="p1" keep="true" type="krpano" align="lefttop" preload="true" x="0" width="300" height="300" bgcolor="0x000000" bgalpha="1" alpha="1" />
	<layer name="p2" keep="true" type="krpano" align="righttop" preload="true" x="0" width="300" height="300" bgcolor="0x000000" bgalpha="1" alpha="1" />

	<action name="Do" autorun="onstart" type="Javascript"><![CDATA[
		var kr = [
			krpano, krpano.get("layer[p1]").krpano, krpano.get("layer[p2]").krpano,
		];
		kr[0].image.reset();
		kr[0].preview = { type : "grid(cube,64,64,512,0x666666,0x333333,0x333333)", details : "16" };
		kr[0].actions.loadpanoimage();
		kr[1].image.reset();
		kr[1].preview = { type : "grid(cube,64,64,512,0xffb108,0xff0000,0xffffff)", details : "16" };
		kr[1].actions.loadpanoimage();
		kr[2].image.reset();
		kr[2].preview = { type : "grid(cube,64,64,512,0xffb108,0x4eb74a,0xffffff)", details : "16" };
		kr[2].actions.loadpanoimage();
	]]></action>

	<events name="sync" keep="true" ondown="DoSync(0);" /> 
	<layer name="p1" ondown="DoSync(1);" />
	<layer name="p2" ondown="DoSync(2);" />

	<action name="DoSync" type="Javascript"><![CDATA[
		var index = args[1];
		var kr = [
			krpano, krpano.get("layer[p1]").krpano, krpano.get("layer[p2]").krpano,
		];
		function sync0() {
			krpano.trace(1, 'sync 1+2 with 0');
			kr[2].view.hlookat = kr[1].view.hlookat = kr[0].view.hlookat;
			kr[2].view.vlookat = kr[1].view.vlookat = kr[0].view.vlookat;
			kr[2].view.fov = kr[1].view.fov = kr[0].view.fov;
		}
		function sync1() {
			krpano.trace(1, 'sync 0+2 with 1');
			kr[0].view.hlookat = kr[2].view.hlookat = kr[1].view.hlookat;
			kr[0].view.vlookat = kr[2].view.vlookat = kr[1].view.vlookat;
			kr[0].view.fov = kr[2].view.fov = kr[1].view.fov;
		}
		function sync2() {
			krpano.trace(1, 'sync 0+1 with 2');
			kr[0].view.hlookat = kr[1].view.hlookat = kr[2].view.hlookat;
			kr[0].view.vlookat = kr[1].view.vlookat = kr[2].view.vlookat;
			kr[0].view.fov = kr[1].view.fov = kr[2].view.fov;
		}
		if(index === 0) {
			kr[0].events.addListener('onviewchanged', sync0);
			kr[1].events.removeListener('onviewchanged', sync1);
			kr[2].events.removeListener('onviewchanged', sync2);
		}
		else if(index === 1) {
			kr[0].events.removeListener('onviewchanged', sync0);
			kr[1].events.addListener('onviewchanged', sync1);
			kr[2].events.removeListener('onviewchanged', sync2);
		}
		else if(index === 2) {
			kr[0].events.removeListener('onviewchanged', sync0);
			kr[1].events.removeListener('onviewchanged', sync1);
			kr[2].events.addListener('onviewchanged', sync2);
		}
	]]></action>


lol, does that work? *question* *squint*

Tuur

Erleuchteter

  • »Tuur« ist der Autor dieses Themas

Beiträge: 3 839

Wohnort: Netherlands

Beruf: Krpano custom coding / Virtual Tours / Photography / Musician / Recording engineer

  • Nachricht senden

8

Donnerstag, 12. Oktober 2023, 12:51

hehe.. nope.
Easy to try yourself *g*

I had some other help, almost there.. but not fully yet I think.



Tuur *thumbsup*

9

Donnerstag, 12. Oktober 2023, 13:13

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
	<scene name="scene_1" title="a1" onstart="showlog();"  autoload="true">
		<view hlookat="0" limitview="off"  fovmax="140" fovmin="70"  />
	</scene>

	<layer name="p1" keep="true" type="krpano" align="lefttop" preload="true" x="0" width="300" height="300" bgcolor="0x000000" bgalpha="1" alpha="1" />
	<layer name="p2" keep="true" type="krpano" align="righttop" preload="true" x="0" width="300" height="300" bgcolor="0x000000" bgalpha="1" alpha="1" />

	<action name="doInit" autorun="onstart" type="Javascript"><![CDATA[
		var kr = [
			krpano, krpano.get("layer[p1]").krpano, krpano.get("layer[p2]").krpano,
		];
		kr[0].image.reset();
		kr[0].preview = { type : "grid(cube,64,64,512,0x666666,0x333333,0x333333)", details : "16" };
		kr[0].actions.loadpanoimage();
		kr[0].global_krpano = krpano;
		kr[1].image.reset();
		kr[1].preview = { type : "grid(cube,64,64,512,0xffb108,0xff0000,0xffffff)", details : "16" };
		kr[1].actions.loadpanoimage();
		kr[1].global_krpano = krpano;
		kr[2].image.reset();
		kr[2].preview = { type : "grid(cube,64,64,512,0xffb108,0x4eb74a,0xffffff)", details : "16" };
		kr[2].actions.loadpanoimage();
		kr[2].global_krpano = krpano;
	]]></action>

	<events name="sync" keep="true" ondown="doSync(0);" /> 
	<layer name="p1" ondown="doSync(1);" />
	<layer name="p2" ondown="doSync(2);" />

	<action name="doSync" type="Javascript"><![CDATA[
		var index = args[1];
		var kr = [
			krpano.global_krpano, krpano.get("layer[p1]").krpano, krpano.get("layer[p2]").krpano,
		];
		function sync0() {
			kr[0].trace(1, 'sync 1+2 with 0');
			kr[2].view.hlookat = kr[1].view.hlookat = kr[0].view.hlookat;
			kr[2].view.vlookat = kr[1].view.vlookat = kr[0].view.vlookat;
			kr[2].view.fov = kr[1].view.fov = kr[0].view.fov;
		}
		function sync1() {
			kr[0].trace(1, 'sync 0+2 with 1');
			kr[0].view.hlookat = kr[2].view.hlookat = kr[1].view.hlookat;
			kr[0].view.vlookat = kr[2].view.vlookat = kr[1].view.vlookat;
			kr[0].view.fov = kr[2].view.fov = kr[1].view.fov;
		}
		function sync2() {
			kr[0].trace(1, 'sync 0+1 with 2');
			kr[0].view.hlookat = kr[1].view.hlookat = kr[2].view.hlookat;
			kr[0].view.vlookat = kr[1].view.vlookat = kr[2].view.vlookat;
			kr[0].view.fov = kr[1].view.fov = kr[2].view.fov;
		}
		if(index === 0) {
			kr[0].events.addListener('onviewchanged', sync0);
			kr[1].events.removeListener('onviewchanged', sync1);
			kr[2].events.removeListener('onviewchanged', sync2);
		}
		else if(index === 1) {
			kr[0].events.removeListener('onviewchanged', sync0);
			kr[1].events.addListener('onviewchanged', sync1);
			kr[2].events.removeListener('onviewchanged', sync2);
		}
		else if(index === 2) {
			kr[0].events.removeListener('onviewchanged', sync0);
			kr[1].events.removeListener('onviewchanged', sync1);
			kr[2].events.addListener('onviewchanged', sync2);
		}
	]]></action>


maybe now :D ....
doSync() can be called in any context, so "krpano" can be any krpano
this version fixes that

Tuur

Erleuchteter

  • »Tuur« ist der Autor dieses Themas

Beiträge: 3 839

Wohnort: Netherlands

Beruf: Krpano custom coding / Virtual Tours / Photography / Musician / Recording engineer

  • Nachricht senden

10

Donnerstag, 12. Oktober 2023, 13:49

sorry index, it seems not to work.. but.. some interesting approaches there I learn from.
I had some great and priceless *love* help and this seems to be the solution:


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
    <scene name="scene_1" title="a1" onstart="showlog();"  autoload="true">
		<preview type="grid(cube,64,64,512,0x666666,0x333333,0x333333);" details="16"/>
		<view hlookat="0" limitview="off"  fovmax="140" fovmin="70"  />
	</scene>

	<layer name="p2" keep="true" type="krpano"  align="lefttop" preload="true" x="0" width="300" height="300" bgcolor="0x000000" bgalpha="1" alpha="1" ondown="DoSync(2)"  />
	<layer name="p3" keep="true" type="krpano"  align="righttop" preload="true" x="0" width="300" height="300" bgcolor="0x000000" bgalpha="1" alpha="1" ondown="DoSync(3)" onloaded="Do();" />

	<events name="sync" keep="true"  ondown="DoSync(1);" /> 

    <action name="Do" type="Javascript"><![CDATA[
		var krpano2 = krpano.get("layer[p2]").krpano;
		var krpano3 = krpano.get("layer[p3]").krpano;
		krpano2.image.reset();
		krpano2.preview = {
		  type : "grid(cube,64,64,512,0xffb108,0xff0000,0xffffff)",
		  details : "16"
		};
		krpano2.actions.loadpanoimage();

		krpano3.image.reset();
		krpano3.preview = {
		  type : "grid(cube,64,64,512,0xffb108,0x4eb74a,0xffffff)",
		  details : "16"
		};
		krpano3.actions.loadpanoimage();

		krpano.tuur = {};
		krpano.tuur.sync1 = sync1;
		krpano.tuur.sync2 = sync2;
		krpano.tuur.sync3 = sync3;

		function sync1(){
			krpano.trace(1, 'sync1');
			krpano3.view.hlookat = krpano2.view.hlookat = krpano.view.hlookat;
			krpano3.view.vlookat = krpano2.view.vlookat = krpano.view.vlookat;
			krpano3.view.fov = krpano2.view.fov = krpano.view.fov;
		}
		function sync2(){
			krpano.trace(1, 'sync2');
			krpano.view.hlookat = krpano3.view.hlookat = krpano2.view.hlookat;
			krpano.view.vlookat = krpano3.view.vlookat = krpano2.view.vlookat;
			krpano.view.fov = krpano3.view.fov = krpano2.view.fov;
		}
		function sync3(){
			krpano.trace(1, 'sync3');
			krpano.view.hlookat = krpano2.view.hlookat = krpano3.view.hlookat;
			krpano.view.vlookat = krpano2.view.vlookat = krpano3.view.vlookat;
			krpano.view.fov = krpano2.view.fov = krpano3.view.fov;
		}
	]]></action>
	
	

	<action name="DoSync" type="Javascript"><![CDATA[
		var v2 = krpano.get("layer[p2]").krpano;
		var v3 = krpano.get("layer[p3]").krpano;
		var kr = args[1];

		if (kr != krpano.tuur.active)
		{
		   krpano.tuur.active = kr;

		   if(kr == 1){
			   krpano.events.addListener('onviewchanged',  krpano.tuur.sync1);
			   v2.events.removeListener('onviewchanged',  krpano.tuur.sync2);
			   v3.events.removeListener('onviewchanged',  krpano.tuur.sync3);
		   }
		   if(kr == 2){
			   krpano.events.removeListener('onviewchanged',  krpano.tuur.sync1);
			   v2.events.addListener('onviewchanged',  krpano.tuur.sync2);
			   v3.events.removeListener('onviewchanged',  krpano.tuur.sync3);
		   }
		   if(kr == 3){
			   krpano.events.removeListener('onviewchanged',  krpano.tuur.sync1);
			   v2.events.removeListener('onviewchanged',  krpano.tuur.sync2);
			   v3.events.addListener('onviewchanged',  krpano.tuur.sync3);
		   }
		}
    ]]></action>


*love*
Initial example updated:
https://www.virtualtuur.com/krpano/121/b…no/1/index.html

Tuur *thumbsup*

11

Donnerstag, 12. Oktober 2023, 14:06

Hi,

note - when defining a JS-function in an action and calling that action again and again - then each time NEW functions are created.

And because then these functions are different ones, the removeListener will not work.

That means the functions would need to be stored after creating (like the last example here: 'krpano.tuur.sync1 = sync1;') and then be reused.

...

In the meantime I thought about and a more automated and universal solution that could be used to sync any number of viewers:

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
<action autorun="preinit" type="js"><![CDATA[
krpano.sync_multiple_viewers = function()
{
  // convert 'arguments' to an array
  var viewers_array = Array.prototype.slice.call(arguments);

  // the current/active viewer
  var activeviewer = null;

  viewers_array.forEach( function(viewer)
  {
    viewer.events.addListener("ondown", function()
    {
      activeviewer = viewer;
    });

    viewer.events.addListener("onviewchanged", function()
    {
      if(viewer == activeviewer)
      {
        viewers_array.forEach( function(otherviewer)
        {
          if (viewer != otherviewer)
          {
            otherviewer.view.hlookat = activeviewer.view.hlookat;
            otherviewer.view.vlookat = activeviewer.view.vlookat;
            otherviewer.view.fov     = activeviewer.view.fov;
          }
        });
      }
    });
  });
}
]]></action>


and to call it with viewers from the initial example:

Source code

1
2
3
4
5
<action autorun="onstart">
  callwhen(layer[p2].loaded AND layer[p3].loaded,
    sync_multiple_viewers(get(global), get(layer[p2].krpano), get(layer[p3].krpano));
  );
</action>


Best regards,
Klaus

Tuur

Erleuchteter

  • »Tuur« ist der Autor dieses Themas

Beiträge: 3 839

Wohnort: Netherlands

Beruf: Krpano custom coding / Virtual Tours / Photography / Musician / Recording engineer

  • Nachricht senden

12

Donnerstag, 12. Oktober 2023, 14:30

oh wow, *love* that is even more interesting!

I put it here:
https://www.virtualtuur.com/krpano/121/b…no/2/index.html

Love it!
Time to learn some.

Tuur *thumbsup*