Web-Based Human-Machine Interfaces of Industrial Controllers in Single-Page Applications

Shyr-Long Jeng,Yi Chen,Wei-Hua Chieng,Hsu-Yang Kung

doi:10.1155/2021/6668843

Abstract

Advances in conventional industrial controllers have led to new technologies such as multilanguage use, cross-platform applications, and remote monitoring and control. However, the human-machine interfaces (HMIs) of conventional industrial controllers and mobile devices cannot directly transmit instant messages to each other. This study describes a simple method of upgrading the HMIs of conventional industrial controllers into controllers capable of Web-based remote access. The study began with the development of a model-view-controller architecture consisting of Hypertext Markup Language, Cascading Style Sheets, and JavaScript and proceeded to the implementation of a single-page application (SPA) method through AJAX and WebSocket, which communicates with the back-end Node.js server to transfer data. Future advancements will enable information to flow through cross-platform devices across various operating systems and Web browsers, allowing users to remotely monitor and control machines from mobile smart devices. We demonstrated the simplicity of the SPA method by transforming a conventional personal computer-based industrial controller, WINPC32, to an all-purpose Web-based HMI for industrial use with the graphic user interface software, GPX.

Highlights

With the advancement of the Internet of ings (IoT) and changes in industrial demand, the platform used for the monitoring of many industrial applications has gradually shifted to web pages and mobile devices [1, 2]
By transforming a conventional personal computers (PCs)-based industrial controller with the WINPC32 graphical user interface (GUI) software, GPX, into a general-purpose Web-based human-machine interfaces (HMIs) for industrial use, we demonstrated the simplicity of the single-page application (SPA) methodology. e cyber-physical systems of Industry 4.0 [29] can be implemented to perform remote diagnoses or collect data for machine learning through the Internet
Using WINPC32, we implemented the SPA of the GPX window graphics control software, converted XML files into JavaScript objects for web development, implemented object data as the HMI of the Web application, and executed different applications with the back-end WIMPC32 application programming interface (API). e process consisted of three parts: (1) GPX Parser: converted XML data of GPX objects into JavaScript Object Notation (JSON) for Web development

Summary

Introduction

With the advancement of the Internet of ings (IoT) and changes in industrial demand, the platform used for the monitoring of many industrial applications has gradually shifted to web pages and mobile devices [1, 2]. Ese works, which arose in contexts similar to that of this study, have exhibited a simple path for a conventional controller to enter Webbased HMIs. XML and JavaScript Object Notation (JSON) enable information to flow through cross-platform devices on a variety of operating systems and Web browsers. Is study used a single-page application (SPA) architecture [7] to transmit conventional industrial controller information across various cross-platform devices, operating systems, and browsers. We used an SPA design based on an MVC architecture and a component system using Vue.js to remotely monitor the industrial controllers and created a back-end server based on AJAX, WebSocket applications, and Node.js to manage data transmissions. By transforming a conventional PC-based industrial controller with the WINPC32 graphical user interface (GUI) software, GPX, into a general-purpose Web-based HMI for industrial use, we demonstrated the simplicity of the SPA methodology. By transforming a conventional PC-based industrial controller with the WINPC32 graphical user interface (GUI) software, GPX, into a general-purpose Web-based HMI for industrial use, we demonstrated the simplicity of the SPA methodology. e cyber-physical systems of Industry 4.0 [29] can be implemented to perform remote diagnoses or collect data for machine learning through the Internet

Development of SPA Architecture

Write data

Rendering 6 Access data

Results

Conclusions