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

Hindawi Mobile Information Systems Volume 2021, Article ID 6668843, 13 pages https://doi.org/10.1155/2021/6668843

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

Shyr-Long Jeng ,1 Wei-Hua Chieng,2 and Yi Chen2

1Department of Mechanical Engineering, Lunghwa University of Science and Technology, Taoyuan 333326, Taiwan 2Department of Mechanical Engineering, National Chiao Tung University, Hsinchu 300, Taiwan

Correspondence should be addressed to Shyr-Long Jeng; [email protected]

Received 31 October 2020; Revised 12 March 2021; Accepted 19 March 2021; Published 7 April 2021

Academic Editor: Hsu-Yang Kung

Copyright © 2021 Shyr-Long Jeng et al. ,is is an open access article distributed under the Creative Commons Attribution License, which permits unrestricted use, distribution, and reproduction in any medium, provided the original work is properly cited. 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. ,is study describes a simple method of upgrading the HMIs of conventional industrial controllers into controllers capable of Web-based remote access. ,e 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 ﬂow 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.

1. Introduction ,e objective of this study was to describe a form of Web-based remote accessibility for conventional industrial With the advancement of the Internet of ,ings (IoT) and controllers that connect supervisory control and data ac- changes in industrial demand, the platform used for the quisition (SCADA) control with programmable logic con- monitoring of many industrial applications has gradually trollers (PLCs). Phuyal et al. [3] proposed a Web-based shifted to web pages and mobile devices [1, 2]. Enterprises remote-access real-time laboratory using SCADA control. have developed mobile apps that enable communication ,ey used a PLC to control the operation of the system and among their various devices while human-machine inter- installed a SCADA system to monitor and control the faces (HMIs) are important tools for industrial monitoring. process. ,e Web interface was designed in Visual Studio ,e motivation behind this study was to offer a solution that with ASP.NET and allowed students to access the lab and allows the HMIs of traditional industrial controllers to be information regarding the experiment. ,e remote labora- executed on mobile devices. ,e challenge was that HMIs tory allowed for users to control an induction motor; this require cross-platform functions to be executable on dif- was used as an example to demonstrate its effectiveness. ferent operating systems (Windows, iOS, and Linux) and Kondratenko et al. [4] proposed monitoring and automating devices (desktops, laptops, tablets, and smartphones). One control processes in specialized pyrolysis complexes (SPCs) aesthetically satisfying solution is to embed the HMI of the to utilize municipal polymeric waste. ,ey described the monitoring system on a browser-based web page and to use functional structure and the main components of their Extensible Markup Language (XML) as the format of the generalized SPC Web SCADA system. ,ey also presented system configuration file. an example of the application they proposed for the SPC 2 Mobile Information Systems

