How to activate gyroscope onload on iPhone about photo-sphere-viewer

[JeremyHeleine]

Hi,

You can use the public method .toggleDeviceOrientation(). I think the best way to do what you want is calling this method in a onready callback. For example:

var PSV = new PhotoSphereViewer({
    container: 'psv',
    panorama: 'pano.jpg',
    onready: function() {
        PSV.toggleDeviceOrientation();
    }
});

It should work. :)

[runtim]

Will this still work? It would not for me. It would be nice to have the ability to auto-load gyroscope and at the same time allow touch control

[JeremyHeleine]

I just tested it, it still works for me. Can you please copy/paste here the code you use?

[liam-nolan]

Hi Jeremy,

The coding is great, I am probably missing something as Javascript is not my normal coding language. Would it be possible to get some help?

I have 2 issues:

1. gyro wont activate on load - I am using android on Samsung if that help.
2. Is there a way to keep gyro and full screen active for user?

`

<style> html, body { width: 100%; height: 100%; overflow: hidden; margin: 0; padding: 0; } #photosphere, section{ width: 100%; height: 100%; } .psv-button.custom-button { font-size: 22px; line-height: 20px; } </style> <script type="text/javascript">

function goToNewPage()
{
    var url = document.getElementById('list').value;
    if(url != 'none') {
        window.location = url;
    }
}

</script> <script src="js/three.js"></script> <script src="js/D.js"></script> <script src="js/uevent.js"></script> <script src="js/doT.js"></script> <script src="js/renderers/CanvasRenderer.js"></script> <script src="js/renderers/Projector.js"></script> <script src="js/controls/DeviceOrientationControls.js"></script> <script src="js/photo-sphere-viewer.js"></script>

   <div id="photosphere"></div> 

<script type="text/javascript"> // sessionStorage.setItem("SessionName","storeimage/genericwhite/2.jpg") // var myName = '<%= Session["SessionName"].ToString()%>'; var myVal ; // if (myVal = ""){ // = // } else { // var myVar = localStorage.getItem(''); // } if(!localStorage.getItem('MyNumber')) { myVal = "storeimage/genericwhite/1.jpg"; } else { myVal = localStorage.getItem('MyNumber'); } var panos = [ { url: myVal, desc: 'Generic White Store UEC: 123456789', target: { longitude: 6.50, latitude: -0.150 } } ]; var PSV = new PhotoSphereViewer({ container: 'photosphere', panorama: panos[0].url, onready: function() { PSV.toggleDeviceOrientation(); }, caption: panos[0].desc, loading_img: 'photosphere-logo.gif', longitude_range: [-7 * Math.PI / 8, 7 * Math.PI / 8], latitude_range: [-3 * Math.PI / 4, 3 * Math.PI / 4], anim_speed: '4rpm', default_fov: 90, fisheye: false, move_speed: 1.1, time_anim: false, gyroscope: true, webgl: true, navbar: [ 'autorotate', 'zoom', 'download', 'markers', 'spacer-1', 'caption', 'gyroscope', 'fullscreen' ], markers: (function() { var a = []; if (!localStorage.getItem('MyNumber')){ a.push({ id: '1', name: 'The path', x: 4200, y: 2000, image: 'assets/img/pin2.png', width: 32, height: 32, anchor: 'bottom center', tooltip:'1', }); } // inside front door return a; }()) }); PSV.on('select-marker', function(marker, dblclick) { // alert("https:\\nolanitsupport.com") if (marker.id == '1'){ // document.cooke = "storeimage/genericwhite/2.jpg"; localStorage['MyNumber']= "storeimage/genericwhite/2.jpg"; window.location.href="new.html" } else if (marker.id == '2'){ // document.cooke = "storeimage/genericwhite/6.jpg" localStorage['MyNumber']= "storeimage/genericwhite/3.jpg"; window.location.href="new.html"; } else if (marker.id == '3'){ // document.cooke = "storeimage/genericwhite/6.jpg" localStorage['MyNumber']= "storeimage/genericwhite/4.jpg"; window.location.href="new.html"; } else if (marker.id == '4'){ // document.cooke = "storeimage/genericwhite/6.jpg" localStorage['MyNumber']= "storeimage/genericwhite/5.jpg"; window.location.href="new.html"; } else if (marker.id == '5'){ // document.cooke = "storeimage/genericwhite/6.jpg" localStorage['MyNumber']= "storeimage/genericwhite/6.jpg"; window.location.href="new.html"; } else if (marker.id == '5'){ localStorage['MyNumber']= "storeimage/genericwhite/1.jpg"; window.location.href="new.html"; } }); PSV.on('over-marker', function(marker) { console.log('over', marker.id); }); PSV.on('leave-marker', function(marker) { console.log('leave', marker.id); }); </script>

</body>

`

[xwwww]

Hello guys,

It works not well when I use the method .toggleDeviceOrientation() in android device. I don't how to fix it. Any advice?

[canado]

I have this error when I try to start the gyro with onready
Uncaught TypeError: PSV.toggleDeviceOrientation is not a function
besides the gyro is not working for me neither
Is there a way maybe to pass the alpha beta gamma params to psv directly?