NodeRed+UIOTOS绝配!流程连线搭建上位机 一-牛翰网

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传入时间段,查询历史数据并返回。如下所示:

 

nodered历史数据查询流程

UIOTOS中页面由接口、日期时间、曲线、函数等组件构成。初始加载时,最近5分钟默认传入,返回结果经解析更新到曲线,且页面嵌套给对话框。

 

 

uiotos历史曲线实现流程


小结

本节示例界面非常简单。主要目的在于打通设备(模拟)→ 采集后端 → 前端应用的一个小闭环。

从这里可以看出,UIOTOS前端零代码+NodeRed后端低代码,在硬件、电气等物联网、工业互联网场景,是一个可行且便利的完整应用方案。

下一篇,将在本节基础上继续深化,提供更丰富、复杂、多样的应用搭建效果。

请登录后发表评论

    没有回复内容