Web SCADA system. Rather than focusing on the previously front-end frameworks such as React.js, Vue.js, and Angu- mentioned applications, we focused on industrial controllers lar.js can be used to implement single-page design. jQuery is that are top-tier SCADA and PLC devices arranged in a a minimalist system primarily used to manipulate existing typical structure: an industrial controller, SCADA, and PLC Document Object Model structures. IBM Dojo’s package connected via Modbus. Industrial controllers with an open system simplifies the management of large-scale HMI de- platform communications (OPCs) server and client-based velopment projects and incorporates high-performance architecture use the Internet, whereas conventional con- implementations of common utilities into its core. Whereas trollers without OPC capabilities are standalone and de- Dojo uses standard Cascading Style Sheets (CSS) 3 queries, tached from the Internet. Qasim et al. [5] described a model jQuery features a hybrid XML Path (XPath)-CSS query of an HMI for Android mobile devices that uses model-to- language and offers a wide range of options and operations text transformation to take the domain model as an input for the results of these queries. jQuery incorporates AJAX, model for generating the complete mobile Android HMI effects, and other utilities into its small core. Useful code and uses Widgets Designer (.axml) code for applica- benchmarks for several packages were described in [11]. tions. Caiza et al. [6] proposed a Web platform for creating With respect to user experience, front-end development has HMIs that uses low-cost devices to integrate shop floor seen a trend of UIs that operate similarly to desktop ap- information through the OPC unified architecture (UA) plications [12, 13]. ,e websites most frequently developed protocol and PLC-based automation. ,ese works, which with SPA design are Web-managed web pages, in which the arose in contexts similar to that of this study, have exhibited UI is usually a dashboard with top or side content navigation a simple path for a conventional controller to enter Web- bars. Web pages, Google’s Gmail, Google Drive, and Azure based HMIs. XML and JavaScript Object Notation (JSON) Portal are examples of SPAs. enable information to flow through cross-platform devices In data management, graphical monitoring interfaces on a variety of operating systems and Web browsers. present information more effectively than digitally based ,is study used a single-page application (SPA) archi- interfaces. Chynal and Sobecki [14] analyzed users’ visual tecture [7] to transmit conventional industrial controller focus to understand the strengths and flaws of several information across various cross-platform devices, operat- current web pages and suggested effective methods for ing systems, and browsers. ,e Asynchronous JavaScript developers to present data. For example, line and waveform and XML (AJAX) can also be used to implement multiple graphs are intuitive methods for presenting changes in the user usage scenarios. Re-encoding conventional industrial voltage of a sensor, and supplementing them with pie charts controller data into XML helps reduce file size, improves or bar graphs can allow users to see statistics from a certain system performance, and enhances the ease of maintenance, period of time at a glance. ,ese graphical effects can be and such information stream can be combined with achieved through Web applications. ,ese methods make browser-style Web applications to increase system devel- quantitative data easy to interpret and more aesthetically opment efficiency. Remote monitoring through the pleasing and accurate than the old, unwieldy interfaces of Internet allows users to instantly control on-site system traditional hardware displays [15]. equipment from a distance. ,is method can substantially ,e model-view-controller (MVC) software design reduce the cost of equipment and labor as well as the time pattern has become the mainstream Web design archi- required to convert conventional industrial controllers into tecture. MVC prioritizes separating concerns and clearly Web-based controllers. distinguishing the roles of data, display, and logic, which ,e first academic article addressing SPAs and single- is a particularly crucial part of HMI development. MVC page Web applications was a technical report by Mesbah and can also simplify large programs into small modules or Deursen [8] in which the authors responded to a problem objects, making programs easily reusable, a feature which Web technology faced at the time: “Web applications have accommodates the design and development of modern suffered from poor interactivity and responsiveness towards SCADA-HMI systems [16]. Wang [17] analyzed two ap- end-users.” ,e reason for the problem was that traditional proaches to data serializing used in Web applications: Web design relied on postbacks, which required that pages XML and JSON. ,e results revealed that the transmission be continuously refreshed and divided websites into several of Web application data was secure and powerful in the different design structures. ,is type of design pattern is XML approach and fast and convenient in the JSON called a “multipage application.” Several of the multiuser approach. Nurzhan et al. [18] compared two formats for applications had obvious flaws, such as low immediacy, data interchange currently used for industrial applica- slowness, poor Web interaction, and poor user experience. tions. ,e results revealed that JSON was faster and used ,e SPA design pattern was proposed as a solution to these fewer resources than its counterpart, XML. With the problems. ,e shift from multipage to single-page design did evolution of data lightweighting technology, the XML not merely reduce multiple pages to a single page but format has been replaced by the JSON format for data provided users with an experience akin to desktop appli- transmission, not only reducing the amount of data being cations by moving the user interface (UI) from the server transmitted but also increasing the transmission speed side to the client side and implementing application logic on and improving the performance of the web page. In ad- the client side [9, 10]. dition to MVC, a remote monitoring system enables ,e concept of SPAs arose from the popularity of AJAX developers to efficiently divide work, ensuring that the technology. Technologies such as jQuery and Bootstrap and development of business logic and UIs remains separate. Mobile Information Systems 3

