add setPosition to Quicksettings interface

[phivk]

It would be nice to have methods to set the position of GUI panels. I checked quicksettings.js and it has such a method available.

Would you agree this would make a nice addition?
If so I could try to find some time to implement and create a PR.

[craftoid]

Hey @phillchill! Thanks for your interest in p5.gui + suggestion for improvement!
You can currently set the absolute position of the panel in the constructor like so:

createGui(label, x, y);

But I agree, something like setPosition would make sense in dynamic interfaces, or if the size of the window is not known on construction. It might be nice to add relative positioning though, maybe by using negative values for x and y ...

[phivk]

ah, that's good to know. For the moment I was using a jQuery solution like this (here positioning something bottom right of screen):

$( "div.qs_title_bar:contains([title])" ).parent().css({"left": "initial", "right":"20px", "top":"initial", "bottom":"20px"});

As a first step I'd simply build directly on the setPosition() method from quicksettings.js

Relative positioning (relative to what btw?) can also be added on top of this...

[craftoid]

Definitely trying to do without jQuery :)

I was thinking relative to the window, p5.js canvas, or some other dedicated parent element...

• setPosition(100, 100) would place the gui relative to the top left corner.
• setPosition(-100, 100) would place the gui relative to the top right corner.
• setPosition(100, -100) would place the gui relative to the bottom left corner.
• setPosition(-100, -100) would place the gui relative to the bottom right corner.

Not sure if bottom placement really is a thing.
But half of the time I think it's nicer to move the GUI over to the right ...