Installation, IDE, Architecture and First Example (Linear Gauge)

We need to install the software before we start developing SCADA/HMI in the Beckhoff platform. As we have already understood the differences between HMI and SCADA, we shall mention only HMI on this page. Download the following software on your hard disk.

=> .Net 4.7.2 developer pack or equivalent (

=> Visual Studio (2013, 2017 or 2019) community (make sure to include web-related components if visible) or pro version  , see the following image.

=> If you have to reinstall VS then during uninstall case remove the folder (C:\Program Files (x86)\Microsoft Visual Studio\2017),  otherwise it can be messed up sometime, see the following image.

=> TwinCAT 3.1 – eXtended Automation Engineering (XAE), version 3.1.4024.7 (

=> TE2000 | TC3 HMI  , version 1.10.1336.404 (

Beckhoff software has an engineering version and run time version. We shall use the engineering version for developing the application and on the other hand, run time is used for only executing the program. One good example is that when we install Beckhoff TwinCat Software to PLC, we install only the run time version. Even it is not possible to install the engineering version to PLC due to memory constraints. The engineering version offers all the development, debug, etc tools on top of run time.

Download all the software and run those executables as administrator. Good to install visual studio before installing TwinCAT 3.1

Architecture, how HMI works in Windows platform

A Windows sockets (Winsock) is an application programming interface (API) that allows for communication between Windows network software and network services, such as Transmission Control Protocol/Internet Protocol (TCP/IP). Winsock is based on the Berkeley Unix sockets interface. These works on a client-server basis.

Operating systems Windows includes a data link layer named winsock.dll, which helps to make the Windows programs and the TCP/IP services work together. If you are more interested you could take a look at this link to know how these work. Since our job is to develop HMI we don’t need to know these in detail. Beckhoff has done it for us.

Winsock enables programmers to create advanced Internet, intranet, and other network-capable applications to transmit application data across the wire, independent of the network protocol being used. With Winsock, programmers are provided access to advanced Windows networking capabilities such as multicast and Quality of Service (QoS).

Winsock follows the Windows Open System Architecture (WOSA) model. As we see from the above picture the TwinCAT HMI server can access ADS, OPC UA,  BACnet, and also our custom protocol. This can be achieved by the extension module of the HMI server. You could take a look at our tutorial.

Single HMI can be used for multiple PLCs

First Example (Linear guage)
A YouTube video is available at the end of the page.

We assume that the necessary softwares are installed. We shall build a project and test and publish it to a remote HMI server.

This is a simple example we read data from a pressure sensor and display it on a gauge. We don’t have a real pressure sensor here but we shall simulate a pressure sensor by using a PLC program. The PLC program  change the value from 0.000 to 100.00 and then come back to 0.000. It just repeats the value and HMI display it. Data accusation can be start by pressing on the Start button and can be stopped by pressing the Stop button. The button’s text is changed based on the context.

There is another button Set Value, if we press on this button it will read the value from text box and set this value as pressure value to the PLC. If we are reading the value at the same time, we can’t see the effect, so better we stop the PLC by pressing stop button and then set the value.

STEP 1: Start Visual Studio and open a new TwinCAT HMI project.

STEP 2: Select Tool Box (if not visible select View | Tool Box)

STEP 3: Drag and drop Linear gauge on the desktop view, make one of those vertical (properties | appearance | orientation)

STEP 4: Drag and drop couple of button and a textbox (not textblock) and rename those as shown in the following image.

The linear gauge example final one is shown below. If we press on the Start button then it will start reading the pressure sensor and display on the left side linear gauge. The Start button will be changed to Stop/Start. If the PLC is already running then it will show the status of the variable and set the text as needed.

PLC Source code behind the HMI

Since we don’t have an actual pressure sensor, we are using a small piece of structured text code for generating pressure sensor value. That pressure value is shown on the linear gauge. When the startTimer variable is TRUE then the timer will start and generates data (pressure value), the pressure value is shown on the Beckhoff HMI.

//Declaration, header of the program
PROGRAM MAIN VAR pressureValue : REAL := 0.0; myTimer : TON; startTimer : BOOL := FALSE; directionPlus : BOOL := FALSE; END_VAR
//Body of the program myTimer(IN:= startTimer, PT:= T#50MS); IF myTimer.Q = TRUE THEN myTimer(IN:= FALSE); IF pressureValue >= 100.0 THEN pressureValue := 100.0; directionPlus := FALSE; END_IF IF pressureValue <= 0 THEN pressureValue := 0.0; directionPlus := TRUE; END_IF IF directionPlus = TRUE THEN pressureValue := pressureValue + 1.123; ELSE pressureValue := pressureValue - 1.321; END_IF END_IF


If you don’t know how to run the PLC program in a windows environment, please take a look at this page


HMI and the simulator PLC code relation

We shall explain how PLC variables are linked to the HMI. On the left side, we have HMI and on the right side, we have the PLC program. the pressure value is display on the HMI in two places (Linear gauge and the textBox). When we press on the Start button the startTimer Boolean variable is set to true and the program starts to generate pressure value, and the value started to be changed on the UI. On the other hand, if we press on the Set Value then the program will read the value from the text box and ser this value to the pressureValue variable.

Above picture shows pressureValue is linked to Lineargauge and StartTimer is linked to Start button.

How to build the HMI

Few  steps are needed before reading the data from PLC (we assume that Button and Linear gauge are placed on the UI)

We need to bring those PLC variables available to the UI project. These are done for us by the framework, we just use those. More will be discussed in the next tutorial (Symbol Data).

First, we need to configure the  HMI Server

STEP 1: Select from the Menu  TWINCAT HMI | Windows | TwinCAT HMI Server configuration

STEP 2: Click on ADS | Runtimes | PLC1 and make the necessary changes as shown in the following figure. If we want to read from actual PLC, we shall use actual AmsNetId. The PLC should be in the same network (for more see our network tutorial). Finally press on the Accept button.

Now we shall have a connection to our PLC but we need to tell the framework  which variables we want to manipulate  or want to listen. This process is called  symbol mapping

STEP 3: Now go back to  HMI Configuration Select from the Menu  TWINCAT HMI | Windows | TwinCAT HMI  configuration 

STEP 4: Select Server Symbols | All Symbols | then expand the ADS | PLC1 | MAIN | Map Symbol

STEP 5: Select pressureValue and startTimer variables and map them, these will be added to Mapped Symbols


Now let’s configure the button

STEP 6: Go to button events and pressed on  the edit icon,  drag  and drop  General | Condition to the right pane. Drag and drop WriteToSymbol to the THEN box and to ELSE box

STEP 7:  Select small square and Create data binding

STEP 8: Insert the Text field (selected control | Start | Common | Text)  and the value to STOP, this will indicate if the startTimer is TRUE then the button text will be Stop (more in the localizations tutorial)

Final STEPS:  Do the same for  .onPressed for the button  and for value for the linearGauge case as shown in the next few images. If you press on the Live view or debug with google chrome we see that value changes when we press the start button and stop when we press the stop button. HMI will get data from the PLC program, so you need to run the PLC program.



Following figure shows how to configure the text of the button when the button is created by the framework. This is good place to check or set the text of a button or similar control.


Following figure shows how to configure onPressed event for button. Write To Symbol statements are used 2 times in if branches.


Value property of the lineargauge has been configured  to the pressureValue variable in PLC

Now we shall show how JavaScript has been used in this example, The following expression is available in the value part. It takes the string from textBox and parses it to Float and writes to the variable PLC1.MAIN.pressureValue. parseFloat() is a standard JavaScript function provided by TwinCAT framework. For more please see our JavaScript tutorial at


In the following image, we can see how the edit box’s text properties has been manipulated. It takes the pressureValue from PLC and makes a 3 decimal text and displays on the UI.


Download the complete source code  and  run it in Visual Studio.

Watch the Video