Design of an HMI in web server of PLC’s s7 12001500 for the control of a multivariable process of a didactic module

Design of an HMI in Web Server
of PLC’s S7-1200/1500 for the Control
of a Multivariable Process
of a Didactic Module
Sánchez Ocaña Wilson1(&), Almache Barahona Verónica1(&),
Salazar Jácome Elizabeth2(&), Freire Llerena Washington1(&),
and Silva Monteros Marcelo1(&)
1

Departamento de Eléctrica y Electrónica, Universidad de las Fuerzas
Armadas ESPE, ID: 60104598, Latacunga, Ecuador
{wesanchez,wrfreire,cmsilva}@espe.edu.ec,

2
Departamento de Ciencias Exactas, Universidad de las Fuerzas
Armadas ESPE, ID: 60104598, Latacunga, Ecuador


Abstract. The present project consists of the design of a web page for the
monitoring and control of a Profinet network of a multivariate process and the
proportional hydraulic control of position of a didactic module controlled by a
S7-1200 PLC and the second didactic module controlled with a PLC S7-1500,
these programmable PLCs were used as a WEB server and to store the different
web pages created by the user, allows to use any HTML text editor for processing. In this case we used an AWP language and JavaScript that is a language
similar to the C language that allows to change images, make animations, etc. In
addition, this control alternative minimizes the costs in its elaboration when
using computer tools with free software, allows better control and supervision of
each of the industrial process stations with efficient and secure WEB server.
Keywords: Web server
HMI

Á HTML language Á Industrial processes

1 Introduction
The Web Server is a technological tool that is incorporated into the PLC’s and creates a
connection with the WEB, in this way it seeks to improve the supervision and control of
the processes in execution [1]. This Web technology helps in automation, providing
safer supervision with greater reliability, through a dynamic and interactive HMI design
for students [2], having two modules with different PLC’s identifies the shortcomings
that exist in these controllers for HMI design in the case of S7 1200 there is a limited
memory space for which a simple WEB design is made but maintaining the necessary
dynamics of the process and control of variables [3], The S7 1500 has a larger memory
space, allowing for better WEB design and a more dynamic and interactive HMI [4].
© Springer International Publishing AG, part of Springer Nature 2018
Á. Rocha et al. (Eds.): WorldCIST'18 2018, AISC 746, pp. 248–256, 2018.
/>

Design of an HMI in Web Server of PLC’s S7-1200/1500

249

In order to access this tool, we must follow a series of sequential steps to activate it
[5], once the communication of the CPU with the WEB has been established by means
of the WWW instruction implemented within the programming of each process [6],
with these modifications and the IP address of the CPU has been established, the
SIMATIC S7 is already accessed in the browser.
This HMI design makes use of free software tools for the generation of code in
HTML, Javascript, and AWP language that is characteristic of Siemens, this last one is
which allows us to establish communication with the process variables of each module,
these lines of code will be visualized in the browser.
Siemens’ web server is not a substitute for its WINCC [7] SCADA software, but if

it has several limitations, taking as an example a simple SCADA software system, it
takes a few steps, while using the web server would involve adding a large amount of
code [8], and this must be downloaded to the PLC which is limited by the internal
memory, although it is possible to expand that memory, when executing numerous
tasks it would damage performance.

2 General Description
These programmable logic controllers offer a tool that takes advantage of the benefits
of the Internet, such as the Web Server application, by using this application it is
possible to access the SIMATIC S7 [9] online portal from anywhere where the user can
control and monitor the long-distance processes of the didactic module
WEB Server in PLC’s S7
The web server allows the PLC data to be presented as HTML (or XML) pages [10],
giving access through the standard internet browser.
Modern automation techniques [11], integrates this technology with the Internet that
allows direct access to the installation via Intranet/Internet using transparent Ethernetbased communication. During the test and commissioning phase, the aim is to flexibly
access the PLC’s CPU and display individual data during browser operation; the most
logical approach is to use existing standards for intranet or Internet access, such as
HTTP technology [12], standard web browsers or widely used “languages” such as
JavaScript [13].
Translated with www.DeepL.com/Translator
SIMATIC S7
The Simatic S7 wide range of technical features, including the following:
•
•
•
•

High processing capacity. 64-bit calculation.
Integrated Ethernet/PROFINET interface [14].

Integrated analogue inputs [15].
Function blocks for axis control according to PLC open [15]. Programming using
the STEP 7 Basic v13 [16] software tool for configuring and programming not only
the S7-1200, but also the Simatic Basic Panels [15] in an integrated way.


250

S. O. Wilson et al.

