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

**URL:** <https://discourse.processing.org/t/how-can-i-set-a-dat-gui-panel-anywhere-on-screen-in-openprocessing-p5js/14423>\
**Category:** Libraries\
**Created:** [October 4, 2019, 4:46pm UTC](https://discourse.processing.org/t/how-can-i-set-a-dat-gui-panel-anywhere-on-screen-in-openprocessing-p5js/14423 "2019-10-04T16:46:56Z")\
**Posts on this page:** 12\
**Page:** 1

<div class="post-metadata">

**Author:** ![rbytes](https://avatars.discourse-cdn.com/v4/letter/r/da6949/32.png) [@rbytes](https://discourse.processing.org/u/rbytes)\
**Post date:** [October 4, 2019, 4:46pm UTC](https://discourse.processing.org/t/how-can-i-set-a-dat-gui-panel-anywhere-on-screen-in-openprocessing-p5js/14423/1 "2019-10-04T16:46:56Z")

</div>

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.

```auto
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.

---

<div class="post-metadata">

**Author:** ![GoToLoop](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/gotoloop/32/86_2.png) [@GoToLoop](https://discourse.processing.org/u/GoToLoop)\
**Post date:** [October 5, 2019, 12:51am UTC](https://discourse.processing.org/t/how-can-i-set-a-dat-gui-panel-anywhere-on-screen-in-openprocessing-p5js/14423/2 "2019-10-05T00:51:35Z")

</div>

> [@rbytes](#):
>
> I tried creating a new element, setting its position and binding dat.GUI to it.

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:

> **[reference | p5.js](https://p5js.org/reference/#/p5/createP)**
>
> p5.js a JS client-side library for creating graphic and interactive experiences, based on the core principles of Processing.

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](http://p5js.org/reference/#/p5.Element/id)
2. [reference | p5.js](http://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');`

---

<div class="post-metadata">

**Author:** ![rbytes](https://avatars.discourse-cdn.com/v4/letter/r/da6949/32.png) [@rbytes](https://discourse.processing.org/u/rbytes)\
**Post date:** [October 5, 2019, 1:43am UTC](https://discourse.processing.org/t/how-can-i-set-a-dat-gui-panel-anywhere-on-screen-in-openprocessing-p5js/14423/3 "2019-10-05T01:43:02Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![GoToLoop](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/gotoloop/32/86_2.png) [@GoToLoop](https://discourse.processing.org/u/GoToLoop)\
**Post date:** [October 5, 2019, 1:54am UTC](https://discourse.processing.org/t/how-can-i-set-a-dat-gui-panel-anywhere-on-screen-in-openprocessing-p5js/14423/4 "2019-10-05T01:54:54Z")

</div>

> [@rbytes](#):
>
> , 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.

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

> [@rbytes](#):
>
> The most helpful thing would be a working code example of positioning the panel.

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.

---

<div class="post-metadata">

**Author:** ![rbytes](https://avatars.discourse-cdn.com/v4/letter/r/da6949/32.png) [@rbytes](https://discourse.processing.org/u/rbytes)\
**Post date:** [October 5, 2019, 3:29am UTC](https://discourse.processing.org/t/how-can-i-set-a-dat-gui-panel-anywhere-on-screen-in-openprocessing-p5js/14423/5 "2019-10-05T03:29:09Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![GWAK](https://avatars.discourse-cdn.com/v4/letter/g/13edae/32.png) [@GWAK](https://discourse.processing.org/u/GWAK)\
**Post date:** [February 15, 2022, 7:19pm UTC](https://discourse.processing.org/t/how-can-i-set-a-dat-gui-panel-anywhere-on-screen-in-openprocessing-p5js/14423/6 "2022-02-15T19:19:43Z")

</div>

@rbytes

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

---

<div class="post-metadata">

**Author:** ![rbytes](https://avatars.discourse-cdn.com/v4/letter/r/da6949/32.png) [@rbytes](https://discourse.processing.org/u/rbytes)\
**Post date:** [February 15, 2022, 7:46pm UTC](https://discourse.processing.org/t/how-can-i-set-a-dat-gui-panel-anywhere-on-screen-in-openprocessing-p5js/14423/7 "2022-02-15T19:46:28Z")

</div>

Yes, I figured it out.

Thanks.

---

<div class="post-metadata">

**Author:** ![GWAK](https://avatars.discourse-cdn.com/v4/letter/g/13edae/32.png) [@GWAK](https://discourse.processing.org/u/GWAK)\
**Post date:** [February 15, 2022, 8:08pm UTC](https://discourse.processing.org/t/how-can-i-set-a-dat-gui-panel-anywhere-on-screen-in-openprocessing-p5js/14423/8 "2022-02-15T20:08:08Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![rbytes](https://avatars.discourse-cdn.com/v4/letter/r/da6949/32.png) [@rbytes](https://discourse.processing.org/u/rbytes)\
**Post date:** [February 15, 2022, 9:41pm UTC](https://discourse.processing.org/t/how-can-i-set-a-dat-gui-panel-anywhere-on-screen-in-openprocessing-p5js/14423/9 "2022-02-15T21:41:02Z")

</div>

Try this link to a sketch in Open Processing: [PerspectiveGrid\_datGUI - OpenProcessing](http://oppr.org/s/2n5Ydgzj)  
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

---

<div class="post-metadata">

**Author:** ![GWAK](https://avatars.discourse-cdn.com/v4/letter/g/13edae/32.png) [@GWAK](https://discourse.processing.org/u/GWAK)\
**Post date:** [February 16, 2022, 12:14am UTC](https://discourse.processing.org/t/how-can-i-set-a-dat-gui-panel-anywhere-on-screen-in-openprocessing-p5js/14423/10 "2022-02-16T00:14:54Z")

</div>

@rbytes

link : [PerspectiveGrid\_datGUI - OpenProcessing](https://openprocessing.org/sketch/1485853/pc/2n5Ydgzj)

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?)

---

<div class="post-metadata">

**Author:** ![rbytes](https://avatars.discourse-cdn.com/v4/letter/r/da6949/32.png) [@rbytes](https://discourse.processing.org/u/rbytes)\
**Post date:** [February 16, 2022, 12:44am UTC](https://discourse.processing.org/t/how-can-i-set-a-dat-gui-panel-anywhere-on-screen-in-openprocessing-p5js/14423/11 "2022-02-16T00:44:33Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![GWAK](https://avatars.discourse-cdn.com/v4/letter/g/13edae/32.png) [@GWAK](https://discourse.processing.org/u/GWAK)\
**Post date:** [February 16, 2022, 12:46am UTC](https://discourse.processing.org/t/how-can-i-set-a-dat-gui-panel-anywhere-on-screen-in-openprocessing-p5js/14423/12 "2022-02-16T00:46:27Z")

</div>

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