configui

configui make objects configurable using dat.GUI.

Status

This package is stable and is being used during development of commercial products.

Assuming minimal requirements and features, I intend to provide reasonable level of support for this package but feel free to fork, hack, or plunder.

How it works

configui exports just one function, configurable, that accepts an object containing configuration key/value pairs. When dat.GUI is available, configurable function will enumerate the key/value pairs to add them to dat.GUI.

import { configurable } from 'configui'
let config = configurable({ foo: 'bar' }) // make foo configurable.

Dependencies

No NPM dependencies but needs dat.GUI to function and is at best used in React.js apps with mobx.

To enable, make sure window.dat.GUI is set (typically by adding following line or equivalent in HTML file).

<script type="text/javascript"
    src="https://cdnjs.cloudflare.com/ajax/libs/dat-gui/0.5.1/dat.gui.min.js"></script>

Without dat.GUI, configurable function will just passthrough the object.

Usage

Full function signature of configurable is:

function configurable (
  configurableObject, // required
  constraints,        // optional object with matching structure
  section             // optional section title
)

This package is being used in a React.js app with mobx so usage examples does the same but it can be used standalone.

Create a configurable object and use its values

import { configurable } from 'configui'
import { observable } from 'mobx'
import { observer } from 'mobx-react'

var webrtcConfig = configurable(observable({
  'turnOnly': false,
  'local': {
    video: true,
    audio: true,
  },
  'remote': {
    video: true,
    audio: true,
  },
}))

const WebRTCView = observer(React.createClass({
  render() {
    // this nudges mobx into re-rendering WebRTCView whenever webrtcConfig.local.video changes
    let enableLocalVideo = webrtcConfig.local.video
    ...
  },
}))

dat.GUI menu result

Configurable value constraints

Constraints supported are:

• min
• max
• step
• values - possible values

import { configurable } from 'configui'
import { observable } from 'mobx'
import { observer } from 'mobx-react'

var webrtcConfig = configurable(observable({
  noiseStrength: 5,
  growthSpeed: 0,
  maxSize: 0,
  message: 'pizza',
}), {
  noiseStrength: {
    steP: 5,
  },
  growthSpeed: {
    min: -5,
    max: 5,
  },
  maxSize: {
    min: 0,
    step: 0.25,
  },
  message: {
    values: [ 'pizza', 'chrome', 'hooray' ],
  },
})

Grouping configurables from different modules

in AppView module:

const appConfig = configurable(observable({
  backgroundColor: '#ffae23',
}), 'App')

in WebRTCView module:

var webrtcConfig = configurable(observable({
  'turnOnly': false,
  ...
}), 'WebRTC')

dat.GUI menu result

Bootstrap integration

To resolve dat.GUI and Bootstrap 3+ integration issues, add following CSS fragments:

.dg.ac {
  z-index: 2000 !important;
}
.dg .c input[type=text] {                                                       
  line-height:normal;                                                                  
} 
.dg .c div {
  box-sizing: content-box;                                                             
}