Essential Techniques for Screen Layout, Pop-Ups, and Sliding Panels in WinCC Unified

 

Introduction

In WinCC Unified, an effective screen layout is the foundation of any well-designed user interface, and it should be carefully planned from the start of the engineering process using "Screen Windows." This tutorial will guide you through designing a screen layout with multiple "Screen Windows," implementing a navigation system between them, and configuring pop-up windows to enhance the overall user experience and interface functionality.

Figure 1.1: WinCC Unified screen layout, pop-ups, and sliding panels - Application Overview

Prerequisites

What you will need to follow along with this tutorial:

• You need to install the TIA Portal software on your personal computer. Although this tutorial refers to version 19, rest assured that version 16 or higher will work.
• Prior familiarity with the "Introduction to WinCC Unified" and "Downloading Project Securely" is essential.

Creating Screen Layout

A key concept introduced in WinCC Unified is the implementation of Screen Windows, which standardizes the layout structure and navigation flow across different screens to enhance user experience and system efficiency. Launch the TIA Portal software and begin by creating a new project.

Figure 2.1: WinCC Unified screen layout - Creating a new project

When the "First Steps" window appears, switch the interface to "Project View."

Figure 2.2: WinCC Unified screen layout - Switching to the project view

On the left panel, locate the "Project Tree" and double-click "Add New Device." Navigate to the HMI tab, expand the "SIMATIC Unified Comfort Panel" category, and find the "MTP1200 Panel" under the "12-inch Display" folder. Click the "OK" button to confirm and add this HMI hardware to the project.

Figure 2.3: WinCC Unified screen layout - Adding Unified HMI hardware to the project

Next, navigate to the "Screens" folder, double-click "Add New Screen," and name it "Dashboard_Screen."

Figure 2.4: WinCC Unified screen layout - Adding a main screen

To better organize your project, right-click the "Screens" folder and create three new groups called "00_ScreenShell," "01_PrimaryView," and "02_PopUpScreen."

Figure 2.5: WinCC Unified screen layout - Adding screen groups

Within the "00_ScreenShell" group, add two screens titled "TopBar" and "SlidingPanel." For the "01_PrimaryView" group, create three screens: "Display_1," "Display_2," and "Display_3." Lastly, consider adding a single screen within the "02_PopUpScreen" group and call it "LanguageOptions."

Figure 2.6: WinCC Unified screen layout - Implementing screens for screen groups

Open the "TopBar" screen and navigate to its "Properties" window. Adjust the screen dimensions by setting the height to 90 and the width to 800.

Figure 2.7: WinCC Unified screen layout - Adjusting screen dimension of TopBar screen

From the "Toolbox" panel, expand the "Elements" section and drag three buttons onto the "TopBar" screen. Label these buttons as "Display_1," "Display_2," and "Display_3" for better navigation.

Figure 2.8: WinCC Unified screen layout - Adding navigation buttons

Next, open the "Display_1" screen and modify its height and width to 400 and 800, respectively. From the "Elements" section, drag and drop a text box onto the screen and update its text to say, "This is Display_1." For better visibility, customize the screen's background color.

Figure 2.9: WinCC Unified screen layout - Customizing Display_1 screen

Apply this process to the "Display_2" and "Display_3" screens, ensuring each screen has an appropriate label and distinct background color for easy identification.

Figure 2.10: WinCC Unified screen layout - Customizing Display_2 and Display_3 screens

Return to the "Dashboard_Screen" and open the "Toolbox." From the "Controls" section, drag and drop a "Screen Window" item onto the screen. Double-click this item to access its "Properties" window. Assign a meaningful name like "MyTopBar" for the header section. In most cases, "screen windows" do not require a border or header, so navigate to the "Windows Settings" option and select "None." Resize the "Screen Window" to match the dimensions of the "TopBar" screen, setting its height to 90 and width to 800.

Figure 2.11: WinCC Unified screen layout - Customizing header screen window in the main screen

