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
BUFI - a lightweight script-based GUI for use with p5js
This is a lightweight GUI library (partly inspired by this thread) that I'm currently working on. It's effectively a simplified equivalent to ControlP5 for use in p5js; or other JS based applications (it has no dependency on p5js).
You can use it to add controls directly from your sketch code (no need for manual HTML editing!) and register a callback function that feeds user input directly to your p5js sketch. Current supported controls are as follows:
- buttons
- checkboxes
- switches - just fancy checkboxes ;)
- radio buttons
- range slider for numeric input
- grouped controls
Styling is currently added care of Materialize; though I may offer a more lightweight alternative if I can't get the current CSS file size down somewhat...
This is still very much in beta; but I'm releasing it here to see if I can get some feedback from any would-be guinea pigs :D
- JS source
- CSS source
- Readme
- p5 demo - not especially exciting; but demonstrates integration with a p5 sketch
- controls examples - examples of all the controls (and some options) available
Edit: I've updated the source links to the latest version and my newly created repo. You can now set the values of controls from within your sketch code. Going to update the demo shortly :)
Comments
Thanks for that! Nice to have that kind of control, and perhaps it'll make it a bit easier to convert sketches that currently rely on ControlP5...
Thanks! Just posted an updated demo and links to the latest source files with added functionality. I still have a minor bug to fix and I want to reduce CSS size substantially; but otherwise reasonably happy with how this turned out. It is perhaps a little configuration heavy; but hopefully the format is easy enough to understand.
I may look into simplifying it further; though it's worth mentioning that @Andreas_Ref helpfully linked to an existing lightweight GUI library: dat.GUI. That looks somewhat more mature and feature-rich than mine!