Node-RED UI页面（dashboard）教程

本文讲述如何在node-red里制作页面，类似于制作触摸屏HMI画面。

仪表板（dashboard）是将所有单一或多个目标所需的最重要信息展示在同一页，可以让我们快速存取重要资料，让这些资料一览无遗。

基本上，node-red开发工具默认不会安装仪表板节点，我们需要自行安装这些节点，在node-red编辑器开启节点管理，搜寻（dashboard）节点找到node-red-dashboard后，点击安装node-red仪表板节点，如下图所示。

安装完成后左侧会多出（dashboard）节点。

仪表板输入节点

1.button按钮元件

点击button按钮可以送出一个msg物件，我们可以指定送出playload和topic属性值。

在仪表板新增button元件需要先新增Tab标签和Group群组，然后才能新增编排至此群组的button元件。请从节点工具箱的（dasgboard）区域拉出button节点至编辑区域，编辑此节点。

在（Name）栏输入群组名为【教学】，如果在Tab标签栏没有看到预设标签，请选【添加新的dashboard tab节点】，在画笔所在位置新增标签。

在【name】栏的预设名称是教学演示，按【更新】按钮新增标签。

更新完成后回到dashboard group节点，看到【Tab】栏选中教学演示标签。

点击更新回到编辑button节点在【Group】栏选中教学群组，更改在【Lable】栏标题文字为开启，在【payload】栏选择数字输入1，点击完成按钮。

接着新增预设值的debug节点，并且连接button至debug节点来建立node-red流程。

部署完成后，搜索页面地址，可以看到新增的button元件。

只需点击开启按钮，可以看到输出数字1，如下图所示。

2.textlnput文字输入元件

在node-red仪表板可以使用textlnput文字输入元件来输入文字·数值·密码·电子邮件地址·电话密码·电话号码和

时间资料。

在工具箱节点处拉出【text input】节点至编辑区，选择教学群组。

在【Label】栏输入【输入数字】，新增debug节点并且与text input相连建立node-red流程。

部署完成后，进入页面可以看到在教学下面有个输入数字处，输入1234可以在调试窗口看到数字。

textlnput元件Mode和Delay说明。

Mode：选择输入模式，可以指定输入哪些哪种类型资料，其说明如下表所示。

Mode栏位                                    说明

1. text input                                     输入字串的文字内容
2. email address                             输入电子邮件地址
3. password                                    输入密码，显示的是小圆点
4. number                                       输入数字
5. telephone input                           输入电话号码
6. color  picker                                选取色彩
7. time   picker                                选取时间
8. week picker                                选取星期日
9. month picker                               选取月份

Delay栏位：指定在输入资料后，到送出资料之间的延迟时间，如果输入0，需按enter和Tab键才能送出资料。

3. slider滑块和Numeric数值输入元件

slider元件可以拖拉滑杆来输入最大/最小范围之间的值，例如Arduino开发板输出PWM值范围是0~255，我们可以使用slider滑块元件来输入此范围的数值。

在仪表板新增slider元件后，拖拉滑块输出0~255值至debug节点，如下图所示。

双击打开lider节点，在【Group】栏选中教学群组，【Lable】栏输入【PWM值：】在Range栏范围的【min】最小值设为0，【max】最大值设为255，【step】增量是1，如下图所示。

部署完成后，进入页面在教学下方有个PWM值的滑块，拉动滑块可以在调试窗口看到输入值。

4.Numeric数值输入元件

numeric元件也可以输入数值资料，也可以使用上/下按钮来输入数值资料。

在仪表板新增numeric元件来输入0~100分成绩值后，输出至debug节点来展示，如下图所示。

双击打开numeric节点，在【group】栏选择教学，【label】栏输入【输入成绩：】，在Range栏范围的【min】最小值为0，【max】最大值为100，【step】增量为1，如下图所示。

与debug节点相连后，部署完成，进入网页可以看到numeric元件可以使用上下按钮调整数字。

5.swith开关和dropdown选单元件

swith元件是一个开关元件，可以切换2个状态，例如：1或0，开或关，ON或者OFF等。

在仪表板新增swith元件的电源开关，当打开时输出true，关闭输出false，连接debug节点。

双击打开swith节点，在【group】栏选择教学，【label】栏输入【电源开关：】，On payload栏预设输出true，Off payload栏输出false，如下图所示。

与debug节点相连，部署完成，进入网页可以看到电源开关右侧有个开关，打开为true，关闭为false。

6.Dropdown选单元件

dropdown选单元件是一个下拉式选单，可以让使用者选取指定选项。

在仪表板新增dropdown元件，可以提供选单来选择3种感测器，然后连接至debug节点。

双击打开dropdown节点，在【drop】栏选择教学，【label】栏输入【选择感测器？】标题文字，在【Placeholder】栏输入【感测器种类】，在【options】栏新增3个选项，第一行数字列0标题温度，第二行数字列1标题湿度，第三行数字列2标题光线，【opiton】按钮新增选项，如下图所示。