Now, link this "Screen Window" to the "TopBar" screen by selecting "TopBar" for the "Screen" option and confirming with the checkmark icon.

Figure 2.12: WinCC Unified screen layout - Assigning TopBar to header screen window

To incorporate the primary views, create another "Screen Window" by dragging and dropping it onto the "Dashboard_Screen." Double-click on it to open its "Properties" window, rename it to "MyPrimaryView," adjust its dimensions accordingly, and select "None" for its "Window Settings." Then, assign "Display_1" to the "Screen" option, ensuring that this "Screen Window" is correctly connected to the first display screen. So far, by following these steps, you have successfully structured the HMI project within the TIA Portal, ensuring a well-organized layout for display purposes.

Figure 2.13: WinCC Unified screen layout - Customizing content screen window in the main screen

Creating Navigation Between Screens

One approach to implementing screen navigation is by utilizing the system function known as "ChangeScreen." To begin, open the "TopBar" screen and locate the "Display_1" button. Double-click this item to access its "Properties" window. Within the window, navigate to the "Events" tab and select "Click Left Mouse Button" from the list of available options. Next, double-click "<Add Function>" and begin typing "ChangeScreen" to insert this function. For the screen name, designate "Display_1." For the "Screen Window Path" field, opt for the "String" type and specify the target screen window path using the format "../MyPrimaryView."

Figure 3.1: WinCC Unified navigation - Setting up the ChangeScreen function for the Display_1 button

Once completed, follow the same procedure for "Display_2" to ensure seamless navigation.

Figure 3.2: WinCC Unified navigation - Setting up the ChangeScreen function for the Display_2 button

An alternative method for transitioning between screens involves leveraging JavaScript through the "FindItem()" function. To implement this, double-click the "Display_3" button to open its "Properties" window. Move to the "Events" tab and select "Click Left Mouse Button" as the trigger. Left-click the "JS Code" icon to transition to the coding environment.

Figure 3.3: WinCC Unified navigation - Configuring Display_3 button with JS code for screen switching

Within the second line of the script editor, enter the command: Screen.FindItem("../MyPrimaryView").Screen = "Display_3";. This script dynamically assigns "Display_3" as the active screen through the designated path.

Figure 3.4: WinCC Unified navigation - Configuring screen navigation with JavaScript commands

Once the configurations are set, left-click the "HMI_1" folder in the project tree. Select the "Start Simulation" icon from the top toolbar to initiate a runtime environment.

Figure 3.5: WinCC Unified navigation - Initiating runtime

It will enable you to test and verify the implemented screen navigation functionality through your internet browser. By employing both the "ChangeScreen" system function and the JavaScript "FindItem()" method, you gain multiple options for screen transitions, offering flexibility in designing user-friendly HMI interactions.

Figure 3.6: WinCC Unified navigation - Testing screen navigation functionality in the Internet browser

Setting a Pop-Up Screen Window

Access the "LanguageOption" screen and modify its dimensions by setting the height to 220 and the width to 100. Insert icons for both English and German languages, and additionally, drag a button from the "Elements" section onto the screen and rename its label to "Close" for later use.

Figure 4.1: WinCC Unified pop-ups - Customizing pop-up screen

Next, return to the "TopBar" screen and insert two buttons. Assign them the labels "Pop Up" and "Sidebar" respectively.

Figure 4.2: WinCC Unified pop-ups - Adding pop-up and sidebar buttons to TopBar screen

Double-click the "Pop Up" button to access its Properties window. Within this window, implement the "OpenScreenInPopup" system function. It enables a pop-up screen to be displayed when you click the button. Insert a clear name such as "MyLanguageOptions" in the "Pop Up Window Name" field. Then, under the "Screen Name" option, select "LanguageOptions" to specify the screen displayed within the pop-up. Set appropriate numerical values for the "Left" and "Top" positioning items to determine where the pop-up window should appear on the interface.

Figure 4.3: WinCC Unified pop-ups - Customizing pop-up button

