cocopon / tweakpane

:control_knobs: Compact GUI for fine-tuning parameters and monitoring value changes
https://tweakpane.github.io/docs/
MIT License
3.44k stars 86 forks source link

Log scale for numeric ranges #56

Closed fenomas closed 3 years ago

fenomas commented 4 years ago

Great library!

Would it be possible to add an option for numeric ranges to use a log scale? That is, something like:

PARAMS.frequency = 440
pane.addInput(PARAMS, 'frequency', {
  min: 100,
  max: 10000,
  logScale: true,
});

And then in the above example, the middle of the slider would correspond to 1000 rather than 5050.

Thanks for considering!


Note for anyone else needing this: I'm currently hacking in this functionality by overwriting the input's formatter, thusly:

var min = 100
var max = 10000
PARAMS.frequency = 440

PARAMS.logFrequency = Math.log10(PARAMS.frequency)
var input = pane.addInput(PARAMS, 'logFrequency', {
    label: 'frequency',
    min: Math.log10(min),
    max: Math.log10(max),
})

// make the text label show the non-log scale value
var formatter = (v) => Math.pow(10, v) | 0
input.controller.controller.view_.textInputView_.formatter_.format = formatter

// to initialize the formatted display
PARAMS.logFrequency *= 1.00001
input.refresh()

// the actual param we want
input.on('change', v => { PARAMS.frequency = formatter(v) })

But obviously real support would be better.

cocopon commented 3 years ago

Just released 3.0.0, and now the plugin system becomes more stable! You can create this kind of control as a plugin, so please refer resources below if you are interested:

Plugin template: https://github.com/tweakpane/plugin-template Builtin slider plugin: https://github.com/cocopon/tweakpane/tree/c3cc7296b8b82fe33e0f4fed472a501916aa902e/packages/core/src/blade/button