How can I set a dat.GUI panel anywhere on screen in OpenProcessing p5js

0

I have seen similar questions on various websites, but the answers always require using HTML, CSS and p5js code to reposition a dat.GUI panel from its default location. I am working strictly in p5js on OpenProcessing, not a web page where I can embed HTML or CSS. I can’t find anything online about embedding HTML and CSS within p5js.

I tried creating a new element, setting its position and binding dat.GUI to it. This didn’t work and the GUI panel didn’t appear at all.

loc = createElement('p', s);
loc.position(0, 100);
gui = new dat.GUI( { autoPlace: false } );
gui.domElement.id = 'loc';

I hoped this would set the top left corner of the dat.GUI panel.
Any suggestions would be much appreciated.

1 Like

You create a p5.Element and assign its reference to a variable named loc:
loc = createElement('p', s);

BtW, you coulda instead used createP() for it:
p5js.org/reference/#/p5/createP

But this statement doesn’t make sense:
gui.domElement.id = 'loc';

Somehow you expect that a string 'loc' would act the same as a variable called loc!?

AFAIK, p5.Element objects don’t have either id nor class labels when they’re created.

We’d need to explicitly give them those attribute labels via methods id() & class() respectively:

  1. p5js.org/reference/#/p5.Element/id
  2. p5js.org/reference/#/p5.Element/class

So if you need the p5.Element loc to have its id attribute named as 'loc', do something like this:
loc.id('loc');

1 Like

I appreciate your comments, but I’m not seeing how they address my question of how to position a dat.GUI panel. I need something more than this to succeed. The most helpful thing would be a working code example of positioning the panel.

You haven’t posted an actual minimum runnable code either!

I dunno much about dat.GUI’s API.

So I’ve got no idea which method would make it become a child of some web element.

I will keep hoping that someone has figured out how to position a dat.gui panel in p5js.