Node-RED UI 节点项目教程

最新推荐文章于 2025-05-07 11:53:52 发布

陆汝萱

最新推荐文章于 2025-05-07 11:53:52 发布

阅读量807

点赞数 23

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/gitblog_00777/article/details/142541946

Node-RED UI 节点项目教程

node-red-ui-nodes Additional nodes for Node-RED Dashboard 项目地址: https://gitcode.com/gh_mirrors/no/node-red-ui-nodes

1. 项目的目录结构及介绍

Node-RED UI 节点项目的目录结构如下：

node-red-ui-nodes/
├── LICENSE
├── README.md
├── package.json
├── src/
│   ├── nodes/
│   │   ├── ui_base.js
│   │   ├── ui_button.js
│   │   ├── ui_chart.js
│   │   ├── ui_gauge.js
│   │   ├── ui_text.js
│   │   └── ui_template.js
│   ├── ui.js
│   └── ui_config.js
├── test/
│   ├── ui_button_spec.js
│   ├── ui_chart_spec.js
│   ├── ui_gauge_spec.js
│   ├── ui_text_spec.js
│   └── ui_template_spec.js
└── webpack.config.js

目录结构介绍

LICENSE: 项目的开源许可证文件。
README.md: 项目的说明文档，包含项目的基本信息和使用指南。
package.json: 项目的依赖管理文件，定义了项目的依赖包和脚本命令。
src/: 项目的源代码目录。
- nodes/: 包含各个UI节点的实现文件。
  - ui_base.js: UI节点的基类文件。
  - ui_button.js: 按钮节点的实现文件。
  - ui_chart.js: 图表节点的实现文件。
  - ui_gauge.js: 仪表盘节点的实现文件。
  - ui_text.js: 文本节点的实现文件。
  - ui_template.js: 模板节点的实现文件。
- ui.js: UI节点的入口文件。
- ui_config.js: UI节点的配置文件。
test/: 项目的测试代码目录，包含各个节点的单元测试文件。
webpack.config.js: Webpack的配置文件，用于打包和构建项目。

2. 项目的启动文件介绍

项目的启动文件是 src/ui.js。该文件是Node-RED UI节点的入口文件，负责加载和注册所有的UI节点。

启动文件介绍

src/ui.js:
- 该文件首先导入所有UI节点的实现文件。
- 然后，通过Node-RED的API注册这些节点，使其可以在Node-RED的编辑器中使用。
- 最后，导出一个函数，该函数会在Node-RED启动时被调用，完成节点的注册和初始化。

3. 项目的配置文件介绍

项目的配置文件是 src/ui_config.js。该文件定义了UI节点的配置选项，包括节点的名称、描述、图标等信息。

配置文件介绍

src/ui_config.js:
- 该文件导出一个配置对象，该对象包含了所有UI节点的配置信息。
- 每个节点的配置信息包括：
  - name: 节点的名称。
  - description: 节点的描述信息。
  - icon: 节点的图标。
  - color: 节点的颜色。
  - inputs: 节点的输入数量。
  - outputs: 节点的输出数量。
  - category: 节点所属的类别。
  - defaults: 节点的默认配置。
  - label: 节点的标签。
  - paletteLabel: 节点在Node-RED编辑器中的显示名称。
  - oneditprepare: 节点编辑时的回调函数。
  - oneditsave: 节点保存时的回调函数。
  - oneditdelete: 节点删除时的回调函数。
  - oneditresize: 节点编辑窗口调整大小时的回调函数。