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.

1

Monday, April 4th 2011, 8:04pm

stopping rotation animation on javascript event

I when I load a pano, I set some slow rotation so the user can just watch it spin if they want. I also have buttons at the bottom to spin you to north, south, east and west. The problem is that while it's in it's initial rotation mode, it won't listen to these events. I need to touch/click the screen to cause an interrupt and then call my north function. Looking at the api, it appears stopall(); or breakall(); would solve this for me. So I tried this:

Source code

1
2
3
function setHeading(x,y){
		document.getElementById("krpanoSWFObject").call('stopall();lookto('+x+','+y+',get("view.fov"))');
}



Source code

1
2
//call via a button in html
<a href="#" onclick="setHeading(90,0);return false;">east</a>


Well this doesn't work? How can I made a call to my javascript function setHeading() kill the rotation animation? Btw, this is the startup action in my xml file:

Source code

1
2
3
4
5
6
7
8
	<action name="startup">
		loadscene(get(scenename), null, MERGE); 

		oninterrupt(break);'./*this allows touching to stop the spinning*/'
		lookto(180, 0, 100, smooth(45,45,5));'./*spins the camera around*/'
		lookto(359, 0, 100, smooth(45,45,5));'./*spins the camera around*/'

	</action>

2

Monday, April 4th 2011, 9:40pm

Hi,

at the moment interrupting is only possible by a mousedown (Desktop) or touchdown (iPhone/iPad) event,
interrupting by javascript call is not possible yet,

you can try something like that - sending that events manually: (not tested)

Source code

1
2
3
4
5
6
7
var krpano = document.getElementById("krpanoSWFObject");
var eventDesktop = document.createEvent("MouseEvents");
var eventMobile = document.createEvent("MouseEvents");
eventDesktop.initEvent("mousedown", true, true);
eventMobile.initEvent("touchstart", true, true);
krpano.dispatchEvent(eventDesktop); 
krpano.dispatchEvent(eventMobile);


best regards,
Klaus

3

Monday, April 4th 2011, 11:32pm

Well that didn't work for me. I tried a bunch of permutations with "faking" a touch/click and used a bunch of jquery stuff. None of it worked *blink*

But I found a work around for it if anybody is interested. Here's my xml file:

Source code

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
	<action name="startup">
		<!-- load the first scene -->
		loadscene(get(scenename), null, MERGE); 

		oninterrupt(break);
		set(continuespinning,true);
		spinloop();

	</action>
	
	<action name="spinloop">
		oninterrupt(break);
		
		add(hlookattemp,get(view.hlookat),5);
		lookto(get(hlookattemp), get(view.vlookat), get(view.fov), linear(10));
		if(continuespinning,spinloop())
	</action>


Basically, i set a boolean to true, then it loops through the spin loop function adding 5 degrees to the hlookat value everytime. So, now, all I need to do is to kill that boolean and it will stop spinning. It doesn't *technically* stop spinning when it's called, it finishss it's current 5 degree animation and then stops. But those 5 degree movements take a fraction of a second anyway, so it's pretty negligable. Then the javascript stuff is really simple:

Source code

1
2
3
4
5
6
7
8
9
function play(){
	document.getElementById("krpanoSWFObject").set('continuespinning','true');
	document.getElementById("krpanoSWFObject").call('spinloop()');
	$('#playpause').html('play | <a href="#" onclick="pause();return false;">pause</a>');
}
function pause(){
	document.getElementById("krpanoSWFObject").set('continuespinning','false');
	$('#playpause').html('<a href="#" onclick="play();return false;">play</a> | pause');		
}


The two functions just set the boolean "continuespinning" and then play will call that looping function. This seems to be a pretty good way of controlling spinning/animation via javascript without having control of a "kill process" function for the animation.

4

Wednesday, November 27th 2013, 10:40am

Great solution!