,is method was used to develop the Web application for users to achieve cross-platform remote monitoring. By the IoT-based toll system [19]. transforming a conventional PC-based industrial controller ,e component system approach subdivides an appli- with the WINPC32 graphical user interface (GUI) software, cation into multiple components to construct an entire GPX, into a general-purpose Web-based HMI for industrial application or web page, with a component as the smallest use, we demonstrated the simplicity of the SPA method- unit. Development frameworks based on component sys- ology. ,e cyber-physical systems of Industry 4.0 [29] can be tems have become a trend in modern Web development implemented to perform remote diagnoses or collect data for technology; examples are Java-based Web development machine learning through the Internet. frameworks such as Tapestry, Jakarta Server Faces, and Wicket [20]. Web front-end frameworks based on JavaScript include Vue.js, Angular.js, React.js, and Backbone.js. 1.1. Development of SPA Architecture [21, 22]. ,e biggest advantage of component systems is that each component can be modularized and reused to achieve 1.1.1. WINPC32 and GPX. As Figure 2 shows, WINPC32 is a separation, allowing each component to perform its re- programmable control and HMI platform developed by spective duties. Web applications built with component Hurco Automation Ltd. [30]. Built on this foundation is a systems are easy to maintain, and developers can easily add suite of soft-programmable industrial-control modules that new features or components to a template. Papcun et al. [23] encompass Soft-PLC, process PID, Soft-Motion, industrial described the evolution of HMIs and provided examples of networking, and machine vision. ,e manner in which the solutions and case studies for each stage of this evolution. remote data included in the WINPC32 system are imple- HMI 2.0 remote visualization and control on personal mented is by the SCADA engine through communication computers (PCs) can only work with networking. HMI 3.0 drivers or OPC UA servers via communication master cards was applied to Internet connectivity and Web servers in or direct serial link through COM or Ethernet ports once the companies, thereby opening the possibilities of Web and input and output (I/O) is configured. On top of those real- mobile applications. ,e integration of easy-to-access and time soft modules is an HMI module, which provides ad- open-source software, such as AJAX and the Node.js server, vanced HMI functions and network connectivity to Web, enables conventional industrial controllers to increase IoT LAN, the major field bus, and PLC controls. ,e Soft-PLC connectivity. complies with IEC61131-3 and offers the main types of PLC After substantial development, the IoT has come to play editing languages. ,e programming environment of all the vital role of enforcing security and privacy policies to other modules, such as motion and HMI, is also compatible avoid a variety of vulnerabilities and threats to systems. IoT with major industry standards. ,e hardware I/O supported security requirements are classified into the following cat- in WINPC32 includes the local ones assigned from various egories: authentication, access control, maintainability, PC-Based Add-On cards, including a digital I/O module, resilience, data security and data sharing, security moni- analog I/O module, process proportional-integral-derivative toring, and network security [24]. One approach to security (PID) interface module, motion interface module for mo- is to use a virtual private network (VPN)—a secure con- tion, and data acquisition module, and remote ones sup- nection between a device and a VPN server over the Internet. ported from the various field bus slave I/O and device nodes VPN private networks create secure communication or controls like PLC or temperature controller. Soft-PLC channels between two points over public networks [25–27]. Editor offers three major PLC programming languages: Because OPC UA did not use a VPN, its ability to provide Ladder Diagram, Instruction List, Function Block (FB), and security for industrial process control systems was com- Structured Text. In addition, WINPC32 also offers standard promised. Hackers obtained usernames and passwords and C language for logic programming. ,e C programming can gained access to the system. OPC UA servers [28] were then be used for partial (just a customized function) or entire outfitted with additional security features, such as server logic controls. PID software configures the I/O of each PID certificates for signing and encryption, authentication cer- loop corresponding to I/O or other variables. In addition, tificates for logging in, and a trust-reject function for PID software establishes control parameters, such as PID controlling access (signing procedure) and identifying who gains for on-off, or proprietary control loops. GPX is a can connect to the server. visualization development tool with which to edit GUI and In this study, we developed a general-purpose industrial recipes, program flow control logic, configure alarm logs, controller HMI for browsers. Figure 1 displays the con- and establish security and remote monitoring. ,e run-time troller’s architecture. We used an SPA design based on an engine includes the Global Data Exchange Server (GDS). ,e MVC architecture and a component system using Vue.js to GDS is responsible for executing the hardware and software remotely monitor the industrial controllers and created a modules the user has selected and configured as a hybrid back-end server based on AJAX, WebSocket applications, system at a predefined priority and timing. and Node.js to manage data transmissions. ,e industrial ,e GPX Windows graphics control software is an HMI- controller developed in this study is based on the WINPC32 editing software for the PC-based general-purpose industrial (Windows-Based Programmable Controller) industrial controller WINPC32. With its integration and application of controller software, and the results of the development WINPC32 and various control modules, GPX offers a wide output by WINPC32’s graphic control software, GPX, were range of applications for both traditional and high-tech converted into an SPA by a parser. ,e controller allows industries. 4 Mobile Information Systems

Component Server system Web API Control link Controller

AJAX Model

Front-end Back-end RWD WebSocket SPA

GPX JSON WINPC32 Parser

Regular HALNodeServer expression

MemAPI XML

Figure 1: Architecture of the general-purpose Web-Based HMI for an industrial controller.

Human machine interface

Motion PID Data Real-time PLC Ethernet control control acquisition image

Real-time Windows Operating System + hardware driver

Motion Distributed Data Frame Digital I/O PID control control system acquisition grabber analog I/O module module module module module

Figure 2: ,e system architecture of WINPC32.

GPX contains two main programs: Windows Maker for makes it easy to adjust the component control style and set developing the controller HMI and Windows Viewer for the memory address mapped to the hardware. After the presenting the results. Developers use GPX’s graphical in- development phase, GPX exports the ﬁles in XML. Figure 3 terface to develop and design HMIs because the program shows an example of a project created with GPX. ,e main Mobile Information Systems 5