3 Case Study
The PLC S7 1200/1500 PLCs are suitable for reading and writing variables via the
Internet, through web pages created by the user is possible to access and establish
control of process variables, which are programmed through computer tools with free
software, the use of this technological tool Web Server allows us to identify the status
of PLC variables, through a predefined address or variable designation, which are
stored within the PLC memory, for monitoring and control of physical signals coming
from level, flow, pressure, position and actuators such as variable speed drives and
proportional hydraulic valves.
WEB Server Enabling
To carry out this type of operation, TIA PORTAL V13 software is necessary. This
software allows to maintain and establish communication and programming of these
equipment that are integrated to the SIEMENS mark, in the tree of the PLC project
selected in its properties, we enable the WEB server as shown in Fig. 1.

Fig. 1. Activating WEB server in PLC S7 1200.

Creation of User-Defined WEB Pages
Once the PLC web server S7 1200/1500 has been activated, it is possible to design web
pages using an HTML editor, commands in AWP language [17] which must be loaded

into the PLC, this web page will serve to interact between the user and the PLC. This
process includes several tasks that are detailed below and a diagram is shown in Fig. 2:
1. Configuration in the WEB server of the S7 1200/1500 PLCs to read and process
HTML pages.
2. Include the WWW command within the programming.
3. Enter AWP tags in HTML code, these AWP commands are a fixed set of programming lines.
4. Block generation from HTML web page.
5. Compile and load the blocks into the PLC.
6. Access the user-defined web page from a PC or mobile device.


Design of an HMI in Web Server of PLC’s S7-1200/1500

251

Fig. 2. User-defined web page structure

Deploying Libraries in JavaScript
There is the possibility of adding dynamic graphic elements [18], in which it is possible
to visualize the values of the variables in execution by means of color indicators or
animations with measurement scales as programmed, for which it is necessary to write
lines of HTML code indicated and add these libraries of each element within the main
folder, but the more code you enter, the more blocks of data will be necessary and these
are limited to the PLC memory. JavaScript libraries are required to dynamize and
display the variables in real time according to the way the process is executed [13].
Meters and displays are designed within HTML code through color matching pixel
control and implementation of a measurement scale [10].
Access to SIMATIC S7
To access the SIM
ATIC S7, proceed as follows:

• Check that the PLC S7 and PC are within a common Ethernet network or are
directly interconnected with a standard Ethernet cable.
• Open web browser and enter the IP address of the configured S7 CPU.


252

S. O. Wilson et al.

4 Results
Once the design and implementation has been completed, the WEB pages created by
the user, the WEB server enablement, the Wireless [19] network configuration and
adaptation to mobile devices, are started with the testing of on and off and reading of
the variables in the browser and verify the operation of the processes by designing the
HMI of each project.
Control of the PLC Module Elements S7 1200
Previously loaded programming in the process controlled by the Profinet network [20]
established, the communication test of sending data to the digital outputs on and off for
the control of the hydraulic pump is displayed, the data transmission is done by means
of the WEB page as show in Figs. 3 and 4 shows the PID control [21] of level with a
set point of value 5, in the curve, the green line shows the value of the set point and the
blue line shows the process variable.

Fig. 3. Control on/off hydraulic pump.

Fig. 4. PID Level Control.


Design of an HMI in Web Server of PLC’s S7-1200/1500

253

Reading of Level and Flow Sensor Variables
The data supplied by the sensors, the level (0–10) L and the flow rate of (150–400) L/h, are
displayed. Figure 5 shows an example of the reading of the two variables; the WEB page
shows a reading of 3.802 L and 406.4811 L/h of the didactic module, in real time (Fig. 6).

Fig. 5. Flow and level measurement in the web server and industrial process.

Fig. 6. Level measurement.

Control of the PLC Module Elements S7 1500
Data is sent to the digital outputs for switching on and off to establish control of the
Festo hydraulic drive system [22], which is controlled via the WEB page. This page is
also designed with links to each of the proportional position and pressure control
processes as shown in Fig. 8, the set point value is entered and both the cylinder and
the hydraulic motor reach the desired values, the animation of variables is shown in
Fig. 7, Fig 8 shows the pressure control where we activate and deactivate the hydraulic
pump and the meter shows the reading of the pressure variable in real time.


254

S. O. Wilson et al.

Fig. 7. Hydraulic drive system on/off control.

Fig. 8. Proportional control of position and pressure.

5 Conclusions

• The web page was designed using HTML programming, taking into consideration
the standards, details and requirements required by the industrial process.
• The website was designed to control and monitor the different PLC variables
wirelessly from a Smartphone or Tablet, as long as they have Internet access.
• The SERVER WEB option of each Siemens PLC was enabled to be used as servers
and it is possible to access the user wirelessly by specifying the IP address corresponding to each didactic module to be controlled.
• The PLC was programmed using the AWP language where the communication was
established.
• The control and monitoring of the variables of each didactic module was carried out
through the web page designed in such a way that it is user-friendly and taking into
account the corresponding security. The website allows to visualize the inputs and
outputs variables in real time and intuitively select the individual operation of each
process.


