uiconfig-tweakpane

UiConfig Tweakpane

NPM Package License: MIT

Tweakpane theme/wrapper library for uiconfig.js: A UI renderer framework to dynamically generate website/configuration UIs from a JSON-like configurations and/or typescript decorators.

It includes several components for editor-like user interfaces like folders, sliders, pickers, inputs for string, number, file, vector, colors, etc.

The UI components are bound to javascript/typescript objects and properties through a JSON configuration.

Examples

Basic Examples: https://repalash.com/uiconfig.js/examples/index.html

Threepipe Basic UI: https://threepipe.org/examples/#tweakpane-ui-plugin/

Threepipe Editor: https://threepipe.org/examples/#tweakpane-editor/

Installation and Usage

npm package

Install the uiconfig-tweakpane package from npm.

npm install uiconfig-tweakpane

Use in any javascript/typescript file.

import { UI } from 'uiconfig-tweakpane';

const config = {
type: "slider",
label: "slider",
value: 0.5,
bounds: [0, 1],
onChange: () => {
console.log("changed", config.value);
},
}

const ui = new UI();
ui.appendChild(config);

CDN link

The module can be imported to HTML/JS a CDN link using unpkg or jsdelivr.

<script src="https://unpkg.com/uiconfig-tweakpane"></script>
<!--or-->
<script src="https://cdn.jsdelivr.net/npm/uiconfig-tweakpane"></script>

The module can be accessed with the short-form tpui

<script>
const config = {
type: "button",
label: "click me",
onClick: () => {
console.log("clicked");
},
}

const ui = new tpui.UI()
ui.appendChild(config)
</script>

Configuration

Check the documentation at uiconfig.js on how to create a configuration for the UI.

Components

  1. folder/panel - A folder that can be collapsed and expanded. It can have other components as children.
  2. input - A text input field for any kind of primitive types. The type is determined automatically from initial value.
  3. number - A number input field for numbers.
  4. slider - A slider for numbers.
  5. dropdown - A dropdown. Options can be specified in children with label and optional value properties.
  6. checkbox/toggle - A checkbox for boolean values.
  7. button - A button that can trigger a function, onClick or bound property/value function.
  8. color - A color picker for colors.
  9. vector/vec2/vec3/vec4 - Multiple number input fields in a row for vectors.

Three.js integration

Set the three.js classes for Color, Vector2, Vector3, Vector4 in the renderer and the color and vector components will automatically use them.

import { UI } from 'uiconfig-tweakpane';
import { Color, Vector4, Vector3, Vector2 } from 'three';

const ui = new UI();
ui.THREE = {Color, Vector4, Vector3, Vector2}

Generated using TypeDoc