Category Archives: JavaScript

JavaScript

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 »

Google Apps Script – send mail with map address – part 036.

Open a Spreadsheet and rename the Sheet to test001. Use the next source code:

1
2
3
4
5
6
7
function sendMap() {
  //var sheet = SpreadsheetApp.getActiveSheet();
  var sheet = SpreadsheetApp.getActive().getSheetByName('test001')
  var address = sheet.getRange('A1').getValue();
  var map = Maps.newStaticMap().addMarker(address);
  GmailApp.sendEmail('catafest@yahoo.com', 'Map', 'See below.', {attachments:[map]});
}

This will send a mail to my email address with a map from the address in column A1.

Google Apps Script – RSS reader – part 035.

This is a simple Google Apps Script for read a atom RSS file type. This not work with any rss file type , just with this type:

1
xmlns:atom="http://www.w3.org/2005/Atom"

This is the script:

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
function RSSRead()
{
  var sheet = SpreadsheetApp.getActiveSheet();
  var item, date, title, link, desc;
 
  var txt = UrlFetchApp.fetch("http://free-tutorials.org/feed/").getContentText();
  var document = XmlService.parse(txt);
  var root = document.getRootElement();
  var entries = root.getChildren('channel');
  Logger.log(entries);
  for (var i = 0; i < entries.length; i++) {
    var link = entries[i].getValue();
    for (var j = 0; j < link.length; j++) {
      var link = entries[j].getValue();
    Logger.log(link);
    }
}

Google Apps Script – get all your liked videos – part 034.

In this tutorial, I will show you how to get the first 76 videos from youtube that you clicked on the like button. The dimension parameter is also displayed and its value is returned.

JavaScript
1
2
3
4
5
6
7
8
9
10
function retrieve_youtube_videos_likes() {
  var results = YouTube.Videos.list('snippet, contentDetails', {mine: true, myRating: 'like', maxResults: 76});
  for(var i in results.items)
  {
    var item = results.items[i];
    var id_like_title = item.snippet.title;
    var id_dimension = item.contentDetails.dimension;
    Logger.log('Title:[%s] dimension:[%s]',id_like_title, id_dimension);
  }
}

The result looks like this:

1
2
3
4
11:33:47 PM Info Title:[Rainbow Six Extraction: Sprawl Teaser] dimension:[2d]
11:33:47 PM Info Title:[WIN A FREE Pomera E INK Keyboard by KING JIM- REAL] dimension:[2d]
11:33:47 PM Info Title:[Adafruit Macropad RP2040 bring-up test] dimension:[2d]
11:33:47 PM Info Title:[Boeing MQ-25 Becomes First Unmanned Aircraft to Refuel Another Aircraft] dimension:[2d]

Google Apps Script – get all channels with your likes – part 033.

This tutorial contains a function that can be included in your Google Apps Script and will help you monitor likes based on the youtube channel you liked. The function returns the Youtube channel you liked in the order from the last like to the first.

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
function retrieve_youtube_channels_likes() {
  var results = YouTube.Channels.list('snippet, contentDetails', {mine: true});
  for(var i in results.items)
  {
    var item = results.items[i];
    var playlistId = item.contentDetails.relatedPlaylists.likes;
    var nextPageToken = '';
 
    while (nextPageToken != null) {
      var playlistResponse = YouTube.PlaylistItems.list('snippet',
      {
        playlistId: playlistId,
        maxResults: 25,
        pageToken: nextPageToken
              });
      for (var j = 0; j < playlistResponse.items.length; j++) {
        var playlistItem = playlistResponse.items[j];
        Logger.log('Title:[%s] Id:[%s]', playlistItem.snippet.videoOwnerChannelTitle,
        playlistItem.snippet.videoOwnerChannelId);
      }
      nextPageToken = playlistResponse.nextPageToken;
    }
  }
}

The output results in the Execution log area show… 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 »