Howdy, Stranger!
We are about to switch to a new forum software. Until then we have removed the registration on this forum.
Categories
- All Categories 25.7K
- Announcements & Guidelines 13
- Common Questions 30
- Using Processing 22.1K
- Programming Questions 12.2K
- Questions about Code 6.4K
- How To... 4.2K
- Hello Processing 72
- GLSL / Shaders 292
- Library Questions 4K
- Hardware, Integration & Other Languages 2.7K
- Kinect 668
- Arduino 1K
- Raspberry PI 188
- Questions about Modes 2K
- Android Mode 1.3K
- JavaScript Mode 413
- Python Mode 205
- Questions about Tools 100
- Espanol 5
- Developing Processing 548
- Create & Announce Libraries 211
- Create & Announce Modes 19
- Create & Announce Tools 29
- Summer of Code 2018 93
- Rails Girls Summer of Code 2017 3
- Summer of Code 2017 49
- Summer of Code 2016 4
- Summer of Code 2015 40
- Summer of Code 2014 22
- p5.js 1.6K
- p5.js Programming Questions 947
- p5.js Library Questions 315
- p5.js Development Questions 31
- General 1.4K
- Events & Opportunities 288
- General Discussion 365
In this Discussion
- Andreas_Ref March 2016
- Ater February 2016
- blindfish March 2016
- Chrisir March 2016
- GoToLoop February 2016
- sergiogranadamoreno December 2016
GUI (similar to controlP5) in p5.js?
I have been looking for a library like controlP5 to implement in my p5.js sketches, to enable users to change the values of parameters via sliders, knobs, radiobuttons, bangs etc...
Have not been able to find one...
What do people use instead? - Standard html elements (buttons, sliders, etc)? - Existing javascript libraries? - Something else?
Cheers
Answers
I would say, standard html elements. It may be even better, cause you can place them aside from canvas, so you have drawing and controls separated.
Okay, makes sense. Thanks!
Never used it, but I think Zebra is more intuitive for a Java developer: ~O)
http://www.ZebKit.com/
http://repo.ZebKit.org/latest/samples/uidemo.html
I did start rolling my own: it basically just dynamically injects standard form elements with an event listener that handles user updates. Not at all intended for distribution but at least demonstrates that it doesn't take much to build a simple implementation.
However it would probably be simplest to use an existing library: for example jQuery mobile has some nicely styled controls (e.g. range slider. checkbox etc.) and ought to be relatively lightweight. It looks like you have to manually set up the form; but you can of course do this dynamically which will make it more straightforward to then attach event listeners to the form objects and feed values back to your sketch.
@Andreas_Ref: this thread inspired me to start over with my own home grown GUI micro-library. I was looking for a project to try out with Browserify and this seemed ideal. I'm a lot happier with version 2 :D
@blindfish: That is so cool! I actually ended up using dat.GUI but I will definitely check your GUI micro-library out :)
Looks like I could have saved myself some effort :)) :(( :)) :((
In comparison mine definitely needs some polish; still it's been a good learning exercise: I'll have to check out dat - though reckon they should work on their SEO! I thought I'd done a thorough search for JS based GUI tools :/
https://forum.processing.org/two/discussion/15370/bufi-a-lightweight-script-based-gui-for-use-with-p5js#latest
looking into this as well and found Martin Schneider's p.5gui. https://github.com/bitcraftlab/p5.gui
I bet you saw it already ;)