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

Anfänger

Dienstag, 6. Juli 2010, 14:02

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!!

Zum Seitenanfang

Zephyr

Profi

Beiträge: 1 003

Wohnort: Netherlands

Beruf: Web developer

2

Dienstag, 6. Juli 2010, 14:25

Quellcode

<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

Zum Seitenanfang

myky007

Anfänger

Beiträge: 22

3

Dienstag, 13. Juli 2010, 16:06

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!

Zum Seitenanfang

klaus.krpano

Administrator

Beiträge: 13 499

4

Dienstag, 13. Juli 2010, 16:41

Hi,

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

Quellcode

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

Zum Seitenanfang

myky007

Anfänger

Beiträge: 22

5

Mittwoch, 14. Juli 2010, 11:57

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

Zum Seitenanfang

Zephyr

Profi

Beiträge: 1 003

Wohnort: Netherlands

Beruf: Web developer

6

Mittwoch, 14. Juli 2010, 13:39

if you look at the last sentance

	Quellcode
1	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

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

Complete code:

Quellcode

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)
}

Zum Seitenanfang

myky007

Anfänger

Beiträge: 22

7

Mittwoch, 14. Juli 2010, 14:13

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

Zum Seitenanfang

Zephyr

Profi

Beiträge: 1 003

Wohnort: Netherlands

Beruf: Web developer

8

Mittwoch, 14. Juli 2010, 14:57

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

	Quellcode
1	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).

	Quellcode
1	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:

	Quellcode
1 2 3 4 5 6 7	<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:

	Quellcode
1 2 3 4 5 6 7	var krpano = document.getElementById("krpanoSWFObject"); krpano.call("rotate360()") function donerotating() { window.alert("done rotating"); }

Zum Seitenanfang

myky007

Anfänger

Beiträge: 22

9

Donnerstag, 15. Juli 2010, 10:36

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

Zum Seitenanfang

Zephyr

Profi

Beiträge: 1 003

Wohnort: Netherlands

Beruf: Web developer

10

Donnerstag, 15. Juli 2010, 11:10

Then I don't know anymore :(

Zum Seitenanfang

myky007

Anfänger

Beiträge: 22

11

Donnerstag, 15. Juli 2010, 14:36

Hi Klaus,

Do you have any ideia?

Regards,
myky

Zum Seitenanfang

klaus.krpano

Administrator

Beiträge: 13 499

12

Donnerstag, 15. Juli 2010, 14:49

Hi,

sorry, I a have overlooked a syntax misstage here:

	Quellcode
1	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);)

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

best regards,
Klaus

Zum Seitenanfang

myky007

Anfänger

Beiträge: 22

13

Donnerstag, 15. Juli 2010, 15:16

Hi Klaus you're right, ) missing.

This is my

Quellcode

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

My pano.xml

	Quellcode
1 2 3 4 5 6 7	<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:

	Quellcode
1 2 3 4	... 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

Zum Seitenanfang

klaus.krpano

Administrator

Beiträge: 13 499

14

Donnerstag, 15. Juli 2010, 15:32

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

Zum Seitenanfang

myky007

Anfänger

Beiträge: 22

15

Donnerstag, 15. Juli 2010, 17:44

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?