基于Web的留胚米生产线在线控制可视化系统研究

李冰, 毛天文, 李健

PDF(2733 KB)
欢迎访问制造业自动化官方网站！
更多内容请点击
PDF(2733 KB)
制造业自动化 ›› 2024, Vol. 46 ›› Issue (12) : 150-155. DOI: 10.3969/j.issn.1009-0134.2024.12.020
设计与应用

基于Web的留胚米生产线在线控制可视化系统研究

作者信息 +

Research on Web-Based Visual Control System for Germinated Rice Production Line

Author information +
History +

摘要

针对留胚米生产加工过程中生产环境复杂和工艺繁多、传统人工难以实时监测控制的问题。介绍了基于Web技术的留胚米生产线在线控制可视化系统的设计研发。系统包括实时监测和在线交互控制。首先，明确系统功能需求，并设计人机交互平台和数据交互通讯服务方案。其次，设计人机交互平台架构，包括产线建模、数据库存储和UI设计等。通过Blender对生产线进行建模，并使用AI和Substance对模型进行贴图优化，提供模型交互服务。设计配置信息存储库和产线运行状态信息存储库来支持数据存储。根据需求分析，设计UI交互界面原型，使用Vue框架搭建人机交互界面。然后，设计数据通讯服务框架，基于HTTP和Socket实现后端服务器与前端人机交互、数据库和产线工控机之间的通讯，实现在线交互功能。

关键词

Web ; 人机交互 ; 实时监测 ; 在线控制 ; 数据库 ; 数据通讯

基金

黑龙江省自然科学基金(KY10400210217)
黑龙江省高等教育教学改革工程项目(SJGY20220120)
黑龙江省教育科学规划课题(GJB1320064)
哈尔滨工程大学教学改革研究项目(JG2021B06)

引用本文

EndNote

Ris (Procite)

Bibtex

导出引用
李冰 , 毛天文 , 李健. 基于Web的留胚米生产线在线控制可视化系统研究[J].制造业自动化, 2024, 46(12): 150-155. https://doi.org/10.3969/j.issn.1009-0134.2024.12.020
LI Bing , MAO Tian-wen , LI Jian. Research on Web-Based Visual Control System for Germinated Rice Production Line[J]. Manufacturing Automation, 2024, 46(12): 150-155. https://doi.org/10.3969/j.issn.1009-0134.2024.12.020

0 引言

随着科技的不断进步和工业生产的发展，制造业领域对于智能化和数字化的需求越来越迫切。留胚米生产线作为重要的食品加工生产线之一，其在线控制可视化系统的研究与应用具有重要意义。生产线控制系统的可视化界面提高操作人员效率和决策能力。它清晰展示实时数据，及时问题解决。同时，支持远程监控和操作，有助于远程维护和生产线管理。生成的数据可用于性能分析和资源优化，降低成本，提高竞争力。通过实现对生产线的实时监控、数据采集和控制参数下发，可以提高生产线的自动化程度、生产效率和产品质量，进而满足市场需求［1］。
本论文旨在基于Web技术，研究并设计一种基于Web的留胚米生产线在线控制系统。该系统将采用前后端分离的设计模式，前端负责展示用户界面和实时数据展示，后端负责数据管理、逻辑控制和与生产线设备的通讯。通过采用WebGL技术实现产线模型的可视化展示，用户可以直观地了解生产线的运行状态和参数设定。同时，借助Socket接口与机器之间建立稳定的通讯链接，实现实时数据获取和控制指令下发。同时，为了保证系统的数据安全性和高效性，将采用关系型数据库存储和管理各类数据。通过该在线控制系统的研究和实现，可以为留胚米生产线的智能化管理和优化提供技术支持，进一步推动制造业向数字化和智能化转型。为制造业的发展和升级做出贡献。

1 总体架构设计

在线控制系统总体架构如图1所示，主要包含后端服务器、人机交互平台、数据库存储系统、生产线工控机等部分，以后端服务器为数据传输中心。
图1 在线控制系统总体架构设计

Full size|PPT slide

上述内容中人机交互平台作为留胚米生产线在线控制系统的核心。平台包含产线建模、模型显示、状态显示和参数控制面板等功能。用户可以进行生产控制操作，确保生产过程安全。通过等比例建模和模型显示，结合参数控制面板，实时显示生产状态数据，提高用户对生产过程的掌握。后端数据服务器实现与数据库、人机交互平台和工控机的数据交互，实现数据通讯功能。生产线采用精细碾磨技术，机器包括原粮仓、提升机、流量称、去石机、色选机、碾米机、抛光机和分级筛，由工控机进行控制。

