Advances in Technology Innovation, vol. 4, no. 4, 2019, pp.

260-268

Remote Monitoring for the Operation Status of

CNC Machine Tools Based on HTML5

Yu-Shun Wang, Ling-Song He*, Zhi-Qiang Gao, Jun-Feng Wang, Yang-Fan Cao

School of Mechanical Science and Engineering, Huazhong University of Science and Technology, Wuhan, China
Received 23 April 2019; received in revised form 10 May 2019; accepted 28 July 2019

Abstract
In order to improve the accuracy of remote monitoring of computer numerical control (CNC) machine tools and
reduce the difficulty of monitoring; a remote monitoring method for CNC machine tools based on HTML5 is
proposed in this paper. The core idea of this method is to record external sensor information and internal working
condition information in the same time, and then visualize the information in multiple directions. Monitoring
accuracy is improved through the combined use of internal and external information. In response to the difficult
problem of traditional method monitoring; the internal working condition information, external sensor information,
3D model and multimedia information of CNC machine tools are jointly visualized. The 3D model synchronous
motion is driven by real-time working condition data. Remote low-latency multimedia information transmission is
implemented by using cloud live broadcast technology.

Keywords: CNC machine tool, remote monitoring, HTML5, 3D model

1. Introduction

Intelligent manufacturing, as the core of Industry 4.0, has been the focusing research of global manufacturing field in
recent years. As a “mother machine”, the CNC Machine Tool is the core equipment for intelligent manufacturing. Its
monitoring of operation status and adaptive control are critical to intelligent manufacturing. As a means of monitoring, the
operation status of CNC machine tools and remote monitoring have attracted attention of many researchers.

For traditional remote monitoring of CNC machine tools, the monitoring of operation status and fault diagnosis are
realized by monitoring the external sensor information (e.g., vibration, sound, current, temperature). However, the sensor
signal is the physical quantity measured indirectly. It can only represents the state of the sensor, but not the whole cutting
process. In addition, the stability and reliability of the sensor signal can be easily affected by the complex working environment
of the CNC machine tool (e.g., electromagnetic, temperature, external noise), which can easily prone to misjudgment [1].
Moreover, the data acquisition of the internal operating conditions is ignored, which lead to lack of data (e.g., G code, axis
position, feed rate, spindle speed) guidance during condition monitoring and fault diagnosis. Therefore, it is not possible to
understand the state and the process of processing in a short time, which can easily lead to misjudgment. Simultaneously, the
degree of data visualization is limited and the interactive operations in data analysis was scanty.

In recent years, researchers have investigated in a lot of energy to break through the limits of traditional CNC machine
tool monitoring methods. In 2016, AVIC proposed a four-layer Cyber Physical System (CPS) CNC machining process
intelligent platform, which could monitor the machine tool in real time and realize ultra-low delay transmission of processing

* Corresponding author. E-mail address: helingsong@hust.edu.cn

Tel.: +86-13554303940
 Advances in Technology Innovation, vol. 4, no. 4, 2019, pp. 260-268 261

data and high-fidelity 3D visualization and reproduction [2]. In 2017, Eun-Young Heo et al. proposed a process monitoring
system combined with virtual machining that simulates the NC tool path cutting process through virtual machining to predict
the static and dynamic characteristics of the operation [3]. The real-time diagnosis was realized by combining the internal
working condition data and sensor data of the CNC machine tool with the predicted virtual machining data. In the same year,
Yi Cai et al. merged sensor data and information to build a digital twin virtual machine for network physical manufacturing,
which was used for the diagnosis and prediction of CNC machine faults [1]. The above researches all used the working
condition information and external sensor information as main data source, which could significantly improve the accuracy of
monitoring. However, the cross-platform, visualization, and interaction of the designed system need to be further improved.

In view of the advantages of Hyper Text Markup Language (HTML5) can supports the multi-device cross-platform
operation, responsive web design, instant update, better interaction, and good support for audio and video[4, 5], a remote
monitoring method for CNC machine tools based on HTML5 is proposed in this paper. This method used the working
condition information and external sensor information inside the open CNC system as the main data source, and monitored the
machine tool through internal and external information fusion to improve the monitoring accuracy. Visualize with HTML5,
make full use of its high-level support for 2D charts, 3D models, audio and video visualization tools, and multi-dimensional
visualization of data to reduce the difficulty of monitoring.