Figure 3: SPA project in GPX. purpose of this study was to translate the data from the languages is broad. Developers can use ASP.NET C#, Visual original desktop application to the Web application executed Basic, Java, PHP: Hypertext Preprocessor, Python, Ruby, on the browser in an XML file. and Go, among many others. If developers use Node.js as the server, they can use JavaScript for the project’s architecture to develop both the front-end and the back-end. 1.2. Front-End and Back-End. As Web technology has progressed, website functions have become increasingly complex. ,e structure of web pages increasingly tends 1.3. MVC Architecture. ,e components of MVC are as toward the division of responsibilities and designs that follows: “model” refers to data related to the application’s separate concerns, as in the MVC architecture. To improve business logic and processing of the data and can directly user experience, several developers have developed their access data in locations such as databases. “View” represents own Web applications for their websites. SPAs are widely the display logic and the rendering of the page. “Controller” used in websites that require real-time interaction with users represents control of the flow of Web applications and re- and several modern Web technologies, such as AJAX, sponse to the various events related to user behavior and WebSocket, Webpack, and the Web application program- changes to the model. ming interface (API), to run efficiently. Large-scale Web Figure 4 displays a diagram of the network architecture projects often require a team of developers. in an MVC design. Operations are executed in the following To equally distribute labor, the architecture of modern steps: (1) the client uses the browser to send a request, (2) the Web development is usually divided into two parts: the server accepts the request and sends the command to the front-end and back-end. Front-end engineers are mainly corresponding controller, (3) and (4) the controller accesses responsible for the appearance of user pages in the browser, the model data, (5) the controller sends the data to the view including the web page style, page layout, user experience, to render the display page, (6) the viewer renders the ren- and application functions. Back-end engineers are mainly dered page back to the controller in HTML, (7) the con- responsible for server-side data access, database manage- troller encapsulates and generates the response data to the ment, API design, website analysis, and website browser, and (8) the final display page is returned to the optimization. browser by the server. ,e main languages for front-end Web development are Without dividing the front-end and the back-end, the Hypertext Markup Language (HTML), CSS, and JavaScript. architecture of the MVC design displays page contents by Depending on the situation, developers can use jQuery, using server-side rendering to dynamically update the web Bootstrap, or other extension libraries and front-end Web page through ASP.NET MVC and Ruby on Rails, meaning development frameworks such as Angular.js, React.js, and that a combination of data access and page demonstration is Vue.js to create a website. Modular and component-based performed on the server side. Each request by the client is development makes programs not only easy to build but also regarded as an action, and the method corresponding to a easy to maintain. ,e range of options for back-end server page is generated by the controller. 6 Mobile Information Systems

1 Request Server-side 2 controller

Browser Server

8 Response 7 Generating

MVC

6 3 Write data HTML Controller

View Model

5 Rendering 4 Read data

Figure 4: Web development architecture of MVC.

Although logic and data can be separated in this display logic of the view to render the final view to the user. structure, labor responsibilities cannot be easily allocated Although front-end engineering has become complicated, it because the engineers responsible for data access and UI greatly improves the separation of duties, program main- design must complete the entire project to debug and de- tenance, and development flexibility and reduces the re- velop the program—the engineer responsible for the UI source burden on the server at high traffic. must set up the database and the server. For this reason, the division of labor in this structure becomes unclear. 1.5. Component Systems. Component systems are an integral part of modern Web design. Component systems begin with the root component. ,en, countless reusable subcomponents 1.4. Client-Side Rendering. In practice, the view must be can be used to construct an entire web page, which can be extracted from the MVC on the server side. ,e extracted abstracted into a component tree with trunks and branches. view is processed by the client’s browser: the page and the Figure 6 displays a tree diagram of the component system. ,e data are combined in the browser, a process known as relationship between the components can be easily identified “client-side rendering.” As a result, the server focuses on as parent-child or sibling-sibling. Component systems can be returning data instead of returning the entire page’s HTML implemented without special development tools. Component file to the browser to separate the front-end and the back- systems are commonly implemented by using a front-end end. ,is structure represents the design of modern web framework, such as Angular.js, React.js, or Vue.js. ,e de- page architecture separating concerns and duties. velopment of front-end projects is modular and supports Making the server focus on returning data instead of front-end routing and state management functions that make returning the entire page’s HTML file to the browser is the development of SPAs smoother. In this study, we used common practice in modern Web design to separate duties Vue.js to develop the component system. between the front-end and the back-end. However, this When using Vue.js, the data are transferred between the approach increases the complexity of the front-end project. parent and child components through event emitting and Figure 5 displays the web page architecture rendered by the props passing. Vuex can use a public interface to call each client. component in the parent layers, thereby managing the state Another simple method can be implemented into the of each component in the entire web page. Data can be front-end as part of the “view” section of the MVC. In this transferred between sibling components through the method, a router processes routing problems on the front- $root.$emit () and $root.$on () functions in the Vue root end. ,e front-end route is usually distinguished from the component, as shown in Figure 7. back-end route by the “#” symbol, as in the uniform Re- source Identifier, “http://localhost/#/Home/Gpx.” ,e corresponding controller handles the flow of data, and the 1.6. Software Development. ,e concept of regular expres- model requests the data from the server through the back- sion in computer science is a key tool for writing parser end API. ,e server returns a response containing only data programs. Regular expressions use a single string to describe and a few headers and then temporarily stores the data in the a series of strings that conform to certain syntax rules. In front-end, performs logical operations, and submits a several text editors, regular expressions are often used to Mobile Information Systems 7

