返回

点亮Node-Red的Dashboard, 给视觉盛宴

Android

自定义 Node-Red Dashboard：打造你独特的 UI 界面盛宴

身处飞速发展的物联网领域，Node-Red 凭借其功能强大的平台脱颖而出，而其 Dashboard 更是一颗璀璨的明珠。通过可视化界面呈现数据，Node-Red Dashboard 让理解和操作变得轻而易举。然而，如果你想要为你的 Node-Red 平台注入个性和魅力，那么自定义 UI 界面将成为你的不二之选。

步骤 1：启程——启用 Node-Red Dashboard

  1. 踏上 Node-Red 平台的征程，点击左侧菜单栏上的“Manage Palette”。
  2. 在搜索框中键入“dashboard”，找到“node-red-dashboard”模块，并点击安装按钮。
  3. 安装完成后，点击左上角的“Deploy”按钮，让 Node-Red 重启。

步骤 2：色彩与布局——配置 Dashboard UI 界面

  1. 点击左侧菜单栏中的“Dashboard”，再点击顶部的“Settings”。
  2. 在弹出的窗口中，你将成为 Dashboard 的调色师和布局大师。选择心仪的色调，决定布局方式，并挑选喜爱的字体。
  3. 例如，你可以将色调设为蓝色，布局选为单列或双列，字体选择经典的 Arial。
  4. 当你对自己的杰作感到满意时，点击“Save”按钮，保存你的更改。

步骤 3：小部件世界——添加 Dashboard 小部件

  1. 再次点击左侧菜单栏中的“Dashboard”，然后点击右上角的“Add”按钮。
  2. 在弹出的窗口中，你将进入小部件的世界。文本小部件、图表小部件、开关小部件……任你挑选。
  3. 选择好心仪的小部件后，点击“Add”按钮，将其添加到画布上。
  4. 你可以拖动小部件来改变它们的位置，也可以点击小部件右上角的“Edit”按钮来修改它们的属性。

步骤 4：连接纽带——连接小部件到 Node-Red 流

  1. 在画布上选择一个需要连接的小部件。
  2. 在小部件的右上角，点击“Settings”按钮。
  3. 在弹出的窗口中，点击“Properties”选项卡。
  4. 在“Input”字段中，输入要连接的 Node-Red 流的名称。
  5. 在“Output”字段中，输入要发送数据的 Node-Red 流的名称。
  6. 点击“Save”按钮，保存你的连接配置。

步骤 5：上线时刻——部署你的 Dashboard

  1. 点击左上角的“Deploy”按钮，让你的 Dashboard 上线。
  2. 在浏览器中打开 Node-Red 平台的 Dashboard 页面，你将见证自己创造的视觉盛宴。
  3. 恭喜你，你已经成功为你的 Node-Red 平台打造了一个独一无二的自定义 UI 界面，尽情享受你的创作带来的喜悦吧！

常见问题解答

1. 我该如何更改 Dashboard 的背景颜色？
在“Settings”窗口的“Appearance”选项卡中，你可以找到“Background color”选项，在这里你可以选择你喜欢的背景颜色。

2. 我可以添加自定义小部件吗？
当然可以！Node-RED 社区为各种用途提供了大量自定义小部件。你可以在“Manage Palette”中搜索并安装它们。

3. 如何将小部件分组？
你可以将小部件拖放到带有“Group”标签的区域，以创建小部件组。

4. 我如何将数据从 Dashboard 发送到 Node-RED 流？
在小部件的“Properties”窗口的“Output”字段中，输入要发送数据的 Node-RED 流的名称。

5. 如何将数据从 Node-RED 流发送到 Dashboard？
在 Node-RED 流中使用“Dashboard”节点，并将你的数据发送到“payload”属性。