Professional GUI – Popup windows

Professional GUI

Popup windows

Sometimes, showing some information, a warning, or an error message is required in a HMI project. And many paths lead to Rome. What I’ll show here today is a kind of custom component or object which can be customized and called from different contexts, similar to the screen keyboards which can be easily added to text and numeric input fields in the editor.

To understand how it works, let’s look at what the editor does when we add a keyboard to a component: It adds a (locked but easy to unlock) page and two fonts to your project. Since everything is integrated in the editor, it’s a one-click action (or two, if you forgot to change the scope of the calling component to global, beforehand). These keyboard pages are relatively heavy, code- and memory-wise, since they have to sent data back to the calling component. Our popup window will be simpler and is thus a good step towards deeper understanding of how the screen keyboard stuff works.

A special page

We have seen from the built in keyboard pages that something can appear as a kind of overlay, even on Basic, Discovery, and Enhanced series HMIs when we load a page whose .sta attribute is set to “no background”. Then, only the visible components are shown and the rest of the screen shows still the content of the previous page although it had already been unloaded from memory. On this page, we place a global(!) text component as a header bar with a bold font attributed and another global(!) text component for the content. We change the object names of the page to “popup”, the header component to “head” and the content component to “content”, just for an easy and structured addressing, as you’ll see below. On this popup page, we add two (again) global numeric variables which we call “style” and “loadpageid”. To close our popup, we want to do so by clicking everywhere, on the header, the content, or the surrounding empty space. For this, we add a TouchCap component.

Don’t forget to write the sender’s address on the back side…

When the popup page has been called, read, and closed, the code has to know which page to load afterwards. Normally, it’s the page from which the popup had been called. But the popup page, in opposite to the built-in keyboard pages, has no means to know “by magic” who called it. Thus, in our project, we have to add one line of code to every page which might be a caller for the popup page to the Page ExitEvent:

popup.pageloadid.val=dp

This way, the popup “knows” always about the page id which was active when it was called.

Now, some words about “style”

The numeric style variable on the popup page has two functions in one. By default, it’s -1 and when the popup is called while style has this default value, it will immediately return without displaying anything to prevent blocking coding “accidents”. In the same intention, every time the popup is closed, style will be reset to -1.

You’ll have to set style to a specific value before calling the popup, one of the following three lines, depending on what you want to achieve:

popup.style.val=0 //Information, or
popup.style.val=1 //Warning, or
popup.style.val=2 //Error

In the popup Page PreInitialize Event, this is decoded and the header text and foreground color adapted:

if(popup.style.val==0)
{
  popup.head.txt="Information"
  popup.head.pco=WHITE
}else if(popup.style.val==1)
{
  popup.head.txt="Warning"
  popup.head.pco=YELLOW
}else if(popup.style.val==2)
{
  popup.head.txt="Error"
  popup.head.pco=RED
}else
{
  //emergency reset and exit
  popup.style.val=-1
  page popup.pageloadid.val
}

Closing the popup and return back to the caller page…

… is handled in the TouchCap component tc0 of the popup page. In its TouchPress Event, you find exactly the same code as in the “emergency reset and exit” code:

popup.style.val=-1
page popup.pageloadid.val

And that’s it for our popup page which we may export as a .page file (or from the demo project below), then import and reuse it in whatever other project. The only adaptations are the header and content component positions and sizes in case you’ll have a different screen resolution.

The demo project

Is a single page (besides the imported popup page) example thing. On this single page, I placed three buttons there, b0, b1, and b2. Their event code is pretty similar and shows how easy it is to call the popup after having set the content text and the style.

For b0 (Info test):

popup.content.txt="This is just some info,\rnothing to be worried\rabout!"
popup.style.val=0
page popup

For b1 (Warning test):

popup.content.txt="Outside temperature\rexceeds 30°C !"
popup.style.val=1
page popup

And, finally, for b2 (Error test):

popup.content.txt="Division by zero!"
popup.style.val=2
page popup

That’s all. With this, you have an object which is highly customizable and which can be easily called from different contexts with just a three-liner.

Here is the .hmi file to play with it and which allows to export the (not locked) popup page: popup_demo.HMI

Happy Nextioning!