Node-RED Dashboard 2.0 安装与配置指南

钱英栋Famous

于 2024-09-13 22:21:22 发布

阅读量234

点赞数 2

本文链接：https://blog.csdn.net/gitblog_07653/article/details/142231007

版权

Node-RED Dashboard 2.0 安装与配置指南

node-red-dashboard 项目地址: https://gitcode.com/gh_mirrors/nod/node-red-dashboard

1. 项目基础介绍

Node-RED Dashboard 2.0 是一个用于 Node-RED 的开源项目，旨在帮助用户快速创建数据驱动的仪表盘和数据可视化界面。该项目提供了一组易于使用的节点，使用户能够轻松构建自定义的用户界面和数据可视化。Node-RED Dashboard 2.0 是 Node-RED Dashboard 1.0 的升级版，基于现代技术栈重新构建，提供了更好的性能和更多的功能。

主要编程语言

JavaScript
HTML
CSS

2. 项目使用的关键技术和框架

Node-RED: 一个基于流的编程工具，用于连接硬件设备、API 和在线服务。
Vue.js: 用于构建用户界面的渐进式 JavaScript 框架。
Cypress: 用于前端测试的现代工具。
Markdown & Mermaid: 用于创建富文本和动态图表的工具。

3. 项目安装和配置的准备工作和详细步骤

准备工作

安装 Node.js: 确保你的系统上已经安装了 Node.js（版本 12 或更高）。你可以从 Node.js 官网下载并安装。
安装 Node-RED: 如果你还没有安装 Node-RED，可以通过以下命令安装：
```
npm install -g node-red
```

安装步骤

启动 Node-RED: 打开终端并运行以下命令启动 Node-RED：
```
node-red
```
这将启动 Node-RED 并在默认浏览器中打开 Node-RED 编辑器。
安装 Node-RED Dashboard 2.0: 在 Node-RED 编辑器中，点击右上角的菜单按钮，选择“管理面板”（Manage Palette）。
切换到“安装”选项卡: 在“管理面板”中，切换到“安装”选项卡。
搜索并安装 Node-RED Dashboard 2.0: 在搜索框中输入 @flowfuse/node-red-dashboard，然后点击“安装”按钮。
等待安装完成: 安装过程可能需要几分钟时间，请耐心等待。
验证安装: 安装完成后，你可以在 Node-RED 编辑器的左侧节点面板中看到新的 Dashboard 节点。

配置步骤

创建一个新的 Dashboard 页面: 在 Node-RED 编辑器中，拖动一个 ui_dashboard 节点到工作区，并将其连接到你的数据流。
配置 Dashboard 节点: 双击 ui_dashboard 节点，配置页面的标题、布局和其他属性。
添加其他 Dashboard 组件: 你可以添加其他 Dashboard 组件，如 ui_chart、ui_gauge 等，以构建你的数据可视化界面。
部署更改: 完成配置后，点击右上角的“部署”按钮，保存并应用你的更改。
访问 Dashboard: 打开浏览器，访问 http://localhost:1880/ui，你将看到你刚刚创建的 Dashboard 页面。