2 系统关键技术

2.1 HTML5、CSS3、JavaScript技术

HTML是超文本标记语言，描述网页结构和表现形式，通过标记标签展示在浏览器上。CSS3是层叠样式表，用于定义网页样式，新增了动画规则和弹性盒模型，实现页面动画和适应不同设备［2］。JavaScript是与浏览器交互的编程语言，包含ECMAScript、DOM和BOM三部分，用于操作页面元素和实现交互功能。

2.2 WebGL技术

本文应用Blender等比例建模技术构建产线模型并贴图，结合WebGL技术，将模型嵌入到控制系统用户界面，实现可视化数字化控制过程。WebGL是基于HTML5和JavaScript的技术，用于绘制和渲染3D模型，在网页上实现用户与模型的交互［3］。WebGL依托于OpenGL SE2.0派生，使用HTML和JavaScript支持，通过<canvas>标签在网页上定义绘制区域，支持绘制二维和三维图形。

2.3 数据库系统

本系统根据需求分析，会产生大量的用户数据、生产数据、操作记录数据和设备数据等。为确保数据安全存储，采用数据库系统进行记录存储和数据管理。数据库系统是用于存储和支持用户检索、更新信息的计算机系统。根据平台兼容性和降低成本的考虑，本系统选择采用关系型数据库。关系型数据库使用关系模型组织数据，由二维表及其关系组成。通过SQL语言对数据库进行定义和操作［4］。关系型数据库以逻辑结构的表为存储单位，物理层使用有序文件、索引、散列等方式存储数据，并映射到逻辑模式的表，表是对物理存储数据的抽象表示。

3 人机交互平台设计与实现

3.1 人机交互平台产线模型搭建

留胚米生产线在线控制系统的可视化过程通过3D显示技术WebGL引擎Three.js实现，通过blender对产线各类型的机器进行建模，搭建控制系统三维场景，三维场景主要由网格模型、光照、相机、背景等部分组成。模型建立过程主要包括建立静态网格体模型、UV展开、贴图处理、模型渲染等，搭建好的三维场景效果逼真，用户可以进行平移、旋转、缩放以及拖拽等交互操作［5］。留胚米生产线模型建立流程图如图2所示。
图2 留胚米生产线模型建立流程图

Full size|PPT slide

留胚米生产线模型建立流程包括以下步骤：
1）确定产线各机器的外观、尺寸、排列顺序等信息，建立模型范围，提高渲染效率和交互响应速度。
2）使用blender对机器、平台和管道进行单独建模，控制模型在指定范围内等比例缩放。
3）利用blender的UV Editing编辑器进行UV展开，使用Adobe Illustrator绘制模型图标，并应用Substance绘制贴图，保证展现效果［6］。
4）优化模型，融并边和面，清除冗余部分，减少渲染成本。
5）按照生产顺序搭建生产线模型，进行管道连接组装。
6）渲染后导出为.fbx格式，包含材质和贴图，方便移植。
构建的留胚米生产线设备图如图3所示。
图3 留胚米生产线设备图

Full size|PPT slide

3.2 UI交互设计与实现

根据在线控制系统用户操作需求分析，对留胚米生产线在线控制系统的用户交互界面原型进行设计［7］。实现了用户操作系统数据安全性的保护，对构建的产线模型生动直观的展示，对生产状态数据的实时显示，对各类型机器捕获米粒图片的分类存储，对各项控制参数的操控设定以及对各个设备维修记录的数字化记录等，设计界面如图4所示。
图4 人机交互界面功能设计

Full size|PPT slide

4 通讯系统设计与实现

4.1 通数据通信框架设计

数据是本系统能够正常运转工作的核心要素，根据系统数据通讯需求分析［8］，设计本系统数据通讯框架，如图5所示，本系统主要包含前端用户人机交互界面、后端服务器、数据库存储系统以及生产线机器的工控机，生产线机器中的工控机对机器运行状态进行数据采集通过通讯端口将数据传输给后端，后端是数据运转的核心，对数据进行存储与反馈等操作。
图5 数据通讯框架设计

