Monitor Components

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

🔗

<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

🔗

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

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

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

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

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

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.
Type	`number`
Default	`1` Or `3` if value is `string` and `multiline` is `true`.

bufferSize 🔗 optional
Description	Number of past states to retain.
Type	`number`
Default	`1` Or `64` if value is `number` and `graph` is `true`.

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`

WaveformMonitor

Example

Demo

Code

Props

value

min

max

lineStyle

disabled

label

theme

rows

bufferSize

interval