Tag Archives: javascript

javascript programming

JavaScript – tweakpane example – 001.

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:

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
<!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>

If you want to test just use the Visual Code with Live Server extension, copy the source code and use… Read More »

JavaScript – airtable nodejs example – 002.

In the last tutorial, I used a default template project and this is shown on the source code like this:

JavaScript
1
table.select({maxRecords:3,view:'All tasks'}).firstPage();

If you use a grid view, see the next image: then the source code for selection is this:

JavaScript
1
2
3
table.select({
        view: 'Grid tasks view'
    }).firstPage();

If you want to use javascript, it needs to have a good field name. For… Read More »

Web – Google Book A.P.I. and codepen.

The tool website called codepen.io is a very useful tool in which you can test HTML, CSS, and JavaScript source code with the related libraries. In this short tutorial, I show you I translated a simple example from Google Books A.P.I. in the codepen.io web interface. The basic example of the source code from the… Read More »