2. Overall System Design

The design concept for the overall architecture of the system was the CPS model [1-2, 6]. A four-layer architecture based
on device awareness layer, network layer, data layer and visualization layer was built, and its system architecture is shown in
Fig. 1.

Fig. 1 System architecture

The internal working condition data, external sensor data, and multimedia data are acquired through the device sensing
layer in this system. The data is collected and parsed, and then the processed data was transmitted to the data layer through the
network layer to complete the data service and data storage. The core of the remote monitoring system is the visualization layer.
The data processed by the data layer is again transmitted to the visualization layer via the network layer, and the multi-level
visual monitoring of the data is completed and the corresponding analysis and processing are performed. It can also provide
operators with more real-time, more comprehensive, more decision-making reference value CNC machining process
information. This helped the operator to strengthen the monitoring and fault analysis of the real-time operating state of the
machine during the entire machining process.
262 Advances in Technology Innovation, vol. 4, no. 4, 2019, pp. 260-268

3. System Implementation

3.1. Data acquisition and transmission

The first thing that the remote monitoring system needs is the acquisition and transmission of data. The data collected
mainly includes three categories: working condition data acquired from the CNC machine controller, external sensor data
acquired from the data acquisition card, and multimedia data acquired from the camera and the microphone, as shown in Fig. 2.

Fig. 2 Data acquisition and transmission

Real-time data acquisition is achieved by transferring data from the network layer to the data layer for data services and
data storage. Data services are responsible for high-reliability, low-latency transmission of high-capacity, high-real-time data
and data pretreatment. The temporary storage and persistent storage of data were mainly completed by data storage. Since the
transmission control protocol (TCP) has the characteristics of acknowledgment response and retransmission control, both the
working condition data and the external sensor data are transmitted based on the TCP to ensure high reliability of data. Both
temporary storage and persistent storage are used. Temporary storage is mainly used for caching and was realized by Redis
database. Since the data in Redis is stored in RAM, the read/write speed is fast, and the low-latency transmission of the data can
be ensured, which could ensure the real-time monitoring. In addition, in order to ensure that the users use the data on demand,
the pipeline technology in Redis [7] is used to decouple the coupling between the data and the user. Different data can be
obtained according to different monitoring contents. For persistent storage, the MongoDB database is used. The content of the
Redis database is synchronized to the database by means of master-slave synchronization, which facilitated later playback. The
transmission of multimedia data is performed by using web real-time communication (WebRTC) technology, and network
address translation (NAT) penetration is used to ensure low latency of multimedia data transmission.

3.2. 3D model driven by real-time data

Traditional 3D models are rarely introduced in remote monitoring. Even if it has been introduced, it is only used for
virtual simulation, and seldom moved synchronously with physical devices. The design of introduce 3D models into the
monitoring interface and then use the real-time data to drive 3D model motion had its unique advantages. On the one hand, it
added visualization of tool position data and tool trajectory during monitoring, always feedback the current artifact appearance
to the monitor, and could view the artifact in all directions by dragging and zooming. On the other hand, by monitoring the
processing process, the abnormal position could be quickly located (through the internal working condition data) when signal
anomaly. Then, the abnormal position could be mapped in real time by 3D model, which could simplify the positioning
processing and reduce the difficulty of fault monitoring.

In the three-dimensional display of remote monitoring of CNC machine tools, Web graphics library (WebGL) was
responsible for loading and controlling the 3D model, and the browser provided the operating environment [7-8]. In order to
 Advances in Technology Innovation, vol. 4, no. 4, 2019, pp. 260-268 263

facilitate the control of the 3D model, it has been divided into different components according to the motion mode, and then
WebGL is used to “virtual assembly” according to its relative position. The mapping relationship between the component and
the driving data is established to realize the motion of the assembled CNC machine model through real-time data driving, as
shown in Fig. 3.

Fig. 3 Mapping of real-time data and 3D model

