mpetroff / pannellum

Pannellum is a lightweight, free, and open source panorama viewer for the web.
https://pannellum.org/
MIT License
4.3k stars 728 forks source link

Unable to restrict vertical viewing angle #280

Closed avi-stacksavings closed 8 years ago

avi-stacksavings commented 8 years ago

I am using minPicth and maxPitch to set vertical view-able angle, so user can not look up and down ... but in mobile view it not working as expected. check this link on mobile: http://stacksavings.com/connect/fall-panellum/connect.stacksavings.com/fall-activities-to-do-1/index.html

I need it to work where user cannot view vertically more than what there as per field of view.. but can scroll all the way around horizontally 360.

Code here below:

viewer = pannellum.viewer('panorama', {
    "type": "equirectangular",
    "panorama": "https://s3.amazonaws.com/stacksavings-360/360+forest+1500x750+MOBILE.jpg",
    "autoLoad" : true,
    "showControls" : false,
    "keyboardZoom" : false,
    "mouseZoom" : false,
    "preview" : "https://i.imgur.com/lj35rkB.jpg",
    "hfov" : 70,
    "minPitch" : -10,
    "maxPitch" : 10,
    "hotSpots": [
        {
            "pitch": 2,
            "yaw": 0,
            "cssClass": "custom-hotspot",
            "createTooltipFunc": hotspot,
            "createTooltipArgs": {displayText : "box 1", toolTipText : ""},
            "clickHandlerFunc" : clickHandlerBox1,
        },
        {
            "pitch": 0,
            "yaw": 95,
            "cssClass": "custom-hotspot",
            "createTooltipFunc": hotspot,
            "createTooltipArgs": {displayText : "box 2", toolTipText : ""},
            "clickHandlerFunc" : clickHandlerBox2,
        },
        {
            "pitch": 0,
            "yaw": 263,
            "cssClass": "custom-hotspot",
            "createTooltipFunc": hotspot,
            "createTooltipArgs": {displayText : "box 3", toolTipText : ""},
            "clickHandlerFunc" : clickHandlerBox3,

        }
    ]
});

function clickHandlerBox1(hotSpotDiv, args) {
    window.open( 'https://www.amazon.com/b?_encoding=UTF8&tag=stacksavings-20&linkCode=ur2&linkId=b59181d28e011f17dbfbc4eebfc2755d&camp=1789&creative=9325&node=4736', '_blank');
}

function clickHandlerBox2(hotSpotDiv, args) {
    window.open( 'https://www.amazon.com/b?_encoding=UTF8&tag=stacksavings-20&linkCode=ur2&linkId=b59181d28e011f17dbfbc4eebfc2755d&camp=1789&creative=9325&node=4736', '_blank');
}

function clickHandlerBox3(hotSpotDiv, args) {
    window.open( 'https://www.amazon.com/b?_encoding=UTF8&tag=stacksavings-20&linkCode=ur2&linkId=b59181d28e011f17dbfbc4eebfc2755d&camp=1789&creative=9325&node=4736', '_blank');
}

// Hot spot creation function
function hotspot(hotSpotDiv, args) {
    hotSpotDiv.classList.add('custom-tooltip');
    var span = document.createElement('span');
    hotSpotDiv.innerHTML = args.displayText
    span.innerHTML = args.toolTipText;
    //hotSpotDiv.appendChild(span);
    span.style.width = span.scrollWidth - 20 + 'px';
    span.style.marginLeft = -(span.scrollWidth - hotSpotDiv.offsetWidth) / 2 + 'px';
    span.style.marginTop = -span.scrollHeight - 12 + 'px';
}
mpetroff commented 8 years ago

While not completely a bug, the limits did not really behave as expected when both the minimum and maximum extent were visible. I just fixed the behavior so the pitch will be locked to the average of the limits when both are visible.