Node-RED 仪表板教程
作者：社区 / 开发者
2023年8月11日
导航至
本文由 Suleiman Abubakar Sadeeq 撰写，他是一位有抱负的前端开发者，正在学习和帮助构建企业应用程序。
如果您已经熟悉了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上显示小部件
在这个例子中，我们想显示一个按钮，当点击时能说出一些文本。
将音频节点拖入流程中，放在流程中已有的按钮节点旁边，并将它们连接起来。双击音频节点，将其添加到您创建的组中（以我的例子为主页）。现在，用按钮节点做同样的事情，但也向下滚动以找到有效负载设置，并在其中添加文本。在我的例子中，是欢迎，如上图所示。点击完成和部署。
要查看仪表板UI，请访问此URL：http://Your_RPi_IP_address:1880/ui
Your_RPi_IP_address 是您使用的Raspberry Pi机器的地址，1880是Node-RED暴露的端口，ui显示仪表板用户界面。
如果一切正常，您将看到下面的窗口。您可能会看到浅色主题背景。我们将在后续文章中了解我是如何得到深色主题的。
小部件的更多示例
让我们创建一个简单的仪表板示例，该仪表板有两个选项卡和一些UI元素（小部件）。
要创建另一个选项卡，点击上图突出显示的选项卡按钮。它将创建一个新的选项卡，正如上图所示。一旦将鼠标悬停在“Tab2”文本上（如上图所示），您将看到一个编辑按钮。您可以遵循创建第一个选项卡和组时遵循的相同程序。
完成这些后。将一个滑块、仪表和图表节点拖入流程中。双击滑块节点，并编辑最小值和最大值为0和100。确保将其分配给您刚刚创建的新选项卡组，并点击完成。以类似的方式对仪表和图表节点重复相同的步骤。在我的例子中，我在仪表达到特定值时为其添加了颜色，您将在下面的图像中看到。您可以按照您想要的任何方式选择元素的外观，但我现在只是尝试保持简单。
现在，将仪表和图表节点连接到滑块节点，并部署您的更改。您应该看到下面的图像类似。当您移动滑块时，您会注意到图表和仪表对其做出反应，如果您添加了颜色，您还会注意到仪表上的颜色差异。如果您没有注意到页面左上角的汉堡图标，我们将在下一步了解它。
选项卡
汉堡图标是您在选项卡之间切换的方式。当您点击菜单图标时，会弹出侧边栏，显示您的选项卡，您可以在这两者之间切换。第一个选项卡（子）包含我们的第一个示例，这是一个文本到语音小部件，第二个选项卡（子 2）包含仪表和图表示例。
仪表板主题
默认情况下，Node-RED仪表板采用浅色主题，浅色背景和浅蓝色导航栏。但您也可以选择深色主题或自定义主题。它还允许根据您的喜好编辑导航颜色。如图下所示，我正在使用深色主题而不是默认的白色主题。
要编辑仪表板UI的主题，请点击主题选项卡，并根据您的需求选择浅色或深色。如果您想，也可以自定义自己的主题。点击颜色选项，将导航栏的颜色更改为您想要的任何颜色。完成后，不要忘记点击部署以查看您的更改。
站点样式
在Node-RED的主页上，如图所示，有一个站点选项卡，它提供了更多设置选项，以确定您希望仪表板看起来如何。您可以编辑诸如仪表板标题、同一选项卡上元素之间的小部件间距、日期格式等设置。尝试一些设置，看看它们在页面上看起来如何。不要忘记部署您的更改！
总结Node-RED仪表板
本指南的目的是提供关于Node-RED仪表板在Raspberry Pi上如何工作的基础知识。我相信，在本帖中我们涵盖的所有示例，您应该对在通往自动化生活的旅程中使用Node-RED仪表板的下一步操作有一个概念。