1 Request Client-side 2 controller

Browser Router Client-side rendering 9 Response 3 Access data 8 HTML Controller

View Model

7 Rendering

4 AJAX

6 Access data

Model Controller Server Server-side Web API Server-side 5 controller

Figure 5: MVC architecture with client-side rendering.

1 1 2

2 2 2 3 2

3 333

2 3 3 3 3 3

Figure 6: Tree diagram of the component system. retrieve, filter, and replace text that matches a specific the GPX object from the back-end into various components pattern. In this study, we used regular expressions to filter that could interact with the Web users and completely out the placement of individual objects, the members of each transplant the GPX HMI to the web page. ,e second task was object, and the real-time data. ,e data could then be stored to realize the communication interface between the control in the GPX object generated by JavaScript. When the data elements and the AJAX Hypertext Transfer Protocol (HTTP) had been extracted, the GPX object was output as a mod- request. ,e request sent to the back-end is wrapped in the ule.exports object, allowing it to be imported into other event handler of each component and is triggered by the event JavaScript programs, such as server.js; by compiling GPX to execute the user’s command. into JSON and defining the Web API, the front-end can ,e implementation of the back-end project also had two access the data at any time. Figure 8 presents the main block main goals. ,e first goal was to compile the output object of diagram of the parser. the GPX parser into JSON data and send them to each client Two main tasks were involved in the implementation of to render the GPX style. ,e second goal was to design a the front-end project. ,e first task was to design and convert Web API to release the data access capability of WINPC32. 8 Mobile Information Systems

Parent Parent

Emit events Pass props $root.$emit (′myEvent′)$root.$on (′myEvent′)

Child Child Child

(a) (b)

Figure 7: Communication among components. (a) Parent-child and (b) sibling-sibling.

from the back-end into the web page. ,e second Initial task was to implement the communication interface for the control components to send AJAX HTTP requests to the back-end. ,e communication interface was wrapped in the event handler for each Read the .gxml fle component and triggered events to execute the functions of the HMI. ,e user input command was then sent to the back-end. Access gpx:document object (3) Back-end tasks: the back-end project involved two main tasks. ,e ﬁrst task was to compile the output objects of the GPX parser into JSON data and send Access style-sheet object them to each client to render the GPX style. ,e second was to design a Web API that integrated WINPC32. ,e data access function in the front-end control component called the controller for function Access gpx:object processing in the form of API to achieve industrial control.

Encapsulation with JSON format ,e GPX application project, depicted in Figure 3, was used as the input source for the implementation software shown in Figure 9(a). ,e reason for selecting this project as an example project was that it included a large number of Export the JSON object common control components, which are necessary when designing a general-purpose HMI. After the XML file output Figure 8: Main block diagram of the parser. by the sample project was read, it was converted into a Web application. Figure 9(b) displays additional SPA imple- ,e API uses ClientSubscription() and ServerPublish() mentation corresponding to the classic GPX components. functions to execute industrial functions so that front-end ,e control link of GPX in the WINPC32 system was components can call the controller to run the corresponding running in the software’s real-time mode, in which the SPA processing. had the lowest priority of all the control processes in the controller. ,us, the latency in the data obtained through 2. Results Internet communication was not considered a serious concern. Using WINPC32, we implemented the SPA of the GPX window graphics control software, converted XML files into JavaScript objects for web development, implemented object 2.1. Industrial Controller Case Study. ,is case study was data as the HMI of the Web application, and executed supported by Taiwan’s Ministry of Science and Technology different applications with the back-end WIMPC32 API. ,e and involved a quasicontinuous wave (QCW) laser-cutting process consisted of three parts: machine, as shown in Figure 10(a), that used a conventional industrial controller. ,e control parameters of the QCW (1) GPX Parser: converted XML data of GPX objects laser-cutting machine included laser power, pulse width, into JSON for Web development. repetition frequency, and speed of the laser head movement, (2) Front-end tasks: the front-end involved two main which required adjustment for different processing and tasks. ,e first task was to convert the GPX objects material specifications. Variation in the laser vaporization Mobile Information Systems 9

