Custom components

A new type for uiconfig-tweakpane: add a function to ui.typeGenerators that makes the Tweakpane blade. This one draws a number as a graph.

Tweakpane only

Setup, Tweakpane

import {UI} from 'uiconfig-tweakpane'
import 'uiconfig-tweakpane/theme.css'

// the panel goes into this element (without one, it floats at the top right)
const ui = new UI(document.getElementById('panel'))
ui.setTheme('light') // a mode of theme.css

custom-component.js

// a generator gets the Tweakpane folder, the config and the renderer, and
// returns the blade; it runs again on each refresh, so it keeps the first one
ui.typeGenerators.graph = (parent, config, renderer) => {
    if (config.uiRef) return config.uiRef
    const [target, key] = renderer.methods.getBinding(config)
    const [min, max] = config.bounds ?? [0, 1]
    return parent.addMonitor(target, key, {
        label: renderer.methods.getLabel(config),
        view: 'graph',
        min,
        max,
        interval: 50,
    })
}

const wave = {value: 0, frequency: 1, running: true}
let t = 0
setInterval(() => {
    if (!wave.running) return
    t += 0.05
    wave.value = Math.sin(t * Math.PI * wave.frequency)
}, 50)

ui.appendChild({
    type: 'folder',
    label: 'Signal',
    expanded: true,
    children: [
        {type: 'graph', label: 'Wave', bounds: [-1, 1], property: [wave, 'value']},
        {
            type: 'slider',
            label: 'Frequency',
            bounds: [0.1, 4],
            stepSize: 0.1,
            property: [wave, 'frequency'],
        },
        {type: 'checkbox', label: 'Running', property: [wave, 'running']},
    ],
})

uiconfig-blueprint does not export a way to add component types from its main entry yet.