node-red-dashboard 是基于 Node-RED 的一个 Dashboard 组件。它提供了各种 UI 元素，如按钮、文本区域和图表等，以及各种布局和调整选项，使用户可以轻松地构建自己的监视面板或工具。本文将介绍如何使用 node-red-dashboard 构建一个简单的 dashboard，并提供代码示例。
安装
在使用 node-red-dashboard 之前，您需要将 Node-RED 安装在本地机器上。可以使用以下命令安装 Node-RED：
npm install -g --unsafe-perm node-red
然后，在 Node-RED 控制台中安装 node-red-dashboard。可以使用以下命令：
cd ~/.node-red npm install node-red-dashboard
使用方法
安装完 node-red-dashboard 之后，您可以在 Node-RED 编辑器中使用 dashboard。可以使用以下命令启动 Node-RED 编辑器：
node-red
或者，如果需要使用不同的端口和数据目录，请使用以下命令：
node-red --port 1880 --userDir /home/user/node-red
编辑器启动后，可以通过浏览器打开 http://localhost:1880/。这是 Node-RED 的管理界面。要访问 dashboard，请单击右上角的「+」按钮，然后选择「Dashboard」。
打开 dashboard 后，您可以开始添加 UI 元素了。它有很多组件，例如按钮、文本区域、图表等等。您可以使用以下步骤从画布中添加一个 UI 元素：
- 使用左侧面板中的组件选择器选择您要添加的组件。
- 将组件拖动到画布上。
- 配置组件。对于每个组件，有多个选项可以调整。例如，对于按钮组件，您可以更改标签文本、样式和点击操作等。
在组件添加完毕后，您可以保存您的工作。这可以通过点击 dashboard 上方的「Deploy」按钮实现。
以下是示例代码，它使用 node-red-dashboard 创建一个简单的 dashboard。它包含三个按钮，分别是「开」、「关」和「重启」。将它复制到你的 Node-RED 编辑器中，您将看到一个类似下面的画面。
[{"id":"a26ca85a.bcc798","type":"ui_button","z":"bfe5af5b.b4cd28","name":"","group":"4ebb4a1.2f461b4","order":0,"width":"2","height":"1","passthru":false,"label":"开","tooltip":"","color":"","bgcolor":"","icon":"","payload":"on","payloadType":"string","topic":"","x":110,"y":60,"wires":[["e4a2a4b9.13397"]]},{"id":"e4a2a4b9.13397","type":"mqtt out","z":"bfe5af5b.b4cd28","name":"","topic":"test","qos":"","retain":"","broker":"a2d00e24.79e118","x":310,"y":60,"wires":[]},{"id":"1e45ebe3.f79ae6","type":"ui_button","z":"bfe5af5b.b4cd28","name":"","group":"4ebb4a1.2f461b4","order":0,"width":"2","height":"1","passthru":false,"label":"关","tooltip":"","color":"","bgcolor":"","icon":"","payload":"off","payloadType":"string","topic":"","x":120,"y":120,"wires":[["e4a2a4b9.13397"]]},{"id":"ba94461.c1c5d6","type":"ui_button","z":"bfe5af5b.b4cd28","name":"","group":"4ebb4a1.2f461b4","order":0,"width":"2","height":"1","passthru":false,"label":"重启","tooltip":"","color":"","bgcolor":"","icon":"","payload":"restart","payloadType":"string","topic":"","x":130,"y":180,"wires":[["e4a2a4b9.13397"]]},{"id":"4ebb4a1.2f461b4","type":"ui_group","z":"","name":"Group 1","tab":"6a755a5b.8905a4","disp":true,"width":"6","collapse":false},{"id":"a2d00e24.79e118","type":"mqtt-broker","z":"","name":"","broker":"localhost","port":"1883","clientid":"","usetls":false,"compatmode":true,"keepalive":"60","cleansession":true,"birthTopic":"","birthQos":"0","birthPayload":"","birthMsg":{},"closeTopic":"","closeQos":"0","closePayload":"","closeMsg":{},"willTopic":"","willQos":"0","willPayload":"","willMsg":{},"retryInterval":2000,"retryTimeout":1,"username":"","password":"","x":210,"y":280,"wires":[]},{"id":"6a755a5b.8905a4","type":"ui_tab","z":"","name":"Tab 1","icon":"dashboard","order":1}]总结
通过 node-red-dashboard，您可以快速且直观地构建自己的 dashboard。例如，您可以使用它监视 IoT 设备或者远程服务器的状态。该组件还提供了丰富的自定义选项，您可以更改组件的外观和行为，使其符合您的需求。
希望本文的介绍可以帮助您开始使用 node-red-dashboard，并为您构建自己的 dashboard 提供指导和灵感。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64962