How can i change the dat.GUI text for "Open controls and "Close Controls

Questions
1

Hello Team,

I would like the dynamically change dat.GUI text for “Open Controls” and “Close Controls” by putting an up arrow and down arrow next to it. So it would be like:

“Open Controls V”, and “Close Controls ^”. Basically i want to put an up arrow and down arrow indicators next to the text for better UX experience. If those can be icons then that is even better.

Thanks
Siamak

2

dat.gui is quite a barebones GUI - to do custom stuff with it, it’s likely best to either copy the repo and apply changes in the code of dat.gui directly (repo is no longer maintained, so you won’t be missing any updates by forking it), or just hack around a little, ex.:

gui.domElement.querySelector('.close-button').innerHTML = 'New Label';
1 Like
3 
dat.GUI.TEXT_OPEN = "Please, open me";
dat.GUI.TEXT_CLOSED = "No, don't click";

var gui = new dat.GUI();
gui.add( data, 'k', 0, 1 );

image
image731×220 6.55 KB

1 Like
4

Thank you so much for the good advice @PavelBoytchev and @mjurczyk. I will definitely try both solutions and see which one works better for me.

Regards
Siamak

1 Like