TwinCAT HMI - HEMELIX

Each topic or feature is described separately with hands-on examples, If a sample has an issue please take a look at https://www.hemelix.com/scada-hmi/twincat-hmi/nuget-package-management/

TwinCAT HMI is the most modern toolset provided by Beckhoff. The most important thing is that we don’t need to care about the nitty-gritty of thread, TCP/IP, HTPP/S, etc. But we need to focus on our actual task and some level of JavaScript. One of the beauties of TwinCAT HMI is that you can expand it based on your imagination. You can develop a full-featured SCADA system and display/manipulate data from other types of PLC (for example Siemens, Allen-Bradly, etc over the supported protocol such as OPC UA).

If you want to learn TwinCAT HMI, this site gives you all the knowledge you need, Let’s start.

Make ready the necessary SW

Installation, IDE and Architecture

The HTML5-based HMI provided by Beckhoff is the most intuitive solution in the market today. TwinCAT now integrates the Human Machine Interface directly into the familiar environment of Microsoft Visual Studio®. Programming is unnecessary as the configuration is handled with ease using the TwinCAT HMI graphical editor. Follow these steps to install and set up the environment.

Create Hello TwinCAT HMI

Create your first TwinCAT HMI

There is no limit to how good you can make your HMI, it depends on your imagination, creativity, and talent. We need to start somewhere. If you have installed the environment you can make your first HMI with a few clicks. Follow these steps to build your first TwinCAT HMI.

TwinCAT HMI and PLC Program

One of the major usages of HMI is commanding PLC to control field devices and display those data from field devices to UI so the operator can see the data. So we must have a way to establish the link. We shall do that sample in this section with a simple PLC program. Follow these steps to make a sample and display data from PLC to HMI.

How to build HMI using linear gauge

How to build Linear Gauge example with PLC code

We shall learn all the techniques from the TwinCAT HMI SDK step by step. It is a good idea to develop some simple HMI applications to motivate ourselves. Follow these steps to build an HMI that can display data from PLC ( linear gauge example.)

Learn Relation between Symbol and HMI

TwinCAT HMI Symbol Data and Binding

In TwinCAT a variable is called a symbol. This symbol can be mapped or linked to the PLC variable. Some symbols can be local to the HMI server. That means it is not read from PLC. This page will describe how do we make the link between HMI and the PLC. This also explains the event system. So click here to continue.

How to use reusable user control in TwinCAT HMI framework

TwinCAT HMI User Control

There are many concepts in TwinCAT HMI. User control is a reusable block that can be created and used with different parameters. We shall show how to use different concepts for building HMI that can use reusable HMI components. All these are described with tips and tricks. Please follow this link.

Compound (Container) User Control

User Control consist of few other user control

A typical automation software model is built by reusing an existing model or some basic elements. For example, we can build a user control for a proximity sensor, pressure sensor, etc. Now if we build a pump’s user control, we can reuse the proximity sensor user control, pressure sensor user control plus other Beckhoff other basic user control. This article explains how we can manage with a complete working sample, continue reading.

How to display different devices status in different view in TwinCAT HMI

TwinCAT HMI View

One of the major ideas for HMI is to display device data online and collect users commands from the users and execute those. Logically we can show different devices statuses in different views if needed to avoid complexity and improve the look and feel. All these are described with tips and tricks. Please follow this link.

How to split desktop for displaying different content in different region

TwinCAT HMI Region and Content

There is various concept in TwinCAT HMI. We can split the desktop into different areas and we can display different content in different areas. All these are described with tips and tricks. Please follow this link.

Details about CheckBox, ComboBox

TwinCAT HMI CheckBox, ComboBox

Typically we use ComboBox for selecting from a list of items. A checkBox is used to indicate if some variables are true or false in the HMI. Some tips and tricks are described here. It may be easy if you know but if you don’t know then it can take lots of time to find. Please follow this link.

Details about Data Grid view

TwinCAT HMI Data Grid View

Tabular presentation of data in TwinCAT HMI is done by Grid View. This tutorial will describe how to display different types of data in the view. This also describes how to manipulate data by JavaScript into different formats. Please follow this link.

