NodeRed+UIOTOS绝配！流程连线搭建上位机

介绍

• NodeRed： 后端 低代码，用于协议接入、边缘计算采集。

• UIOTOS： 前端 零代码，用于组态绘图、UI表单、界面交互。

  
  

作为低代码的一个成功典范， NodeRed 如今在IoT物联网、工业互联网、自动化等领域势不可挡，甚至引起了流程编辑的浪潮。

nodered节点编辑

尽管在协议对接、边缘计算上，NodeRed是扛把子，但搭建UI交互界面并不适合，即便有dashboard节点，局限性也极大。

nodered dashboard界面效果

UIOTOS是一款前端组态工具，能一站式搭建组态HMI、上位机、后台管理界面。如下所示：

UIOTOS组态界面效果

UIOTOS管理界面效果

下面将通过示例合集，介绍如何 用UIOTOS搭建NodeRed上层应用 ，从简单到复杂，涵盖 组态、上位机、大屏看板、后台管理 等多种场景。

一、modbus数据读写和历史曲线

效果

运行界面十分简单：两个输入框，对应modbus点位实时变化，右侧按钮可弹窗下发。历史弹窗，显示最近5分钟曲线叠加，可输入时间段查询 。

1）nodered对接本地modbus tcp模拟器，采集温度、湿度数据，并且保存到数据库，通过MQTT发送数据和接收查询。

nodered编辑界面

2）UIOTOS搭建界面和接口，实现界面交互、数据展示、数据下发、曲线弹窗和历史数据加载。

uiotos编辑界面

步骤 1：MQTT数据给到输入框

如下所示，分为两步：

• 拖入接口组件，设置MQTT参数，订阅NodeRed采集的数据。
  

• 连线指向两个输入框，分别解析提取温度、湿度数据。

  
  

步骤 2：按钮弹窗下发修改值

步骤1中的设置按钮 ，要弹窗下发设置，可以先对按钮“嵌套封装”一下。

• 新建内嵌页。
  

• 拖入按钮、对话框（嵌套有输入框）、普通函数。

• 连线设置，按钮触发弹窗，点击确定时，值给函数，并执行。

• 上层页面容器，嵌套并继承相关属性，布局设置，只显示按钮。

• 连线将参数传递给接口，触发执行接口。
  

  
  

UIOTOS中通过嵌套和继承，真正实现了页面组件化，封装和复用。 这里还能将上层的接口，也放到内嵌页中。省去两个按钮的4条连线操作 。

步骤 3：弹窗历史曲线查询

NodeRed中有通过MQTT传入时间段，查询历史数据并返回。如下所示：