How to Add Pop-Up Screens to Your HMI Application

In today's post I'm going to tell you WHY you should implement pop-up screens in your own application, and I'll give you all the STEPS (with lots of screenshots!) on how to do it.  Sounds good?  Then let's go.

If your application hasn’t got any pop-up screens yet, then here's a couple reasons why you might want to start using them:

• You want to add a user acknowledgement connected to a button (e.g., “Are you sure you want to start this action?” -> YES/NO) -> Use a pop-up screen.
• You want to implement extra functionality to an object/device on the screen (e.g., a manual mode for a valve or a pump) without over-populating the screen with objects -> Use a pop-up screen.
  

A pop-up screen is a screen with (typically) smaller dimensions than the total screen size, triggered by an action on the HMI. For example, in the above screenshot, the pop-up screen is triggered because the user pressed the “Start Production” button.

In the old WinCC Flexible (Simatic Manager = pre-TIA Portal), pop-ups could only be created by grouping objects together (typically a rectangle background with some buttons and text on it) and adding a visibility animation to them. Pressing a button would then set the visibility tag to TRUE thus making the complete group of objects visible. Now we have the more capable TIA Portal where creating pop-ups is a breeze because TIA Portal features a complete screen management section dedicated to pop-up screens.

If you'd like to add pop-up screens to your own HMI applications, then following these 3 easy steps will get you there in no-time:

1. Create a Pop-Up Screen
2. Configure Pop-Up Trigger Events
3. Add a Darkened Background (Optional, but really cool!)

LET'S DO THIS!

STEP 1 - CREATE A POP-UP SCREEN

To create a pop-up screen, go to ‘Screen management’ -> ‘Pop-up screens’ underneath your HMI project (tree structure on the left), and select ‘Add new pop-up screen’.

Now you’ll get an empty pop-up screen where you can start adding objects. The first thing you should do is change the dimensions of the screen. Click somewhere on the pop-up screen and under ‘Properties’ -> ‘Layout’ change the width and height of the pop-up screen.

Now you can start adding objects. I would recommend using a simple rectangle for a background (in my premium application, I use two rectangles on top of each other to create a drop shadow effect). Remember to use layers here as well.  Just like with standard screens, pop-up screens can and SHOULD be build using a layered approach.

For the ‘Start production’ pop-up screen, I have used 2 rectangle objects and 1 simple line for the background (Layer_1 - Background), 4 text objects for the different texts on the pop-up screen (Layer_2 - Text), and 2 buttons for the positive and negative acknowledgement (Layer_3 - Buttons). The actions connected to the different buttons will be explained in the following point.

Finally, when you’re done creating the pop-up screen, remember to rename your pop-up screen to something that makes more sense than ‘Pop-up screen_1’.

TIP - To rename a pop-up screen, either right-click on the name and select ‘rename’, OR (and this is the fastest way) double click slow (1 second between the clicks) to instantly change the name.

STEP 2 - CONFIGURE POP-UP TRIGGER EVENTS

The function we are going to use to open/close our pop-up screen is intuitively called ‘ShowPopupScreen’.

Start by defining which pop-up screen you’d like to use with this function (‘Name of the screen’) and determine the location of this pop-up on the HMI (‘X/Y coordinate’). Typically, you’d want an acknowledgement pop-up to be displayed in the centre of your main screen area.

Secondly, choose if you want to open (‘Display mode’ = On) or close (‘Display mode’ = Off) the pop-up screen.

Finally, you can add an ‘Animation’ with an ‘Animation speed’ to the pop-up. Personally, I am not a big fan of this because I think it looks a bit tacky. I prefer a nice clean pop-up with a slightly darkened background (see point 3).

We need to use this function at least 2 times - one time to OPEN the pop-up screen, and one time to CLOSE it.

The function is first used by an invisible button on top of the ‘Start Production’ button.

Pressing the invisible button will execute the function and consequently the pop-up screen is opened (‘Display mode’ = On).

With the pop-up screen open, the operator has 2 options:

1. Start production (=action is executed)
2. Cancel the request (=no action is taken).

For both options - start and cancel - the pop-up window is closed using the 'Release' event of the button.

To close the pop-up screen, remember to set the ‘Display mode’ to ‘Off’.

The production start is executed on the 'Press' event of the YES-button.

Now, if you really want your pop-up screen to POP -> continue reading... 

STEP 3 - ADD A DARKENED BACKGROUND (OPTIONAL)

Now if you really want to make your pop-ups shine and stand out from the background, a great way to do that is by darkening the background behind the pop-up.

Pop-up on darkened background vs. pop-up on standard background.

TIA does not natively support this feature, but we are creative, so we’ll implement this feature ourselves… (and the solution is easier than you might think).

First create a simple square image with a transparency value in the painting program of your choice (I use Figma, but there are many alternatives out there). I would recommend creating a simple black square (RGB 0,0,0), 100x100 pixels with transparency set to 15% - and then export this image in .png-format (to keep the transparency setting). Alternatively, just use the ‘Graph_Background_Dark_100x100px’ from my premium sample application (TIA Portal - All Basics Pack Premium Edition).

Next, add the image (graphic view) to the screen where you have your pop-up. Assign the image to a layer that is on top of the other layers that you’ve created for this screen (this has the added advantage that you’ll not be able to press any buttons underneath this image when the pop-up is active). Scale it to which surface you’d like to darken.

Transparent image on top of the main screen area.

Finally, add a visibility animation to the image. Create an internal HMI tag (type Bool) for this purpose.

The only thing left to do, is to set the internal HMI tag when the pop-up is being opened, and to reset the internal HMI tag when the pop-up is being closed.

As an extra security, reset the internal HMI tag also when the screen is cleared.

And behold - you’ve just made your pop-up screen a little bit more awesome…

That brings us to the end.  In this post I've shared with you some easy steps to add pop-up screens to your own HMI applications.  If you like what you're reading, then I've got some great news.  This post is covered in extensive detail in my TIA Portal - All Basics Pack (Premium Edition) training bundle.  After enrolling, you get INSTANT access to a full PLC and HMI training course with over 40 training videos (8+ hours) AND you'll get the PREMIUM content which includes the premium sample project with a fully functional PLC and HMI application. 
This premium sample project contains dozens of advanced PLC and HMI programming/structuring features like the pop-up screens described in this post and many more awesome functions that you can go and implement in your own TIA Portal applications. 

So if you're one of those people who just wants more -> GO AND CHECK IT OUT!