Advanced HMI Development: Tag-Based, Scripted & Expression-Driven Dynamization in WinCC Unified

Introduction

Are you looking to level up your skills in industrial automation and create dynamic, user-friendly HMI screens? Then you're in the right place! This tutorial will walk you through the essentials of using WinCC Unified in the TIA Portal to design and configure interactive interfaces that can adapt in real-time to changing data. Mastering these skills will lead to limitless potential for creating more intelligent and efficient automation systems. Imagine you can control object properties like the dynamization of size, rotation, and color or even use scripts and logical expressions to make your interfaces more intuitive and responsive. In addition to understanding the tools and techniques, you will gain the confidence to implement them in real-world projects by the end of this tutorial. Let's dive in and make your HMI screens come to life!

Prerequisites

To get the most out of this tutorial, here's what you'll need:

• First, ensure you have the TIA Portal software installed on your computer. This tutorial is based on version 19, but don't worry—versions 16 or higher will work just fine.
• Familiarizing yourself with the basics, such as "Introduction to WinCC Unified" and "Downloading Projects Securely, "is vital.

Screen Object Setup

Creating a new project is essential for designing a dynamic interface in the TIA Portal software. Once your project is set up, add a SIMATIC Unified Comfort Panel as your HMI hardware. This panel will be the foundation for designing and testing your dynamic interface.

In the project tree on the left pane, locate and open the "HMI_1" folder. Within this folder, expand the "HMI Tags" sub-folder. To organize your tags effectively, double-click the "Add New Tag Table" option and rename the newly created tag table to "Demo HMI Tags." This table will house all the tags required for your project.

Next, define three dynamization tags within the "Demo HMI Tags" table: "Vertical Position," "Lateral Position," and "Rotational Position." See to it that each tag is assigned with the "Integer" data type and is configured with an "Internal Tag" connection. You can use these tags later to control various properties of the target object on your screen.

Now, expand the "Screens" sub-folder and create a new screen by double-clicking the "Add New Screen" option. Rename this screen to "Dynamic Interface." This screen will serve as the canvas where you implement your dynamic elements. On the right-hand side of the software environment, open the "Toolbox" task card. Expand the "Basic Objects" section and drag three "Text" objects onto the screen. Rename these text objects to "Vertical Position," "Lateral Position," and "Rotational Position," respectively. These labels will provide context for the corresponding input fields. From the "Elements" section of the toolbox, drag and drop three "IO Field" elements onto the screen. Position each IO Field directly below one of the text objects and align them visually for a clean and professional appearance. These IO Fields will allow users to input values for the respective tags.

To connect the tags to the IO Fields, left-click the "Demo HMI Tags" table under the "HMI Tags" sub-folder. Drag and drop the three dynamization tags ("Vertical Position," "Lateral Position," and "Rotational Position") from the "Details View" window to their corresponding IO Fields.

To verify that the connections are established correctly, proceed as follows: double-click each IO Field to open its properties window. Under the "Properties" tab, ensure that the relevant tags are linked to the "Process Value" option.

Dynamizing Objects Through Tags

One of the most powerful features of HMI development is the ability to dynamize object properties using tags. This method involves defining property values that depend on the values of specific tags. For example, you can use tags to control a rectangle object's size, rotation, and even color. To demonstrate this, drag and drop a "Rectangle" object from the "Basic Objects" section onto the "Dynamic Interface" screen. Open the rectangle's properties window and navigate to the "Rotation - Angle" option. In the "Dynamization" column, select "Tag" and then drag the "Rotational Position" tag from the "Details View" window into the "Tag" field. This setup ensures that the rectangle's rotation angle dynamically updates based on the value of the "Rotational Position" tag.

Repeat this process for the "Size - Height" and "Size - Width" options, but this time link the "Vertical Position" and "Lateral Position" tags, respectively. By doing so, the rectangle's height and width will adjust dynamically based on the values entered in the corresponding IO Fields.

To verify the functionality of your setup, left-click the "HMI_1" folder in the project tree and select the "Simulation" icon from the top toolbar.

