Sie sind nicht angemeldet.

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

Lieber Besucher, herzlich willkommen bei: krpano.com Forum. Falls dies Ihr erster Besuch auf dieser Seite ist, lesen Sie sich bitte die Hilfe durch. Dort wird Ihnen die Bedienung dieser Seite näher erläutert. Darüber hinaus sollten Sie sich registrieren, um alle Funktionen dieser Seite nutzen zu können. Benutzen Sie das Registrierungsformular, um sich zu registrieren oder informieren Sie sich ausführlich über den Registrierungsvorgang. Falls Sie sich bereits zu einem früheren Zeitpunkt registriert haben, können Sie sich hier anmelden.

myky007

Anfänger

  • »myky007« ist der Autor dieses Themas

Beiträge: 22

  • Nachricht senden

1

Dienstag, 6. Juli 2010, 14:02

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

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

Profi

Beiträge: 1 003

Wohnort: Netherlands

Beruf: Web developer

  • Nachricht senden

2

Dienstag, 6. Juli 2010, 14:25

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(jsfunction(hello from xml, second parameter);
</action>


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

myky007

Anfänger

  • »myky007« ist der Autor dieses Themas

Beiträge: 22

  • Nachricht senden

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!

klaus.krpano

Administrator

Beiträge: 13 499

  • Nachricht senden

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

 
1
2
3
4
5
6

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

Anfänger

  • »myky007« ist der Autor dieses Themas

Beiträge: 22

  • Nachricht senden

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

Zephyr

Profi

Beiträge: 1 003

Wohnort: Netherlands

Beruf: Web developer

  • Nachricht senden

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

 
1
2
3
4
5
6
7
8
9
10
11

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

myky007

Anfänger

  • »myky007« ist der Autor dieses Themas

Beiträge: 22

  • Nachricht senden

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

Zephyr

Profi

Beiträge: 1 003

Wohnort: Netherlands

Beruf: Web developer

  • Nachricht senden

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

myky007

Anfänger

  • »myky007« ist der Autor dieses Themas

Beiträge: 22

  • Nachricht senden

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

Zephyr

Profi

Beiträge: 1 003

Wohnort: Netherlands

Beruf: Web developer

  • Nachricht senden

10

Donnerstag, 15. Juli 2010, 11:10

Then I don't know anymore :(

myky007

Anfänger

  • »myky007« ist der Autor dieses Themas

Beiträge: 22

  • Nachricht senden

11

Donnerstag, 15. Juli 2010, 14:36

Hi Klaus,

Do you have any ideia?

Regards,
myky

klaus.krpano

Administrator

Beiträge: 13 499

  • Nachricht senden

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

myky007

Anfänger

  • »myky007« ist der Autor dieses Themas

Beiträge: 22

  • Nachricht senden

13

Donnerstag, 15. Juli 2010, 15:16

Hi Klaus you're right, ) missing.

This is my

Quellcode

 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

<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

klaus.krpano

Administrator

Beiträge: 13 499

  • Nachricht senden

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

myky007

Anfänger

  • »myky007« ist der Autor dieses Themas

Beiträge: 22

  • Nachricht senden

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?

Quellcode

 
1
2

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


Thanks for your help!

Regards,
myky

klaus.krpano

Administrator

Beiträge: 13 499

  • Nachricht senden

16

Freitag, 16. Juli 2010, 10:22

Zitat von »myky007«

What's wrong with this code?
Hi, try that:

Quellcode

 
1
2

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

Ähnliche Themen