configui

    1.1.0 • Public • Published

    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

    dat.GUI menu

    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

    dat.GUI menu

    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;                                                             
    }

    Keywords

    none

    Install

    npm i configui

    DownloadsWeekly Downloads

    14

    Version

    1.1.0

    License

    MIT

    Last publish

    Collaborators

    • donpark