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:

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


    Code
    //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:

    Code
    <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>
  • 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)

    Code
    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

  • 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:

    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:

    Code
    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.

Participate now!

Don’t have an account yet? Register yourself now and be a part of our community!