JS Action/Object SDK Documentation

JS Object is first released in EasyBuilder Pro v6.05.01 in 2020.
The goal of this object is to help create an user-customizable object.

Quick Start

When a JS Object is created, this refers to the JsObject itself.

console.log("Hello World");
console.log("Config:", this.config);
console.log("State:", this.state);

MouseArea

To capture any mouse event, use MouseArea.
It must be created and added to the widget container for it to start working.

var ma = new MouseArea();
ma.on("mousedown", function(e) {
    console.log("I am clicked");
})
this.widget.add(ma);

Canvas

To draw something, use Canvas.
Same as MouseArea, it must be created and added to widget container.

var canvas = new Canvas();
this.widget.add(canvas);
// draw text
canvas.fillStyle = "black";
canvas.font = `10px Consolas`;
canvas.fillText("Hello World", 0, 10);
// draw a rectangle
canvas.fillStyle = 'green';
canvas.fillRect(20, 20, 150, 100);

Read Device Data (Synchronous)

To read Device/PLC data, you need to configure the address beforehand in [Config] tab of JS Object.

Assume we have configured one called param1 as driver.Address.
We can retrieve its value by calling driver.promises.getData with await and promises

var data = await driver.promises.getData(this.config.param1, 1);
console.log(data.values[0]);

Read Device Data (Asynchronous)

To read Device/PLC data, you need to configure the address beforehand in [Config] tab of JS Object.

Assume we have configured one called param1 as driver.Address.
We can retrieve its value by calling driver.getData with a callback.

driver.getData(this.config.param1, 1, function(err, data) {
    if (err) {
        console.log('Error:', err.message);
    } else {
        console.log(data.values[0]);
    }
});

Runtime Context

When a JS Object is created, it will be given a context shared with all other JS object in the same window.
See window.

JS Action

JS Object is a powerful and convenient way to write and design your own object.
Sometimes, if multiple cMT Viewers open the same window, the object will be triggered multiple times.
Or, you would like to run specific tasks on-demand without the JS Object subscribing tons of variables.

JS Action provides an alternative way to run JavaScript code on-demand via [Action Trigger] or [Combo Button].
It can run JavaScript code in the background (see note 1) without placing a JS Object on the screen.
To use, in [Action Trigger] or [Combo Button], add a JS Action with [Execute JS] and run scripts as needed.

Note:

  1. To use run JS Action only once in the background, use [Value changed] or [Condition Object] mode in [Action Trigger (Global)].
    Other JS Actions will run in the foreground GUI, HMI or cMT Viewer, and you may find multiple JS Actions running on each of them.
  2. JS Action does not require any screen-related operation so you might find some functions are missing:
  3. Any setTimeout or setInterval have to finish or cancelled so the next action group can start.

JS Object Changelog

Listed according to EasyBuilder Pro versions:

  • 2022-07-29: v6.07.02.282 and v6.07.01.448
    • Fixed console logs from [Execute JS] in [Action Trigger] did not show
  • 2022-03-02: v6.07.01.188 (cMT Viewer 2.18.19) & v6.06.02.380 (cMT Viewer 2.17.49)
  • 2022-02-11: v6.07.01.131
    • Added JS Action for [Action Trigger] and [Combo Button] objects. Use [Execute JS] to run JS Action.
  • 2021-12-28: v6.06.02.291 (cMT Viewer 2.17.7) & v6.06.01.602 (cMT Viewer 2.16.59)
  • 2021-08-25: v6.06.02.052 (cMT Viewer 2.17.2)
  • 2021-04-22: v6.05.02.439
    • Fixed console.log() in cMT Diagnoser
  • 2020: v6.05.01
    • First official release of JS Object