Question: Change hfov for mobile

[danburns3]

Thank you for creating Pannellum. It is an amazing tool. I am trying to "zoom in" when a user has mobile device portrait and I am new to jQuery. I am using the following code but it is not working. Any guidance would be greatly appreciated.

[alketii]

Here its something to get you started.

//var viewer = pannellum .... You know what to do here
window.addEventListener("orientationchange", function() {
    if(window.orientation == 'landscape') {
       viewer.setHfov(100);
    } else {
        viewer.setHfov(50);
    }
}, false);

[strarsis]

So basically art direction / media queries for panorama view parameters?

[danburns3]

`

` Thanks for responding alketii. the code above is still not working for me.

[danburns3]

I am new to GitHub and not sure how to get code to appear in comment box the way that alketii does. Sorry for my ignorance.

[strarsis]

@danburns3: You have to assign the viewer instance returned by pannellum.viewer(...) constructor method to a variable (in this code also named viewer because it is fitting) so it can be used by the handler methods:

<script>
var viewer = pannellum.viewer('panorama', { 
  "type": "equirectangular", 
  "panorama": "img/TGOZ_360.jpg", 
  "pitch": 0, 
  "yaw": 89.4, 
  "hfov": 100, 
  "autoLoad": true 
});

window.addEventListener("orientationchange", function() {
  if(window.orientation == 'landscape') {
    viewer.setHfov(100); 
  } else {
    viewer.setHfov(50); }
}, false);
</script>

[danburns3]

thanks @strarsis for pointing out the "var =" part of code. I think I have put together a working solution based on you and @alketii 's guidance. Thank you. ``

[danburns3]

The code above and below works only after user changes device orientation but is not checking window height/width on page load. Not sure what I am doing wrong. New to jQuery.

<script>
var viewer = pannellum.viewer('panorama', { 
  "type": "equirectangular", 
  "panorama": "img/TGOZ_360.jpg", 
  "pitch": 0, 
  "yaw": 89.4, 
  "hfov": 100, 
  "autoLoad": true 
});

    var onChange = window.addEventListener("resize", function ReSize() {
            // Get screen size (inner/outerWidth, inner/outerHeight)
            var height = $(window).height();
            var width = $(window).width();

            if(width<height) {
              // portrait
              viewer.setHfov(75); 
            } else {
              // landscape
              viewer.setHfov(100);
            }
        }, false);

$( document ).ready( ReSize);
</script>

[strarsis]

@danburns3:

<script>
var viewer = pannellum.viewer('panorama', { 
  'type': 'equirectangular', 
  'panorama': 'img/TGOZ_360.jpg', 
  'pitch': 0, 
  'yaw': 89.4, 
  'hfov': 100, 
  'autoLoad': true 
});

function ReSize() {
    // Get screen size (inner/outerWidth, inner/outerHeight)
    var height = window.innerHeight;
    var width = window.innerWidth;

    if(width<height) {
      // portrait
      viewer.setHfov(75); 
    } else {
      // landscape (or width=height)
      viewer.setHfov(100);
    }
}

window.addEventListener( 'resize', ReSize, false );
document.addEventListener( 'DOMContentLoaded', ReSize );
</script>

[danburns3]

@strarsis this works perfectly. Thank you for sharing your knowledge. I also added startAutoRotate to make viewer rotate a bit faster on portrait screens.

function ReSize() {
    // Get screen size (inner/outerWidth, inner/outerHeight)
    var height = window.innerHeight;
    var width = window.innerWidth;

    if(width<height) {
      // portrait
        viewer.startAutoRotate(-10);
        viewer.setHfov(70);
    } else {
      // landscape (or width=height)
        viewer.startAutoRotate(-3);
        viewer.setHfov(100);
    }
}

window.addEventListener( 'resize', ReSize, false );
document.addEventListener( 'DOMContentLoaded', ReSize );