Available

Available online at www.sciencedirect.com

Available online
online at
at www.sciencedirect.com
www.sciencedirect.com
Available onlineonline
Available at www.sciencedirect.com
at www.sciencedirect.com

ScienceDirect
Procedia Manufacturing 00 (2019) 000–000
Procedia
Procedia Manufacturing
Manufacturing 00
00 (2019)
(2019) 000–000
000–000
Procedia Manufacturing 42 (2020) 307–314 www.elsevier.com/locate/procedia
www.elsevier.com/locate/procedia
Procedia Manufacturing 00 (2019) 000–000 www.elsevier.com/locate/procedia
www.elsevier.com/locate/procedia
International
International Conference on Industry 4.0 and Smart Manufacturing (ISM 2019)
International Conference
Conference on
on Industry
Industry 4.0
4.0 and
and Smart
Smart Manufacturing
Manufacturing (ISM
(ISM 2019)
2019)
International Conference on Industry 4.0 and Smart Manufacturing (ISM 2019)
Human
Human Machine
Human Machine Interfaces
Machine Interfaces Based
Interfaces Based
Based on on Open
on Open Source
Open Source Web-Platform
Source Web-Platform
Web-Platform and and OPC
and OPC
OPC
Human Machine Interfaces Based onUA UA Open Source Web-Platform and OPC
UA
UA
Gustavo Caizaaa , Alex Nuñezbb , Carlos A. Garciabb , Marcelo V. Garciac,∗
c,∗
Gustavo
Gustavo Caiza
Caizaaaa ,, Alex
Alex Nuñez
Nuñezbb ,, Carlos
Carlos A. A. Garcia
Garciabb ,, Marcelo
Marcelo V.
V. Garcia
Garciac,∗
Gustavo CaizaaabUniversidad
, Alex Nuñez
Universidad Politecnica, Salesiana,
Politecnica CarlosUPS,
Salesiana, A. 170146,
UPS, Garcia
170146, , Marcelo
Quito,
Quito, Ecuador
Ecuador V. Garciac,∗
Universidad Politecnica Salesiana, UPS, 170146, Quito, Ecuador
Universidad Tecnica de Ambato, UTA, 180103, Ambato, Ecuador
abbUniversidad
Universidad Politecnica
Tecnica de Ambato, UTA,
Salesiana, 180103,
UPS, Ambato,
170146, Quito, Ecuador
Tecnica
c University of Basque deCountry,
Ambato, UTA, 180103,
UPV/EHU, Ambato,
48013, Ecuador
Bilbao, Spain
b ccUniversidad
University of Basque Country, UPV/EHU, 48013, Bilbao, Spain
University ofTecnica
BasquedeCountry,
Ambato,UPV/EHU,
UTA, 180103, Ambato,
48013, Ecuador
Bilbao, Spain
c University of Basque Country, UPV/EHU, 48013, Bilbao, Spain

