Tweakpane Documentation

repository·main·Indexed 26 days ago

A compact, dependency-free library for fine-tuning parameters and monitoring value changes in real-time. Tweakpane provides a clean, extensible UI featuring input bindings for numbers, strings, booleans, colors, and multi-dimensional points (2D, 3D, 4D), as well as readonly monitors. It includes structural components like folders, tabs, and buttons, and supports extensibility via InputBindingPlugin and MonitorBindingPlugin. Version 4+ uses ES modules, while version 3.x supports CommonJS.

Tokens: 2K
Snippets: 9
Records: 19
Agent score: 89%

What's inside Tweakpane

Overview of Tweakpane features
main
Tweakpane is a compact, dependency-free library for parameter tuning and value monitoring. Key features include:
- Input Bindings: Control values using Number, String, Boolean, Color, and Point (2D/3D/4D) inputs.
- Readonly Bindings: Monitor values (Number, String, Boolean) without allowing user input.
- UI Components: Organize interfaces using Folders, Tabs, Buttons, and Separators.
- Theming: Customizable visual styles.
- Plugins: Extensible architecture for adding new functionality.
- Misc: Mobile support, TypeScript definitions, and JSON import/export capabilities.
https://github.com/cocopon/tweakpane/blob/main/README.md
Install Tweakpane
main
Tweakpane can be installed via npm. If you are developing with TypeScript, you must also install @tweakpane/core to access type definitions.
https://github.com/cocopon/tweakpane/blob/main/README.md
Use Tweakpane with ES Modules or CommonJS
main
Tweakpane version 4 and above uses ES modules. If your project requires CommonJS support, you must use version 3.x of the package.
https://github.com/cocopon/tweakpane/blob/main/README.md
Build Tweakpane from source
main
To set up a local development environment, build the source files, and start a web server to watch for changes, run the following commands in the repository root:
1. Install dependencies: npm ci
2. Run setup: npm run setup
3. Navigate to the package: cd packages/tweakpane
4. Start development: npm start
Once started, you can access the documentation at http://localhost:8080/.
```
$ npm ci
$ npm run setup
$ cd packages/tweakpane
$ npm start
```
https://github.com/cocopon/tweakpane/blob/main/README.md
Use Blade APIs and Parameters
main
Tweakpane provides specialized 'Blade' components through its entrypoint. These include List, Separator, Slider, and Text blades. Each blade provides an API for programmatic control and a Params object for configuration.
https://github.com/cocopon/tweakpane/blob/main/packages/tweakpane/src/main/ts/index.ts
Import Tweakpane core types and interfaces
main
The tweakpane package re-exports all core types and interfaces from @tweakpane/core. This includes parameter objects for various inputs and monitors, as well as API interfaces for controlling UI elements.
```
import {
	BooleanInputParams,
	NumberInputParams,
	StringInputParams,
	ColorInputParams,
	FolderParams,
	ButtonParams,
	// ... other types
} from 'tweakpane';
```
https://github.com/cocopon/tweakpane/blob/main/packages/tweakpane/src/main/ts/index.ts
Extend Tweakpane with a MonitorBindingPlugin
main
Implement the MonitorBindingPlugin interface to add new monitoring/read-only visualizers (e.g., graphs, logs) to Tweakpane.
https://github.com/cocopon/tweakpane/blob/main/packages/core/src/index.ts
Create a Blade controller
main
Use createBladeController to instantiate a controller within the Blade system. This is part of the core Blade API for managing UI components.
https://github.com/cocopon/tweakpane/blob/main/packages/core/src/index.ts
Use the Pane class to create a Tweakpane instance
main
The Pane class is the primary entry point for creating a Tweakpane interface. You can import it from the main tweakpane package to initialize a new UI pane.
https://github.com/cocopon/tweakpane/blob/main/packages/tweakpane/src/main/ts/index.ts
Access Tweakpane version information
main
The current version of the library is exported as a Semver object via the VERSION constant.
https://github.com/cocopon/tweakpane/blob/main/packages/tweakpane/src/main/ts/index.ts
Configure Boolean input bindings
main
When creating a Boolean input binding, you can provide an optional options object of type ListParamsOptions<boolean> to define specific behavior for the boolean toggle.
```
export interface BooleanInputParams extends BaseInputParams {
	options?: ListParamsOptions<boolean>;
}
```
https://github.com/cocopon/tweakpane/blob/main/packages/core/src/blade/common/api/params.ts

Configure Point input bindings (2D, 3D, and 4D)

main

Tweakpane supports multi-dimensional point inputs.

2D Points: Point2dInputParams includes expanded, picker, and specific x and y dimension parameters. The y dimension can be inverted via Point2dYParams.
3D Points: Point3dInputParams provides x, y, and z dimension parameters.
4D Points: Point4dInputParams provides x, y, z, and w dimension parameters.

All point inputs extend PointDimensionParams.

export interface Point2dInputParams
	extends BaseInputParams,
		PointDimensionParams {
	expanded?: boolean;
	picker?: PickerLayout;
	x?: PointDimensionParams;
	y?: Point2dYParams;
}

export interface Point3dInputParams
	extends BaseInputParams,
		PointDimensionParams {
	x?: PointDimensionParams;
	y?: PointDimensionParams;
	z?: PointDimensionParams;
}

export interface Point4dInputParams
	extends BaseInputParams,
		PointDimensionParams {
	x?: PointDimensionParams;
	y?: PointDimensionParams;
	z?: PointDimensionParams;
	w?: PointDimensionParams;
}