simple scripted UI controls
As much an exercise in getting more familiar with Browserify, Gulp etc. as addressing a common requirement I have to quickly add controls to a sketch from within my sketch code. There are libraries out there that already do much of this (e.g. dat.gui); so if you're looking for something a little more mature have a dig around first: I haven't thoroughly tested or documented this yet and may not continue to develop it going forward.
- MaterialiseCSS (github)
- EJS - templates
- eventlistener
At the bottom of <body> pull the script:
<script src="js/bufi.min.js"></script>
Add the control object (ideally specifying the #id of a target container element already added to your HTML - failing that your controls will be appended to <body>):
var controls = new bufi('#control01');
Then, to add controls, use `bufiInstance.add(type [String], options [Object], callback [Function]). For example:
controls.add('button',
{
btnClass: 'btn-large',
colour: 'red',
label: 'my special button'
},
myCallbackFunction);
Available control types are as follows:
-
button
returns: true
options:- id
- btnClass ["btn", "btn-large"]
- colour []
- label
-
checkbox
returns: true/false
options:- id
- label
- checked [true]
-
switch
like a checkbox, but fancier with off/on labels
returns: true/false
options:- off
- on
- checked [true]
-
radio
returns: event.target.value
options:- id
- input - accepts an array of objects:
{label : "label", value: "value", [checked: true]}
-
range
returns: true/false
options:- id
- label
- value
- min
- max
- step
You can also group controls into a fieldset with bufiInstance.addControlGroup([controlParamObjects], label, id)
Each controlParamObject should be in the form:
{type: controlType, options: optionsObject, callback: callbackFunction}
Which match the options described when adding individual controls.
A couple of examples are included; including a p5js sketch.
- more documentation :/
- minify CSS properly (e.g. with uncss)
- testing
- use browserify standalone mode to allow use of require()