Full size|PPT slide

生产线机器的工控机是数据产生的源头与被控对象，工控机对机器运行状态参数进行初步采集，基于状态需要实时显示的需求，后端通过Socket通讯接口与工控机进行连接，通过Socket端口主动轮询向工控机请求状态数据获得JSON格式的状态数据进行解析，反馈给前端状态显示模块进行运行状态的实时显示，工控机通过HTTP向服务器发送数据请求获取控制参数，参数格式为JSON格式并对其进行解析下发。数据库存储系统是用户信息、产线运行协议以及产线参数状态等数据的存储核心。前端页面是生产线机器运行数据的展示与用户设定控制参数的人机交互界面，通过HTTP请求与后端进行数据请求交互［9］。后端服务器是留胚米生产线人机交互平台用于数据控制与数据传输的核心，对于前端与数据库之间以及生产线机器工控机与数据库之间的状态同步、数据存储以及指令下发起到链接桥的作用。

4.2 数据通讯设计与实现

4.2.1 服务端与客户端通信设计实现

本系统采用前后端分离的设计模式。前端负责展示视图和解析数据，后端负责数据操作逻辑。前端通过HTTP请求与后端进行通信，使用API接口进行数据的请求和响应。系统主要使用GET、POST、PUT和DELETE四种HTTP请求方法［10］。用户登录成功后获取令牌（token）进行鉴权，令牌在后续请求中放在请求头中。前端与后端的数据通信遵循请求-响应模式。用户通过登录界面输入用户名和密码发送POST请求给后端，后端核对信息并生成令牌响应给前端。前端存储令牌并在后续请求中进行鉴权，数据交互通过API接口进行。通讯流程时序图如图6所示。
图6 前端与后端之间通讯时序图

Full size|PPT slide

4.2.2 服务端与数据库通信设计实现

后端与数据库之间是以sequelize v6作为ORM，基于Koa框架与sqLite3数据库实现。如图7所示，后端Koa与数据库链接架构，在Koa框架下应用npm包管理器安装指令安装引入sqlite3数据库依赖，由于后端语言环境基于typescript语言，需引入sequelize-typescript依赖，基于sequelize v6数据库模型关系映射通过后端进行数据库的创建与链接［11］。
图7 后端与数据库链接架构

Full size|PPT slide

4.2.3 服务端与工控机通信设计实现

为了实现系统中用户交互界面实时获取生产线生产状态数据并下发控制参数指令的需求，设计了基于Socket接口的后端与机器之间的通信。Socket接口是TCP/IP协议的封装，通过三次握手建立连接，四次挥手断开连接。Socket是全双工接口，支持双向数据通信［12］。
为了确保生产线状态数据与人机交互平台的实时同步，采用Socket接口连接服务器与工控机，保证网络连接稳定性和数据响应实时性［13］。工控机作为客户端，实时上传生产数据并接收服务器下发的控制参数，实现双向通信。连接流程包括工控机创建连接的Socket对象，服务器创建监听连接请求的Socket对象，双方创建EndPoint对象并指定端口号和目标IP，服务器绑定EndPoint对象并开始监听连接请求，工控机发起连接请求，服务器接受连接并创建用于通信的Socket对象。连接成功后，双方使用Send（）和Receive（）方法进行数据通信［14］。通信完成后，工控机与服务器关闭Socket连接。

5 生产线在线控制系统实现

基于上述内容，实现了生产线控制页面的产线面板、设备面板、控制面板以及产线介绍面板，其界面效果如图8所示。
图8 生产线控制界面

Full size|PPT slide

生产线各控制面板详细信息如图9所示，产线列表面板对系统中各条产线进行了排列显示，每条产线模块包含该产线内设备离/在线状态的显示，报警信息显示，以及设备列表按钮功能，操作人员可以点击设备列表进入该产线设备列表进行进一步参数调控。设备列表面板排列了该产线的所有设备，每个设备模块包含该设备类型序列信息，对该设备的一键启动、一键停止控制按钮，该设备离/在线状态，报警信息显示，以及进一步控制该设备的详细按钮，用户可以通过此面板了解到该设备的状态和报警信息并快速控制生产线设备的启动停止。生产线调控面板提供了设备运行状态显示功能，对整条生产线所有设备的一键启动停止功能，以及该条生产线默认生产米质的白度、留胚率、品种名称等信息。产线介绍面板则对产线生产技术等信息的介绍。
图9 生产线控制面板

