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

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