Tweakpane Waveform plugin

Waveform Monitor for Tweakpane.

Installation

Browser

<script src="tweakpane.min.js"></script>
<script src="tweakpane-plugin-waveform.min.js"></script>
<script>
  const pane = new Tweakpane.Pane();
  pane.registerPlugin(TweakpaneWaveformPlugin);
</script>

Package

import {Pane} from 'tweakpane';
import * as WaveformPlugin from '@tweakpane/plugin-waveform';

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

Usage

const params = {
  prop1: [ 5, 6, 7, 8, 9, 3, 9, 8, 7, 6, 5 ],
  prop2: new Uint8Array(8).fill(0).map((_, i) => Math.pow(2, i+1) - 1),
};

pane.addBinding(params, 'prop1', {
  view: 'waveform',
  min: 0,
  max: 10,
  style: 'bezier',
  interval: 100,
})

pane.addBinding(params, 'prop2', {
  view: 'waveform',
  min: 0,
  max: Math.pow(2, 8),
  interval: 500
})

Notes

• If you omit the min / max properties, they will be inferred from the most recent (plotted) value each time the view updates.
• If your array-to-monitor's length is smaller than 32 entries and has a max peak-to-peak difference of 50, a grid will be displayed