p5_gui
Experimental Graphical User Interface for P5js sketches
- Used for creating this SRT log viewer: https://djitelemetryoverlay.com
This was created for a specific project, so the interface and capabilities are very dependant on what was needed on that project. Hopefully it can be expanded and improved to fit other needs. Please let me know if you do something with it.
For it to work with P5js, your sketch should be in instance mode: https://github.com/processing/p5.js/wiki/Global-and-instance-mode
Installation
Using npm:
$ npm install p5_gui
Usage
//Load modulelet gui = ; //setup basic parametersgui;//shadow alpha in HSB mode //then we can start creating elements. Here we assume p is the p5js instance://Buttons and similar elements are drawn in CORNER mode, text alginment can be changed //Area prints a rect where specified. Useful for backgroundsgui;//callback function //Buttongui;//textcolor //Interactive slidergui;//maximum value //Toggle creates a button that can be either on or offgui
TODO
- Simplify element creation?
- Make interface clearer
- parenting in gui elements???