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:

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

const preset = settingsTab.children.map((child) => ({
    [child.controller_.binding.target.key_]: 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
}
parent.refresh()

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:
https://codesandbox.io/s/tweakpane-issue-418-18hong?file=/src/index.js

// 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
  console.log(t.read());
});

FractalHQ wrote this answer on 2022-08-15

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

Your Name

Your Comment

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

YOU MAY BE INTERESTED

Issue Title	Created Date	Updated Date