This question is answered.


Permlink Replies: 4 - Pages: 1 - Last Post: 28 Apr 22, 16:10 Last Post By: AndreWolff
AndreWolff

Posts: 2,504
Registered: 14-Dec-2007
Problem with PSV4
Posted: 27 Apr 22, 18:47
 
  Click to reply to this thread Reply
Attachment pan_too_small.png (398.5 KB)
Hi Laza.

I see you implemented version 4 of the Spherical Panorama viewer in your Tiger skin.

I tried also to update the Spherical Panorama Viewer in my PhotoSwipe skin, see this test album.

However if I open the lightbox, the panorama image is too small, (see attached screenshot) it fills the ligthbox only if I do a small resize.

The problem comes I think from the three.js library.

If you open the development console via F12 you see these elements:
<div class="pswp__content" style="width: 800px; height: 857px;">
<div id="Pan_container">
<div class="psv-container psv--has-navbar">
<div class="psv-canvas-container" style="background: rgb(0, 0, 0); cursor: move; opacity: 1;">
	    <canvas data-engine="three.js r140dev" width="450" height="225" class="psv-canvas" style="display: block; width: 801px; height: 857px;"></canvas>
</div>
<div class="psv-loader-container" style="display: none;">
<div class="psv-loader">
		    <canvas class="psv-loader-canvas" width="0" height="0"></canvas>
<div class="psv-loader-text" style="max-width: 0px; max-height: 0px;">Loading...
</div>
</div>
</div>
<div class="psv-navbar psv-navbar--open">
etc.


You see there the initial size of the canvas:
<canvas data-engine="three.js r140dev" width="450" height="225"

These values are too small.

Have you any idea why these values are to small and if so, do you know how to correct this?

I use this code to initialize the viewer:
function showSpherPan(div) {
            console.log('showSpherPan div', div);
            var PSV = new PhotoSphereViewer.Viewer({
                panorama: srcImg[slide_index],
                container: div,
                caption: "'pictures/apartment.jpg' is displayed",
                //size: [ 2000, 1000 ],
                 navbar:["autorotate","zoom","fullscreen","caption"],
            });
            //PSV.resize();
            //PSV.needsUpdate();
            //pswp.updateSize(true);
}
Outcommented are some actions I tried without succes to solve the problem.

Thanks in advance for your help!

Regards,

André
Laza

Posts: 1,911
Registered: 6-Sep-2005
Re: Problem with PSV4
Posted: 28 Apr 22, 08:39   in response to: AndreWolff in response to: AndreWolff
Correct
  Click to reply to this thread Reply
No, sorry, I use it much simpler. You might want to delay the call, in order for the container's dimensions finalize.
setTimeout(function() {
	var PSV = new PhotoSphereViewer.Viewer({
		panorama: srcImg[slide_index],
		container: div,
		caption: "'pictures/apartment.jpg' is displayed",
		navbar:["autorotate","zoom","fullscreen","caption"],
	});
}, 100);
AndreWolff

Posts: 2,504
Registered: 14-Dec-2007
Re: Problem with PSV4
Posted: 28 Apr 22, 11:17   in response to: Laza in response to: Laza
 
  Click to reply to this thread Reply
Thanks Laza, that solves the problem.

But on a PC I can't navigate through the pano with the mouse as as you see in my test album.
Only if I set option captureCursor:true I can do that, but that is horrible!

There seems to be a mouse focus problem.

Which options do you use with the Tiger skin?
RobM

Posts: 4,383
Registered: 4-Aug-2006
Re: Problem with PSV4
Posted: 28 Apr 22, 11:26   in response to: AndreWolff in response to: AndreWolff
 
  Click to reply to this thread Reply
Moved this to skin development, it is of no interest to Tiger skin users.
AndreWolff

Posts: 2,504
Registered: 14-Dec-2007
Re: Problem with PSV4
Posted: 28 Apr 22, 16:10   in response to: Laza in response to: Laza
 
  Click to reply to this thread Reply
No reply required, I found the solution, see here.

Thanks again for your help.
Legend
Forum admins
Helpful Answer
Correct Answer

Point your RSS reader here for a feed of the latest messages in all forums