The CNC machine is ready to add the corresponding blank from the blank stock as required. After the tool is calibrated,
the data corresponding to G54 in the CNC machine controller is acquired, which was the real workpiece zero point. By
establishing a mapping with the zero point of the virtual machine tool workpiece, the mapping relationship between the virtual
machine tool and the physical machine tool could be established, thereby realizing the initialization of the data driven model.
The mapping equation is as follows:

XV   X R  X G 54  300 (1)

YV  YR  YG 54  1160 (2)

ZV  Z R  ZG 54  83.8  HWorkpiece  (3)

SV  0.3  SR    2 / 360 (4)

where XV, YV, ZV, SV is corresponding to the X, Y, Z axis position and spindle speed in the virtual machine tool respectively; XR,
YR, ZR, SR is corresponding to the X, Y, Z axis position and spindle speed in the physical machine tool respectively; XG54, YG54,
ZG54 is corresponding to the workpiece zero position on the physical machine respectively; HWorkpiece is the height of the
workpiece in the virtual machine.

After the virtual machine model is initialized and the mapping relationship is established, the real-time spindle speed S
and the X, Y, Z axis position could be obtained and used to drive the model motion in real time, as shown in Fig. 4. When the
initialization of the data-driven model was completed, the machine zero point, tool parameters, and tool initial position could
264 Advances in Technology Innovation, vol. 4, no. 4, 2019, pp. 260-268

be obtained. After the table position is partially magnified, the appearance of the workblank could be observed. The real-time
data could drive the model to observe the current tool position. After processing, the final rendering of the part could be
observed.

Fig. 4 Processing renderings of real-time data driven parts

3.3. Low latency video

The general architecture of video surveillance in traditional remote monitoring systems are content delivery network
(CDN), real time messaging protocol (RTMP) and http live streaming (HLS), with a delay of more than 3 seconds, which
cannot meet the current requirements for monitoring in real-time. This system drew on the idea of interactive live broadcast,
using WebRTC technology to control the average delay to about 200ms to realize the real time of video monitoring, as shown
in Fig. 5. The data transmission is mainly divided into two parts. One was the transmission of signaling, which is realized by
exchange the session information, network configuration, media configuration, etc. between the two ends of the peer to peer
(P2P) through the cloud platform, and finally the NAT penetration is achieved. Then a peer-to-peer connection between the
device collection end and the Kurento server, between the Kurento server and the viewer is established [9-11]. Another part is
the transmission of the video stream. This part directly transmited data through the P2P channel. When the video data is
collected by the device, the video is uploaded to the Kurento streaming server via the P2P channel, and then the viewer and the
Kurento terminal are respectively transmitted via the P2P channel. Due to the video passes through the P2P channel in both
transmissions, there is a small delay and realized low delay of video monitoring.

Fig. 5 Architecture diagram of video monitoring

3.4. Remote monitoring prototype system based on HTML5

Based on the above theoretical basis, a remote monitoring prototype system based on HTML5 is developed, as shown in
Fig. 6. The monitoring system is mainly used for real-time monitoring and fault diagnosis of CNC machine tools.
 Advances in Technology Innovation, vol. 4, no. 4, 2019, pp. 260-268 265

The monitoring system visualizes the data in multiple directions, including data display, 2D controls, 3D models, and
audio and video. Data presentations are intuitive enough to know their specific values, but they did not apply to data that is
large in volume or needs to understand trends. The two-dimensional control is realized by HTML5 Canvas technology, which
is used to dynamically generate raster-based images [12]. It could be used for a wide range of purposes, such as the dial could
directly display the value (more suitable for occasions with slower data changes) and reflectes the trend of change, the chart
could display the corresponding waveform directly and switched the different display forms of the data by performing
corresponding data processing. The 3D model could be intuitively perceived by the monitor. By driving the 3D model with real
data, it is possible to quickly locate the specific machining position and observe the motion, such as linear or circular motion,
face milling or shoulder milling. In addition, omnidirectional, multi-angle observations could be performed by rotating the 3D
model. Through audio and video, you could understand the specific processing environment and reduce the difficulty of
monitoring through both visual and auditory aspects. In this design, different visualization methods were adopted for different
types of data, which reduced the difficulty of monitoring.

Fig. 6 Interface of remote monitoring prototype system based on HTML5

