Misc

Event handling, importing/exporting a preset, and some tips.

Events

Use on() of specific components to listen its changes. Input components will emit change events. The first argument of the event handler is the event object that contains a value.

const pane = new Pane();
pane.addInput(PARAMS, 'value')
  .on('change', (ev) => {
    console.log(ev.value.toFixed(2));
    if (ev.last) {
      console.log('(last)');
    }
  });

If you want to handle global events (for all of components), on() of the pane is for it.

const pane = new Pane();
pane.addInput(PARAMS, 'boolean');
pane.addInput(PARAMS, 'color');
pane.addInput(PARAMS, 'number');
pane.addInput(PARAMS, 'string');

pane.on('change', (ev) => {
  console.log('changed: ' + JSON.stringify(ev.value));
});

Import/Export

Tweakpane has a feature for importing/exporting bound values in JSON object. Use exportPreset() to export it.

const pane = new Pane();
// pane.addInput(PARAMS, ...);
// pane.addInput(PARAMS, ...);

const preset = pane.exportPreset();
console.log(preset);

To import an exported JSON object, pass it to importPreset().

const pane = new Pane();
// pane.addInput(PARAMS, ...);
// pane.addInput(PARAMS, ...);

pane.importPreset(preset);

If your pane contains parameters with the same name, specify presetKey to avoid the confliction.

const pane = new Pane();
pane.addInput(PARAMS1, 'speed');
pane.addInput(PARAMS2, 'speed', {
  presetKey: 'speed2',
});

Tips

Custom container

If you want to put a pane into the specific element, pass it as container option of the pane.

const pane = new Pane({
  container: document.getElementById('someContainer'),
});

Custom label

You can set a label of components by label option.

const pane = new Pane();
pane.addInput(PARAMS, 'initSpd', {
  label: 'Initial speed',
});
pane.addInput(PARAMS, 'size', {
  label: 'Force field\nradius',
});

Refresh manually

By default, Tweakpane doesn't detect changes of bound parameters. Use refresh() to force-update all input/monitor components.

const pane = new Pane();
// pane.addInput(PARAMS, ...);
// pane.addInput(PARAMS, ...);

pane.refresh();

Visibility

Toggle hidden property to show/hide components.

const pane = new Pane();
const f = pane.addFolder({
  title: 'Advanced',
});

// ...

btn.on('click', () => {
  f.hidden = !f.hidden;
});

Disabled

Use disabled property to disable a view temporarily.

const pane = new Pane();
const i = pane.addInput(PARAMS, 'param', {
  disabled: true,
  title: 'Advanced',
});

// ...

btn.on('click', () => {
  i.disabled = !i.disabled;
});

Disposing

If you want to dispose a pane manually, call dispose() of the pane. You can also dispose each component in the same way.

const pane = new Pane();
const i = pane.addInput(PARAMS, 'count');

// ...

// Dispose the input
i.dispose();

// Dispose the pane
pane.dispose();

Adding input/monitor at a specific position

Use index option to specify an index.

const pane = new Pane();
pane.addButton({title: 'Run'});
pane.addButton({title: 'Stop'});
pane.addButton({
  index: 1,
  title: '**Reset**',
});
© 2018 cocopon.