search

kitschpatrol / svelte-tweakpane-ui

A Svelte component library wrapping UI elements from Tweakpane, plus some additional functionality for convenience and flexibility.
https:///kitschpatrol.com/svelte-tweakpane-ui
MIT License
105 stars 3 forks source link

Not sure how to identify targets ? #9

Closed cristianvogel closed 3 months ago

cristianvogel commented 3 months ago

Working with the library for a VST plugin. I have a bunch of sliders, and my usual pattern is to update the host parameters from each slider, according to where the value is coming from. Then that UI paramter can also be controlled from automation in the host. So I need to have a mechanism to identify and route from and to sliders/controllers. My usual method is to use the html data-key property on input elements, and attach param names to that. But I can't see how I can pass a name, identifier or something in , for example, a SliderChangeEvent - that would be enough for me to do the routing.

cristianvogel commented 3 months ago

I figured out how to do it by passing the data I need through the on:change emitter, and the solution provided is certainly flexible enough for my needs so far. Thanks again for this great UI addition for Svelte

on:change={ (e) => updateControls( {value: e.detail.value, origin: e.detail.origin, id: paramId } ) }

kitschpatrol commented 3 months ago

Thanks — yes Svelte's two-way bindings can make this tricky. I'm glad you found a way to get it working as you needed, on:change was added as an escape hatch for this kind of thing.

You probably spotted it already, but there's a brief discussion of the change event and its internal / external payload which can also be useful for this sort of thing: https://kitschpatrol.com/svelte-tweakpane-ui/docs/features#value-change-event-origins

Good luck with your project. Feel free to open additional issues / questions.