Tweakpane essentials plugin

Essential components for [Tweakpane][tweakpane].


Installation

$3

``html

`

$3

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

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




Usage




$3

!interval

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

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

step: 1,
});
`




$3

!fpsgraph

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

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

function render() {
fpsGraph.begin();

// Rendering

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




$3

!radiogrid

`js
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);
});
`




$3

!buttongrid

`js
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);
});
`




$3

!cubicbezier

`js
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 |

[tweakpane]: https://github.com/cocopon/tweakpane/