Display Compatibility...

srinag

displayWidth and displayHeight are not allowed in Js? I tried pageX and pageY but no success... which parameters correspond to size of the window of browser?

GoToLoop

Processing.JS (PJS) still uses the old Processing 1.5.1's screenWidth & screenHeight.
Although they don't mention that in the reference page: X(
http://processingjs.org/reference/

srinag

It is not allowing me to use any kind of variable in the size()

I get this message :

If i ignore that msg and continue my page looks like this :

GoToLoop

• As the warning said, just edit the <canvas> tag w/ some arbitrary dimensions.
• ".html" generated by JS Mode is very dumb.
• However, I had luck hosting sketches at http://studio.SketchPad.cc/.
• At least when viewing the sketch via "Syntax-highlighting" option, it was able to get the dimensions right! :-bd

http://studio.processingtogether.com/sp/pad/export/ro.9Ql2E8JBC54LJ/latest

srinag

What should i do if i want to publish it such that it fits into all displays! I didn't get you @GoToLoop

GoToLoop

• I dunno! PJS framework should insert its created canvas into the DOM rather than depending on the ".html" file to pre-define the <canvas> tag! 8-|
• BtW, p5*js framework just do that! :ar!
• Perhaps there's a way to write a utility function, in a separated ".js" tab file that you invoke from your ".pde" tab file within setup() after size(), which gets the ".html"'s <canvas> and change its dimension properties.

• I'm not knowledgeable enough in JS to pull that out but I know we'd need document.getElementById(""):

  • https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/id
  • https://developer.mozilla.org/en-US/docs/Web/API/Document/getElementById

• Read PJS' generated ".html" file and spot the id name used in the <canvas> tag there.

• Call document.getElementById("") passing the id as its string argument.
• Store the returning value in a variable.
• Then try to change these 2 properties: width & height using the . operator over that variable.
• With any luck it's gonna work out! [-O<

srinag

Gonna pass! :-S Let the user adjust his monitor! ~X(

GoToLoop

Just stick w/ 800x600. It's pretty enough! :-\"

srinag

Will do! thanks anyway!

GoToLoop

Later by perusing the ".html" source from: http://studio.processingtogether.com/sp/pad/export/ro.9Ql2E8JBC54LJ/latest

I've found out that its <canvas> tag doesn't define any pre-dimension properties:
<canvas id="targetcanvas"></canvas>

Apart from the id, it's all empty! :O)
Perhaps that's the reason why it auto-adapts to the sketch's size()? :-?

Also its <script> tag got this strange property inside: data-processing-target="targetcanvas"
Which coincidentally matches the <canvas>'s id: "targetcanvas"! B-)

Maybe that's also an important configuration step for the whole thing to work out... :-B
I guess it's worth a try changing JS Mode's generated ".html" file to follow that model. ;;)