Now, navigate to the "LanguageOptions" screen and locate the "Close" button. Double-click this button to access its properties and apply the "ClosePopup" system function, ensuring the pop-up can be closed when you press this button. In the "Pop-up Window Path" field, enter the predefined pop-up window path using the format "/MyLanguageOptions" to ensure proper identification and closure of the correct pop-up window.

Figure 4.4: WinCC Unified pop-ups - Configuring the close button with the ClosePopup function

Once all settings are configured, start the simulation in your internet browser and verify the functionality. Open the pop-up screen during runtime and confirm that it can be closed by pressing the "Close" button inside the pop-up or by using the window's close button.

Figure 4.5: WinCC Unified pop-ups - Testing pop-up interaction and closure in runtime

At this point, a potential question may arise regarding how to hide both the window close button and the frame of the pop-up window. To achieve this, go back to the "TopBar" screen and reopen the properties of the "Pop Up" button. In the "OpenScreenInPopup" system function, locate the "Hide Close Button" option and set its value to "True." Next, apply the "SetPropertyValue" system function to hide the pop-up window's frame. Within this function, set the "Screen Object Path" option to "String" and specify the predefined pop-up window path using the format "/MyLanguageOptions." For the "Property Name" field, enter "WindowsFlags," ensuring the system properly applies the settings to remove the frame.

Figure 4.6: WinCC Unified pop-ups - Removing pop-up window frame and close button

Finally, restart the simulation once more in your internet browser. Open and close the pop-up screen during runtime to confirm that the window now lacks a default close button and does not display a visible frame, ensuring a seamless and customized user interface.

Figure 4.7: WinCC Unified pop-ups - Verifying pop-up customizations in runtime

Setting a Slider-In Screen Window

Add a new "Screen Window" to the "Dashboard_Screen." Adjust its properties to match the required settings: set its width to 300 and height to 800, position it at (0,0) for both left and top, and remove its border. Assign "MySlidingPanel" as the name of this "Screen Window," and select "SlidingPanel" as its "Screen" option. Since the "SlidingPanel" should not always be visible in runtime, deactivate its visibility.

Figure 5.1: WinCC Unified sliding panels - Customizing sliding panel screen window in the main screen

Next, navigate to the "TopBar" screen, access the properties of the "Sidebar" button, and switch to JS Code mode.

Figure 5.2: WinCC Unified sliding panels - Accessing JS code mode for sidebar customization

In the second line, utilize "FindItem()" to make the "SlidingPanel" visible with: Screen.FindItem("../MySlidingPanel").Visible = true;

Figure 5.3: WinCC Unified sliding panels - Enabling slide panel visibility via JS code

Then, open the "SlidingPanel" screen and set its dimensions to 800×300. Add a text label displaying "This is a SlidingPanel screen" and insert a button labeled "Close."

Figure 5.4: WinCC Unified sliding panels - Customizing sliding panel screen

Double-click the Close button to access its properties, switch to JS Code mode, and in the second line, use "FindItem()" to hide the "SlidingPanel" screen with: Screen.FindItem("../MySlidingPanel").Visible = false;

Figure 5.5: WinCC Unified sliding panels - Using FindIem() to conceal the sliding panel

Finally, launch the simulation in your browser and verify if the "SlidingPanel" functions correctly.

Figure 5.6: WinCC Unified sliding panels - Testing sliding panel functionality in runtime

Conclusion

In conclusion, you learned how to effectively design an HMI screen layout in WinCC Unified using Screen Windows to structure different interface sections. You explored multiple methods for screen navigation, including the ChangeScreen system function and JavaScript’s FindItem() function. Additionally, you implemented a pop-up window to display extra options dynamically and configured a sliding panel for interactive user engagement. By following these steps, you will have a well-organized and interactive HMI project that enhances usability and efficiency in the TIA Portal. Experiment with these techniques to create a more intuitive and functional HMI system in your industrial automation projects!