Manual > Monitoring System Construction Guide > Creating Graphic Screens > Signal List Screens Using Standard Controls

overview

This is an example of creating a simple signal list using Grid control.

This section explains how to create a digital list screen that displays tag names, lamp indications, and comments in list format.

For more information about Grid control, please see "Grid control".

In the example shown here, we will use a script to describe the process. For more information on scripts, please refer to "Scripts" in the Screen Creation Guide.

Steps for creating a digital list screen

1.Prerequisites

In this example, it is assumed that the following tags are registered on the Panel Server side.

- Tag name: 15 consecutive tags from U01.F01.T51 to U01.F01.T65

- Bit type tags

2.Preparing the form for analog listing

Add one form and change the form name to "digital".

After changing the name of the form, change the DefaultForm root property of the root properties to "digital". Note that if you have multiple forms in your environment and want to use a different form as the startup form, this setting is not necessary.

Next, for example, change the StartupSize root property to "DEFAULTFORM". Please feel free to set this according to the screen size you are using.

tra_0466

Next, we will use the access path as an example this time. Set the root PSTagAccessPath property to "U01.F01.".

tra_0465

The root PSTagAccessPath property can be used to set a tag path prefix. This prefix is called "Access Path". In the above example, "U01.F01." is set, and by doing this, tag names such as "T01" can be specified when binding or specifying tag names from scripts. However, a limitation of this function is that it is not possible to connect to tags other than those under "U01.F01.". When connecting to multiple PLCs or registering tags in separate folders, do not use the PSTagAccessPath root property.

3.Creating a screen layout

Use 3D frame control and Label control to create your own screen layout.

The following is an example.

4.Paste Grid control

Place Grid control near the center of the screen above.

From the control view, select Grid control and paste it into the form.

tra_0468

The above is the state immediately after pasting the grid.

Change the grid properties below.

・Set DefaultHeight to 30
・Set HeaderCols to 0
・Set HorizontalScroll to False

*Properties other than those mentioned above can be changed using scripts.

5.Grid initialization script

To use a grid, you must initialize the object from a script. Write the initialization script in the grid's OnInitialize event.

Please write the script in the OnInitialize event by referring to the following.

event OnInitialize()
{
//Set the number of columns (tag name, state, comment, 3 columns in total)
this.Cols = 4;
//Set the number of lines (15 digital tags, 15 lines in total)
this.Rows = 15;

//Color settings
this.SetCellProperty("all", "FillColor", "#FFFFFF");
this.SetCellProperty("all", "TextColor", "#000000");

//Settings for each column
this.SetCellType("col", "label", 0);
this.SetColWidth(0, 100);
this.SetData(0, -1, "Tags");

this.SetCellType("col", "lamp", 1);
this.SetColWidth(1, 70);
this.SetData(1, -1, "Status");
this.SetCellProperty("col", "Shape", "circle", 1);
this.SetCellProperty("col", "OnColor", "#00FF00", 1);
this.SetCellProperty("col", "OffColor", "#666666", 1);

this.SetCellType("col", "label", 2);
this.SetColWidth(2, 590);
this.SetData(2, -1, "Comment");
this.SetCellProperty("col", "TextAlignX", "left", 2);

//Add tags to be monitored and specify label frame text
var vTags[this.Rows];
for( var i = 0; i < this.Rows; i++){
var vTag = "T" & ::NS(i + 51, 0, 2, F);
vTags[i] = vTag;
this.SetData(0, i, vTag );
this.SetData(2, i, vTag & "Comment");
}
this.AddTag(vTags);
}

The lamp display format (lamp shape) is:

　this.SetCellProperty("col", "Shape", "circle", 1);

Here, a "circle" ("circle") is specified, but it is also possible to specify a "square" ("square") or other shapes.

The lamp display color is as follows:

　this.SetCellProperty("col", "OnColor", "#00FF00", 1);

　this.SetCellProperty("col", "OffColor", "#666666", 1);

In this case, On is green and Off is gray.

6.Grid refresh script

Next, write a script to dynamically update the grid display. As with the analog list, write the following script in the OnTagValueChanged event of Grid control.

event OnTagValueChanged(tagname,value)
{
var vIndex;

vIndex = ::CNum(::RightStr(tagname, 2)) - 51;

this.SetData(1, vIndex, ::NS(value, 0));
}

This completes the creation of the digital listing form. Save the settings file.

The OnTagValueChanged event has two parameters: “tagname” and “value”. tagname is the name of the tag where the change was detected, and value is the value of that tag.

In the above example, the script is written as follows:
vIndex = ::CNum(::RightStr(tagname, 2)) - 51;
In this example, we are assuming that the tag names are consecutive numbers starting with T51, so we take the numeric portion of the tag name and subtract 51 from it to use as the grid row index.

Operation check

Check the operation of the digital list you created. Please check while Panel Server is online.

1.Clicking the Panel Editor icon below will launch Panel Browser and open and run the client configuration file.

tra_0013

2.The digital list is displayed.

Currently, the value of each tag is FALSE (Off), so the lamp display is gray. Try changing the value to any value in the tag monitor of Panel Server.

As a test, set T51 to TRUE.

tra_0477

It's OK if the T51 status light turns green.

Creating a digital inventory

Creating a digital inventory