Design of an HMI in Web Server of PLC’s S7-1200/1500

255

6 Limitations of Research and Future Work
• Before starting a WEB project it is essential to have a basic knowledge in the
management of software for HTML code and JavaScript, these are the computer
tools to give dynamics and control of style to the WEB page.
• In addition, the limitation represented by the s7 CPU memory according to its
capacity must be taken into consideration.
• Developing this type of projects in the future opens the possibility of creating more
sophisticated WEB applications in industrial plants with greater complexity in
which information from various types of processes is handled, thus creating remote
control solutions in industry or any other area, presenting an economic saving and
real time control and monitoring without the need to be present the operator.

References
1. Lisa Ollinger, A.A.: SOA-PLC-dynamic generation and deployment of web services on a
programmable logic controller. IFAC Proc. 47(3), 2622–2627 (2014)
2. Bayrak, G.: An automation platform designs for electrical and electronics students: an
application study. Procedia 47(3), 950–955 (2012)
3. Lakshmi Sangeetha, B.N.A.: Experimental validation of PID based cascade control system
through SCADA–PLC–OPC and internet architectures. Measurement 45(4), 643–649 (2012)
4. Mathias Oppelt, G.W.: Automatic model generation for virtual commissioning based on
plant engineering data. IFAC 47, 24–29 (2014)
5. SIEMENS: Potencia+eficiencia: SIMATIC S7-1500 plus TIA Portal, S7-1500 (2015). http://
w5.siemens.com/spain/web/es/industry/automatizacion/simatic/controladores_modulares/
controlador_avanzado/s71500/pages/default.aspx. Último acceso 30 Oct 2017
6. AIISAS: Automatizacion Industrial inteligente, AII (2016). />Último acceso 29 Oct 2017
7. SIEMENS: Simatic SCADA, Siemens España (2015). />industry/automatizacion/hmi/pages/scada.aspx. Último acceso 30 Oct 2017
8. Martinez, T.: Uso del Servidor Web Integrado en el PLC S7-1200 para Supervisión y
Control Básico, Electronica y Manufactura, 22 Sept 2016. https://electronicaymanufactura.
blogspot.com/2016/09/uso-del-servidor-web-integrado-en-el.html. Último acceso 28 Oct
2017
9. G. S. Energia: SIMATIC, Ando (2014). />html. Último acceso 25 Oct 2017
10. Alarcón, J.: Los 10 mejores editores gratuitos (o casi) de HTML, CSS y JavaScript,
campusMVP, 28 May 2014. Último acceso 25 Oct 2017
11. Jimenez, E.: Dialnet (2002). Último acceso
15 Sept 2017
12. Melgoza, J.: Como Funciona el Protocolo HTTP – Manual, 01 Sept 2013. https://
jonathanmelgoza.com/blog/como-funciona-el-protocolo-http-manual/. Último acceso 28
Sept 2017
13. Javascript: Las mejores librerias Javascript, github, 06 Apr 2017. />mejores-librerias-javascript-2017. Último acceso 15 Sept 2017

256

S. O. Wilson et al.

14. Siemens AG: PROFINET, SIEMENS (2017). />industrial-communications/profinet/pages/default.aspx. Último acceso 29 Oct 2017
15. Siemens.com: SIMATIC S7-1200, Siemens (2017). />industry/automatizacion/simatic/controladores_modulares/controlador_basico_s71200/pages/
s7-1200.aspx. Último acceso 15 Oct 2017
16. Industry Support Siemens: SIMATIC STEP 7 Basic, TIA Portal, 11 May 2015. https://
support.industry.siemens.com/cs/…/STEP_7_Basic_V13_1_esES_es-ES.pdf. Último acceso
25 Sept 2017
17. Industry Support Siemens: Servidor WEB, Comandos AWP, December 2014. https://cache.
industry.siemens.com/dl/files/560/59193560/att_109205/v1/s71500_webserver_function_
manual_es-ES_es-ES.pdf. Último acceso 15 Sept 2017
18. Nieto, A.: jQuery Visualize, gráficas con canvas y Javascript, anieto2k (2017). http://www.
anieto2k.com/2009/07/07/jquery-visualize-graficas-con-canvas-y-javascript/. Último acceso
30 June 2017
19. tp-link: Configurar router TP-Link, tp-link (2017). />Último acceso 29 Oct 2017
20. Pablo Muñoz, C.P.: Repositorio Institucional de la Universidad de las Fuerzas
Armadas ESPE, 19 August 2016. />Último acceso 25 Oct 2017
21. Wikispaces: CONTROL PID, METODOLOGÍA Y APLICACIONES (2014). . Último acceso 30 Oct 2017
22. Edwin Huilcamaigua, L.V.: Repositorio Institucional de la Universidad de las Fuerzas
Armadas ESPE, 12 July 2016. Último
acceso 29 Oct 2017