Once the runtime is open, test the interface by entering values into the IO Fields for "Vertical Position," "Lateral Position," and "Rotational Position." Observe how these inputs dynamically update the corresponding properties of the rectangle object on the screen to ensure everything is functioning as expected.

A common question that may arise here is whether it's possible to dynamize the color of an object. The answer is yes, and you can achieve this through range-based dynamization. To implement this, return to the "Demo HMI Tags" table and define a new tag called "Color" with the data type "Integer" and the "Internal Tag" connection.

Back in the "Dynamic Interface" screen, add a slider element to control the color dynamically. Link the "Color" tag to the slider by dragging and dropping it from the "Details View."

Next, open the rectangle's properties window and navigate to the "Background - Color" option. In the "Dynamization" column, select "Tag" and link the "Color" tag to the "Process Tag" field. Choose the "Range" type and define value ranges with their associated colors in the "Range" table. For instance, you could define four ranges ([11-20], [21-30], [31-40], and [41-50]) and assign a unique background color to each range.

The issue that can happen here is overlapping ranges because they may result in ambiguous property values and trigger warnings.

Once everything is set up, launch the simulation environment by clicking the "Simulation" icon in the toolbar. Test the functionality by adjusting the slider and observing how the rectangle's color changes dynamically based on the defined ranges.

Dynamizing Objects Through Script

Another method for dynamizing object properties is through scripting. This approach allows you to define property values based on the return value. To illustrate this, return to the "Dynamic Interface" screen and open the rectangle's properties window. Sort the properties by dynamization type and locate the "Rotation - Angle" option. Instead of "Tag," choose "Script" from the dropdown menu. For this example, we'll add 45 degrees to the value of the "Rotational Position" tag. To achieve this, write the following JavaScript code between the first and last lines:

let tag1 = Tags("Rotational Position");
let tagValue = tag1.Read() + 45;
tag1 = tagValue;
return tag1;

Table 4.1: WinCC Unified dynamization - Using JavaScript for object rotation

‍

This script reads the current value of the "Rotational Position" tag, adds 45 to it, and returns the updated value.

Save the script and run the simulation environment. Enter a value in the "Rotational Position" IO Field and observe how the rectangle rotates by an additional 45 degrees.

Dynamizing Objects Through Expression

The final method for dynamizing object properties is through expressions. This technique specifies property values based on multiple tag values linked by logical operators such as AND, OR, NOT, and XOR. To demonstrate this, return to the "Demo HMI Tags" table and create two Boolean-type tags named "ExpressionValue1" and "ExpressionValue2," both with the "Internal Tag" connection.

Back in the "Dynamic Interface" screen, remove one text object and one IO Field element. Rename the remaining two text objects to "Tag1" and "Tag2." Drag and drop the "ExpressionValue1" and "ExpressionValue2" tags to the corresponding IO Fields.

Open the rectangle's properties window and sort the properties by dynamization type. For the "Background - Color" option, select "Expression" from the dropdown menu.

Navigate to the "Expressions" tab and click "<Add New>" to create a new condition. Select the "ExpressionValue1" tag, followed by the "AND" operator, and then the "ExpressionValue2" tag. Press the green checkmark icon to confirm the condition. Assign a background color of green to this expression.

Repeat the process to create another condition using the "OR" operator for the same tags. Assign a background color of orange to this expression.

Launch the runtime environment and test the functionality by entering values into the "Tag1" and "Tag2" IO Fields. Observe how the rectangle's background color changes based on the logical conditions defined in the expressions.

Conclusion

In conclusion, you learned the fundamental steps to create and configure a dynamic interface in WinCC Unified using TIA Portal software. You learned how to dynamize objects using tags, scripts, and expressions. It included modifying properties like rotation, size, and color of a target object based on tag values, writing simple JavaScript code for script-based dynamization, and using logical operators (such as AND, OR) for expression-based dynamization. You understood how to deal with issues like overlapping range values, ensuring proper tag connections, and simulating the runtime environment to verify functionality. This knowledge equips you to design and implement advanced HMI solutions in industrial automation projects, enabling you to create interactive and responsive interfaces tailored to specific operational requirements.