Tweakpane

Overview

Tweakpane is a JavaScript library that provides a compact user interface for fine-tuning/monitoring values. It's originally inspired by the popular library dat.GUI.

Features

Demo

<!-- In the head tag -->
<link rel="stylesheet" href="tweakpane-0.1.3.min.css">

...

<!-- In the body tag -->
<script src="tweakpane-0.1.3.min.js"></script>
<script>
var sketch = new Sketch();

var pane = new Tweakpane();

var f1 = pane.addFolder('Appearance');
f1.addSelector(sketch, 'neta', {
  values: ['hotate', 'maguro', 'salmon']
});

var f2 = pane.addFolder('Physics');
f2.addSlider(sketch, 'gravity', {min: 0.1, max: 1.0});
f2.addSlider(sketch, 'airResistance', {min: 0.01, max: 0.1});
f2.addSlider(sketch, 'restitution', {min: 0.0, max: 0.9});
f2.addSeparator();
f2.addGraph(sketch.getNeta(), 'z', {
  label: 'netaAlt',
  count: 140,
  min: 0,
  max: 100
});
f2.addSeparator();
f2.addButton('Pop!').on('click', function() {
  sketch.pop();
});
</script>

...
Follow @cocopon Star