TwinCAT HMI Data Savings

TwinCAT HMI Data Savings, TwinCAT HMI can be configured in different ways. Here on this page, we explain the HMI configuration in a generic way and especially we describe how to store data in the HMI area, same data will be saved by the TwinCAT extension in the SQLite area. For small data, it looks like it makes sense to store internal/server variables. In other cases, we can use MS SQL or SQLite database. So click here to continue.

TwinCAT HMI Object Savings

This article is similar to the above article TwinCAT HMI Data Savings. In the previous article, we compare saving data with internal symbols and server symbols. We compared the time taken to load from PLC, internal symbol, and server symbol. Here in this article, we shall compare saving data to an object, saving it to a server symbol, and reading back and forth. So click here to continue.

Display Historical Data to HMI

Historize Data

A Data Historian is a type of time-series database designed to efficiently collect and store process data from an automation system. Continue reading more about the historicization of data for automation systems with sample applications…

How to Change HMI Language

Localization

Software localization helps in creating a more user-friendly user experience for a diverse range of customers. When more people start using your platform, then more people will be interested in your software. Learn how you can localize your SCADA/HMI software for the TwinCAT platform, Continue reading with a complete working sample.

Controlling Access for Users

User Management

The management of users on any software system is critical to the security of the system and the organization. Proper procedures should be in place within the organization to identify the proper permissions each new user should receive. Each person or user may not have equal rights, for example, an expert-level user who knows how the system works as compared to an entry-level worker does not know. So there might be potential risks of misusing the system. This section just describes different features with samples for the TwinCAT environment.

Show Alarms and Events to HMI

Alarms and Events

Alarms and Events provide a way to inform users about interesting issues about the plant. The issue or the notification could be critical information or something like a nice-to-know type. Continue for more…

Control Process based on Recipes

Recipes

Recipe types and recipes. A recipe type is a general description of a set of symbols, based on these we can create a different type of recipe. These are comparable to class (recipe type) in object-oriented programming from where we can make instances of a class (recipes) with different attributes. Learn more with examples.

Reading data from OPC UA Server and display on the HMI

Establish link between HMI and OPC Server

TwinCAT HMI can read data from the PLC, it can read from the custom library (extension) or from the OPC UA Server. The data from the OPC UA server can be treated in the same way as we do for ADS. HMI does not make any difference between where the data is coming from. Continue reading with this link.

JavaScript (basic to advance)

JavaScript (basic to advance) for TwinCAT HMI

JavaScript is the core pillar of TwinCAT HMI. If you are a PLC developer you may not have complete knowledge about JavaScript. Here we explain step by step what is JavaScript and what is needed for HMI. We need to read different data from PLC or from the server. These data are read asynchronously. Reading data asynchronously is always difficult to handle. In this tutorial, we shall take a deep look inside JavaScript and how to make asynchronous functions synchronously, and much more basic stuff. Get more on this.

TwinCAT HMI & JavaScript Function

JavaScript, function and Code Behind

JavaScript is the programming language of HTML and the Web. JavaScript is easy to learn. TwinCAT HMI has a framework that uses JavaScript. In this tutorial, we go through these, follow this.

TwinCAT HMI Popup

When we create a Popup, our target is to pass data from the PLC to the Popup and give the user an option to modify some variables in the Popup, and that data should be changed in the PLC. This article describes how these can be achieved with a few real examples with source code. Continue reading the article.

TwinCAT HMI Symbol Subscription

Variables mapping and subscription using JavaScript

You have lots of devices in the fields managed by PLC. You need to link all variables from HMI to individual field devices. You will do it one by one? We shall explain what can be done for this, continue reading and download the sample for testing.

We need to change setting in the PLC, in the HMI or in the SCADA server for different configuration

How to Change Device Setting in HMI

We often need to adjust settings for different devices in the PLC. If we want to set the motor startup time and motor shutdown time (as an example). We need a way to show the settings to a user so the user can edit them or read them. This article is just for this. Continue reading with full sample code.

Display the device name for a short time in HMI

When we have many devices drawn on our HMI, it can be unclear which one is what device. One of the solutions may be useful if we can display the name of the device when the mouse is over the device. But how can we achieve it? Continue reading this article if you need this feature.

