Refresh Pane

[BrandlMax]

Hello everybody!

I am using your cool library and trying to update values in the GUI. Tweakpane has the function pane.refresh() (Tweakpane API). Is there a way to trigger this in use-tweaks?

Thanks a lot! Max

[dbismut]

We've moved to cooking another GUI lib now, made for React from the ground up. But I'm curious to know what's the usecase where you need to force update the panel?

[BrandlMax]

Hey @dbismut, Oh, I see, "leva".

The case where I need it is when I change my camera manually (by animation or mouse) I would like to change / update the x,y,z sliders at the same time.

Leva looks pretty good! Is it possible to update fields here? I think I will give it a try.

Thank you, Max

[dbismut]

Hi Max, leva has indeed this feature built-in, where you can set imperatively the values of the panel.

Here's an advanced example of how you can use leva with multiple bi-directional stores, using the usePanel api that generates a store per hook. https://codesandbox.io/s/leva-ui-45bkg

In your case you would be able to use the generic useControls hook with the function signature, like so:

// standard api
const values = useControls({ camera: [0,0,1] })

// function api
const [values, store, set] = useControls(() => ({ camera: [0,0,1] })
const onCameraMove = (newPosition) => set({ camera: newPosition })

[BrandlMax]

Wow! This is really impressive, however when I try to implement the example from you:

const [values, store, set] = useControls(() => ({ camera: [0, 0, 1] }));

I get the following error: TypeError: undefined is not a function (near '...[values, store, set]...')

The Standard API works. Am I missing something? Unfortunately, the part is not yet written in the API documentation.

Thank you! Max

[BrandlMax]

I think I have found the problem. The version of Leva on NPM does not yet have this functionality. But when I use https://pkg.csb.dev/pmndrs/leva/commit/4614dd2d/leva It works 🙈

Thank you so much for your help and time!

[dbismut]

Indeed, you need to use the package url code sandbox CI generates for us! This is still under intense development, I think the API is almost final but clearly documentation and testing isn't done yet. Use it at your own risk ;)

[gsimone]

And leave feedback if you do use it 🙉