与debug节点相连，部署完成，进入网页可以看到选择感测器右侧点击感测器种类有三个选项，三个选项分别对应他们的数字列，列入：选择光线，如下图所示。

可以看到在node-red调试窗口选择光线的输出值，如下图所示。

7.date picker日期选取器元件

将日期选取器小组件添加到用户界面。

8.colour picker颜色选取器原价

将颜色选取器添加到仪表板

9.form形式元件

将窗体添加到用户界面，可以使用添加元素按钮添加多个输入元素。

每个元素都包含一下组件：

标签：将成为用户界面中元素标签的值。

名称：表示其中存在相应元素值的键。

必需：再打开时，用户必须在提交之前提供值。

行数：用于多行文本数入的UI行数。

删除：从表单中删除当前元素。

仪表板输出节点

1.text元件

text元件类似windows视窗GUI的label标签元件，可以作为输出元件，在仪表板显示文字内容。

在仪表板新增text和slider元件后，拉出滑杆输出的20~50温度值，可以在text元件的text节点来显示。

双击打开slider节点在【group】栏选择教学，【label】栏输入【输入温度：】，在Range范围的【min】最小值设位20，【max】最大值设为50，【step】增量是1，如下图所示。

双击打开text节点，在【Group】栏选择教学，【label】栏输入【温度值】，如下图所示。

部署完成后，进入网页，可以看到拖拉滑块在text元件显示输入值，如下图所示。

2.Gauge元件

仪表板的Gauge元件，可以使用指针方式来显示数值资料。

在仪表板新增Gauge元件显示slider元件输入值，可以同时在text和Gauge元件显示slider元件20~50的输入值，如下图所示。

slider节点和text节点选择之前配置，双击打开gauge节点，在【group】栏选择教学，【range】栏输入值的范围和slider相同，【min】最小值设为20，【max】最大值设为50，如下图所示。

部署完成后，进入网页，可以使用拖拉滑块同时在text和Gauge元件显示输入值，Gauge元件就是计量表，如下图所示。

3.Notification元件

Notification元件可以在屏幕画面的四个角落显示弹出的警告讯息框，或使用讯息窗口来显示一个警告讯息。

在仪表板新增slider.text和Notification元件后，text元件显示slider滑块的20~50温度值，swith节点判断温度值是否超过40度，如果是就会在右上角弹出警告讯息框显示温度太高，如下图所示。

上图所使用的swith节点并非使用dashboard里的swith节点，可以在功能里找到上图所使用的swith节点，如下图所示。

slider节点和text节点选择之前配置，双击打开swith节点，在【名称】栏数入【温度是否太高】，【属性】栏是msg.payload，然后新增1个条件，条件选择为[msg.payload>=40],40是数字，如下图所示。

打开notification节点，在【layout】栏选择【TOP right】显示在右上角，【timeout】栏是显示时间3秒，【topic】栏是讯息内容【温度太高！】，如下图所示。

部署完成，进入网页，拖拉滑块如果温度超过40度，就会在右上角弹出一调讯息警告框，如下图所示。

4.chart元件

chart元件支持绘制折线图，长线图，圆饼图等多重统计表，可以让我们在仪表板绘制出即时和多组数据的统计表。

我们在准备使用chart元件绘制出即时资料的折线图，为了模拟即时资料，所以我们要使用随机数来产生数据。

在node-red节点管理安装node-red-node-random节点。

建立node-red流程，使用节点工具箱【共通】时间戳和debug，【功能】random节点，如下图所示。

时间戳和debug选择他的预设值，打开random节点，在【Generate】栏选择【a whole number-integer】产生随机数，范围是从【form】栏1至【TO】栏的100，即1~100的随机数，如下图所示。

部署完成，每按一次inject节点，就会产生一个1~100之间的随机数，如下图所示。

新增chart折线图节点，修改inject节点每2秒周期性执行，使用random节点产生1~100之间的随机数，送入chart节点绘制出数据折线图，如下图所示。

修改inject节点每2秒周期性执行，如下图所示。

random节点配置不变，双击打开chart节点，在【Group】栏选择教学，【label】栏输入【折线图】，在【type】栏选择line chart折线图，【X-axis】栏可以指定显示最后多久时间，最后几个数据，此列显示最后20个数据，如下图所示。

部署完成后，进入网页，可以看到折线图正在以每2秒新增一个数据。

5.audio out音频输出元件

在仪表板中播放音频或文本到语音转换（TTS），从0设值为100会将音量从0更改为100%，默认值为100%，在音频模式下，将可以达到300，但您可能会失真。

6.ui control用户界面控制元件

允许动态控制仪表板，默认功能是更改当前显示的选项卡，应该是表单的对象，或者只要是显示的选项卡或链接的选项卡名称或数字索引。

7.template模板元件

模板小部件可以包含任何有效的html和角度材料指令，此节点可以用于创建更改其外观的动态用户界面元素，基于输入消息，并可以将消息发送回node-red。