UNIT: INDUSTRIAL IT (Informatique Industrielle) DURATION: 6 HOURS

SPECIALTY: MAINTENANCE ENGINEERING / 3 Semester rd

TUTORIAL N°3
S7-1500 Webserver

I. OBJECTIVE
At the end of this tutorial, the student will be able to perform basic webserver configurations
on S7-1500 and S7-1200.

II. EQUIPMENT
The following table shows the minimum software and hardware requirements that have to be
met for the installation:
Hardware/software Requirement

Processor Intel® Core™ i3-6100U, 2.30 GHz

RAM 8 GB

Hard disk S-ATA with at least 20 GB available space

Network From 100 Mbit

Screen resolution 1024 x 768

Operating systems
Windows 10 (64-bit)
Windows 11 (64-bit)
Windows Server (64-bit)

Hardware components

Component No. Order no. Note

CPU 1511-1 PN 1 6ES7511-1AK01-0AB0 Firmware V2.0.5
PG/PC 1 - -
with Ethernet interface
IE FC TP 1 6XV1840-2AH10 IE connecting cable,
STANDARD CABLE minimum order
quantity: 20m
RJ45 plug connector 2 6GK1901-1BB10-2AA0 Can be moulded

Software components

Component N Order no. Note

o.
SIMATIC STEP 7 1 6ES7822-1AA04-0YE5 V14.0 (Update 2)
Professional V15 or higher

1
 Software tool for creating 1 - Web pages created
HTML files such as with Notepad++
FrontPage, Notepad++, …
Web browser such as 1 - Created and tested
Internet Explorer, Mozilla with IE11 and Firefox
Firefox

III. OPERATIONS
1. Introduction
1.1. SIMATIC Web Server
The SIMATIC Web Server is a feature provided by Siemens for their SIMATIC S7-1200 and
S7-1500 programmable logic controllers (PLCs). It allows users to remotely access and
interact with their PLCs and automation systems through a web browser.
With the SIMATIC Web Server, you can perform various tasks such as:
Data logging: Recording and monitoring data from the PLC.
Modifying tags: Changing the values of different tags within the PLC.
Changing the operating state: Switching the PLC between different operating modes.

This feature is particularly useful for :

Integrated web server in the S7-1200 and S7-1500

The standard web pages for easy display of service and diagnostic information are enabled
with a single click.
In addition, you can create custom, user-defined web pages that are referred to
below as “user-defined pages”.
Access from anywhere
A web browser allows you to access the S7 web pages from anywhere in the world.
Application example
Universal use of the application example for the SIMATIC S7-1200 and S7-1500.
Benefits
No additional hardware and software required. The web server can be accessed
over large distances using mobile communications devices such as tablet
computers, smartphones, etc.

The application examples in conjunction with the web server

Note should not and cannot replace an HMI system.

2
 2. Creating HTML code
2.1. Creating index.html
We will use Microsoft Visual Studio Code to create our HTML code:
1. First, we create a folder for our code
2. We create a new file and name it index.html

3. Insert an exclamation mark: (!) and hit enter, lines of generic code show up

Here, we can change the webpage title, and insert tags in the body

4. We can insert a division <div> … </div> in the body, which contains a text, for
instance: Hello world.

5. To visualize data, we must put the variable (tag) we must put:

<div>:="Data Block name".tag name:</div>

3
2.2. Creating Styles
6. Basics on Cascading Style Sheets (CCS) is a formatting language for HTML elements.
With the help of style sheets, for example, font, font size, colors, border, height, width
etc. are specified for HTML elements.

To do the styling, we insert a new folder (CSS) and a new file style.css

7. We can make mystyle configuration as follow

4
8. We then insert this style in the tags:

9. Then we call the style link on index.html code as follow:

2.3. Refreshing Data

10. To refresh the webpage, we insert the following code in the head section

