JS 元件/动作 SDK

JS Object (JS 元件) 首次发布于 2020 年的 EasyBuilder Pro v6.05.01。
目标是帮助创建用户可自定义的元件。

快速开始

当创建 JS 元件时，this 指向 JsObject 本身。

console.log("Hello World");
console.log("配置:", this.config);
console.log("状态:", this.state);

MouseArea（鼠标区域）

要捕获任何鼠标事件，请使用 MouseArea。
它必须被创建并添加到组件容器中才能开始工作。

var ma = new MouseArea();
ma.on("mousedown", function(e) {
    console.log("我被点击了");
})
this.widget.add(ma);

Canvas（画布）

要绘制内容，请使用 Canvas。
与 MouseArea 类似，它必须被创建并添加到组件容器中。

var canvas = new Canvas();
this.widget.add(canvas);
// 绘制文本
canvas.fillStyle = "black";
canvas.font = `10px Consolas`;
canvas.fillText("Hello World", 0, 10);
// 绘制矩形
canvas.fillStyle = 'green';
canvas.fillRect(20, 20, 150, 100);

读取设备数据（同步方式）

要读取设备/PLC 数据，需要先在 JS 元件的 [配置] 选项卡中配置地址。

假设我们已经配置了一个名为 param1 的变量，类型为 driver.Address。
可以使用 await 和 promises 通过 driver.promises.getData 方法获取其值。

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

读取设备数据（异步方式）

要读取设备/PLC 数据，需要先在 JS 元件的 [配置] 选项卡中配置地址。

假设我们已经配置了一个名为 param1 的变量，类型为 driver.Address。
可以使用 driver.getData 方法并传入回调函数来获取其值。

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

运行时上下文

当 JS 元件被创建时，它会被赋予一个在同一窗口内所有 JS 元件共享的上下文。
请参阅 window。

JS Action（JS 动作）

JS 元件是一个强大且方便的工具，可用于编写和设计自定义对象。
有时候，如果多个 cMT Viewer 打开同一个窗口，对象可能会被触发多次。
或者，你可能希望按需运行特定任务，而不需要 JS 元件订阅大量变量。

JS Action 提供了一种替代方法，可以通过 [Action Trigger] 或 [Combo Button] 按需运行 JavaScript 代码。
它可以在后台运行 JavaScript 代码（见备注 1），而无需在屏幕上放置 JS Object。
要使用该功能，在 [Action Trigger] 或 [Combo Button] 中，添加一个 JS Action 并选择 [Execute JS] 以运行脚本。

备注：

  1. 若要在后台仅运行一次 JS Action，请在 [Action Trigger (Global)] 选项中使用 [Value changed] 或 [Condition Object] 模式。
    其他 JS Action 将在前台 GUI、HMI 或 cMT 观察器中运行，你可能会看到每个实例上都运行了多个 JS Actions。
  2. JS Action 不依赖于任何屏幕相关的操作，因此某些功能可能无法使用：
  3. 任何 setTimeout 或 setInterval 任务都必须完成或被取消，以便下一个动作组能正常开始。

JS 元件更新日志

以下按照 EasyBuilder Pro 版本列出更新内容：

  • 2022-07-29: v6.07.02.282 和 v6.07.01.448
    • 修复了 [Action Trigger] 中 [Execute JS] 的控制台日志未显示的问题。
  • 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
    • 为 [Action Trigger] 和 [Combo Button] 对象添加了 JS Action，使用 [Execute JS] 运行 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
    • 修复了 cMT Diagnoser 中 console.log() 不正常的问题。
  • 2020: v6.05.01
    • JS 元件的首个正式版本发布。