JavaScript – tweakpane example – 001. – free-tutorials.org news free tutorials source code development scripts

This is a simple example with the tweakpane.
Tweakpane is a compact pane library for fine-tuning parameters and monitoring value changes.
I tested with this example source code created by me and works great:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <script src="https://cdn.jsdelivr.net/npm/tweakpane@3.1.1/dist/tweakpane.min.js"></script>
</head>
<body>
  <div>TEST Tweakpane example</div>
  <div id='container' data-width="10px" style="width: 300px;"><canvas></canvas></div>
<script>

const size = +document.querySelector('#container').dataset.width
const canvas = document.querySelector('canvas')
canvas.width = size
canvas.height = size
const ctx = canvas.getContext('2d')
ctx.translate(size / 2, size / 2)

// a default definition for a class is not used to draw now
class ClassTEST {
  var_x = 0.5;
  var_y = 0.5;
  constructor() {
    this.setup()
    this.draw()
  }
  setup = () => {
    this._var_x = this.var_x
    this._var_y = -this.var_y
  };
  draw = () => {
    ctx.beginPath()
    
    requestAnimationFrame(this.draw)
  };
}
// end class ClassTEST
// create the new ClassTEST instance not used 
const newClassTEST = new ClassTEST();
// next rows is used to draw on browser 
const pane = new Tweakpane.Pane({container : document.getElementById('container')});

const folder = pane.addFolder({
  title: "Controls"
});

let values = {
  count: 1,
  lines: 1
}; 

folder.addInput(values, 'count', {
  min: 0,
  max: 99,
  step: 1
})

folder.addInput(values, 'lines', {
  min: 10,
  max: 100,
  step: 1
})

const btn = pane.addButton({
  title: 'Increment count by 3',
  //label: 'counter',   // optional
});

btn.on('click', () => {
  values.count += 3;
  pane.refresh();
});

const folder2 = pane.addFolder({
  title: "show a title "
});

const lastChange = (e) => e.last && s.setup()
folder2.addInput(newClassTEST, 'var_x', { min: 0.35, max: 0.95, step: 0.01 }).on('change', lastChange)
folder2.addInput(newClassTEST, 'var_y', { min: 0.2, max: 1, step: 0.01 }).on('change', lastChange) 

</script>
</body>
</html>

<!DOCTYPE html>

<head>

<title>Document</title>

</head>

<body>

<div>TEST Tweakpane example</div>

const size = +document.querySelector('#container').dataset.width

const canvas = document.querySelector('canvas')

canvas.width = size

canvas.height = size

const ctx = canvas.getContext('2d')

ctx.translate(size / 2, size / 2)

// a default definition for a class is not used to draw now

class ClassTEST {

var_x = 0.5;

var_y = 0.5;

constructor() {

this.setup()

this.draw()

}

setup = () => {

this._var_x = this.var_x

this._var_y = -this.var_y

};

draw = () => {

ctx.beginPath()

requestAnimationFrame(this.draw)

};

}

// end class ClassTEST

// create the new ClassTEST instance not used

const newClassTEST = new ClassTEST();

// next rows is used to draw on browser

const pane = new Tweakpane.Pane({container : document.getElementById('container')});

const folder = pane.addFolder({

title: "Controls"

});

let values = {

count: 1,

lines: 1

};

folder.addInput(values, 'count', {

min: 0,

max: 99,

step: 1

})

folder.addInput(values, 'lines', {

min: 10,

max: 100,

step: 1

})

const btn = pane.addButton({

title: 'Increment count by 3',

//label: 'counter', // optional

});

btn.on('click', () => {

values.count += 3;

pane.refresh();

});

const folder2 = pane.addFolder({

title: "show a title "

});

const lastChange = (e) => e.last && s.setup()

folder2.addInput(newClassTEST, 'var_x', { min: 0.35, max: 0.95, step: 0.01 }).on('change', lastChange)

folder2.addInput(newClassTEST, 'var_y', { min: 0.2, max: 1, step: 0.01 }).on('change', lastChange)

</script>

</body>

</html>

If you want to test just use the Visual Code with Live Server extension, copy the source code and use the right click and select: Open with Live Server.

Leave a Reply Cancel reply