(a)

(b)

Figure 9: Web-based HMI results of the SPA project. (a) SPA example project. (b) Other mapping from GPX (left column) to the SPA page (right column). zone is a determining factor of the accuracy and quality of as Figure 10(c) shows, the temperature inside the wafer laser processing. ,erefore, real-time in situ monitoring, changed drastically. With such a high-value aperture mirror, which conventional controllers lack, should be added to the laser beam radius had a high focusing effect inside the improve the temperature distribution of laser cutting. ,e wafer. At first, the laser energy was small, and the tem- user must also change the control parameters according to perature near the focus area rose. As the upper absorption the temperature distribution of the remote site. coefficient increased, the laser light energy caused a sharp We added an infrared thermal imager to the QCW laser- rise in temperature above the focus, resulting in damage to cutting machine to monitor the material vaporization the material and creating scars. However, throughout temperature. ,e QCW laser-cutting machine had an XY processing, the surface temperature of the GaN layer did not machine table and a Z-axis assembled with an IPG Photonics substantially rise. 1-kW laser head. We used the QCW machine to perform ,e motion control on the XY table required to displace stealth laser dicing of the gallium nitride (GaN) on a silicon the wafer from the focus of the laser and the focus length wafer, as shown in Figure 10(b). We fixed the value of the control required on the Z-axis were performed using a hard numerical aperture to 2.5 cm and changed the focal length of real-time control system, WINPC32. ,e software was the various focusing lenses. When the focal point was 2.5 cm, written in FB in accordance with IEC61131-3 standards. 10 Mobile Information Systems

Scanning z speed

GaN x

Si Focus

(a) (b) (c)

Figure 10: Stealth laser dicing using QCW laser. (a) QCW laser-cutting machine. (b) Laser position control. (c) Microscopic images of GaN on silicon control.

(a) (b)

Figure 11: JASON data streaming from the PLC. (a) FB for logic and motion control. (b) Data subscription and publishing.

,e program flow, as shown in Figure 11(a), is processed components with the structure displayed in Figure 6. between the SPA and the internal PLC controller through Figure 12(a) shows the process of adding the HMI the Node.js server. ,e digital I/O map can be transferred components one by one to the GPX page. Each component into a series of 0’s and 1’s. ,e analog data of the FBs is linked to one of the hard real data defined in the FB, as transferred into JSON are shown in Figure 11(b) as an shown in Figure 12(b). A thermal image was taken at 10 example. ,e SPA page following the component con- fps and was encoded through the vfw32.lib in a soft real- version from the GPX page can utilize the JSON data time process. ,e receipt download for the laser-cutting streaming to simultaneously display the controller and the control can be implemented in a soft real-time process, as sensor statuses on smartphones by using the MVC ar- shown in Figure 12(c). ,e Web-based SPA can be chitecture and the client-side rendering, as shown in the accessed through Node.js. flowchart in Figure 5. ,e PLC was running in a hard real- SPAs on smartphones enable users to remotely monitor time environment and using real-time kernels, including the laser-cutting process in real time. With SPAs, experts at RTX from Microsoft. ,e JSON data streaming publishes remote sites can adjust the corresponding control param- the hard real-time control data into software real-time eters on a web page and monitor the temperature distri- monitoring data that the client SPA page is subscribing. bution changes of the laser vaporization zone subject to A new control page corresponding to the material control adjustment in real time. ,is is a breakthrough for vaporization temperature monitoring with an infrared QCW laser machines, which up until now had not allowed thermal imager was added to the conventional controller. remote users to access measurement data and control pa- ,e execution of the Web-based HMI on the SPA tech- rameters. ,e studies reported in [3, 4] entail the transfer of nology for the QCW laser-cutting machine is shown in data from the traditional SCADA or PLC to a PC. Our study Figure 10. We first edited the control page on GPX in implemented Web-based technology in PC-based industrial WINPC32 and then converted it into web page controllers without altering the original Modbus Mobile Information Systems 11

(a) (b)

20 80 20 60 20 60

40 70 40 55 40 55

60 60 60 50 60 50

80 50 80 45 80 45 Temperature (°C) Temperature (°C) Temperature (°C) Temperature 100 40 100 40 100 40

120 30 120 35 120 35 0 20 40 60 80 100 120 140 160 0 20 40 60 80 100 120 140 160 0 20 40 60 80 100 120 140 160 (d)

