Creating active areas

Active Areas (or multiple active areas) can be created in any view.

1. Click on the Active Area icon in the GUI Toolbar.

2. Draw the Active Area:

3. Click on the Init State in the Properties window and select the content you wish to display.

In this dialog, you can set up the type of Active Area. In other words, you can set up how the Active Area will be initialized when the view is shown.

• Note: If you do not activate the initial state (e.g. you leave the Active check box unchecked), the Active area will not be visible. You can set a new state later when using open command.

View type

If you select this option, you can specify the view to be shown in the active area. You can display any view you have previously designed. For best results, use a window with the same resolution or at least the same aspect ratio as your active area. If you need to change the active area size to an exact width and height, you can do so in the Properties window.

• TIP: If you specify the option “Previous View,” open command will jump back to previously open window.

Parametric View type

If you select this option, you can specify the parametric view to be shown in the active area. You can display any view you have previously designed. For the best results, use a view with the same resolution or at least the same aspect ratio as your active area. If you need to change the active area size to an exact width and height, you can do so in the Properties window.

Aside from the Parametric View name, you can also specify the Indexes and Connection indexes. For more details on how to deal with parametric views, please see chapter Parametric Views.

Document type

You can show .PDF document inside the active area, a document can be stored in user files, user data or can be displayed from external URL (As example stored on some FTP server.

You can adjust the zoom and page width or even scale .PDF document inside free file column you have to put the full path to file.

Alarms type

You can simply display Online/History alarms inside the active area with a bunch of parameters you can check/uncheck if you want to display top toolbars, select background colour of the active area, scale text size, preview (You can adjust columns width in this section if you will drag column with a cursor and save it will be applied then every time the active area is open this option is useful in case when you are trying to display long text) You can select a time range and adjust parameters (Hide or show unnecessary columns parts which are not important in that case).

• Show Top Toolbar check box allows you to show or hide the top toolbar with filters and alarm settings.
• Show Bottom Toolbar check box allows you to show or hide the bottom toolbar (e.g., the date selection controls).
• Parameters allow you to specify which columns will be visible in the alarm table. In addition, you can set a filter for severity and text filters for the message, area, and device.

• Row Click Callback is a neat feature: when a user selects a row in a table, you will get a callback in the specified JavaScript function. This function must be defined in View Script.

Example on showing filtered Alarm data

Suppose you want to show the alarm table on the screen, but only show data in respect to the given view.

1. Create alarm definitions in CAS Alarm Windows. To designate which alarms belong to the view you plan to show, specify the name of the view in the Area column (Don’t forget that filter takes a difference in lower and upper cases!)

2. Create a new view and insert an Active area into it. (If you want to show filtered and unfiltered data in one view, insert two active areas.)

3. Set up its init state.

4. Set up data filter as follows:

5. Test your view.

Example of using Row Click Call-back

Suppose you have an alarm table shown in the Active area, and you want to detect when a user selects a row in the table.

1. Create a new view and insert an Active area into it.

2.Set up its init state.

3.Set up row click callback as follows:

4. Now whenever a user clicks in the alarm table, the function you have defined will be called. You can retrieve the row and column on which the user has clicked (variable arguments[1] is the row number and variable arguments[2] is the column number). In addition, you will get all values in the selected row; they are in the variable arguments[0].

5. Now test your view.

DOWNLOAD DEMO PROJECT HERE:

Advanced Trend type

You can show trends, as defined in the Advanced Trends section. The size of the trend is automatically adjusted to the size of the active area.

Data-log View type

You can show data-log view, as defined in the Data-log section. The size of the data-log view will be automatically adjusted to the size of the active area.

• Show Top Toolbar check box allows you to show or hide the top toolbar with filters and data-log view settings.
• Show Bottom Toolbar check box allows you to show or hide the bottom toolbar (e.g. the date selection controls).
• Filters allow you to limit the data shown by value, key or by type

Key Filter can limit the data shown by specifying filters for data items. Keys must be enabled in data-log definition to show up in the filter. For each defined key, you can specify the value. To specify a value, you can use constants, or you can use tags from PLCs or variables from View Scripts.

• Time Scale [min] parameter specifies the time interval that will be shown by the Datalog.
• Background Color can be set to transparent or to a specific color. If you set this parameter to color, you can specify which color will be shown as the background.
• Row Click Callback is a neat feature: when a user selects a row in a table, you will get a callback in the specified JavaScript function. This function must be defined in View Script.

User Actions type

You can show the history or live data of all user actions. The size of the user actions view will be automatically adjusted to the size of the active area.

• Show Top Toolbar check box allows you to show or hide the top toolbar with filters.
• Show Bottom Toolbar check box allows you to show or hide the bottom toolbar (e.g. the date selection controls).
• Time Selection lets you to select time range
• Background Color can be set to transparent or to color. If you set this parameter to color, you can specify which color will be shown as the background.
• Row Click Callback is a neat feature: when a user selects a row in a table, you will get a callback in the specified JavaScript function. This function must be defined in View Script.
• Filters let you filter action of certain user level
• Preview lets you adjust columns width (Saved column width by dragging columns will be applied then in HMI)

SQL Table

The SQL Table feature allows you to show values from the SQL database in a table. To get data from the database, specify your connection first. In the connection settings, you can modify the SQL selection to suit your requirements.

• TIP: You can create a new SQL connection specifically for use with this table.

Parameters

Once is your connection set up, you can use parameters to modify your SQL query. In the Parameters, you can put multiple parameters. Each parameter can be a constant or you can use tag or variable from View Scripts.

• using constants: just write the value into the text field
• using Tag: enter the tag value or use the “…” button to specify a tag.
• using Variable: enter an = followed by the variable name.

Connections

By passing the connection parameters, you can override the connection that will be used to show the SQL table. This option is especially useful if you are working with parametric views. To set your connection parameters, click on the “…” button next to the Connections field.

Show Header

This option enables you to show the header row. If you select this option, you can fine-tune the parameters by pressing the “Customize” button.

The default option is “Columns from SQL.” If you use this option, your table will show a top row with a description of columns taken directly from the SQL.

You can also set custom columns to set up names of columns manually. In addition, with this option, you can specify the Width of the column in pixels. If you leave with=-1, column width will be set to auto-scale. The final option is Alignment, where you can specify whether a given column should be aligned on the left, right, or in the center.

Background Color

The background Color can be set to transparent or to a given color. If you set this parameter to color, you can specify which color will be shown as the background.

Row Click Callback

Row Click Callback is a neat feature: when a user selects a row in a table, you will get a callback into the specified JavaScript function. This function must be defined in View Script.