bug in the getMaxCanvasWidth method in system.ts

[tomviolin]

Describe the bug

There is an intermittent bug in the getMaxCanvasWidth method in system.ts.
At first I thought it was some sort of CORS problem, because I was trying to show a PSV display in an <iframe> on a page on a different server, but this was ruled out when: (a) I tried to bring it up directly, it still showed the error; and (b) After sleeping on it, I brought up the <iframe> page and it worked once or twice, but then went back to the error. I then pointed my browser at the "Your First Viewer" demo on photo-sphere-viewer.js.org and it threw that same error, so I know it must be a bug in PSV, or possibly a bad browser on my end. But I've been getting the error intermittently across reboots on different machines with Firefox and Chrome.

I can't provide a sample that will consistently show the problem because it is intermittent; I am only providing a link to the "Your first viewer" example, because I did see it happen there as well.

I have traced the problem to the getMaxCanvasWidth method in system.ts. The user-facing symptom is the panorama viewer just shows "Unable to load panorama" with a huge exclamation mark icon, and the javascript console shows the following error has been thrown: PSVError: Unable to detect system capabilities. The stack trace took me the line

    throw new PSVError("Unable to detect system capabilities");

in the function getMaxCanvasWidth in system.ts.

I eventually in desperation dirty-hacked a solution by hard-coding the function to always return 16384, which was the lowest maximum canvas width that I could find in a modern browser in a quick search. My hacked copy of PSV has been working flawlessly since then! No intermittent crashes or anything. When I go back to the unhacked version on those same browsers and machines, the error comes back. But not every time.

It looks like the getMaxCanvasWidth function is an attempt to ward off what is likely a messy and relatively more difficult to trace crash when PSV tries to allocate a canvas that is larger than the maximum. But I've tried my hacked copy of PSV on several different browsers, including an iPad with iOS 16, and it hasn't crashed once. My success rate with the unhacked version was probably about 40%-60%, with the PSVError: Unable to detect system capabilities error thrown from that same line as above rearing its ugly head the rest of time.

I think that if there was some sort of PSV configuration option to provide a user-defined maximum that would prevent getMaxCanvasWidth even being called, that would probably serve as a stopgap until the flaw in the getMaxCanvasWidth function is found. I was ready to ditch all my investment in learning PSV and try to find another tool/library to get away from this bug. But this one little hack has saved the project. I hope this turns out to a real bug.

Online demo URL

https://photo-sphere-viewer.js.org/guide/#your-first-viewer

Photo Sphere Viewer version

5.7.3

Plugins loaded

Markers, VisibleRange

OS & browser

Firefox and Chrome on Ubuntu 22.04 and Linux Mint 21.3 Virginia; Chrome on Windows 10; Chrome in iPad/iOS 16

Additional context

No response

[mistic100]

I am interested in other similar reports from more people. Because hardcoding the resolution, even if it is an option, is not a solution. It will always fail on Android devices which are limited to 4096x4096

[mistic100]

I tested a modification in a branch https://github.com/mistic100/Photo-Sphere-Viewer/tree/detect-canvas-size

Inspired by what https://www.npmjs.com/package/canvas-size does

Please tell be if it is better

[tomviolin]

I just tried it and it has yet to fail. That slightly revised algorithm looks more solid. The introduction of the "pass" boolean seem to make the process a bit more deterministic. I'll try to keep you informed as I try this on different browsers. BTW: I (with my limited time available) have not been able to construct a proper build environment for PSV and so I tested this by simply editing the released core/index.module.js file directly and replacing the function in there by pasting from your branch source in system.ts and then removing the ":Number" type declaration on the parameter and the return type to make it compatible with Javascript. I thought I had followed all the directions for setting up a working build environment for PSV, including using node version 18 (using nvm), but it always fails with some sort of error, having to do with package version conflicts. I need to move forward with my panorama project and don't have much time to devote to trying to get a build environment going for PSV. If you have a specific step-by-step guide on building it successfully on Ubuntu 22.04 LTS I could then build it myself and not be using this patched – although no long hardcoded – version of PSV. Alternatively if you could send me a built release that includes this new canvas sizing algorithm, I could just unzip it into my document root, if you'd like to see the "real" code tested. P.S. I was able to get my "hacked" hardcode version to work on my iPad with no problems--- but my panoramas as only 4096 wide, so that probably explains that. -- Tom Hansen, Ph.D. Programmer/Analyst-Research UWM School of Freshwater Sciences ***@***.***

…

________________________________ From: Damien Sorel ***@***.***> Sent: Tuesday, May 14, 2024 6:15 AM To: mistic100/Photo-Sphere-Viewer ***@***.***> Cc: Thomas Frederick Hansen ***@***.***>; Author ***@***.***> Subject: Re: [mistic100/Photo-Sphere-Viewer] bug in the getMaxCanvasWidth method in system.ts (Issue #1303) I tested a modification in a branch https://github.com/mistic100/Photo-Sphere-Viewer/tree/detect-canvas-size Inspired by what https://www.npmjs.com/package/canvas-size does Please tell be if it is better — Reply to this email directly, view it on GitHub<#1303 (comment)>, or unsubscribe<https://github.com/notifications/unsubscribe-auth/ABHUVK4RBOHRVTFIRN3JRT3ZCHW3RAVCNFSM6AAAAABHP7TSKOVHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMZDCMBZHEZTKMZQHE>. You are receiving this because you authored the thread.Message ID: ***@***.***>

[github-actions]

This feature/bug fix has been released in version 5.7.4.