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.

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.

When the "First Steps" window appears, switch the interface to "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.

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

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

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."

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.

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.

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.

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.

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.

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

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.

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."

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

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.

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.

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.

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.

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.

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

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.

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.

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.

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.

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.

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.

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

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

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."

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;

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

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!