As i have to rewrite the index page from my site, i decided to use P5.js in order to learn somewhat about it. Coding was rather easy and my code works in P5.jsEditor. Now i am testing with real browsers and real phones and hre are the problems i encountered:
Desktop errors:
---- chrome === Version 49.0.2623.112 (64-bit)
error: P5.js : p5.js:63078 Uncaught TypeError: canvases[Symbol.iterator] is not a function
-----Safari ==== version 5.1.10
TypeError: ‘undefined’ is not an object (evaluating ‘p5.prototype’)
TypeError: ‘undefined’ is not an object (evaluating ‘window.performance.now’)
Firefox: works well
Mobile problems
mobiles are quite always in portrait mode (default) so i have to resize the sketch for adapting to this case; in order to know wether it s a mobile i have used deviceOrientation in setup() which returns “undefined” for desktop computers and “portrait” or landscape for mobiles: now if it s a mobile && the orientation is portrait i would like to resize the window (with window.resized ()method) but it does not seem to work, or it works only if i change manually the orientation of the phone. Is it normal? - is it also normal that i cannot zoom-in or out with pinch?
tested with android MM tablet 7’= sketch works well in portrait mode
tested with android kitKat tablet 10’: does not work, begins to load and stay blocked on loading
tested with HuaWei android 9 : the window is too litlle in portrait mode; when i change the orientation to landscape it works well and if i change again to portrait then resizing happens and everything works well…
So the problem is to force the resizing by code… How to do that?
thanks in advance!
P.S: since i posted i have found that kitkat with chrome last version works well. I conclude that there is a problem of compatibility between P5JS and (rather) old versions of Safari && Chrome. As for my other question (resizing by code according to orientation, i have not found any solution till now.
Without being able to run and read the code, it’s hard to know what is causing the trouble. If you share your sketch on http://editor.p5js.org or similar web-based editor, I would love to take a look.
try to go there with a phone, with a tablet , or with a PC
try to go there with the browsers versions i have listed
with a normal phone try to change manually the orientation and see what happens
try to pinch for zooming out
how can i adapt the canvas size in set up to the phone orientation?
thanks for answering
PS tested with Opera 25: does not work: console claims:
Uncaught TypeError: undefined is not a function p5.js:77489_main.default._onmousedown p5.js:77489
You’ve already mentioned it yourself, but the browsers you test with are ancient (in relation to the age of the web and its rapid development). Opera 25 was released six years ago, in 2014. If supporting browsers that old, p5.js is probably not the library you should use. The project only “support the current version of the browser, plus the previous major release of the browser.”
I just tested the sketch in the latest version of Safari (13.1.1) on macOS and saw the following error in the JavaScript console:
TypeError: undefined is not an object (evaluating '(screen.orientation || screen.mozOrientation).type')
I see that you’ve implemented your own getOrientation, but maybe you could use the p5.js built-in deviceOrientation instead?
@Sven ===
The given link to doc confirms what i thought: old browsers are globally not supported and that is a real problem because some OS on Mac cannot update these browsers eg Safari because it s installed with the system & updated by it, so it is not a good idea to use P5JS in my case…
You are right i have coded my own screenOrientation method. And it works very well for a lot of browsers: the only one with which it fails is Safari, old or new: see here https://developer.mozilla.org/en-US/docs/Web/API/Screen/orientation; i have tried to use P5JS deviceOrientation: with PC browsers it returns only “undefined” and for tablets or smartphones it returns nothing… As for now i think that i have to try to get the display width and display height and according to these values perhaps i can guess, on load, the orientation. Not sure!
Other weird point is why i cannot pinch for zooming , what i can do with all the other pages… any idea for that?
Thanks!
Other weird point is why i cannot pinch for zooming , what i can do with all the other pages… any idea for that?
I would have to try that on my device but your sketch contains syntax errors and isn’t working as of now: sketch.js:200 Uncaught SyntaxError: Unexpected token 'else'.
@Sven ===
thanks for testing; have you some message about the orientation in the log? - What happens when you switch to landscape then switch again to portrait mode?
As for the pinch that is a good news for Apple…But on my android phones it does not work and i dont understand, though i am an android developer!
I’m able to zoom in both modes (and when going back to portait again). You could figure it out by removing stuff from your HTML and JavaScript source until you’re able to zoom on Android devices. That way, you’ll figure out the problem sooner or later. Maybe start with removing <meta name="viewport" content="user-scalable=yes,initial-scale=1,maximum-scale=1,minimum-scale=0.2,width=device-width">?
@Sven === and now pinching works also for android and i think i know why: with android this tag is used mainly for html inside a webView, but here there is not any webView: only chrome or the os browser…
@Sven === Error, the pinch was blocked (on android) because i have set the max scale to 1; in this case, even when the min scale is set to 0.2 or less the zoom out is blocked as the zoom in!