Programatically get/set color values?

This issue has been tracked since 2022-08-10.

Hey there! I've been having a lot of fun hacking on tweakpane, it's an incredible library 💙

TLDR: What is the best way to programatically get/set color values?

I'm building a system that allows me to add "Smart Folders" instead of the builtin folders so that they each have their own preset managers scoped to the folder (each with a Settings tab and Presets tab, like so:

Screenshot 2022-08-10 at 5 38 07 PM

For numbers, I can save the values in an object with

const preset = => ({
    []: child.controller_.binding.value.rawValue,

I can then load and loop over the preset objects, updating the source object directly like so:

for (const [key, value] of Object.entries(preset)) {
    sourceObj[target][key] = value

While this feels super hacky, it works great! However, with color values, it breaks down quickly 😅

What is the best way to programatically get/set color values in a situation like this?

FractalHQ wrote this answer on 2022-08-15

I'm pretty close with my hacky solution, but the color values are always stored as hsv, making it really tricky doing conversions without confusing tweakpane. Not sure how to properly set the mode manually.

cocopon wrote this answer on 2022-08-15

Here is how to convert an internal color object to a bound value:

// WARNING: This uses some private fields and is NOT a recommended way

import { Pane } from 'tweakpane';
import { BindingTarget } from '@tweakpane/core';

const params = { foo: { r: 0, g: 0, b: 0, a: 1 } };

const pane = new Pane();
const input = pane.addInput(params, 'foo');

pane.addButton({ title: 'Read' }).on('click', () => {
  const b = input.controller_.binding;

  // InputBinding needs a BindingTarget to read/write values,
  // so create a temporary binding target
  const t = new BindingTarget({ tmp: { r: 0, g: 0, b: 0, a: 1 } }, 'tmp');

  // Write the current raw value to the target
  b.writer(t, b.value.rawValue);

  // Read the written value
FractalHQ wrote this answer on 2022-08-15

That's super helpful- I'll try it out! Thanks!!

More Details About Repo
Owner Name cocopon
Repo Name tweakpane
Full Name cocopon/tweakpane
Language TypeScript
Created Date 2016-05-10
Updated Date 2023-03-17
Star Count 2603
Watcher Count 19
Fork Count 71
Issue Count 11


Issue Title Created Date Updated Date