Skip to content

Latest commit

 

History

History
91 lines (66 loc) · 2.58 KB

README.md

File metadata and controls

91 lines (66 loc) · 2.58 KB
Raw

BUFI

simple scripted UI controls

Description

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.

Dependencies

Usage

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.

TODO:

  • more documentation :/
  • minify CSS properly (e.g. with uncss)
  • testing
  • use browserify standalone mode to allow use of require()