下载掌阅APP，畅读海量书库
立即打开
这里小部件是指dashboard里的ui节点。当安装了dashboard节点后，节点面板中将出现一组新的节点。这些节点在dashboard中被叫作小部件，如图2-16所示。
图2-16 小部件分类
大多数小部件有标签和值，这两者都可以由传入消息的属性来指定，并可以由过滤器修改。例如，标签可以设置为{{msg.topic}}，值可以设置为{{value | number:1}}%，值可以四舍五入到小数点后一位并附加一个%符号。
每个节点都可以解析msg.payload以使其适合显示。解析后的payload值显示为名为value的变量。
msg.enabled属性设置为false可以禁用任何小部件。注意：这不会阻止小部件接收消息，但会停止活动的输入，并重新设置小部件的样式。
大多数小部件和UI组可以有一个CSS类或多个CSS类。这允许用户覆盖一个或多个小部件及其内部内容的样式。例如，要为警告框着色，将CSS类notification-warn添加到通知小部件并添加一个UI模板（dashboard里的template节点，设置为“添加到站点头部”），代码如下：
此外，任何具有类字段的小部件都可以通过传入msg.className设置为一个或多个类名的字符串属性来动态更新。
大多数UI小部件也可以通过msg.ui_control属性进行配置，更多详细信息可以访问以下链接：
表中的UI小部件可以用msg.ui_control属性来设置。多个节点的属性可以被同时设置。比如你可以设置msg.ui_control为JSON {"color":"#000"}并传给button节点，以改变该按钮的颜色。注意：建议通过编辑器配置节点，以便预设默认值。
这类小部件用于和用户直接进行交互，包括按钮、开关、日期选择等，如图2-17所示。
这类小部件有button、dropdown、switch、slider、numeric、text input、date picker、colour picker，功能分别对应按钮、下拉菜单、开关、滑动条、数字输入、文字输入、日期选择、颜色选择。每个小部件都有自己的配置方式和参数，可以通过节点帮助描述获得具体小部件使用帮助。
图2-17 交互类小部件
表单类小部件只有一个，就是form。这个部件用于设计表单，支持用户提交数据。虽然只有一个部件，但是它可以用于配置出一个完整的表单，并且可以带基本的校验能力，完成普通的数据收集工作，如图2-18所示。
图2-18 表单类小部件
form小部件配置界面有多个输入项，分别支持文字、数字、密码、选择框、开关、日期、时间等输入项类型，并支持进行非空校验，具体配置如图2-19所示。
图2-19 form小部件
显示类小部件主要用于对数据的图形化显示，主要包括gauge、chart、template和notification，功能分别对应仪表盘、图表显示、自定义html显示、文本显示和提醒通知显示，如图2-20所示。
图2-20 显示类小部件
显示类小部件最重要的一个特点是需要有输入，并且默认用msg.payload来接收。接下来以最常用的chart节点来举例，看看输入信息如何转化为展示效果。首先chart节点可以展示折线图、柱状图、饼状图，如图2-21所示。
图2-21 chart节点
无论采用哪种图表展示类型，我们都需要持续输入一系列数据。这一系列数据不断传入的时候，才能连续画出折线、柱状、饼状等图形。你可以采用图2-22所示流程进行测试并理解数据的动态连续性。
图2-22 动态图表实现示意图
上面的模拟测试是利用inject节点，每秒传入一次数据，数据通过function节点后格式转化成{topic："温度"，payload：数据}，然后再传入chart节点。这样就实现了一个动态绘制的折线图。那么，如何传入多个系列的数据？只需要为chart节点构建多个输入点，如图2-23所示。
图2-23 动态图表多数据序列的流程示意图
总结：一个持续输入构建动态图形，多个输入构建多个序列。
除去dashboard模块自带的UI小部件，Node-RED官方也提供了其他dashboard扩展小部件。了解这些扩展小部件，可以帮助你实现自己的物联网展示界面，无需自行开发。
这些官方扩展类小部件安装后都在dashboard模块内，如表2-1所示。
表2-1 扩展类小部件
（1）node-red-node-ui-iframe
node-red-node-ui-iframe节点允许在Node-RED的dashboard节点中插入一个iframe（内嵌框架），以显示来自其他网页或服务的内容。通过使用node-red-node-ui-iframe节点，你可以在Node-RED仪表板中嵌入外部网页、Web应用程序、实时数据图表等，以实现更丰富和交互。
使用node-red-node-ui-iframe节点，你可以配置iframe的属性，如网页URL、宽度、高度、是否显示边框等。通过在节点的输入端口提供动态的URL或其他属性，并根据流程中的数据可动态更新iframe内容。
该节点提供了一种简便的方式，实现在Node-RED的用户界面中与外部网页进行交互，展示实时数据、图表、外部服务或任何其他可通过iframe嵌入的内容。
（2）node-red-node-ui-lineargauge
node-red-node-ui-lineargauge节点用于在Node-RED的仪表板中显示线性测量仪表（Linear Gauge）。该节点提供了一种可视化方式来显示范围值的线性测量值。你可以配置仪表的最小值、最大值、当前值和标签，以及其他外观属性，如颜色、宽度等。该节点还支持通过输入端口提供动态的值，以实时更新仪表的显示。
使用node-red-node-ui-lineargauge节点，你可以创建线性测量仪表，以可视化展示某些参数的测量值。这对于监制实时数据如温度、湿度、压力等非常有用，如图2-24所示。
图2-24 node-red-node-ui-lineargauge展示界面
该节点支持注入3个数字来完成图表的显示，分别是上限值msg.highlimit、当前值msg.payload、下限值msg.lowlimit。
当前值大于上限值时，箭头显示在红色区域；当前值小于下限值时，箭头显示在黄色区域。如果在规定范围内，箭头显示在绿色区域。这样直观地展示了一个动态变化的传感器数值范围。这个仪表有3个不同的区域。中间区域是可以接受的值窗口。顶部为上限区，底部为下限区。这样，你就可以很容易地看到数据离上限或下限有多近。
图2-25所示为该节点示例流程。
“随机生成温度信息”节点代码如下：
图2-25 node-red-node-ui-lineargauge节点示例流程
（3）node-red-node-ui-list
node-red-node-ui-list可用于在Node-RED仪表板中显示各种项目，如单选列表、多选列表、开关列表以及菜单列表，如图2-26所示。
项目数组由msg.payload传入，由包含title（项目标题）、description（项目描述）、icon（图标的URL）、icon_name（Font Awesome 4.7图标名称）属性的对象组成。其中，description、menu（菜单项列表）、icon、icon_name属性可选。
如果你只需要一个简单的文本列表，那么msg.payload可以是一个简单的字符串数组，例如：["Item1"，"Item2"，"Item3"]。当项目或菜单项被单击或选中时，相应的对象作为payload发送到输出端口。该节点配置界面如图2-27所示。
图2-26 node-red-node-ui-list节点展示界面
图2-27 node-red-node-ui-list节点配置界面
1）List Type：项目显示的类型。
· Single-line：单行，指每个项目以单行显示，有多少个项目就有多少个单行。
· Multi-line-narrow：多行-窄，指每个项目以多行显示，但较窄。
· Multi-line-wide：多行-宽，指每个项目以多行显示，但较宽。
2）Action：要对显示的项目采取的操作。
· none：不执行操作。
· click to send item：如果单击，则将所选项目发送到输出端口。
· checkbox to send changed item：如果勾选了复选框，则将相应的项目发送到输出端口。复选框状态包含在输出对象payload的isChecked标志中。
· switch to send changed item：如果开关状态改变，发送改变的项目到输出端口。开关状态包含在输出对象payload的isChecked标志中。
· menu to send selected item：如果菜单中的项目被选中，则将选中的项目发送到输出端口。所选项目包含在输出负载对象的selected属性中。
3）allow HTML in displayed text：如果勾选，则可以在title和description中使用HTML标记。
图标可以由icon或icon_name属性指定。icon指定图标图像的URL。如果icon值是null，则显示空白图标。icon_name指定Font Awesome 4.7图标库中的图标名称（例如fa-home）（关于Font Awesome 4.7图标的更多内容，请参见2.2.8节）。icon优先于icon_name。
（4）node-red-node-ui-microphone
node-red-node-ui-microphone节点允许录制音频并允许通过仪表板进行语音识别。此节点在仪表板中提供了一个按钮小部件，当按下该按钮时，将开始捕获音频或语音识别。该按钮可以配置为两种音频捕获模式：单击按钮开始捕获音频，再次单击停止或达到配置的最大持续时间时停止；将按钮配置为仅在按下按钮时进行录制，放开则停止。对于音频捕获模式，音频格式为WAV并由节点以Buffer对象发布。这样可以直接写入文件或传递给任何其他需要音频数据的节点。录制的音频文件可以通过读文件节点读出后播放或转为文字显示，如图2-28所示。
图2-28 node-red-node-ui-microphone节点实现界面展示
对于音频捕获模式，此节点可在大多数Webkit内核的浏览器中正常工作，因为它使用了标准的MediaRecorder API。
· IE：不支持。
· Safari：需要启用MediaRecorder。
对于语音识别模式，此节点可在大多数Webkit内核的浏览器中正常工作，因为它使用了SpeechRecognition API。
· IE、Safari：不支持。
· Firefox：需要启用SpeechRecognition。
· Chrome：支持。
如果远程访问仪表板（不是通过localhost），你必须使用HTTPS，否则浏览器将阻止对麦克风的访问。
（5）node-red-node-ui-table
node-red-node-ui-table节点用于在Node-RED仪表板中创建表格视图。你可以配置表格的列、行和单元格，并通过输入数据来更新表格内容。每个单元格支持输入文本、图标和其他自定义内容，以满足你的需求。
使用node-red-node-ui-table节点，你可以创建交互式表格和实时更新表格，以显示各种信息，如传感器数据、设备状态、数据库查询结果等。你可以根据需要对表格进行排序、筛选和分页，以便更好地组织和浏览数据。
该节点提供了丰富的配置选项，如列定义、样式、排序、过滤和分页等，以便自定义表格的外观和行为。你还可以使用回调函数来处理用户与表格的交互，如单元格单击、行选择或排序操作。
此表节点接收的msg.payload包含一组数据，每行一个对象。每个数据行对象应具有相同的一组键，对象中的键用作列名。以下示例流程文件都可以通过访问http://www.nodered.org.cn/example/flow.json下载，导入Node-RED中使用。该节点流程示意图如图2-29所示。
图2-29 node-red-node-ui-table节点流程示意图
1）简单表格。在没有任何列配置的情况下，尝试为提供的每一行创建一个具有等间距简单文本列的表，使用键作为列标题。
如果注入的payload为：
该流程展示界面如图2-30所示。
2）丰富表格。在节点配置中可以手动添加列。如果是这样，msg.payload只会显示定义的属性。你还可以定义列的标题、宽度、对齐方式和显示格式。定义方式如图2-31所示。
图2-30 简单表格展示界面
图2-31 丰富表格节点配置界面
如果注入的payload为：
该流程展示界面如图2-32所示。
图2-32 复杂表格展示界面
该节点配置中的参数说明如下。
· Title：列标题的文本（或空白）。
· Width：列宽。像素数或整个表格宽度的百分比，例如150%或20%。自动留空，等间距填充可用空间。
· Align：列对齐方式，包括左对齐、居中对齐或右对齐。
· Format：格式，指表格中数据的显示格式。
■ Plain text：纯文本，简单文本值。
■ HTML：允许文本按照HTML语法进行格式化。
■ link：链接，指向网页的URL链接。
■ image：图像，要显示的图像的源URL。
■ progress：进度，从0到100的进度条。
■ traffic：交通，红色、琥珀色、绿色指示灯由0-33-67-100范围内的数字设置。
■ color：颜色，用于填充单元格中HTML颜色十六进制值（#rrggbb）。
■ Tick/cross：勾号或十字通过布尔值true/false，或者数字1/0，或者文本“1”/“0”来设置。
■ stars：星星，星星的数量以数字0～5来设置。
■ Row number：行号，当前行号。
3）高级功能。向node-red-node-ui-table节点发送数组，此节点替换完整的表数据。node-red-node-ui-table还接受对象作为msg.payload来发送命令。除了数据操作之外，你还可以设置过滤器并使用命令执行许多其他操作。该对象必须具有以下属性。
· lcommand：有效的制表符函数，例如addRow、replaceData或addFilter。
· larguments：（可选）该制表符函数的参数数组。
· lreturnPromise：（可选）一个布尔值，表示该制表符函数是否应返回异步Promise消息。
该节点流程示意图如图2-33所示。
图2-33 向node-red-node-ui-table发送命令的流程
上述流程中的“在顶部添加一行”节点代码如下：
上面代码实现效果如图2-34所示。
图2-34 向node-red-node-ui-table节点发送命令实现效果
若希望仅将更改的或新的数据发送到node-red-node-ui-table节点，你可以通过仅将新数据发送到单元格来快速地更新表，或者可以像日志一样发送大量数据。
通过命令发送到node-red-node-ui-table节点的数据不会被node-red-node-ui-table缓存！因此，当在新客户端进行访问的时候或者手动选择仪表板更新表的时候，我们需要重新获取表格数据。tabulator属性不限制保存的数据量，在显示有几千行数据的表格时非常有效。如果数据超出客户端浏览器的能力，它将因内存不足而崩溃。
4）通过msg.ui_control发送消息动态控制表格。如果想实现更加复杂的表格，你可以通过将配置数据发送到msg.ui_control.tabulator来控制和改变ui-table。图2-35为一个复杂的动态表格。
图2-36所示流程可以快速帮助你理解如何实现动态表格制作。
图2-35 复杂动态表格效果展现
图2-36 复杂动态表格制作流程
在这个流程中，“UI参数传递”节点中设置了msg.ui_control（此属性为JSON格式），代码如图2-37所示。
上述代码中参数含义如下。
· 所有表格样式相关内容都在tabulator属性下设置。
· customHeight属性可以动态根据表格数量来设置表格高度。
· columResized、columnMoved、groupHeader是3个表格事件触发的时候会执行的方法，这3个事件分别是列大小改变的事件、列表被移动的事件和列分组头打开或关闭的事件。
· 其他参数含义可访问https://tabulator.info/进行了解。
（6）node-red-node-ui-vega
node-red-node-ui-vega节点为Node-RED仪表板提供了强大、灵活的数据可视化能力，让你能够以直观的方式展示数据。该节点允许使用Vega可视化语法来创建定制化的数据图表，并将其嵌入Node-RED的dashboard。你可以通过配置节点来定义数据源、图表类型、样式和交互行为。该节点支持多种图表类型，包括条形图、线图、散点图等，如图2-38所示。
该节点实现了Vega图表库标准（https://vega.github.io/vega/），接受JSON格式的Vega和Vega-Lite数据可视化规范来完成绘图工作。Vega是华盛顿大学交互数据实验室开发的一种语言框架，用于数据可视化表现。Vega可用于创建、保存和共享可视化交互设计内容。你可以JSON格式描述数据表现的视觉外观和交互行为，并使用Canvas或SVG生成基于Web的视图。
图2-37 “UI参数传递”节点代码
图2-38 node-red-node-ui-vega节点支持图表类型展示
node-red-node-ui-vega节点使用方式非常简单，首先按照Vega图表库标准编辑你要生成的图表的JSON文件，具体规范参考：https://vega.github.io/。编辑好以后，通过payload传入该组件即可。当然，其中数据部分可以替换为传感器采集的数据，以进行动态传递。这样就形成了动态的图表效果。更多的示例可以通过访问http://www.nodered.org.cn/flows.json获取。node-red-node-ui-vega节点示例流程如图2-39所示。
图2-39 node-red-node-ui-vega节点示例流程
（7）node-red-node-ui-webcam
node-red-node-ui-webcam节点用于在Node-RED仪表板中捕获和显示网络摄像头的图像或视频。你可以配置节点以指定摄像头的URL、分辨率、帧率等参数。该节点还支持保存图像或视频，并提供了触发事件来通知图像捕获的状态。
使用node-red-node-ui-webcam节点，你可以创建一个简单的界面来监控和控制连接到Node-RED系统的网络摄像头。这对于安防、远程监控或其他需要实时图像的应用非常有用。
该节点可在运行Node-RED的设备上显示来自网络摄像头的实时图像。用户可以单击节点上的一个按钮来捕获图像，然后节点将摄像头拍摄的照片以PNG或JPEG格式的缓冲区对象发送到msg.payload中。如果一条消息被传递到设置了capture属性的node-red-node-ui_webcam节点，并且仪表板上的网络摄像头已被激活，它将直接捕获图像。用户可以在屏幕上该节点的下拉列表中选择要使用的默认相机。该相机将用于浏览器的未来会话，直到更改为止。如果远程访问仪表板，你必须使用HTTPS，否则浏览器将阻止对网络摄像头的访问。