Figure 12: Example of Web-based HMI using SPA on the QCW laser machine. (a) Implementation of GPX. (b) Example of control. (c) SPA on web page. (d) ,ermal images of laser dicing. 12 Mobile Information Systems communication arrangement. Our general-purpose Web- Conflicts of Interest based HMI developed for an industrial controller has the following features: ,e authors declare that they have no conflicts of interest. (1) Direct conversion of the XML file output by the GPX Acknowledgments maker to the Web version of the HMI (2) Use of browsers on different operating systems to ,is work was supported by Ministry of Science and process real-time data streaming Technology, Republic of China, under Grant no. MOST 109- (3) Remote real-time monitoring and control for con- 2622-E-262-005-CC3. ,is manuscript was edited by Wal- ventional industrial controllers lace Academic Editing. (4) Simplified program maintenance and automatic References adjustment of the web page view on mobile devices [1] H. Boyes, B. Hallaq, J. Cunningham, and T. Watson, “,e industrial internet of things (IIoT): an analysis framework,” 3. Conclusions Computers in Industry, vol. 101, pp. 1–12, 2018. [2] W. Z. Khan, M. H. Rehman, H. M. Zangoti, M. K. Afzal, Millions of industrial controllers around the world still N. Armi, and K. Salah, “Industrial internet of things: recent require IoT technology to transmit controller instant advances, enabling technologies and open challenges,” messages across platforms. ,e first step for software Computers & Electrical Engineering, vol. 81, Article ID 106522, engineers, which may also be the most difficult step, is to 2020. find a simple solution to connect conventional controllers [3] S. Phuyal, D. Bista, D. Bista, J. Izykowski, and R. Bista, “Design to the Internet without rearranging the device’s wiring. and implementation of cost efficient SCADA system for in- ,is study demonstrated a simple strategy for conven- dustrial automation,” International Journal of Engineering tional controllers to enter Web-based applications. ,e and Manufacturing, vol. 10, no. 2, pp. 15–28, 2020. solution was to convert the necessary control pages from [4] Y. Kondratenko, O. Kozlov, O. Gerasin, A. Topalov, and the conventional controller’s HMI into a Web-based O. Korobko, “Automation of control processes in specialized HMI. ,e control pages must be converted into XML at pyrolysis complexes based on web SCADA systems,” in Proceedings of the IEEE 9th International Conference on In- the beginning of the process. XML and JSON enable the telligent Data Acquisition and Advanced Computing Systems: information to flow through cross-platform devices across Technology and Applications (IDAACS), Bucharest, Romania, a variety of operating systems and Web browsers. Data September 2017. flow can be controlled and monitored by using SPAs [5] I. Qasim, M. W. Anwar, F. Azam, H. Tufail, W. H. Butt, and implemented through AJAX and WebSocket, which can M. N. Zafar, “A model-driven mobile HMI framework communicate with the back-end Node.js server to transfer (MMHF) for industrial control systems,” IEEE Access, vol. 8, data. As reported in the “Results” and “Industrial con- pp. 10827–10846, 2020. troller case study” sections of this paper, we converted a [6] G. Caiza, A. Nuñez, C. A. Garcia, and M. V. Garcia, “Human number of commonly used control components from machine interfaces based on open source web-platform and conventional industrial controllers to Web-based HMIs. OPC UA,” Procedia Manufacturing, vol. 42, pp. 307–314, We demonstrated that conventional machines that had 2020. [7] R. Sood, G. Singh, and S. K. Chawla, “Single page application: not allowed remote users to access measurement data and architecture and application,” Recent Trends in Programming control parameters could be viewed and controlled Languages, vol. 6, no. 1, pp. 27–30, 2019. through the Internet. ,e integration of easy-to-access [8] A. Mesbah and A. Deursen, “Migrating multi-page web ap- and open-source software such as AJAX and the Node.js plications to single-page AJAX interfaces,” in Proceedings of server enabled the transformation, making conventional the 11th European Conference on Software Maintenance and industrial controllers compatible with popular IoT. ,e Reengineering (CSMR’07), pp. 181–190, Amsterdam, ,e results of our research can serve as a reference for software Netherlands, April 2007. programmers seeking to modernize standalone conven- [9] M. Uehara, “Experiences with a single-page application for tional industrial machines and their controllers. learning programming,” in Proceedings of the International OpenVPN has implemented many features for authen- Conference on Broadband and Wireless Computing, Com- munication and Applications, pp. 55–66, Yonago, Japan, tication, encryption, and management that may allow us October 2020. to use VPN communication in the future to secure net- [10] J. Gunawan and R. R. Kosala, “Genie enterprise resource work traffic in our system. planning for small medium enterprises implementing single page web application,” E&ES, vol. 426, no. 1, Article ID 12170, 2020. Data Availability [11] https://dojotoolkit.org/reference-guide/1.7/quickstart/ ,e XML format data used to support the results of this introduction/whydojo.html. [12] F. Shahzad, “Modern and responsive mobile-enabled web study were originally exported by GPX Windows graphics applications,” Procedia Computer Science, vol. 110, pp. 410– control software. ,e JSON format data used for web de- 415, 2017. velopment are generated by GPX Parser and can be obtained [13] S. Deshmukh, D. Mane, and A. Retawade, “Building a single from the corresponding author upon request. page application web front-end for E-learning site,” in Mobile Information Systems 13