Full size|PPT slide

对在线控制系统一键启动、停止与报警功能测试，在控制面板设备调控中，通过一键启动与一键停止功能按钮对米机进行启停控制测试，其中设备运行时绿色指示灯亮起，设备待机时橙色指示灯亮起，设备报警时红色指示灯亮起，控制效果如图10所示。
图10 米机在线控制效果

Full size|PPT slide

6 结论

本文采用Web技术为基础，结合WebGL技术、数据库存储以及数据通讯共同研发的设计思路，实现系统功能需求，应用Web相关技术研发人机交互操作系统，并对生产线进行等比例建模通过Three.js引擎嵌入操作平台实现人机交互功能，设计后端服务器对交互平台、工控机、数据库之间的数据通讯实现数据交互功能。完成留胚米生产线的在线控制可视化研究。

参考文献

原文顺序 | 文献年度倒序 | 文中引用次数倒序
1
SCHUMACHER A， SCHUMACHER C， SIHN W. Industry 4.0 Operationalization Based on an Integrated Framework of Industrial Digitalization and Automation［C］. Proceedings of the Proceedings of the International Symposium for Production Research 2019， F， 2020： 301-310.
本文引用 [1]
2
吴昌政. 基于前后端分离技术的web开发框架设计 ［D］. 南京：南京邮电大学， 2020.
本文引用 [1]
3
李思睿， 郑大翔， 李志芳. 医院药房管理系统前端工程化设计与实现 ［J］. 软件工程， 2022， 25（9）： 18-21.
本文引用 [1]
4
郭训华. 基于Web的控制系统计算仿真研究与开发 ［D］. 上海：东华大学， 2005.
本文引用 [1]
5
AHMAD S I， RANA T， MAQBOOL A. A Model-Driven Framework for the Development of MVC-Based （Web） Application ［J］. Arabian Journal for Science and Engineering， 2022， 47（2）： 1733-1747.
本文引用 [1]
6
高文红， 孙欢， 韩晓敏， 等. 基于物联网技术的高校化学实验室安全监管系统的设计与实现 ［J］. 实验技术与管理， 2021， 38（6）： 282-286.
本文引用 [1]
7
VITLIEMOV P， BRATANOV D. An Approach to Design a Robot Platform with a Web-Based Virtual Reality Remote Control System［C］. Proceedings of the 2022 International Conference on Communications， Information， Electronic and Energy Systems （CIEES）， F， 2022： 1523-1546.
本文引用 [1]
8
基于Vue框架的阅读平台管理系统研究与设计 ［D］. 北京：北京邮电大学， 2021.
本文引用 [1]
9
HEO D， PARK D. Asynchronous Interaction Framework for Verilog Simulation Virtualization on Node.js［C］. Proceedings of the 2021 International Conference on Electronics， Information， and Communication （ICEIC）， F， 2021： 568-587.
本文引用 [1]
10
基于Web组件的可视化地图开发平台的设计与实现 ［D］. 杭州：浙江大学， 2021.
本文引用 [1]
11
吴文蔚. 基于WebGL的三维图形渲染系统的设计研究 ［J］. 山西电子技术， 2022， （5）： 79-81.
本文引用 [1]
12
吴晗. 大型项目自动化发布平台前端系统实现与优化 ［D］. 武汉：华中科技大学， 2022.
本文引用 [1]
13
DOU X， YANGA Y， ZHOU W， et al. Design of Tourism Information System with B/S and C/S Architecture Based on Android and Web Platform ［J］. Proceedings of Science， 2017， 12： 129-135.
本文引用 [1]
14
何成.虚拟现实场景中三维建模的关键技术研究［J］. 科技视界，2018，257（35）：244-245.
本文引用 [1]
15
梁凯， 衷卫声， 王文海， 等. 基于嵌入式Web服务器的双核水质监测系统 ［J］. 控制工程， 2017， 24（5）： 1053-1058.
PDF(2733 KB)

53

Accesses

0

Citation

Detail
段落导航
相关文章
版权所有 © 制造业自动化编辑部
地址：北京市德胜门外教场口1号　
邮编：100120　
E-mail：ma@riamb.ac.cn
技术支持：北京玛格泰克科技发展有限公司

/

〈 〉