Display Google Maps on TwinCAT HMI

We can manipulate HTML elements dynamically by JavaScript. We can add a DIV element, remove the DIV element, we can modify the CSS (style of the page). In this article, we shall explain how we can display Google Map on the top of TwinCAT HMI. Continue reading.

TwinCAT HMI EcDiagnosticsControl

EcDiagnosticsControl is an extension that can be used to diagnose hardware. This will help to troubleshoot the system from the HMI. We shall show with actual simple HMI program with different intentionally created faults. Continue reading the article.

Display Tree like nodes to TwinCAT HMI

Displaying Tree like nodes in TwinCAT HMI

We need to display tree-like data in the HMI. How can we achieve this? We shall describe this in this section. The HTML Host control displays an HTML page from a given URL or a local file. The associated HTML page can be static or dynamic by using JavaScript (embedded or external). Continue reading with hands-on examples.

Extend Functionalities without JavaScript

How to develop TwinCAT HMI Extension

Java script is used heavily in TwinCAT HMI development. What will happen if something can’t be implemented by javascript or if we want to isolate our business logic in remote servers and there it is not possible to implement by javascript. TwinCAT HMI provides a way to implement the functionalities and use it as it has been a built-in type. This page will describe how to build an extension module for the TwinCAT HMI.

Display MS SQL Data to TwinCAT HMI

How to show MS SQL Data to TwinCAT HMI

TwinCAT HMI offers the possibility to display tabular data to the user interface. This article shows how to read the data from the SQL server and display it to the interfaces. Continue reading the pages.

Display SQLite Data to TwinCAT HMI

How to show SQLite Data to TwinCAT HMI

If we want to show or manage small data for our HMI, should we use a file or some light database? TwinCAT HMI offers the possibility to display tabular data to the user’s interface. This article shows how to read the data from the SQLite server and display it to the interfaces. Continue reading the pages.

JavaScript and SQLite Data to TwinCAT HMI

How to manage SQLite by JavaScript in TwinCAT

We shall develop (coming soon) a sample.

Present Two Ways for Receiving Data

Getting data from PLC, JS framework VS extension

We can read or write to PLC variables in different ways, in this article we shall explain how can write data to PLC by JavaScript framework. We can do the same by using a direct ADS connection over the network by using the ADS library. The sample application reads data from the PLC by using 2 ways simultaneously and displays it to the UI. Continue reading.

Talking to PLC by C# Program

How to develop Communication module between PLC and PC

We can connect a PLC from a laptop by using ADS communication. This interface can be used by different programming languages. In this chapter, we shall use C# (see our C# tutorial). Continue with this link.

How to Publish HMI to Server

How to publish to HMI Server

When we are satisfied with our development then we need to publish the SCADA /HMI to a remote server so our operator can access it and use it. We need to install HMI Server (not HMI Engineering to the machine). Click on the image below to see how to publish HMI to serves.

How to Animate an Object

Animation in TwinCAT HMI

It is very easy to use the animation framework in the TwinCAT HMI framework. The following sample will show and explain a bit how to animate an object and how to get events from the animation. The full sample code is available as well. Continue reading the article and see how easy it is.

Nuget Package Manager

This is about NuGet Package Management, how to build and how to use it.

Continue reading the sample with source code and video tutorial.

Ask questions related to Hemelix sample code and design at Google group https://groups.google.com/g/hemelix

Tips 01:

When you have many UI controls on the Desktop or content view, in which order those control are loaded? If you see the HTML code then the last DIV element is loaded at last. So if you want to do something with this then you could use this. This can be monitored by observing the Attached event.

Tips 02:

Sometimes the whole HMI may not be started (it may block at step 08 during the HMI loading). One reason could be that the following highlighted file is corrupted, it can be regenerated automatically when we build and load the solution.

HMI Engineering error code:

=> https://infosys.beckhoff.com/english.php?content=../content/1033/te2000_tc3_hmi_engineering/3758305291.html&id=

=> https://cmi.beckhoff-cloud.com/

Ask questions related to Hemelix sample code and design at Google group https://groups.google.com/g/hemelix