Skip to content

Create Popup

WideQuick Modular Framework is delivered with several pre-configured popups, such as history, trend and maintenance. But it is also possible to create custom popups. This guide will explain the steps necessary to create a custom popup.

There are three steps involved in creating a custom popup.

  • First we must import the tags we want to display and control in the popup. Please see import tags for more information.

  • Secondly we must configure the suffixes for the newly imported tags and connect them to the specific popup. Please see configure popup for more information.

  • Lastly we must create the popup which we want to use. Please see build popup for more information.

In this example we will build a popup for pump control. In our example the pump will be called "pump06"

Import tags

The first step is to import the tags that we want to display and control. Remember that these tags must follow the tag structure:

Connection.Device.Sys_objectName_suffix.

The suffix can be whatever you want but please remember it for the next step where we will configure the popup.

For more information on tag structure please see tag structure

In this example we will import 5 tags from the PLC for controlling the pump.

  1. The first tag will be displaying if the pump is on or off. In this example we will give it the suffix: _IO. This is a read only tag in the PLC.

  2. The second tag will start/turn off the pump. In this example we will give it the suffix: _start. This is a read and write tag in the PLC.

  3. The third tag will be our setpoint for the RPM on the pump. We will give this tag the suffix: _setpoint. This is a R/W tag in the PLC

  4. The fourth tag will be our actual RPM in the pump. We will give this tag the suffix: _rpm. This is a Read-only tag in the PLC.

  5. The final that will be an error signal. This will be true if the pump has encountered any type of error. We will give this the the suffix: _error. This is a Read-only tag in the PLC.

Please see the result below

Imported tags

Reusing tags

Note that a tag can be displayed on several popups and it not necessary to import the same tag several times.

Configure popup

Once we have imported the tags it is time to configure them and connect them to popup. This can be done in a few simple steps.

  • Start the project

  • Navigate to Inställningar ---> Suffix ---> Suffix - Popuper

Navigation to settings

  • Create a new suffix category by pressing the button "Lägg till ny kategori" and give the new suffix category a name. Since we are trying to create a popup for pump control we will give it the name "Pump Control".

Adding category

  • Mark the new category in the list and click on the button "Lägg till nytt suffix i vald kategori". In this example we will start with the tag with the suffix _IO which displays if the pump is on or not. We will call this suffix "Active".

Adding suffix

  • Next we need to fill in the relevant information for this suffix.

Configuring suffix

The list is filled according to the following logic.

  • Suffix - The suffix we entered on the tag, in this case _IO

  • Skrivbar - We don't want the tag to be writable since this is a read only tag in the PLC.

  • Skriv privilegie - Since this suffix won't be writeable we can't limit it by a privilege, leave empty.

  • Decimaler - Since this tag will be a boolean signal we won't have any decimals. Leave as is

  • Beskrivning - A description of what this suffix represents. Since this a status signal we will give it the description "On/Off signal".

Specific information per tag

It this possible to overwrite the write privilege, number of decimals and the suffix description per tag by entering the information on the description of the tag. Please see tag structure for more information

Repeat these steps for the four remaining tags. In this example I will give the suffixes the following names:

_setpoint - Setpoint

_rpm - RPM

_error - Error

_start - Start

The finished list should now look something like this:

configured suffixes

Build popup

The final step is to build the actual popup we want to use to control the pump and display information.

There are two ways to go about this. We can either start with a new workview or we can copy an existing template view. The easiest thing is to start with the template view. This view contains all the necessary scripts and configuration. Start by copying the workview "Mall" under Workviews/Common_Popups. We will name this new workview "Pump control".

Naming popups

We do not have to name the popup the same as the suffix group we created in the previous step. This is just a coincidence

We can now start building the view using the objects in the object library "CustomPopupObjects"

This object library contains different object that we can use to display and control tags. If a certain tag is not available of the object displaying the popup, the object will automatically be hidden and the popup rescaled. As to not leave any blank space.

Let's start by adding an object to display if the motor has been started or not. The object "StatusRow" is perfect for this.

Drag a status row into the view. Mark the object and open the "properties" tab. On the property add the suffix "Active" to connect this object to the suffix _IO. Please see the image below

Status row

Suffixes

The suffix on the CustomPopupObjects refers to the name we gave the suffix in the previous step and not the actual suffix. In this example it means that we will enter "Active" instead of "_IO"

Next we want to add controls for starting or stopping the pump. For this we need a two button row. One button for start, one for stop. For this we will use the object "2Button_row". In this example setting _start to 0 will stop the motor and setting it to 1 will start the motor. Fill out the properties on the object according to these specifications.

2 Button start

Next we want a row for setting the setpoint and another for displaying the actual rpm of the pump. For this purpose we will use the object "ValueRow". This object will allow us enter a value if we enabled the property "skrivbar" in the previous step. Otherwise it will just display the value. Since we enabled "Skrivbar" for the setpoint but not the RPM this will work for us. Add two ValueRows and fill in the suffixes "Setpoint" and "RPM".

Finally we want to add a row for displaying if the pump as encountered an error. For this we will use the "StatusRow" once again. The final view should now look something like this:

error row

The final step is to resize the view to remove the "dead space" at the bottom of the view. Right click on the view in the project tree and select "properties". Changing the height to around 520 will ensure all objects are still visible while removing the empty space at the bottom of the page. It is not necessary to rescale the object "foreGroundBox2" since this object will automatically rescale according to the view.

The final step is to start the application and once again enter the suffix settings. Inställningar ---> Suffix ---> Suffix - Popuper.

Select pump control and update the "Vy:" to our newly created view: "Pump control" as seen in the picture below:

Popup config

Done!

All that remains is to start the project and click on the object pump06 and we will see the popup pump control. Please see create object to create an object in a workview.

pump06

pump control

Automatic scaling

The content that is shown for an object is directly linked to what signals/tags or variables that are available for the object. When a popup is loaded, the view is automatically resized and automatically hides all the rows in the custom popup that is not relevant for the linked object.

To visualize this we will add another pump called pump07. This pump has the same signals except that it does not have an error tagg (_error).

pump07

When we click on this pump the popup will look like the picture below. Automatically hiding the error status row and rescale the popup as to not leave a blank space where the button row used to be.

pump control scaled

Because of this feature popups should always be built to show the "worst case" or "maximum number of tags" and will then automatically rescale according to the actual number of tags on the object.