How to "Fire" JavaScript Event when pano reaches 360º

myky007 · July 6, 2010 at 2:02 PM

Can anyone tell me if it's possivel to "fire" a JavaScript method when the pano reaches 360º?

My goal is to make it automaticly jump to another pano when the they reach the end (360º).

Thanks!!

Zephyr · July 6, 2010 at 2:25 PM

Code

<action name="rotate360">
add(dst,view.hlookat, 360);
lookto(get(dst), 0, 90, smooth(80,20,20));
<!-- wait till animation is complete -->
wait(blend);
js(jsfunction(hello from xml, second parameter);
</action>

Or instead of js function just do loadpano / loadxml / load

myky007 · July 13, 2010 at 4:06 PM

Hi Zephyr,

Thanks for your post!
Sorry my dummy question, but how can i configure your action?

I'm using this code:

document.getElementById("krpanoSWFObject").call("loadpano(null,sphere="+img+"&view.hlookat="+angulo+",KEEPALL,BLEND(1)");
document.getElementById("krpanoSWFObject").set("autorotate.enabled","true");
document.getElementById("krpanoSWFObject").set("autorotate.waittime","0");

Is this the way to do it: ?

document.getElementById("krpanoSWFObject").action("add(dst,view.hlookat=360");
document.getElementById("krpanoSWFObject").action("lookto(get(dst), 0, 90, smooth(80,20,20))");
document.getElementById("krpanoSWFObject").action("wait(BLEND)");
document.getElementById("krpanoSWFObject").action("js(alert('ok')");

Thanks!

klaus.krpano · July 13, 2010 at 4:41 PM

Hi,

if you want use only JS without any xml you could do it in that way:

Code

var krpano = document.getElementById("krpanoSWFObject");


krpano.call("loadpano(null,sphere="+img+"&view.hlookat="+angulo+",KEEPALL,BLEND(1)");
krpano.set("autorotate.enabled", true);
krpano.set("autorotate.waittime", 0);
krpano.call("lookto("+(angulo+360)+"), 0,  90, smooth(80,20,20)); wait(BLEND);");

best regards,
Klaus

myky007 · July 14, 2010 at 11:57 AM

Hi Klaus,

Sorry to insist on this subject but i'm having stupit troubles on trying to make this work.

I've tested this code:

var krpano = document.getElementById("krpanoSWFObject");

krpano.call("loadpano(null,sphere="+img+"&view.hlookat="+angulo+",KEEPALL,BLEND(1)");
krpano.set("autorotate.enabled", true);
krpano.set("autorotate.waittime", 0);

And it's ok!

What i need is to "fire" a JavaScript function, with the arg of index photo, when the pano reaches 360º.

Can you give me the code that will make this thing works? (in JS without XML)

I have to apolagize because i'm not been able this work alone.

Regards,
myky

Zephyr · July 14, 2010 at 1:39 PM

if you look at the last sentance

Code

krpano.call("lookto("+(angulo+360)+"), 0,  90, smooth(80,20,20)); wait(BLEND);");

it turns around, then it waits tilll the animation is done (wait(BLEND)) After that you could do

Code

js(jsfunction(hello from xml, second parameter));

Complete code:

Code

var krpano = document.getElementById("krpanoSWFObject");


krpano.call("loadpano(null,sphere="+img+"&view.hlookat="+angulo+",KEEPALL,BLEND(1)");
krpano.set("autorotate.enabled", true);
krpano.set("autorotate.waittime", 0);
krpano.call("lookto("+(angulo+360)+"), 0,  90, smooth(80,20,20)); wait(BLEND);js(jsfunction(hello from xml, second parameter));");


function jsfunction(str)
{
window.alert(str)
}

Display More

myky007 · July 14, 2010 at 2:13 PM

Hi Zephyr,

Many many thanks for your explanation!!

With this code:
krpano.call("lookto(("+(angulo+360)+"), 0, 105, smooth(80,20,20)); wait(BLEND);js(jsfunction(hello from xml, second parameter));");

what happens now is when the preloader finishes, pops the js alert box even before the image shows.

Do you have any idea of that's the problem that it is happening here?

Regards,
myky

Zephyr · July 14, 2010 at 2:57 PM

Hmm not sure, I know that krpano uses a sort of queuing system (Extended Backus–Naur Form). Maybe it goes wrong there (javascript que + krpano que, browser not knowing what to fire first). I have seriously no clue, just guessing. it also happened to me when I created autopathing together with flash actions.

instead of wait blend and the smooth(80,20,20), you could try

Code

linear(speed)

in degrees per second. So lets say you want it to turn 36 degrees/s then the animation would last 10sec
then you do wait(10).

Code

krpano.call("lookto(("+(angulo+360)+"), 0, 105, linear(36)); wait(10);js(jsfunction(hello from xml, second parameter));");

Why do you want to do it all javascript? Can't you define global krpano actions and call from javascript? Like the rotate 360 degrees function is a reusuable function. you can put it in javascript, but then you need to call upon krpano anyways, so why not put it in the xml which krpano already reads. Then keep the fancy calculating stuff to javascript.

xml:

Code

<action name="rotate360">
add(dst,view.hlookat, 360);
lookto(get(dst), 0, 90, smooth(80,20,20));
<!-- wait till animation is complete -->
wait(blend);
js(donerotating());
</action>

javascript:

Code

var krpano = document.getElementById("krpanoSWFObject");
krpano.call("rotate360()")


function donerotating()
{
window.alert("done rotating");
}

myky007 · July 15, 2010 at 10:36 AM

Hi Zephyr thanks a lot for your help!

I've used the rotate action via XML but the JS alert box is always show after the preloader.

I've forgot to say that i'm using cylindrical panos.

Regards,
myky

Zephyr · July 15, 2010 at 11:10 AM

Then I don't know anymore :(

myky007 · July 15, 2010 at 2:36 PM

Hi Klaus,

Do you have any ideia?

Regards,
myky

klaus.krpano · July 15, 2010 at 2:49 PM

Hi,

sorry, I a have overlooked a syntax misstage here:

Code

krpano.call("loadpano(null,sphere="+img+"&view.hlookat="+angulo+",KEEPALL,BLEND(1)");

there is a ')' missing at the end,
normally that call should have be not executed,
are you sure that not only the default krpano.xml was loaded?

this would be right: (and maybe try adding a wait(LOAD);)

Code

krpano.call("loadpano(null,sphere="+img+"&view.hlookat="+angulo+",KEEPALL,BLEND(1)); wait(LOAD);");

best regards,
Klaus

myky007 · July 15, 2010 at 3:16 PM

Hi Klaus you're right, ) missing.

This is my

PHP

<SCRIPT type="text/javascript">
if (typeof(deconcept) !== 'undefined' && deconcept.SWFObjectUtil.getPlayerVersion().major >= 6) {
var so = new SWFObject("krpano.swf", "krpanoSWFObject", "440", "330", "9.0.28","#FFFFFF");
so.addParam("allowFullScreen","true");
so.addVariable("sphere", "<?php echo getFirstImage(); ?>");
so.addVariable("image.type","SPHERE");
so.addVariable("image.hfov","360");
so.addVariable("image.voffset","5");
so.addVariable("xml", "pano.xml");


so.addVariable("view.hlookat","<?php echo getFirstImageX(); ?>");
so.addVariable("autorotate.enabled","true");
so.addVariable("autorotate.waittime","0");
so.addVariable("autorotate.speed","5");
so.addVariable("autorotate.accel","5");
}


if ( so.write("krpanoDIV") ) { var mousewheelfixes = new SWFkrpanoMouseWheel(so); }
</script>

Display More

My pano.xml

Code

<action name="rotate360">
add(dst,view.hlookat, 360);
lookto(get(dst), 0, 105, smooth(80,20,20));
<!-- wait till animation is complete -->
wait(blend);
js(donerotating());
</action>

And last my JS that load the pano:

Code

...
var krpano = document.getElementById("krpanoSWFObject");
krpano.call("loadpano(null,sphere="+img+"&view.hlookat="+angulo+",KEEPALL,BLEND(1)); wait(LOAD);");
krpano.call("rotate360()");

When i execute my JS function, the pano changes well, the preloader hides, the pano starts to rotate and 1second later, the JS function donerotating fires. I would like that the JS would only fire when the pano ends (360º).

Regards,
myky

klaus.krpano · July 15, 2010 at 3:32 PM

Hi,

okay, I think the problem is that the lookto() action takes the shortest way to the given position,
try adding 'false' as additional last parameter to the lookto call, then the 'short way' behavior is disabled,

best regards,
Klaus

myky007 · July 15, 2010 at 5:44 PM

Hi Klaus what you told me has worked!

The only problem now is how can i tell it to rotate 360º ?

Do i have to give it a fixed coordinate?

What's wrong with this code?

Code

add(dst,view.hlookat, 360);
lookto(get(dst), 0, 90, smooth(80,20,20));

Thanks for your help!

Regards,
myky

klaus.krpano · July 16, 2010 at 10:22 AM

Quote from myky007

What's wrong with this code?

Hi, try that:

Code

add(dst, view.hlookat, 360);
lookto(get(dst), 0, 90, smooth(80,20,20), false);

How to "Fire" JavaScript Event when pano reaches 360º

Participate now!

Users Viewing This Thread