WaveformMonitor

Visualize multiple numeric values as a waveform.

Integrates Simon Schödler's tweakpane-plugin-waveform.

See <Monitor> component if you want to graph a single value's change over time.

Usage outside of a <Pane> component will implicitly wrap the waveform monitor in <Pane position="inline">.

Note that Svelte Tweakpane UI embeds a functionally identical fork of the plugin with build optimizations.

---

Example

Demo

Code

WaveformMonitorExample.svelte

<script lang="ts">
  import { WaveformMonitor } from 'svelte-tweakpane-ui'

  let waveData = [5, 6, 7, 8, 9, 3, 9, 8, 7, 6, 5]

  setInterval(() => {
    waveData = waveData.map((v) =>
      Math.max(0, Math.min(10, v + (Math.random() * 2 - 1) * 0.5)),
    )
  }, 10)
</script>

<WaveformMonitor value={waveData} min={-1} max={11} lineStyle="bezier" />

---

Props

disabled optional
Description	Prevent interactivity and gray out the control.
Type	boolean
Default	false

theme optional
Description	Custom color scheme. If undefined, inherits default Tweakpane theme equivalent to ThemeUtils.presets.standard, or the theme set with setGlobalDefaultTheme().
Type	Theme
Default	undefined

rows optional
Description	Number of visible rows of state history. If bufferSize is larger, then the value window will scroll once state history exceeds row count. If value is string and multiline is true, default value is 3.
Type	number
Default	1

label optional
Description	Text displayed next to control.
Type	string
Default	undefined

value bindablerequired
Description	The value to control. Waveform values.
Type	WaveformMonitorValue

interval optional
Description	Time between value samples in milliseconds. Useful when graph is true. Defaults to reactive value updates only (interval={0}).
Type	number
Default	0

bufferSize optional
Description	Number of past states to retain. If value is number and graph is true, default value is 64.
Type	number
Default	1

min optional
Description	Minimum graph bound.
Type	number
Default	0

max optional
Description	Maximum graph bound.
Type	number
Default	100

lineStyle optional
Description	Line style.
Type	'bezier' | 'linear'
Default	'linear''