Proceedings of the 2019 3rd International Conference on [27] A. Skendzic and B. Kovacic, “Open source system OpenVPN Computing Methodologies and Communication (ICCMC), in a function of virtual private network,” In IOP Conference pp. 985–987, Erode, India, March 2019. Series: Materials Science and Engineering, vol. 200, no. 1, [14] P. Chynał and J. Sobecki, “Eyetracking evaluation of different p. 12065, 2017. chart types used for web-based system data visualization,” in [28] L. Roepert, M. Dahlmanns, I. B. Fink, J. Pennekamp, and Proceedings of the IEEE Conference Network Intelligence M. Henze, “Assessing the security of OPC UA deployments,” Conference (ENIC), pp. 159–164, Wroclaw, Poland, September 2020, https://arxiv.org/abs/2003.12341. 2016. [29] A. Napoleone, M. Macchi, and A. Pozzetti, “A review on the [15] S. Scepanovic, T. Vujicic, and P. Radunovic, “Web application characteristics of cyber-physical systems for the future smart for lightning activity monitoring system (LAMS),” in Pro- factories,” Journal of Manufacturing Systems, vol. 54, ceedings of the IEEE Conference Information System and pp. 305–335, 2020. Techologies (CISTI), pp. 1–4, Lisbon, Portugal, June 2017. [30] http://hacontrols.com.tw/Products/Product-typeA-2.asp? [16] A. Voinov, C. W. Yang, and V. Vyatkin, “Automatic gen- nplSinuYwbaIxJ6ZkoZI. eration of function block systems implementing HMI for energy distribution automation,” in Proceedings of the IEEE 15th International Conference on Industrial Informatics (INDIN), pp. 706–713, Warwick, UK, July 2017. [17] G. Wang, “Improving data transmission in web applications via the translation between XML and JSON,” in Proceedings of the 2011 >ird International Conference on Communications and Mobile Computing, pp. 182–185, Qingdao, China, April 2011. [18] N. Nurseitov, M. Paulson, R. Reynolds, and C. Izurieta, “Comparison of JSON and XML data interchange formats: a case study,” Caine, vol. 9, pp. 157–162, 2009. [19] B. Cvijić,D. Paˇsalić,D. Bundalo, and Z. Bundalo, “Cloud based web application supporting vehicle toll payment system,” in Proceedings of the IEEE, 5th Mediterranean Con- ference on Embedded Computing (MECO), pp. 489–492, Bar, Montenegro, June 2016. [20] V. Okanovic, “Web application development with component frameworks,” in Proceedings of the IEEE 37th International Convention on Information and Communication Technology, Electronics and Microelectronics (MIPRO), pp. 889–892, Opatija, Croatia, May 2014. [21] N. G. Obbink, I. Malavolta, G. L. Scoccia, and P. Lago, “An extensible approach for taming the challenges of JavaScript dead code elimination,” in Proceedings of the IEEE 25th In- ternational Conference on Software Analysis, Evolution and Reengineering (SANER), pp. 291–401, Campobasso, Italy, March 2018. [22] G. Zhang and J. Zhao, “Scenario testing of AngularJS-based single page web applications,” in Proceedings of the Inter- national Conference on Web Engineering, pp. 91–103, Dae- jeon, Republic of Korea, June 2019. [23] P. Papcun, E. Kajáti,and J. Koziorek, “Human machine interface in concept of industry 4.0,” in Proceedings of the 2018 World Symposium on Digital Intelligence for Systems and Machines (DISA), pp. 289–296, Kosice, Slovakia, August 2018. [24] K. Tange, M. De Donno, X. Fafoutis, and N. Dragoni, “A systematic survey of industrial internet of things security: requirements and fog computing opportunities,” IEEE Communications Surveys & Tutorials, vol. 22, no. 4, pp. 2489–2520, 2020. [25] M. Iqbal and I. Riadi, “Analysis of security virtual private network (VPN) using openVPN,” International Journal of Cyber-Security and Digital Forensics, vol. 8, no. 1, pp. 58–65, 2019. [26] Q. Zhang, J. Li, Y. Zhang, H. Wang, and D. Gu, “Oh-Pwn-VPN! security analysis of OpenVPN-based Android apps,” in Pro- ceedings of the International Conference on Cryptology and Network Security, pp. 373–389, Hong Kong, China, December 2017.