https://github.com/petrbroz/tweakpane-plugin-graph

Graph plugin for the Tweakpane library.
https://github.com/petrbroz/tweakpane-plugin-graph

Last synced: 6 months ago
JSON representation

Graph plugin for the Tweakpane library.

• Host: GitHub
• URL: https://github.com/petrbroz/tweakpane-plugin-graph
• Owner: petrbroz
• License: mit
• Created: 2023-12-07T08:29:00.000Z (almost 2 years ago)
• Default Branch: develop
• Last Pushed: 2023-12-08T11:08:17.000Z (almost 2 years ago)
• Last Synced: 2025-02-17T20:41:26.721Z (8 months ago)
• Language: TypeScript
• Homepage: https://petrbroz.github.io/tweakpane-plugin-graph/demo.html
• Size: 156 KB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE.txt

Awesome Lists containing this project

README

          
# Tweakpane Graph Plugin

Graph plugin for [Tweakpane](https://github.com/cocopon/tweakpane). Similar to the built-in graph monitor but with auto-scaling, and min/max/last values displayed as well.

![Preview](./preview.png)

## Installation

### Browser

```html

    import { Pane } as Tweakpane from 'https://cdn.jsdelivr.net/npm/tweakpane@4.0.1/dist/tweakpane.min.js';

    import * as TweakpaneGraphPlugin from './tweakpane-plugin-graph.min.js';

    const pane = new Pane();

    pane.registerPlugin(TweakpaneGraphPlugin);

```

### Package

```js

import { Pane } from 'tweakpane';

import * as TweakpaneGraphPlugin from 'tweakpane-plugin-graph';

const pane = new Pane();

pane.registerPlugin(TweakpaneGraphPlugin);

```

## Usage

```js

const params = {

    val: 0.0,

};

setInterval(() => {

    params.val = Math.random() * 2.0 - 1.0;

}, 100);

const pane = new Pane();

pane.addBinding(params, 'val', { view: 'graph2', readonly: true });

window.pane = pane;

```