DAT.GUI and other gui libraries

[craftoid]

Should we support DAT.GUI as well?

Or maybe control-panel?

I really like the idea of the interval slider. This makes a lot of sense for generative design ...

Any other ideas?

[rik-brown]

I would also really appreciate an interval-slider!

[rik-brown]

One thing I like on dat.gui : being able to hide the GUI altogether (toggled by pressing 'h')

[craftoid]

Hey @rik-brown, thanks for your feedback! Guis created with p5.gui currently provide hide() and show() functions, which you can use to do just that, from within your sketches keyTyped() function. I will think about adding a magic key to do toggle the gui without the need to write extra code in your sketch.

[b2renger]

Hi @craftoid , thanks for the neat lib !

The interval slider is indeed really interesting, you may also want a knob (and an interval knob) - even if I'm not a big fan of knobs when it comes to gui.

Sometimes a 2D touch area that returns the normalized coordinates of where it has been touched can be usefull (mostly for audio though I would think).

One cool feature might be an easy preset system : to set all the gui elements in one call with json like object.

[b2renger]

@craftoid maybe a way to handle tooltips could be usefull. Sometimes a label is not enough.

[craftoid]

Hey @b2renger, thanks for your suggestions!

With regards to the preset system:
I think the processing way would be to get presets from variables.
See this great pull request: #1.

If we really want2D sliders and range sliders, there's two things we need to do:

1. Make sure the GUI library that we use a library under the hood supports it.
2. Come up with about an appropriate way to tell p5.gui to use a special GUI for certain variables.

Right now the nice thing about p5.gui is, that there's basically a 1:1 mapping between javascript types and user interface elements. So you can magically get a functional API without specifying anything else.

I think 2D sliders or knobs would make a lot of sense with respect to the p5 Vector class. So if a variable is an array with two values or a p5 Vector, this would magically result in a knob that tweaks the elements of the vector appropriately.

Please let me know if you know of a gui library that supports knobs or sliders. If there's one that's good and popular I'd love to add it. But for now I'm quite happy with quicksettings.

Tooltips or alternative labels might be nice.
Feel free to file a feature request for tooltips upstream (https://github.com/bit101/quicksettings). Once tooltips are available, we could let the user add them via special variables like myvarTip and myvarLabel.

But again, I want to keep p5.gui as simple as possible, to make it easy to switch the library running under the hood.

[b2renger]

Hi @craftoid

Indeed vectors and arrays would be the way to go to map a data type to a 2D controller, unfortunately I don't know any popular well supported library that does that. (I used Dat.gui , I will experiment with quicksetting which supports nice widgets like date pickers etc.)

I think you are right quicksetting is pretty nice.

The way it works will be perfect for teaching : simple and efficient. For more advanced features it's more than all right to ask the user to get his/her hands dirty :)

[phivk]

Hi @craftoid Controlkit might be the library to support these kinds of 'special GUI elements' I haven't worked with it myself, but came across it whilst working with p5.gui and think it looks very promising for giving different kinds of control!

[craftoid]

Hey @phillchill Controlkit does look very nice indeed! I will check it out 👍

[henrikaz]

How to change position of GUI or reset initial, after it was dragged? For example gui.width = 0, doesn't move.

[JeffTheModder]

check out guify.js. Great little GUI library that me and a few other friends have used extensively (primarily for browser/io game mod consoles)