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

p5.js Libraries
1

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
2

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:

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. reference | p5.js
  2. reference | p5.js

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
3

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.

4

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.

1 Like
5

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

1 Like
6

@rbytes

Did you succeed with ‘dat.gui’ with P5?

7

Yes, I figured it out.

Thanks.

1 Like
8

Congratulations.
Could you possibly get a simple example file (‘p5’)?
(ex. sample code, source code composed of ‘p5’)

9

Try this link to a sketch in Open Processing: PerspectiveGrid_datGUI - OpenProcessing
It will open a dat.gui GUI and position it at the top right of the screen. Look in the code for a comment at line 49: // position gui The two following lines will position the dat.gui panel from the right and from the top by the distance set in pixels. Uncomment them and run the sketch to see this.

I assumed that I could also use the words ‘left’ and ‘bottom’ in these lines, but those words don’t work. The classname ‘dg ac’ seems to be a constant in the dat.gui library that always refers to whatever dat.gui you create in your sketch. Hope this helps.

Richard Bourne

1 Like
10

@rbytes

link : PerspectiveGrid_datGUI - OpenProcessing

As a Plus+ Member feature, this source code is hidden by the owner, therefore downloading is not allowed.
(Am I the only one who doesn’t have permission to view the source code?)
(If I am a Plus+ Member, will it be downloaded?)

11

My mistake. I thought that the link would bypass the OP private setting, but it doesn’t. I have made the sketch public, so it will work for you now. Let me know if it is what you need.

Richard

1 Like
12

@rbytes
Can you please send me an email? I’d appreciate it if you could send it.
E-mail : myksj1105@hanmail.net