4. Case study
The cutting stability during metal cutting directly affects the machining accuracy and machining efficiency of the
machine tool, so real-time monitoring of cutting stability is a key means to evaluate the quality of part machining [13]. The
greatest influence on cutting stability was the cutting chatter. Cutting chatter refers to a kind of violent self-excited vibration
caused by the characteristics of the processing system under the action of no external force during the cutting process[14]. This
experiment uses the prototype system to monitor the stability during the process of milling the three-layer pagoda, and
analyzes the cause, time and position of the stability problem in time to provide assistance for the rapid diagnosis and analysis.

A three-axis vertical milling machine equipped with Huazhong CNC system was used in this experiment. The cutting and
tool parameters are shown in Table 1.

During the experiment, the vibration and sound signal waveforms changed significantly at a certain moment, and the
phenomenon is shown in Fig. 7.

By comparing the vibration sound waveforms of Fig. 7 (a) and (b), the following characteristics were obtained: from the
time domain perspective, the amplitude in the Fig. 7 (b) is larger; from the frequency domain perspective, the frequency
266 Advances in Technology Innovation, vol. 4, no. 4, 2019, pp. 260-268

domain in the Fig. 7 (a) is more discrete. There was no obvious maximum value, and there is a significant peak in the
intermediate frequency domain of Fig. 7 (b). By listening to the audio data transmitted from the microphone, the sound at time
in Fig. 7 (b) is sharper, and it is possible to guess that chatter may occur at that moment. At this time, combined with the
internal working condition data of G code, axis position data and the visualization of the video and 3D model, it could be found
that the running track and the cutting parameters of the workpiece had not changed at this time, and the vibration and sound
waveform were proved. The difference is not caused by the change of the running track and the cutting parameters of the
workpiece. It could be confirmed that the waveform change at this time is caused by the chatter.

Table 1 Cutter, cutting and workpiece parameters of

a three-axis vertical milling machine
Cutter parameters
Diameter (mm) 10 Helix angle 45°
Edge number 3 Material Cemented carbide
Cutting parameters - - -
Feed rate (mm) 1/6 Axial depth (mm) 7
Radial depth (mm) 0.3~0.9 - -
Workpiece parameters - - -
Size (mm) 50*50*50 Material Aluminum 7075

Vibration time domain Vibration frequency domain

Sound time domain Sound frequency domain

(a) before chatter

Vibration time domain Vibration frequency domain

Sound time domain Sound frequency domain

(b) Chatter

Fig. 7 Cuttig stability experiment

 Advances in Technology Innovation, vol. 4, no. 4, 2019, pp. 260-268 267

In addition, when the chatter is successfully monitored, if only the vibration and sound waveforms of the external sensor
are passed, it was not possible to quickly locate the position where the chatter occurs and the cause of the chattering. At this
time, through the video and data-driven 3D model, the tool trajectory can be visualized in real time, and the chatter position
could be quickly located, which played a positive role for subsequent observation and analysis. When the processing is
completed, the vibration pattern could be clearly observed by observing the above-mentioned located position under the
microscope, as shown in Fig. 8. By real-time acquisition and visualization of the internal data of the CNC controller in CNC
machine tool, it is possible to obtain internal operating conditions such as spindle rotation speed, feed rate, and override when
chattering occurs. This helped to understand the cause of the chatter and provided guidance for suppressing chatter.

It is easy to judge the machining abnormality by the external sensor signal in this experiment. At this time, the internal
condition data could be combined to determine the type of abnormality as chatter. The accuracy of the monitoring is improved.
There are a variety of visualization methods in this monitoring system, which could help to quickly locate abnormal positions.
In addition, it helped to grasp the information of CNC machine tool conditions at all times, which reduced the difficulty of
subsequent fault analysis and diagnosis.

Normal surface Flutter surface

Video

Machined part Partial enlargement

Model
Fig. 8 Processed workpiece and detailed vibration lines

5. Conclusions

A method based on HTML5 for remote monitoring of CNC machine tools is proposed in this paper. This method
improved the accuracy of monitoring by combining the internal working condition data of CNC machine tools with external
sensor data. A variety of visualization methods, such as data display, 2D controls, 3D models, and audio and video were used
to reduce the difficulty of monitoring and analysis. Based on this, a prototype system is developed and the corresponding
experiments are carried out. The results indicated that the system can significantly improve the accuracy of monitoring and
reduce the difficulty of monitoring and analysis. This monitoring system could improve workpiece quality and fault diagnosis
accuracy significantly.

