Display Compatibility...

edited April 2015 in JavaScript Mode

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?


  • 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(

  • edited April 2015

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

    I get this message : image

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

    • 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


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

  • edited April 2015
    • 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(""):

    • 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<
  • Gonna pass! :-S Let the user adjust his monitor! ~X(

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

  • Will do! thanks anyway!

  • edited April 2015 Answer ✓

    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. ;;)

Sign In or Register to comment.