Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/repalash/uiconfig-tweakpane
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.
https://github.com/repalash/uiconfig-tweakpane
interfaces javascript json library tweakpane tweakpane-plugin typescript ui
Last synced: 1 day ago
JSON representation
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.
- Host: GitHub
- URL: https://github.com/repalash/uiconfig-tweakpane
- Owner: repalash
- License: mit
- Created: 2023-03-05T09:03:27.000Z (over 1 year ago)
- Default Branch: master
- Last Pushed: 2023-12-21T21:06:25.000Z (11 months ago)
- Last Synced: 2024-11-07T05:44:28.307Z (11 days ago)
- Topics: interfaces, javascript, json, library, tweakpane, tweakpane-plugin, typescript, ui
- Language: TypeScript
- Homepage: http://repalash.com/uiconfig-tweakpane/
- Size: 479 KB
- Stars: 8
- Watchers: 1
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# UiConfig Tweakpane
[](https://www.npmjs.com/package/uiconfig-tweakpane)
[](https://opensource.org/licenses/MIT)
Tweakpane theme/wrapper library for [uiconfig.js](https://github.com/repalash/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.
```bash
npm install uiconfig-tweakpane
```
Use in any javascript/typescript file.
```typescript
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](https://unpkg.com/) or [jsdelivr](https://www.jsdelivr.com/).
```html
```
The module can be accessed with the short-form `tpui`
```html
const config = {
type: "button",
label: "click me",
onClick: () => {
console.log("clicked");
},
}
const ui = new tpui.UI()
ui.appendChild(config)
```
## Configuration
Check the documentation at [uiconfig.js](https://github.com/repalash/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.
```typescript
import { UI } from 'uiconfig-tweakpane';
import { Color, Vector4, Vector3, Vector2 } from 'three';
const ui = new UI();
ui.THREE = {Color, Vector4, Vector3, Vector2}
```