From dat.GUI

dat.GUI

dat.GUI is the most famous library for tuning parameter values, but regrettably it seems to be inactive at the moment.

  • Popular, many examples can be found on the internet
  • Less file size
  • Built-in preset feature
  • Consistent appearance and API
  • More inputs / UI components
  • Extensible with the plugin system
  • Theming support
  • ...etc.

Basics

import * as dat from 'dat.gui';

const PARAMS = {
  level: 0,
  name: 'Sketch',
  active: true,
};

// Create a pane
const gui = new dat.GUI();

// Add bindings
gui.add(PARAMS, 'level');
gui.add(PARAMS, 'name');
gui.add(PARAMS, 'active');
import {Pane} from 'tweakpane';

const PARAMS = {
  level: 0,
  name: 'Sketch',
  active: true,
};

// Create a pane
const pane = new Pane({
  title: 'Parameters',
});

// Add bindings
pane.addBinding(PARAMS, 'level');
pane.addBinding(PARAMS, 'name');
pane.addBinding(PARAMS, 'active');

Slider and dropdown

// Slider
gui.add(PARAMS, 'size')
  .min(10)
  .max(100)
  .step(1);

// Dropdown
gui.add(PARAMS, 'weight', {
  Normal: 400,
  Bold: 700,
})
// Slider
pane.addBinding(PARAMS, 'size', {
  min: 10,
  max: 100,
  step: 1,
});

// Dropdown
pane.addBinding(PARAMS, 'weight', {
  options: {
    Normal: 400,
    Bold: 700,
  },
});

Color

const PARAMS = {
  color: '#ff0055',
};

// ...

gui.addColor(PARAMS, 'color');
const PARAMS = {
  color: '#ff0055',
};

// ...

pane.addBinding(PARAMS, 'color');

Folders

const f = gui.addFolder('Font');
// Folder is shrinked by default

f.add(PARAMS, 'size');
f.add(PARAMS, 'weight');

// Expand the folder
f.open();
const f = pane.addFolder({
  expanded: false,
  title: 'Font',
});

f.addBinding(PARAMS, 'size');
f.addBinding(PARAMS, 'weight');

// Expand the folder
f.expanded = true;

Buttons

const PARAMS = {
  alert: () => {
    alert('Button pressed!');
  },
};

// Add a function same as other parameters
gui.add(PARAMS, 'alert');
// Add a button, and pass a function
// as a click event handler
pane.addButton({title: 'Alert'})
  .on('click', () => {
    alert('Button pressed!');
  });

Events

gui.add(PARAMS, 'size')
  .onChange((v) => {
    console.log(`${v}`);
  })
  .onFinishChange((v) => {
    console.log(`${v} (last)`);
  });
pane.add(PARAMS, 'size')
  .on('change', (ev) => {
    if (!ev.last) {
      console.log(`${ev.value}`);
    } else {
      console.log(`${ev.value} (last)`);
    }
  });

Custom placement

const gui = new dat.GUI({
  autoPlace: false,
});
containerElem.appendChild(gui.domElement);
const pane = new Pane({
  container: containerElem,
});

Monitoring values

gui.add(PARAMS, 'wave')
  .min(-1)
  .max(+1)
  .listen();
pane.addBinding(PARAMS, 'wave', {
  readonly: true,
  min: -1,
  max: +1,
  view: 'graph',
});

Updating inputs manually

gui.__controllers.forEach((c) => {
  c.updateDisplay();
});
pane.refresh();
© 2018 cocopon.