Abstract
Abstract
Abstract
Abstract
Cyber-physical
Cyber-physical Production
Production Systems
Systems (CPPS)
(CPPS) are
are key enabling technologies for the Industry 4.0. Currently, factories have
have automation made by
Cyber-physical
Programmable Production
Logic ControlSystems
(PLC) (CPPS) are key
architectures key
and
enabling
enabling
now are
technologies
technologies
faced to reuse
for the
the Industry
forthese Industry
devices
4.0.
4.0.
to
Currently,
Currently,
implement CPPS
factories
factories
with aahave
automation
automation
low-cost. The
made
made byby
Reference
Programmable
Cyber-physical
Programmable Logic
Logic Control
Production
Control (PLC)
Systems
(PLC) architectures
(CPPS) are
architectures and
key now are
andenabling faced to
are technologies
nowOPC faced reuse
to reuse these
forthese devices
the Industry
devices to implement
4.0.
to CPPS
Currently,
implement CPPS with
factories
with ahavelow-cost. The
automation
low-cost. The Reference
made by
Reference
Architecture Model
Architecture Model
Model Industrie
Industrie 4.0
4.0 (RAMI4.0)
(RAMI4.0) standardized
standardized OPC Unified
Unified Architecture
Architecture (OPC
(OPC to UA)
UA) as the
as the sole
the sole
sole recommendation
recommendation for the
for The implemen-
the implemen-
implemen-
Programmable
Architecture
tation of LogicIndustrie
Control
aa communication (PLC)
4.0
layer. The architectures
(RAMI4.0)
aim of this and nowOPC
standardized
research are faced
work is totoshow
Unified reuse aa these
Architecture devices
proposal(OPC
for aaUA) implement
web asplatformCPPS with a low-cost.
recommendation
for the creation offor the
Human Reference
Machine
tation
tation of
Architecture
of a communication
Model Industrie
communication layer.
4.0
layer. The
The aim
(RAMI4.0)
aim of
of this
this research
standardized
research work
OPC
work is
is to
Unified
to show
show a proposal
Architecture
proposal for
(OPC
for a web
UA)
web asplatform
the sole
platform for the creation
recommendation
for the creation of
of Human
for the
Human Machine
implemen-
Machine
Interfaces (HMI)
Interfaces (HMI) using
using low-cost
low-cost devices
devices forfor the
the integration
integration of
of information
information fromfrom the the shop
shop floor
floor using
using the
the OPC
OPC UAUA protocol
protocol andand reusing
reusing automation
automation
tation
based of
Interfaces
on a communication
(HMI)
PLC. using
The results layer.
low-cost
of this The
devices aim
for
integrationof
thethis research
integration
show an work
of is to
information
important show
from
contribution atoproposal
the shop
enhance for
floor
PLC a web
using platform
the OPC
architectures for
UA the creation
protocol
interoperability, andof Human
reusing
allowing Machine
automation
integration
based
based on
on PLC.
Interfaces (HMI)
PLC. The
The results
using
results of
of this
low-cost
this integration
devices
integration show
for the an
an important
integration
show contribution
of information
important fromto
contribution enhance
the PLC
shop floor
toavailable
enhance PLC architectures
using the OPC
architectures interoperability,
UA protocol
interoperability, andallowing
reusing
allowing integration
automation
integration
with
with web
web applications,
applications, CPPS,
CPPS, etc.
etc. The
The main difference between the solutions is that the user may have no knowledge of the OPC UA
based
with on and
web
standard PLC. The results
applications,
can use of this
CPPS,
this kind The main
integration
etc.industrial
of
difference between
between the
show an important
mainapplication.
difference solutions
solutionstoavailable
contribution
the enhanceis
available that
isPLC the
the user
user may
that architectures have
have no
no knowledge
mayinteroperability,
knowledge of
of the
allowing OPC
OPC UA
theintegration
UA
standard
with weband
standard can
can use
use this
applications,
and kind
kind of
CPPS,
this etc.industrial
of The mainapplication.
industrial difference between the solutions available is that the user may have no knowledge of the OPC UA
application.
standard and can use this kind of industrial application.
© 2020
©
© 2020TheTheAuthors.
Authors. Published
Published by by Elsevier
Elsevier B.V. B.V.
© 2020
2020 The
The Authors.
Authors. Published
Published by
by Elsevier
Elsevier B.V.
B.V.
This
This
This
©
is
is
is
2020
an
an
an
The
open
open
open access
access
access
Authors.
article
article
article
Published
under
underunder
by
the
the the
CC
CC
Elsevier
CC BY-NC-ND
BY-NC-ND
BY-NC-ND license
license
B.V. committee
license (http://creativecommons.org/licenses/by-nc-nd/4.0/)
(http://creativecommons.org/licenses/by-nc-nd/4.0/)
(http://creativecommons.org/licenses/by-nc-nd/4.0/)
This is an
Peer-review open access
under article under
responsibility of the scientific
the CC BY-NC-ND license
of (http://creativecommons.org/licenses/by-nc-nd/4.0/)
the
Peer-review
Peer-review under
under responsibility
responsibility of of
thethe scientific
scientific committee of International
the International Conference on Industry
Conference 4.0 and
on Industry Smart
and4.0 and Manufacturing.
Smart Manufacturing.
This is an open access article
Peer-review under responsibility ofunder the scientific committee of the International Conference
CC committee
BY-NC-ND of
license the International Conference onon Industry
Industry 4.0
(http://creativecommons.org/licenses/by-nc-nd/4.0/) 4.0 and Smart
Smart Manufacturing.
Manufacturing.
Peer-review
Keywords: under responsibility
Human Machine Interfaceof (HMI);
the scientific
OPC UA; committee of the International
Web development; Internet of Conference
Things on Industry
(IoT); Industry 4.0. 4.0 and Smart Manufacturing.
Keywords:
Keywords: Human
Human Machine
Machine Interface
Interface (HMI);
(HMI); OPC
OPC UA;
UA; Web
Web development;
development; Internet
Internet of
of Things
Things (IoT);
(IoT); Industry
Industry 4.0.
4.0.
Keywords: Human Machine Interface (HMI); OPC UA; Web development; Internet of Things (IoT); Industry 4.0.
While
While it is true that control systems are vital for modern
1. Introduction While it
industrial it
and
is true
true that
that control
is manufacture control systems
systems
processes. Since
are vital
arethey for
for modern
vitalprovidemodern
opti-
1.
1. Introduction
Introduction industrial
While it
industrial and
and is manufacture
true that control
manufacture processes.
systems
processes. Since
Sincearethey
vitalprovide
they opti-
for modern
provide opti-
mum
mum performance
performance for
for the
the dynamic
dynamic systems,
systems, since
since they
they improve
improve
1. Introduction industrial
mum and
performance manufacture
for the processes.
dynamic Since
systems, they
since provide
they opti-
improve
The significant
The significant development
development the the internet
internet has
has had
had in
in the
the last production, reducing
production, reducing repetitiveness,
repetitiveness, routine
routine operations,
operations, andand the
the
years The significant
has allowed development
new the internet
technologies and has had
better in thetolast
devices last
be
mum performance
production,
probability reducing
of error.
forrepetitiveness,
It
the dynamic systems,
is necessary to routine
consider
since they improve
operations,
what are and
the the
cur-
years
years The has allowed
significant
has allowed new technologies
development
new the
technologies and
internet
and better
has
better devices
had in
devices theto
to be
last
be probability
production,
probability of
of error.
reducing
error. It
It is
is necessary
repetitiveness,
necessary to
to consider
routine
consider what
what are
operations,
are the
and
the cur-
the
cur-
developed
developed continuously.
continuously. This
This development
development has
has meant
meant that
that the
the rent
rent needs
needs that
that arise
arise in
in the
the world
world of
of automation.
automation. Same
Same needs
needs
years
developed has allowed new
continuously. technologies
This and
development better
has devices
meant thatto be
the probability
rent needstothat of error. It
arisehow is necessary
in the world to consider
of automation. what are
Same the cur-
needs
field
field of
of process
process monitoring
monitoring must
must adapt
adapt to
to the
the changing
changing techno-
techno- that
that have
have do
do with
tothat with how human
human beings
beings interact
interact with
with machines.
machines.
developed
field of continuously.
process monitoring This
mustdevelopment
adapt to thehas meant that
changing techno-the rent
that needsto
have do arisehow
with in the
humanworld of automation.
beings interact withSame needs
machines.
logical environment in which we find ourselves. That is why the For
For this
this reason, the development of human-machine interfaces
logical
field
logical of environment in
in which
process monitoring
environment which we
must
we find ourselves.
adapt
find That
That is
to the changing
ourselves. is why
techno-
why the
the that
For havereason,
this to do with
reason, the
the development
how human beings
development of
of human-machine
human-machine interfaces
interact with machines.
interfaces
development of systems that allow interaction with new tech- that
that enable
enable access
access to information about the processes clearly
development
logical
development of
environment
of systems
in
systems that
which
that allow
we find
allow interaction
ourselves.
interaction with
That
with new
is
newwhy tech-
the
tech- For
that this reason,
enable access the to
to information
development
information ofabout
about the
human-machine
the processes
processes clearly
interfaces
clearly
nologies
nologies is
is essential.
essential. From
From this
this arises
arises the
the idea
idea of
of developing
developing and efficiently
and efficiently
efficiently is very
is very
very important, making
important, making
making optimal
optimal emphasis
emphasis in
in
development of systems that allow interaction with new tech- that
and enable access is to information
important, about the processes
optimal clearly
emphasis in
anologies
web
anologies
web
is essential.
platform that From this
enables the arises
user to the ideahuman-machine
create of developing the
the use
use of
of computer
computer technologies
technologies [2].
[2].
web platform
ainterfacesplatform
(HMIs)
that
thatinenables
is essential. From this
enables
an agile
the
the user
arises
user
and
to create
to the ideahuman-machine
create
intuitive way
of developing
human-machine
has been pro-
and
theTheefficiently
use of computer
emergence
is very important, [2].
technologies
of Industry 4.0
making optimal emphasis in
has allowed new technolo-
ainterfaces (HMIs)
web platform
interfaces (HMIs) thatin
in an agile
enables
an agile and
the user
and intuitive way
to create
intuitive way has been
human-machine
has been pro-
pro- theThe
use of
The emergence
computerof
emergence Industry
oftechnologies
Industry 4.0 has
hastoallowed
4.0[2]. allowed new
new technolo-
technolo-
posed. Taking advantage of new advances in the field of web gies
gies for
for the
the exchange
exchange of
of information be developed, such as
posed.
interfacesTaking
posed. Takingand
development
advantage
(HMIs) in
advantagean
industrial
of
agilenew
and advances
intuitive
of communications
new advances in— in
waythe field
has been
themaking of web
pro-
field ofpossi-
web The
gies
OPC for
UA.
emergence
the Thisexchange
is because of information
of Industry 4.0 hasto
information
most of the
be
be developed,
toallowed
current developed,
information
such
new technolo-
such as
as
tends
development
posed. Takingand
development industrial
advantage
and industrial of communications
new advances in—
communications —themaking
field ofpossi-
making web
possi- OPC
gies
OPC UA.
for
UA. the This
This is
exchange
is because
because most
most of
of information
of the
the current information
to be developed,
current information tends
such as
tends
ble the development of new and better systems compatible with to
to be
be transported
transported through the internet. It has made the technolo-
ble the development
development
ble the of new
new and
and industrial
development ofinternet better systems
systems—compatible
communications
and better making possi-
compatible with
with OPC
to be UA. This is through
transported because the
through the internet.
most
internet. It
It has
of the current
has made
made the
the technolo-
information tends
technolo-
the changing world of and information [19]. gies
gies for exchange information, and the development of web in-
the
ble changing
the world
development of
of internet
new and and information
better systems
the changing world of internet and information [19]. [19].
compatible with to befor
gies for exchange
transported
exchange information,
through
information, and
and the
the internet.the Itdevelopment
has made theof
development web in-
oftechnolo-
web in-
terfaces
terfaces improve significantly.
improve significantly. Since
Since previously
previously the web
the web pages
pages
the changing world of internet and information [19]. gies for exchange
terfaces improve information, Since
significantly. and the development
previously the of web
web in-
pages
used
used to
to be
be of
of a minimal
aa minimal and
and unattractive
unattractive visual
visual design,
design, but the
terfaces
used to improve
be of significantly.
minimal and Since previously
unattractive visual the webbut
design, but the
pages
the
significant
significant advance that that the internet has
has recently has made web
used to be advance
significant of a minimal
advance the
andinternet
unattractive recently has
has made
visual design, butweb
the
withthat the internet
visualhas recently made web
∗ Corresponding author. Tel.: +593-987-692-752.
∗ Corresponding author. Tel.: +593-987-692-752.
∗ Corresponding author. Tel.: +593-987-692-752. pages available
pages available with a unique
a unique visual style,
style, high-quality
high-quality graph-
graph-
E-mail
∗ E-mail
address: [email protected] significant
pages advance
available with that
a the
unique internet
visual has recently
style, has
high-qualitymade web
graph-
E-mail address:
Corresponding [email protected]
address:author. Tel.: +593-987-692-752.
[email protected] ics,
ics,
pages
and
and excellent
excellent information
information presentation. This
a uniquepresentation.
visual style, This
advance
advance makes
makes
E-mail address: [email protected] ics,
the andavailable
excellent
internet the
with
information
ideal platform presentation.
to develop new
high-quality
This advance
models of
graph-
makes
human-
the
ics,
the internet
and
internet the
excellent
the ideal
ideal platform
information
platform to develop
presentation.
to develop new
new models
This of
advance
models of human-
makes
human-
2351-9789 © 2020 The Authors. Published by Elsevier B.V. machine
machine interfaces
interfaces based
based on
on these
these services.
services. In
In addition
addition to
to tak-
tak-
2351-9789
2351-9789
2351-9789 © © 2020
2020
© 2020 TheThe Authors.
Authors.
Thearticle
Authors.
Published
Published
Published by by
Elsevier Elsevier
B.V.
by Elsevier B.V.
B.V. the internet
machine the
interfaces ideal platform
based on to develop
these new
services. models
In of
addition human-
to tak-
This
This
This is
is an
is
an open
an
open access
open access
access article under
article
under the CC
under
the CC BY-NC-ND
the CC
BY-NC-ND license
BY-NC-ND
license (http://creativecommons.org/licenses/by-nc-nd/4.0/)
license (http://creativecommons.org/licenses/by-nc-nd/4.0/)
(http://creativecommons.org/licenses/by-nc-nd/4.0/)
2351-9789
This
Peer-review ©under
is an open2020 Thearticle
access Authors.
under
responsibility Published
of by Elsevier
the scientific
the CC BY-NC-ND B.V.
license
committee of
machine interfaces
(http://creativecommons.org/licenses/by-nc-nd/4.0/)
the International Conference on Industry 4.0
based
and Smart
onManufacturing.
these services. In addition to tak-
Peer-review
Peer-review
This is an open
Peer-review under
under
access
under responsibility
responsibility
article of
of the
under
responsibility of the
CC scientific
the scientific committee
BY-NC-ND
scientific committee
of
of the
license
committee of the International
International Conference
Conference on Conference
on Industry 4.0
4.0 and
(http://creativecommons.org/licenses/by-nc-nd/4.0/)
the International Industry and onSmart
Industry
Smart 4.0 and Smart Manufacturing.
Manufacturing.
Manufacturing.
10.1016/j.promfg.2020.02.089
Peer-review under responsibility of the scientific committee of the International Conference on Industry 4.0 and Smart Manufacturing.
308 Gustavo Caiza et al. / Procedia Manufacturing 42 (2020) 307–314
Gustavo Caiza et al. / Procedia Manufacturing 00 (2019) 000–000 2

ing advantage of the significant progress that the development protocol; taking advantage that REST interfaces have a very ex-
of new methods of exchange of information is having based on tended architecture style for web services implementations and
the cloud [10]. are based on the resource-oriented approach for non-centralized
For all the above, this research presents a new way of creat- architectures. The aim is to improve the use of communica-
ing HMIs using low-cost devices for the integration of informa- tion resources for sporadic service requests, as well as the ad-
tion from the shop floor using the OPC UA protocol and reusing vantages of the style benefits of resource-oriented architecture,
automation based on PLC. The creation of monitoring screens such as storage and application coupling.
is designed and implemented through the use of web program- The research presents by Palm et al. [16] discusses the fact
ming, incorporating it as a basis for exchanging information. that it is currently not possible to use an open reference imple-
The result of this implementation is generic and independent of mentation in research for free. Since the standard communica-
the hardware used. tion protocol, OPC UA is the main focal point regarding the
This article is divided into 6 sections, including the Introduc- exchange of information in the Industry 4.0 initiative. And it
tion. Section 2 presents the related works in which it shows the is also considered to be used within the field of the Internet of
state of research at global and local levels about this subject. In Things (IoT). For this reason, an open source alternative is ana-
Section 3 the state of the art is developed with emphasis on the lyzed to stabilize the theoretical work. The efforts to develop an
technologies necessary for the development of the project. In open implementation for OPC UA that meet the requirements
Section 4 the case study is presented as well as the basic archi- of practical and industrial automation technology are analyzed.
tecture of it. Section 5 presents the results obtained, and finally, So I have studied the open62541 initiative providing a general
Section 6 presents the discussion regarding the development of description of its fields of application and the main research
the web platform made and the future vision of the work pro- problems.
posed. In summary, the analyzed works present relevant ideas for
the achievement of the proposed project. Emphasizing the use
of the OPC UA protocol in conjunction with the development
2. Related works of web applications.

This section shows researches and works related to the areas

of interest for the development of this proposal. These works 3. State of the art
focus on the development of projects using the OPC UA com-
munication protocol as well as the development of web applica- The limited development of proposals such as this one and
tions oriented to the design of graphic user interfaces. For what the significant advances that have taken place in the field of
will be analyzed the most representative works below. technology in the area of web programming and industry 4.0
In the research developed by Schleipen et al. [17], the results has made possible the realization of this research. The goal of
of Industry 4.0 are analyzed, especially in the field of commu- this section is to show the technologies used for the develop-
nications. Since it is expected to find new means of commu- ment of the proposal.
nication exchange that pro-sees flexibility, adaptability, trans-
parency, and many more requirements than the demand of in-
dustry 4.0, therefore, consider yourself as an alternative, due 3.1. Human Machine Interface (HMI)
to the variability and flexibility that this protocol deals with, it
can be used in a simple way, as, for example, through informa- The human-machine interface (HMI) is defined as the sys-
tion. Also, it offers a communication alternative that allows the tem so that the operator can visualize and monitor the pro-
integration and combination of various devices and standards. cess developed by the plant. The same that allows you to in-
Cavalieri et al. in [3] presents the design of a web platform teract with the technological means implemented. This inter-
capable of accessing one or more OPC servers with the purpose face generally includes controls where the operator can inter-
of exchanging information through the web. Take into account connect with the SCADA system. Human-machine interfaces
the idea of creating a platform in which the user does not need to vary widely, from control panels for nuclear power plants to
have advanced knowledge regarding communication protocols, entry buttons on a cell phone [2, 4].
the requirements to develop applications based on the OPC UA An HMI is an easy way to standardize the supervision of
protocol. It is proposed to create an interface in which the user multiple Remote Terminal Units (RTU’s) or Programmable
does not have to deal with lines of code or complicated oper- Logic Controllers (PLC’s). HMIs are linked to databases, which
ating instructions. Emphasis has also been placed on the use of use data collected from PLC’s or RTU’s to provide trends, diag-
the OPC UA protocol due to the security that a platform that nostic data, and information management as well as the sched-
exchanges information on industrial processes through the In- ule of maintenance, logistics, and troubleshooting procedures
ternet must have. This being ideal for the development of this [2, 4].
initiative due to the great options of safety that this protocol There are two essential components in human-machine in-
provides. terfaces. The first is the input; a user needs some means to tell
Grüner et al. in [11], proposes the creation of a set of simple the machine what to do. The second is the output; this output
extensions that allow RESTful communication for the OPC UA allows the machine to keep the user updated about the progress
2
 Gustavo Caiza et al. / Procedia Manufacturing 42 (2020) 307–314 309
Gustavo Caiza et al. / Procedia Manufacturing 00 (2019) 000–000 3

of the processes or the execution of commands in a physical web taking advantage of the interactivity that web pages now
space. offer.
An adequate human-machine interface seeks, firstly, to ob- The web standards used in AJAX are well defined and com-
tain the status of the process in a single view and seeks to cap- patible with all the main browsers. The AJAX applications are
ture the situation quickly, create conditions for making correct browser-independent, but its great disadvantage is security. An-
decisions, that equipment is used optimally and safely, guar- other disadvantage that AJAX presents is that it does not per-
anteeing maximum reliability and easily change the operator’s form correctly in encrypted environments. Since AJAX is based
activity levels [8]. on the transmission of plain text (only text can be transmitted
through AJAX), so the encryption of this flow and the fact that
3.2. OPC UA the server-side program deals with it presents major problems
[1].
Open Productivity Collaboration Unified Architecture (OPC
UA) was developed to overcome the limitations presented by 3.4. ISA 101
its predecessor, classic OPC. The same one that was designed
to work only with Windows operating systems. OPC UA is cur- Although most of the research focuses on the study and anal-
rently an independent platform for manufacturers and therefore ysis of techniques, programming languages, and tools for the
open since it ensures a flow of information between components construction of websites, it is essential to study the rules that
of different suppliers, with the OPC Foundation being the asso- must be followed for the creation of HMI screens. This must be
ciation responsible for the development of this standard [13]. done to provide the user of the web platform with all the tools
OPC UA has two innovations or characteristics that should for the proper design of an HMI screen, following all the visu-
be highlighted concerning the classic OPC protocol: alization rules suggested by the specific regulations that dictate
The first innovation replaces the COM and DCOM proto- the way of designing HMI screens [18].
col, specific to Windows, with open and independent protocols In light of the lack of clear standards around the world of the
so that they can work under other operating systems. With im- human-machine interface, the ISA-SP101 committee was cre-
portant implementation not only at the level of computer equip- ated in July 2005 with the objective of establishing standards,
ment such as Windows, Linux, Mac, etc.; but, also at the level of recommended practices and technical support that would allow
mobile telephony devices such as Android and different types of the standardization of the field of human-machine interfaces
controls and monitoring devices, sensors, controllers, etc. They in production processes. This regulation was created with the
interact with the real world by incorporating additional security following objectives: to reduce the error rate, reduce learning
mechanisms [7]. times, and reduce redesign costs.
The second characteristic is that it incorporates the object-
oriented information model that incorporates the traditional
OPC functionalities (such as access to data, historical data, 4. Case of Study
alarms, events, conditions, etc.) and other new and innovative
ones oriented to data types and methods [9]. The aim of this case study is the development of a web plat-
The fact that the structure of the addressing in the OPC UA form for the creation of human-machine interfaces using the
servers is object-oriented and that the interface for accessing the OPC UA protocol to establish communication with the con-
structure is generic means that OPC UA is considered not only a troller and based on the AJAX web programming technique that
communication gateway between two computers but also a pro- allows creating interactive web pages .
gramming language with communication capabilities through The architecture of the developed platform is shown in Fig.
networks. 1 and will allow the understanding of the basic operation of the
proposed system and how it exchanges information between its
3.3. AJAX different components.
The architecture of the developed system consists of an OPC
Ajax is a group of interrelated web development techniques UA client, which allows the web application to be intercon-
that are used on the client-side to create interactive web ap- nected with the OPC UA server. The OPC UA server is respon-
plications. With Ajax, web applications can recover data from sible for obtaining information from the controller and the con-
the server asynchronously in a second plane without interfering troller provides the information of the processes to be controlled
with the display and behavior of the existing page. The use of and monitored.
Ajax techniques has led to an increase in interactive or dynamic The web interface of the platform allows creating human-
interfaces in web pages. machine interfaces for the monitoring of different processes. It
AJAX is considered the future of the Internet due to its abil- is also responsible for allowing the input of connection param-
ity to simulate desktop applications because of the new features eters. These parameters are the IP address of the controller with
it offers, such as asynchronous client-server calls and partial which you want to establish a connection and the variables of
page updates. The advantages that this new initiative in web de- the controller that you want to monitor. When carrying out this
velopment provides enables to develop a new way of creating process, the web interface sends this information through the
human-machine interfaces and SCADA systems based on the socket.io protocol to a code instance that has been created in
3
310 Gustavo Caiza et al. / Procedia Manufacturing 42 (2020) 307–314
Gustavo Caiza et al. / Procedia Manufacturing 00 (2019) 000–000 4

Fig. 1. Communication architecture of the developed web platform

the OPC UA client, this instance allows managing the variables

that are going to be monitored, receives the information from
the variable and sends it to the OPC UA server in order to cre-
ate a new variable. The information in the variable can later be
accessed from each element of the web platform through the
subscribing process.
The process performed by both the OPC UA server and the
client is transparent to the user. This process simplifies the use
of the web platform and provides the user with an intuitive and
easy way to use interface. The process carried out by the web Fig. 2. Web interface HMI implemented
platform is to retrieve the information that is found in the con-
troller through the process of subscribing to the variables es-
tablished in the OPC UA server. The server creates these mon- have been added and another option to establish the connection
itoring instances, and the client accesses them when selecting parameters with the controller [5]. See in Fig. 2.
a variable through the web interface. This information is re- The most important aspect of the web interface is the virtual
trieved by the client and sent to each virtual instrument of the controls; these instruments are based on plugins that allow their
platform. When receiving the information, the programming of visualization in the web interface. These virtual instruments
the controls allows them to present this information in the most have several options that enable them to be interactive and make
aesthetic way possible using visual effects or text indicators de- possible to change their properties through JavaScript. The vir-
veloped in each virtual control — giving as a final result a mon- tual instruments are based in standard ISA 101.
itoring screen that allows identifying the status of the monitored One of the controls created has been called gauge and uses
process efficiently. the jQWidgets plugin and its package jqxGauge [12]. This li-
brary will allow using this control to modify it and exchange
information. To add the virtual instrument to the web interface,
5. Proposed Implementation it is necessary to link the dependencies that will make possible
to use the library for the use of the corresponding plugin.
Three main code structures were developed to build this web Later it is necessary to develop the control code, which is
platform. The first structure creates the web interface and vir- defined by a JSON structure and referred to it by JavaScript. In
tual instruments. The second structure belongs to the OPC UA the code file, the main structure for the development of the con-
client for managing the monitoring instances, and the third one trol is defined, focusing on the properties that allow the user to
belongs to the OPC UA server that is responsible for creating visualize the information of the variable to be monitored such
the variables that contain the controller information. All these as its ranges, legends, scales and the current value of the vari-
structures are going to be explained in more detail en the fol- able. Properties to which it is accessed and updated through the
lowing section. following syntax:
(”Controlcontainingid”).JqxGauge(Controlproperty
: value);
5.1. Web interface design As described above, each control has been arranged so that
it is possible to interact with it and modify its properties such as
The design of the web interface was based on a simple struc- size, color ranges, information and position on the screen which
ture defined through HTML, CSS, and JavaScript, in which allows us to move them and arrange them in the work area to
there is a control bar containing all the virtual instruments that create a new monitoring interface.
4
 Gustavo Caiza et al. / Procedia Manufacturing 42 (2020) 307–314 311
Gustavo Caiza et al. / Procedia Manufacturing 00 (2019) 000–000 5

5.2. OPC UA Client Design for Web-Platform integration

To establish communication with the controller, the OPC

UA protocol has been used due to its characteristics in terms
of security, scalability, and flexibility. For the development of
the proposal has been used the initiative developed by Etienne
Erossingnon called nodeOpcua for Node Js. This alternative
is open source and ready to be used for the development of
projects, even for commercial purposes [14].
The OPC UA client that has been developed fulfills the task
of sending the information coming from the web interface to
Fig. 3. Monitor model communication service
the OPC UA server with the objective of sending the data of the
variables to be created and the parameters to establish a connec-
tion with the controller. A Web User to get information about form builds a temporary table through a cut of the OPC UA
available data sources (i.e., the OPC UA Servers ) uses a method Address Space starting from the starting node, next object root
called Get Data Source. This service assumed to identify each node, etc.
OPC UA Server by a URL of the OPC UA Server, made up by The third service developed is called Monitor Service. This
a string containing the URL and URI addrress of the server. service is invoked when a Web Users can automatically moni-
When a user request a Get Data Source service, the OPC tor the changes on the tag value attribute of one or more OPC
UA Web Platform will invoke the OPC UA Find Servers ser- UA Variables into shopfloor communication according to the
vice to get the list of the available OPC UA Servers in the in- procedure shown by Fig. 3. To this goal, a web platform calls a
dustry shopfloor. The User of this Web Platform will get a list Monitor service, this service has the function of managing the
of data sources identified by a URL and URI. In each follow- monitoring instances for the different virtual controls defined
ing service request, the user will type the Server URL, allowing through a programming object. These monitoring instances ac-
to perform the requested operations on the Address Space se- cess the information of the server variables using their unique
lected. identifier called NodeId to recover the value of them in real-
Other service implemented is the Read Data service that time [6]. The code for the creation of said instances is shown in
gives to the user of the web platform a description of a set of Listing 1.
Objects and Variables into OPC UA Adress Space. It is used
to identify each OPC UA Node by an ID and URI, made up
by a string containing the concatenation between the OPC UA 1 socket . on ( ’ send ’ , function ( data ) {
2 console . log ( " GAUGE1 Index = " + data [1]) ;
NodeId and Name space Index. Read Data service request fea-
3 console . log ( " NODE ID to Monitored = " + data [0]) ;
tures the following parameters: 4 indice = parseInt ( data [1]) ;
5

6 tagmonitor [ indice ]= the_subscription . monitor (

• Server URL: it is the identifier of the data source. 7 {
8 nodeId : data [0] ,
• Server URI: The namespace URI identifies the naming
9 attributeId : 13
authority defining the identifiers of NodeIds 10 },
• Starting Node: it is the ID URI related to the OPC UA 11 {
Node from which information should be retrieved to the 12

user. 13 samplingInterval : 1000 ,

14 discardOldest : true ,
• Identifier Type: The format and data type of the identi-
15 queueSize : 5
fier. It can be a numeric value, a string, a globally unique 16 } , opcua . read_service . T i m e s t a m p s T o R e t u r n . Both ,
identifier (GUID), or an opaque value (a namespace spe- function ( err ) {
cific format in a ByteString). Which type is preferred de- 17 if ( err ) {
pends on the use case. If it is important to save memory or 18 console . log ( " Monitor " + tagmonitor [
indice ]+ " failed " ) ;
bandwidth, it makes sense to use numeric NodeIds which
19 console . log ( " ERr = " , err . message ) ;
are smaller and faster to resolve. 20 }
21 }) ;
Read Data service can be used to (i) request when it is called Listing 1. OPC UA Client Code
without StartingNode parameter, in this case, the OPC UA Web
Platform accesses the OPC UA Address Space of the requested
OPC UA Server starting from the Identifiers. The second case 5.3. OPC UA Server for integrate shopfloor communication
(ii) is when the OPC UA Web Platform accesses the OPC UA based on PLC
Address Space starting from the OPC UA Node relevant to
the StartingNode parameter. In both cases, when the user in- The OPC UA server is responsible for creating the new vari-
vokes the Read Data service request, the OPC UA Web Plat- ables to get information from them through the OPC UA client
5
312 Gustavo Caiza et al. / Procedia Manufacturing 42 (2020) 307–314
Gustavo Caiza et al. / Procedia Manufacturing 00 (2019) 000–000 6

Fig. 4. Publishing model communication procedure

Fig. 5. DataType PLCController inserted in OPC UA server

and the corresponding virtual controls. The OPC UA server re-

ceives the parameters to create each variable and proceeds to 1 variables = namespace . addVariable ({
establish a new object with its corresponding NodeId, name, 2 componentOf : node [0] ,
and designated type. 3 nodeId : " s = Variables " ,
Every OPC UA Tag into Server is passed to the PLC by the 4 browseName : " Tags PLC0 " ,
5 dataType : " String " ,
web-platform using the following attributes: 6 value : {
7 get : function () {
• ID: is the ID of the OPC UA Node in the OPC UA Web 8 return new opcua . Variant ({ dataType : opcua .
Platform. DataType . String , value : tagsvalue }) ;
9 },
• Name: is a string containing the DisplayName attribute 10 set : ( variant ) = > {
of the OPC UA Node 11 tags = " ns =1 " + " ; " + " s = " + variant . value [0];
• Value: contains the current value attribute of the OPC UA 12 tagsvalue [0] = " ns =1 " + " ; " + " s = " + variant . value
Tag. [0];
• ValueTypeSchema: gets the JSON-Schema defining the 13 tagsvalue [1] = variant . value [1];
14 dataType [ k ]= variant . value [1]+ " " ;
structure of the tag into PLC, explaining the OPC UA 15 ipplc = variant . value [2];
Web client how the tag must be read. 16
• SamplingInterval: this attribute represents the sampling 17 tagcreated [ k ]= namespace . addVariable ({
interval for the monitoring of the OPC UA Tag on value 18 componentOf : node [0] ,
changes. 19 nodeId : " s = " + variant . value [0] ,
20 browseName : variant . value [0] ,
21 dataType : " Double " ,
Information about Nodes into OPC UA Server are passed to 22 value : new opcua . Variant ({ dataType : opcua .
the web-client as a JSON string, inside the ReadInfo response. DataType . Double , value : 1000.0})
It has been assumed that the JSON string must be compliant to 23 }) ;
the JSON-Schema, it is made up by two properties named Start- Listing 2. OPC UA Client Code
ingNode and LinkedNodes. Subsequently, the created variable
is related to the memory address set in the controller; in this
case, the PLC Siemens S7-1200. Fig. 4 shows the synchronous 5.4. Discussion of Results
exchange of Publish service between the PLC and the OPC
UA Server through S7 protocol. For each OPC UA Publish re- Communication tests were developed that allowed determin-
sponse, a JSON-based string made up by the ID of the moni- ing if the information that is transmitted from the platform to
tored node and the tag value is sent to the S7 protocol Broker, the controller and vice versa is being carried out accurately. We
to which the user has previously subscribed. started by defining the connection parameters to begin the mon-
The data into OPC UA Server is modelled as shows in Fig. itoring of the variables by entering as parameters like IP address
5, the main data type is called Controller feature a binary value of the controller in which the variable is located as well as the
attribute belonging to the complex data structure named PLC- name of the variable and its memory location on the PLC. This
Controller. It holds a HasEncoding reference pointing to the process can be observed in Fig. 6.
DefaultBinary encoding Object. This Object points to the de- When the OPC UA server receives this information, a new
scription of the PLCController type; among its attributes, the variable with a node ID ”ns = 1; s = VAR1” is created, and the
Value contains the entry point of the dictionary describing its connection to the selected PLC is established. Furthermore, the
structure. controller IP address is added to the protocol NODES7 the con-
The information of the controller is retrieving through the nection is established, and the information that is found in the
Node S7 protocol included in the server code [15]. This code is MR3 address is retrieved. This address is interpreted and trans-
shown in Listing 2. lated by the NODES7 protocol. It is resulting in the MD3 ad-
dress of the PLC. The information of this variable is visualized
6
 Gustavo Caiza et al. / Procedia Manufacturing 42 (2020) 307–314 313
Gustavo Caiza et al. / Procedia Manufacturing 00 (2019) 000–000 7

Fig. 6. Establishment of connection parameters

through one of the controls established in the web interface. Fig. 9. Data Traffic Analysis
This process can be seen in Fig. 7.

reason, the web platform developed is ideal for working with

low-resource systems. The graph of transmission of packages
can be seen in a better way in Fig. 9.

6. Conclusions and future work

Since it is a new proposal for the creation of human inter-

faces, the work developed will provide many facilities for the
monitoring of processes. Thanks to the ease of its interface, it
Fig. 7. Monitoring of variables will allow the design of web-based monitoring interfaces to be-
come more common. Being a platform based on open source
In the same way that the process to establish the reading of will enable it to be used in the development of a wide range of
a variable through a virtual instrument, it is possible to send new proposals.
information to a memory location of the controller from one of A technical solution based on integrating device level
these controls. To do this, it is necessary to define the variable HTML, CSS, and JavaScrip design principles into OPC UA ap-
to which you want to write a certain value and to link it through plications is proposed. Therefore, the two most prominent in-
the connect button. In Fig. 8 can see this process. dustrial automation technologies, HTML and OPC UA, have
been analyzed regarding industrial shop-floor integration re-
quirements for developing man-machine interfaces. The devel-
oped platform can be used as a means of interconnecting with
an increasing number of devices through which process control
will be allowed with devices such as sensors, actuators, elec-
tronic cards, among many others. Also, it will be possible to
improve its characteristics allowing that in the future it may be
an option to be used in net industrial environments.
Fig. 8. Writing variables
Future works of the proposed system will be the creation of
a mechanism for managing user accounts, the addition of more
virtual instruments and advanced options for monitoring more
5.5. Data Traffic Analysis complicated processes, as well as the animation of images for
their simulation. Together, the development of new drivers that
In addition to the connection tests, an analysis of the data allow communication with more controllers and terminal de-
traffic generated when using the web platform was carried vices will be analyzed. It is also expected that it can be adopted
out. When starting the analysis, you can see how the PSH as a teaching instrument in the academic and engineering fields.
and ACK requests are generated. These requests are generated
when the connection is established between the client and the References
server. Likewise, there is also generated traffic belonging to the
socket.io protocol and the NodeS7 protocol in charge of taking [1] Abbas, H.A., Mohamed, A.M., 2011. Review on the Design
the data to the virtual controls and the controller, respectively. of Web Based SCADA Systems Based on OPC DA Protocol.
Giving as a result of the analysis a maximum peak of 140000 International Journal of Computer Networks (IJCN) 2, 266–
277. URL: http://www.cscjournals.org/journals/IJCN/
bits transmitted per second and bandwidth consumed of 0.14 issue-manuscripts.php?v=2{&}i=6.
(Megabits per second). From which it is concluded that the ex- [2] Arenas, L.V., Jose, C.A., Alfonso, R.D., 2015. Interfaz Hombre Máquina ,
change of information on the platform is quite low. For this 1–4URL: http://www.uco.es/grupos/eatco/automatica/ihm/.
7
 314 Gustavo Caiza et al. / Procedia Manufacturing 42 (2020) 307–314
Gustavo Caiza et al. / Procedia Manufacturing 00 (2019) 000–000 8

[3] Cavalieri, S., Di Stefano, D., Salafia, M.G., Scroppo, M.S., 2017. In-
tegration of OPC UA into a web-based platform to enhance interoper-
ability. IEEE International Symposium on Industrial Electronics , 1206–
1211doi:10.1109/ISIE.2017.8001417.
[4] Chavarrı́a, L.E., 2007. Scada System’s & Telemetry. doi:MM2086SOI9069.
[5] Erossignon, E., 2019. Node-opcua-htmlpanel: small HTML panel
to display a OPCUA monitored variable based on node, express,
socket.io and node-opcua. URL: https://github.com/node-opcua/
node-opcua-htmlpanel.
[6] Erossignon, E., Sriharshav, H., Beck, M., 2019. Creating A OPC
UA Client. URL: https://github.com/node-opcua/node-opcua/
blob/v0.4.5/documentation/creating{_}a{_}client.md.
[7] Garcı́a, M., Armentia, A., Pérez, F., Estévez, E., Marcos,
M., 2018a. Vertical integration approach for the intelli-
gent oil gas field. At-Automatisierungstechnik 66, 859–874.
URL: https://www.scopus.com/inward/record.uri?eid=
2-s2.0-85055494171&doi=10.1515%2fauto-2018-0033&
partnerID=40&md5=cc28e8f0730d66030697120b17774c42,
doi:10.1515/auto-2018-0033. cited By 0.
[8] Garcı́a, M., Irisarri, E., Pérez, F., Estévez, E., Marcos, M., 2018b.
Automation architecture based on cyber physical systems for flexible
manufacturing within oilgas industry [arquitectura de automatización
basada en sistemas ciberfı́sicos para la fabricación flexible en la industria
de petróleo y gas]. RIAI - Revista Iberoamericana de Automatica e
Informatica Industrial 15, 156–166. URL: https://www.scopus.com/
inward/record.uri?eid=2-s2.0-85044035440&partnerID=40&
md5=f0defd68d1257366ae74188f1411c3bd. cited By 1.
[9] Garcı́a, M.V., Irisarri, E., Pérez, F., Estévez, E., Marcos, M., 2016. Opc-
ua communications integration using a cpps architecture, in: 2016 IEEE
Ecuador Technical Chapters Meeting (ETCM), pp. 1–6. doi:10.1109/
ETCM.2016.7750838.
[10] Gorecky, D., Schmitt, M., Loskyll, M., Zühlke, D., 2014. Human-machine-
interaction in the industry 4.0 era. Proceedings - 2014 12th IEEE In-
ternational Conference on Industrial Informatics, INDIN 2014 , 289–
294doi:10.1109/INDIN.2014.6945523.
[11] Gruner, S., Pfrommer, J., Palm, F., 2015. A RESTful extension of OPC
UA, in: 2015 IEEE World Conference on Factory Communication Sys-
tems (WFCS), IEEE. pp. 1–4. URL: http://ieeexplore.ieee.org/
document/7160557/, doi:10.1109/WFCS.2015.7160557.
[12] JQWidgets, 2019. Jqx Gauge. URL: https://www.jqwidgets.com/
jquery-widgets-demo/demos/jqxgauge/index.htm.
[13] Mahnke, W., Leitner, S.H., Damm, M., 2009. OPC unified architecture.
Springer-Verlag.
[14] Node-OPCUA, 2019. Build OPC UA applications in JavaScript and
NodeJS. URL: https://node-opcua.github.io/.
[15] NodeS7, 2019. Node.JS library for communication to Siemens S7 PLCs.
URL: https://github.com/plcpeople/nodeS7.
[16] Palm, F., Grüner, S., Pfrommer, J., Graube, M., Urbas, L., 2015. Open
source as enabler for OPC UA in industrial automation. IEEE International
Conference on Emerging Technologies and Factory Automation, ETFA
2015-Octob. doi:10.1109/ETFA.2015.7301562.
[17] Schleipen, M., Gilani, S.S., Bischoff, T., Pfrommer, J., 2016. OPC UA &
Industrie 4.0 - Enabling Technology with High Diversity and Variability.
Procedia CIRP 57, 315–320. URL: http://dx.doi.org/10.1016/j.
procir.2016.11.055, doi:10.1016/j.procir.2016.11.055.
[18] Villalba, W., Naranjo, J., Garcia, C., Garcia, M., 2019. Override
control based on narx model for ecuador’s oil pipeline system.
Advances in Intelligent Systems and Computing 997, 376–389.
URL: https://www.scopus.com/inward/record.uri?eid=
2-s2.0-85069170300&doi=10.1007%2f978-3-030-22871-2_
26&partnerID=40&md5=33e811cc98a4e36131afda3bac7f1145,
doi:10.1007/978-3-030-22871-2_26. cited By 0.
[19] Zbick, J., 2013. A Web-based approach for designing and deploying flexi-
ble learning tools. Lecture Notes in Computer Science (including subseries
Lecture Notes in Artificial Intelligence and Lecture Notes in Bioinformat-
ics) 8295 LNCS, 320–324. doi:10.1007/978-3-319-04244-2_30.