You are not logged in.

aschakel

Beginner

  • "aschakel" started this thread

Posts: 7

Occupation: Designer and coder

  • Send private message

1

Monday, May 16th 2016, 12:25pm

Enter WebVR mode with via external Javascript function

I'm programming 360 Tours with an custom overlay.
What I do is I call JS functions to load the scenes by JavaScript and that works great.

Source code

1
krpano.call("loadscene(scene_IMG_0013_Panorama_(1), null, MERGE, BLEND(1)););");


Now with this new WebVR function I want to enter the WebVR mode (and exit) via an DIV button.

But I have a problem with loading the WebVR and get 'webvr is not defined' when I want to call the 'webvr' instance.

I know that I can only call this instance when it's loaded and ready, but what I try I won't be able to
get it working. I tried it in the Document Ready or in de plugin attributes 'onavailable'. Nothing is working.

My question. Can I build a 'startWebVR()' function and call this by click on the DIV?

Timescale

Trainee

Posts: 120

Location: Netherlands

Occupation: Archaeologist, Timescale R&D

  • Send private message

2

Monday, May 16th 2016, 1:05pm

My question. Can I build a 'startWebVR()' function and call this by click on the DIV?

Yes you can.

Assuming the <div> element is implemented on the same level where you load the KRpano, you can simply use :

Source code

1
 onclick='krpano().call("webvr.enterVR();");'
and this will get you into vrmode by pressing a HTML element.

You could also put this in a javascript function and alternatively you can make a KRpano action that does the same thing, depending on your needs (if you need to set variables or something).

aschakel

Beginner

  • "aschakel" started this thread

Posts: 7

Occupation: Designer and coder

  • Send private message

3

Monday, May 16th 2016, 1:24pm

Thanks for your reply. Sounds good, and I tried it right away...but I get an error.

Source code

1
krpano is not a function


I tried also:

Source code

1
krpano.call("webvr.enterVR();");


also an error.

I have an function to toggle the GYRO and that is working like this:

Source code

1
2
3
4
5
6
7
8
9
10
11
function switchGyro() {
	if(gyroOn === 0) {
		var krpano = document.getElementById('krpanoSWFObject');
		krpano.set("plugin[gyro].enabled", "true");
		$gyroOn = 1;
	} else {
		var krpano = document.getElementById('krpanoSWFObject');
		krpano.set("plugin[gyro].enabled", "false");
		$gyroOn = 0;
	}
}


There I can use krpano.set...is this not possible with 'enterVR'?

aschakel

Beginner

  • "aschakel" started this thread

Posts: 7

Occupation: Designer and coder

  • Send private message

4

Monday, May 16th 2016, 1:29pm

Found a solution!

In the plugin setting there are two attributes:

Source code

1
2
3
plugin name="WebVR" keep="true" devices="html5"
	    	pluginurl="%SWFPATH%/plugins/webvr.js"
	    	url=""


I don't know why but the pluginurl is not working and loading the JS file, so I copied the link to URL attribute
and now the JS file is loaded..

Then I use this function now to toggle to EnterVR

Source code

1
2
3
4
function enterVR() {
	var krpano = document.getElementById('krpanoSWFObject');
	krpano.call("webvr.enterVR()");
}


and that is working...

Timescale

Trainee

Posts: 120

Location: Netherlands

Occupation: Archaeologist, Timescale R&D

  • Send private message

5

Monday, May 16th 2016, 1:47pm

Source code

1
krpano.call("webvr.enterVR();");


should be

Source code

1
krpano().call("webvr.enterVR();");