Add DeviceOrientation to virtual tour exported from Marzipano Tool?

[ni...@themepark360.net]

Hello there,

     I've generated a virtual tour consisting of 17 images using the Marzipano tool, and was hoping it'd be possible to add in the DeviceOrientation control method. (https://github.com/google/marzipano/tree/master/demos/device-orientation). I have already tried including the DeviceOrientationControlMethod.js file as well as adding additional code from index.js and style.css into my existing project, and while I'm able to get the Device Orientation icon to appear, it unfortunately doesn't have any affect when clicked on a mobile device. I'm thinking part of the problem is the demo is from a single scene panorama, and my project is a multi-scene virtual tour, but I don't know enough about .js to modify the code to get it working with my project, and was hoping someone could maybe point me in the right direction.

Here is a link to the testing I was doing, so you can get a better idea of what I've done so far. Any help would be greatly appreciated!

https://themepark360.net/deadwaters/index_test.html

[Joao Rodrigues]

Hi, I'm having the same problem....it doesnt work in a virtual tour exported....

[Tiago Quelhas]

What OS/browser/device do you have issues with? Device orientation events are known to be buggy on some browser+device combinations. See https://github.com/google/marzipano/issues/121.

--
You received this message because you are subscribed to the Google Groups "marzipano" group.
To unsubscribe from this group and stop receiving emails from it, send an email to marzipano+unsubscribe@googlegroups.com.
To post to this group, send email to marz...@googlegroups.com.
To view this discussion on the web visit https://groups.google.com/d/msgid/marzipano/bf46ef88-7ec5-4083-993a-6d08d5a19421%40googlegroups.com.

For more options, visit https://groups.google.com/d/optout.

[ReubenMRU]

Hello,

I'm new to all this and was looking to do the same thing as you, did you get this to work in the end?

Thanks,

Reubene

[Thomas Humeau]

I finally managed to have DeviceOrientation work for projects generated by Marzipano tool.

Here are the steps I took:

1. in the vendor folder add DeviceOrientationControlMethod.js

2. in index.html:

after the line:

<script src="vendor/marzipano.js" ></script>

add:

<script src="vendor/DeviceOrientationControlMethod.js"></script>

 

3. in index.js:

under:

  var controls = viewer.controls();

add

  var deviceOrientationControlMethod = new DeviceOrientationControlMethod();

  controls.registerMethod('deviceOrientation', deviceOrientationControlMethod);

 under the toggleAutorotate() function add the following function:

function enableGiro(scene) {

 deviceOrientationControlMethod.getPitch(function(err, pitch) {

if (!err) {

 scene.view.setPitch(pitch);

}

 });

 controls.enableMethod('deviceOrientation');

 giroenabled = true;

 toggleElementGiro.className = 'enabled';

}

I hope this will help.

Thomas

[Thomas Humeau]

Forgot the most important:

in index.js:

modify as follows:

  function switchScene(scene) {

    stopAutorotate();

    scene.view.setParameters(scene.data.initialViewParameters);

    scene.scene.switchTo();

    startAutorotate();

    updateSceneName(scene);

    updateSceneList(scene);

    enableGiro(scene);

[Jackie Teh]

Hi, may i know how can i add DeviceOrientationControlMethod.js in vendor folder? can i use "window notepad" to do that?

[Thomas Humeau]

DeviceOrientationControlMethod.js is found in the Marzipano downloadable files (in the demos I believe).

In the zip file that are produced by Marzipano tool, you have a vendor folder. just copy the DeviceOrientationControlMethod.js file in that folder.

[Mortech GH]

Device orientation (gyro) is great improvement but how do we implement split screen (stereo) so that it works well with GOOGLE VR HEADSET