Conflicts of Interest

The authors declare no conflict of interest.

References

[1] Y. Cai, B. Starly, P. Cohen, and Y. S. Lee, “Sensor data and information fusion to construct digital-twins virtual machine
tools for cyber-physical manufacturing,” Procedia Manufacturing, vol. 10, pp. 1031-1042, 2017.
[2] X. H. Li and W. Y. Li, “The research on intelligent monitoring technology of NC machining process,” Procedia CIRP, vol.
56, pp. 556-560, 2016.
268 Advances in Technology Innovation, vol. 4, no. 4, 2019, pp. 260-268

[3] E. Y. Heo, H. Lee, C. S. Lee, D. W. Kim, and D. Y. Lee, “Process monitoring technology based on virtual machining,”
Procedia Manufacturing, vol. 11, pp. 982-988, 2017.
[4] Z. Lei, W. Hu, and H. Zhou, “Deploying web-based control laboratory using HTML5,” 2016 13th International
Conference on Remote Engineering and Virtual Instrumentation (REV), Madrid, pp. 69-73, 2016.
[5] Y. Sheng, J. Huang, F. Zhang, Y. An, and P. Zhong, “A virtual laboratory based on HTML5,” 2016 11th International
Conference on Computer Science & Education (ICCSE), Nagoya, pp. 299-302, 2016.
[6] J. Chen, J. Yang, H. Zhou, H. Xiang, Z. Zhu, Y. Li, C. H. Lee, and G. Xu, “CPS modeling of CNC Machine Tool work
processes using an instruction-domain based approach,” Engineering, vol. 1, pp. 247-260, 2015.
[7] J. Y. Xia, B. J. Xiao, D. Li, and K. R. Wang, “Interactive WebGL-based 3D visualizations for EAST experiment,” Fusion
Engineering and Design, vol. 112, pp. 946-951, 2016.
[8] L. Lianzhong, Z. Kun, and X. Yang, “A Cloud-Based framework for robot simulation using WebGL,” 2015 Sixth
International Conference on Intelligent Systems Design and Engineering Applications (ISDEA), Guiyang, pp. 5-8, 2015.
[9] A. S. Rosas and J. L. A. Martínez, “Videoconference system based on WebRTC with access to the PSTN,” Electronic
Notes in Theoretical Computer Science, vol. 329, pp. 105-121, 2016.
[10] Sredojev, D. Samardzija, and D. Posarac, “WebRTC technology overview and signaling solution design and
implementation,” in 2015 38th International Convention on Information and Communication Technology, Electronics and
Microelectronics (MIPRO), 25-29 May 2015, Piscataway, NJ, USA, 2015.
[11] K. I. Z. Apu, N. Mahmud, F. Hasan, and S. H. Sagar, “P2P video conferencing system based on WebRTC,” 2017
International Conference on Electrical, Computer and Communication Engineering (ECCE), Cox's Bazar, pp. 557-561,
2017.
[12] S. Dumke, H. Riemann, T. Bluhm, R. Daher, M. Grahl, M. Grün, A. Holtz, J. Krom, G. Kühner, H. Laqua, M. Lewerentz,
A. Spring, and A. Werner, “Next generation web based live data monitoring for W7-X,” Fusion Engineering and Design,
vol. 129, pp. 16-23, 2018.
[13] Z. Yongliang and L. Zhiyuan, “Stability and online monitoring of cutting chatter: a review,” Applied Mechanics and
Materials, vol. 121-126, pp. 377-81, 2011.
[14] K. J. Li, Y. X. Liu, and Z. Zhao, “Research in multiple factors vibration controlling of CNC milling machine,” 2011
Fourth International Conference on Intelligent Computation Technology and Automation, Shenzhen, Guangdong, pp.
472-475, 2011.

Copyright© by the authors. Licensee TAETI, Taiwan. This article is an open access article distributed under
the terms and conditions of the Creative Commons Attribution (CC BY-NC) license
(http://creativecommons.org/licenses/by/4.0/).