Tweakpane essentials plugin

Essential components for Tweakpane.

Installation

Browser

<script type="module">
  import {Pane} as Tweakpane from './tweakpane.min.js';
  import * as TweakpaneEssentialsPlugin from './tweakpane-plugin-essentials.min.js';

  const pane = new Pane();
  pane.registerPlugin(TweakpaneEssentialsPlugin);
</script>

Package

import {Pane} from 'tweakpane';
import * as EssentialsPlugin from '@tweakpane/plugin-essentials';

const pane = new Pane();
pane.registerPlugin(EssentialsPlugin);

Usage

Interval

const params = {
  range: {min: 16, max: 48},
};

pane.addBinding(params, 'range', {
  min: 0,
  max: 100,

  step: 1,
});

FPS graph

const fpsGraph = pane.addBlade({
  view: 'fpsgraph',

  label: 'fpsgraph',
  rows: 2,
});

function render() {
  fpsGraph.begin();

  // Rendering

  fpsGraph.end();
  requestAnimationFrame(render);
}

Radio grid

const params = {
  scale: 25,
};

const scales = [10, 20, 25, 50, 75, 100];
pane.addBinding(params, 'scale', {
  view: 'radiogrid',
  groupName: 'scale',
  size: [3, 2],
  cells: (x, y) => ({
    title: `${scales[y * 3 + x]}%`,
    value: scales[y * 3 + x],
  }),

  label: 'radiogrid',
}).on('change', (ev) => {
  console.log(ev);
});

Button grid

pane.addBlade({
  view: 'buttongrid',
  size: [3, 3],
  cells: (x, y) => ({
    title: [
      ['NW', 'N', 'NE'],
      ['W',  '*', 'E'],
      ['SW', 'S', 'SE'],
    ][y][x],
  }),
  label: 'buttongrid',
}).on('click', (ev) => {
  console.log(ev);
});

Cubic bezier

pane.addBlade({
  view: 'cubicbezier',
  value: [0.5, 0, 0.5, 1],

  expanded: true,
  label: 'cubicbezier',
  picker: 'inline',
}).on('change', (ev) => {
  console.log(ev);
});

Version compatibility

Tweakpane	Essentials
4.x	0.2.x
3.x	0.1.x