Node-RED 仪表盘教程
作者：社区 / 开发者
2023年8月11日
导航至
本文由 Suleiman Abubakar Sadeeq 撰写，他是一位有抱负的 React 开发者，正在学习并帮助构建企业应用。
如果您已经熟悉 Node-RED，您就会知道它在自动化方面的实用性。本文将作为 Node-RED 仪表盘工具的入门指南。本文将介绍如何安装 Node-RED 仪表盘节点，并为您提供一些示例，说明如何使用 Node-RED 仪表盘上的一些节点为自动化创建图形用户界面 (GUI)。
什么是 Node-RED？
Node-RED 是一个构建在 Node.js 之上的编程工具，它提供了一种以最少代码创建自动化的方法。它将不同的节点连接在一起，每个节点都具有特定的功能，将它们链接起来以创建一个执行自动化任务的流程（例如，关闭房间的灯或关门）。
前提条件
我们假设您已经安装并设置了 Node-RED。如果不是这种情况，这里有一些指南可以帮助您通过几种不同的方式实现这一点
Node-RED 仪表盘安装
该过程的第一步是在 Node-RED 中安装仪表盘模块。在浏览器的 Node-RED 窗口中，单击页面右上角的“菜单”图标，在菜单项中找到“管理调色板”，单击“安装”，然后搜索“node-red-dashboard”。安装它，并确保您安装的模块显示为“node-red-dashboard”。
成功安装后，所有仪表盘节点将出现在调色板部分。每个仪表盘节点都提供一个可以在用户界面 (UI) 上显示的组件（例如，仪表、图表、按钮等）。
创建用户界面
让我们逐步了解如何使用 Node-RED 上的仪表盘节点创建仪表盘 UI。
布局
我们使用选项卡和组来排列 Node-RED 仪表盘中的 UI。Node-RED 仪表盘中的选项卡是页面，用于保存或显示不同的组，这些组将一个选项卡分隔成多个部分。每个组中是您组织节点组件（按钮、文本、图表等）的位置。下面是关于如何创建选项卡和组的演练。
将任何仪表盘节点（在我的例子中，是按钮节点）拖到流程中，然后双击该节点。将出现一个窗口，您可以在其中编辑节点。在“组”旁边，单击铅笔图标以添加新组。将出现上图中的窗口。给组起一个您选择的“名称”，然后单击“选项卡”旁边的铅笔图标以添加新选项卡。给“选项卡”起一个您选择的名称，然后单击“添加”。
现在我们已经成功创建了我们的第一个选项卡和组。下一步将在用户界面上显示一些内容。
在 UI 上显示组件
在本例中，我们希望显示一个按钮，当单击该按钮时，它会说出一些文本。
将音频节点拖到流程中，将其放置在我们流程中已有的按钮节点旁边，并将它们连接在一起。双击音频节点，并将其添加到您创建的“组”（在我的例子中是“Home”）中。现在，对按钮节点执行相同的操作，但也要向下滚动找到“有效负载”设置并在其中添加文本。在我的例子中，它是“Welcome”，如上图所示。单击“完成”和“部署”。
要查看仪表盘 UI，请访问此 URL：http://Your_RPi_IP_address:1880/ui
Your_RPi_IP_address 是您使用的 Raspberry Pi 机器的地址，1880 是 Node-RED 公开的端口，而 ui 显示仪表盘用户界面。
如果一切正常，您将看到与下图相同的窗口。您可能会看到浅色主题背景。稍后在文章中，我们将介绍我是如何得到深色主题的。
更多组件示例
让我们创建一个简单的仪表盘示例，其中包含两个选项卡，每个选项卡中都有一些 UI 元素（组件）。
要创建另一个选项卡，请单击上图中突出显示的“选项卡”按钮。它将创建一个新选项卡，正如上图中也看到的那样。一旦您将鼠标悬停在“Tab2”文本上（如图像所示），您将看到一个“编辑”按钮。您可以按照我们创建第一个选项卡和组时遵循的相同步骤。
完成之后。将滑块、仪表和图表节点拖到流程中。双击滑块节点，并将最小值和最大值编辑为 0 和 100。还要确保将其分配给您刚刚创建的新选项卡组，然后单击“完成”。对仪表和图表节点重复类似的过程。在我的例子中，我为仪表添加了颜色，以便在达到特定值时显示颜色，您将在下图中看到。您可以选择您希望元素的外观，但我现在只是想保持简单。
现在，将仪表和图表节点都连接到滑块节点，并部署您的更改。您应该会看到与下图类似的内容。当您移动滑块时，您会注意到图表和仪表会做出响应，如果您添加了颜色，您还会注意到仪表上的颜色差异。如果您没有注意到页面左上角的汉堡菜单图标，我们将在下一步中查看它。
选项卡
好吧，汉堡菜单图标是您在选项卡之间切换的方式。当您单击菜单图标时，会弹出一个带有您的选项卡的侧边栏，您可以在两者之间切换。第一个选项卡 (Sub) 包含我们的第一个示例，即文本到语音组件，第二个选项卡 (Sub 2) 包含仪表和图表示例。
仪表盘主题
默认情况下，Node-RED 仪表盘带有浅色主题、浅色背景和浅蓝色导航栏。但您也可以选择深色主题或自定义主题。它还允许根据您的偏好编辑导航的颜色。正如您在下图中看到的，我使用的是深色主题而不是默认的白色主题。
要在您的仪表盘 UI 上编辑主题，请单击“主题”选项卡，然后根据您的需要选择“浅色”或“深色”。如果您愿意，也可以自定义自己的主题。单击“颜色”选项可将导航栏的颜色更改为您想要的任何颜色。完成后，别忘了点击“部署”，以便您可以查看您的更改。
站点样式
在 Node-RED 的主页上，如下所示，有一个“站点”选项卡，它提供了更多关于您希望仪表盘外观的设置选项。您可以编辑仪表盘“标题”、同一选项卡上元素之间的“组件间距”、“日期格式”等等。继续尝试一些操作，看看它们在页面上的外观。别忘了部署您的更改！
Node-RED 仪表盘总结
本指南的目的是提供关于 Node-RED 仪表盘在 Raspberry Pi 上的工作原理的基础知识。我相信通过我们在本文中介绍的所有示例，您应该对在您的自动化生活之旅中接下来要对 Node-RED 仪表盘做什么有一个概念。