11. To refresh only tags, we should utilise the Jquery from JavaScript (open
https://code.jquery.com/jquery-3.7.1.min.js) then save this webpage in the HTML code
directory.
12. Under the body we insert a Jscript, first we start by calling our jquery library:

5
13. We, then, add a new data storing page directory (DATA) and a new file (data.html)

14. We insert a new class cl1 containing our variable in the body of the code as follow

15. In the index.html we insert a new class cl2

6
 16. We insert a new directory and a new file: JS/script.js

17. We will use two js instructions setInterval and function

Here every 200 ms the data from cl1 (data.html) will be loaded on cl2 (index.html)

18. We call JS script on index.html

7
2.4. Writing inputs on webpages
19. To write inputs on our webpage, first we put a comment at the very beginning of the
code containing the input variable name

20. Then, we specify the variable on the body by putting the style, the type and the name
of the variable.

21. To have the input variable shown on the webpage, we must add value command

22. To write a Boolean input on our webpage, first we put a comment at the very beginning
of the code containing the input variable name

<!-- AWP_In_Variable Name='"Block_1_DB".M_bool' -->

23. To make a button with Boolean 1 we write two input commands:

<form id="mystyle">
<input type="submit" value="ON"/>
<input type="hidden" name='"Block_1_DB".M_bool' value="1"/>
</form>

8
 24. To make a button with Boolean 0 we write two input commands:

<form id="mystyle7">
<input type="submit" value="OFF"/>
<input type="hidden" name='"Block_1_DB".M_bool' value="0"/>
</form>
25. We can put the style id directly on the input to have more style settings

<form >
<input id="mystyle" type="submit" value="ON"/>
<input type="hidden" name='"Block_1_DB".M_bool' value="1"/>
</form>

2.5. Boolean data visualisation

26. We start by creating a new Boolean tag (LED)

27. We insert this tag on data.html in a new class (cl3)

<div class="cl3">:="data".LED: </div>

28. Then, in the script we insert a setInterval command as follow

setInterval(function(){$('.LED_cl').load("data.html .cl3")},200);
29. We insert then the class LED_cl on the index.html with StyleLed id

<div class="LED_cl" id="StyleLED"></div>

30. To show up the green light we put img command as follow

<img src="Images/Green_Light_Icon.svg.png" id="MyImg" width="100"

height="100">

31. Then we call data.html in index.html

<div class="cl2" id="mystyle6"></div>

<div class="LED_cl" id="StyleLED"></div>
<iframe src="data.html" id="Mydata"></iframe>
32. To hide non useful information we can add style display none

<iframe src="data.html" id="Mydata" style="display: none;"></iframe>

33. We put an Id to cl3 for the next script in data.html

<div id="MyId" class="cl3">:="data".LED: </div>

34. In the script side we write an if condition for LED colouring

function light(sw){
var LED
if (sw==0) {
LED="Images/63_pl-red-srx-3d.ac91e0a0ce.png"
}
else {LED="Images/62_pl-green-srx-3d.c22fd582ae.png"
}

9
document.getElementById("MyImg").src = LED;
}

35. Finally, we should call our PLC tag every 200 ms (setInterval) from data.html /
Mydata/MyId, then we apply the if condition on it by applying the light function

setInterval(function(){
document.getElementById("Mydata").src="data.html"
var Value =
document.getElementById("Mydata").contentWindow.document.getElementById("My
Id").innerHTML;
light(Value);
},200);

3. Using View of Things VoT

To configure a VoT application for displaying the PLC data, follow these steps:

• Configuring user management:

• For PLCs with CPUs firmware version ≤ V3.0, static user management applies.
• For PLCs with CPUs firmware version ≥ V3.1, local user management applies.
• Create a VoT application.

10
 • Configure screens and screen objects.
• Configure dynamization.
• Compile the VoT application.
• Load the VoT application onto the PLC.
• Open the VoT application in the web control.

Connect to the PLC webserver, and choose user defined webpage

11
Then click on the link to the VoT application, you will be redirected to the WinCC Unified View-
of-Things

After logging into the VOT webpage, the user will be able to visualize and manipulate data.

12
REFERENCES
1. OPC ua.net client for S7-1500 master
2. OPC UA .NET Client for the SIMATIC S7-1500 OPC UA Server
3. https://www.youtube.com/@AutomationSet
TIA Portal web Server

13