i4designer Knowledgebase

Alarming

Abstract

Here are the i4designer Alarming components for your new project created on the i4SCADA platform.

The i4designer Alarming category contains the Alarm viewer component designed to facilitate alarms monitoring tasks at run-time. More details can be found in the upcoming article.

Alarm viewer
Abstract

Check out this article to learn more details about the i4designer Alarm viewer component and its properties.

The i4designer Alarm viewer component is an event notification and management extension that allows the user to view and act upon i4SCADA alarms, providing complex capabilities like alarm acknowledgment, processing, commenting, filtering, and offline alarm viewing.

The Alarm viewer table provides a detailed alarm status representation, using color codes and textual hints. The active alarms can be filtered for both display and processing using the complex filtering criteria available in the contextual menu.

Alarm_viewer.jpg

The Alarm viewer component

Category

Property

Description

Common

Name

The name of the component, visible in other Designer locations (such as Page explorer).

Name_pipe.jpg

Object ID

Sets the Object ID of the component. By defining an object ID for the control, it can be passed as SignalPrefix when using parameter passing in navigation. The value of the Object ID can be used via a placeholder [OID] in other properties of this extension. The placeholder is supported in all signal properties, symbolic text, and states.

Example: Setpoint [OID]

Object_ID.jpg

Tooltip text

Optional tooltip text, that will be shown on mouseover at runtime.

Tooltip_text.jpg

Security

System authorization

The system authorization required to display the component. If the logged in user does not have this system authorization, the component will not be visible or enabled (depending on the set Security access behavior). If the property is left empty, the component will be visible and enabled for all users. Further on, the user can also add multiple System authorizations / Permissions, separated by comma (,).

System_authorization.jpg

Project authorization

The project authorization required for displaying the component. If the logged in user does not have this project authorization, the component will not be visible or enabled (depending on the set Security access behavior). If the property is left empty, the component will be visible and enabled to all users. Further on, the user can also add multiple Project authorizations / Roles, separated by comma (,).

Project_authorization.jpg

Security access behavior

Sets the behavior of the element to either disabled (grayed out) or hidden, when the logged in user doesn't meet the conditions imposed by the Project authorization / Roles and System authorization / Permissions properties. In case both Project authorization / Roles and System authorization / Permissions properties are set, the logged user needs to meet both conditions to be able to see and utilize the component, at run-time. In case both Project authorization / Roles and System authorization / Permissions properties are set, the logged user needs to meet both conditions to be able to see and utilize the component, at run-time.

Security_access_behavior.jpg

Layout

Layout mode

Sets the behavior of the component related to the page placement. The user can select the component layout from the options available in the drop-down list: Default, Dock top, Dock bottom, Dock left, Dock right, Stretched, Pin top left, Pin top center, Pin top right, Pin right middle, Pin bottom right, Pin bottom center, Pin bottom left, Pin left middle and Pin center.

Layout_mode.jpg

Margin

Sets the margin of the component relative to the drawing board area. The supported values are the standard CSS values for the margin.

The top, bottom, left and right values can either be typed in the main property field or by using the Margin editor.

Margin_small.jpg

The Margin editor can be opened by clicking the Open button.

Margin_large.jpg

The components margins can be updated by setting the margin value and selecting the desired unit:

  • Ems (em) - The em is a scalable unit. One em is equal to the current font-size;

  • Pixels (px) - Pixels are are fixed-size units. One pixel is equal to one dot on the computer screen (the smallest division of a screen’s resolution).

  • Percent (%) - The percent unit is much like the “em” unit. When using the Percent unit the component remains fully scalable for mobile devices and accessibility.

Effects

Opacity

Sets the opacity of the component. The Opacity values should be numbers from 0 to 1 representing the opacity of the component. When the component has a value of 0 the element is completely invisible; a value of 1 is completely opaque (solid).

By default, the Component's opacity is set to value 1. Using the up / down arrows the user can control the opacity degree.

Opacity.jpg

By clicking the Open button the view is extended to display the Opacity slider.

Opacity_slider.jpg

Shadow color

Sets the color of the component shadow, either by manually typing in the HEX color code or by using the color picker tool. As the component colors are injected by the default CSS, changing the color will overwrite the CSS.

Shadow_color.jpg

Shadow offset X

Sets the offset of the shadow on the horizontal axis. The default value can be increased or decreased, either by manually typing in the desired value or by using the up and down arrows.

Shadow_offset_X.jpg

Shadow offset Y

Sets the offset of the shadow on the vertical axis. The default value can be increased or decreased, either by manually typing in the desired value or by using the up and down arrows.

Shadow_offset_Y.jpg

Shadow size

Sets the width of the component shadow. The default value can be increased or decreased, either by manually typing in the desired value or by using the up and down arrows.

Shadow_size.jpg

Configuration

DateTime format

Selects the time and date format for the DateTime Signal values. Available tokens are - YYYY, YY, Y, Q, MM, MMM, MMMM, D, DD. Further information is available in the "Year, month, and day tokens" chapter under https://momentjs.com/docs/#/parsing/string-format/.

For example: DD.MM.YYYY hh:mm:ss

DateTime_format.jpg

Group name

Sets the name of the Alarms Group.

Group_name.jpg

Title text

Sets the text displayed by the component header.

Title_text.jpg

Alarms

Acknowledged alarm sound

Sets the path of the sound to be played for acknowledged alarms. The sound can either be uploaded inside i4designer, or it can be an external link to a sound file. The property takes effect only if Play Sound is set to True.

Ack_alarm_sound.jpg

Acknowledged and gone alarm sound

Sets the path of the sound to be played for acknowledged and gone alarms. The sound can either be uploaded inside i4designer, or it can be an external link to a sound file. The property takes effect only if Play Sound is set to True.

Ack_and_Gone_alarms_sounds.jpg

Active alarm sound

Sets the path of the sound to be played for active alarms. The sound can either be uploaded inside i4designer, or it can be an external link to a sound file. The property takes effect only if Play Sound is set to True.

Active_alarms_sound.jpg

Alarm Types

The Alarm types filter that will be used as the initial alarm filter. This filter will be applied automatically when running the component in the web browser.

The Alarm types filters are featured as an array list, accessible by clicking the Expand array list button.

Alarm_types.jpg

Furthermore, the following actions are available for each array item:

  • Move up move_up.jpg

  • Move down move_down.jpg

  • Clone clone_state.jpg

  • Remove remove_state.jpg

In order to add a new Array item, to the list of Alarm Group filters, the user can click the Add button Add_button.jpg.

Each array item allows the user the possibility to manually fill in the Alarm type name.

type_name.jpg

Alarm groups

The Alarm Group will be used as the initial alarm filter. This filter will be applied automatically when running the component in the web browser.

The Alarm groups filters are featured as an array list, accessible by clicking the Expand array list button.

Alarm_groups.jpg

Furthermore, the following actions are available for each array item:

  • Move up move_up.jpg

  • Move down move_down.jpg

  • Clone clone_state.jpg

  • Remove remove_state.jpg

In order to add a new Array item, to the list of Alarm Group filters, the user can click the Add button Add_button.jpg.

Each array item allows the user the possibility to manually fill in the Alarm group name.

alarm_group_name.jpg

Alarm status filter

Sets the alarm status that will be used as the initial alarm filter. This filter will be applied automatically when running the extension in the web browser. The user can select the desired Alarm status filter from the drop-down list options: All, Gone, Active, NotAcknowledged, ActiveOrNotAcknowledged.

Alarm_status_filter.jpg

Alarm sort order

Sets the order in which the alarms are displayed, selecting from the drop-down list options: DateDescending, PriorityDescending.

Alarms_sort_order.jpg

Column filter

Sets the columns that will be used as initial alarm filters. The user can select the desired column filter selecting from the drop-down list options: None, Text, SignalName, OpcItem, Name, HttpLink, HelpCause, HelpEffect, HelpRepair, GeneralCom, OccurrenceComment, AcknowledgeComment, NavigationSource, NavigationTarget, ExtendedProperty#.

Column_filter.jpg

Column filter pattern

Defines the pattern for filtering the specified column. This field also supports the "*" wildcard, as a placeholder, when defining filter patterns.

Column_filter_pattern.jpg

Columns

Sets the columns displayed by the alarm viewer table. By default, the following columns are defined: Priority, Status Text, Group, Type, and Text.

The table columns are featured as an array list, accessible by clicking the Expand array list button.

Columns.jpg

Furthermore, the following actions are available for each array item:

  • Move up move_up.jpg

  • Move down move_down.jpg

  • Clone clone_state.jpg

  • Remove remove_state.jpg

In order to add a new Array item, to the list of Alarm Group filters, the user can click the button Add Add_button.jpg.

Each array item allows the user the possibility to manually fill in the column name.

column_name.jpg

Gone alarm sound

Sets the path of the sound to be played for gone alarms. The sound can either be uploaded inside i4designer, or it can be an external link to a sound file. The property takes effect only if Play Sound is set to True.

Gone_alarm_sound.jpg

Loop

Sets whether to loop the alarm sound for incoming alarms. Only has an effect if the Play Sound property is set to True.

Lop.jpg

Max alarm count

Sets the maximum number of alarms to be retrieved.

Max_alarm_count.jpg

Maximum priority

Sets the maximum priority of the alarms to be displayed. This property acts as a priority filter.

Max_prio.jpg

Minimum priority

Sets the minimum priority of the alarms to be displayed. This property acts as a priority filter.

Minimum_priority.jpg

Online mode

Sets the alarm viewer component to display the online alarms, by setting the property to True.

Online_mode.jpg

Play sound

Enables or disables sounds for incoming Alarms. If this property is set to True, incoming Alarms will also play a sound.

Playsound.jpg

Rolling time window

Boolean value that shows if the time window is rolling and it is not fixed, if the property is set to True.

Rollting_time_window.jpg

Update rate

Sets the update rate in milliseconds. This property will be taken into consideration only if the Online Mode is enabled.

Update_rate.jpg

Palette

Acknowledged alarm background

Sets the background color of the alarms after they were acknowledged. The user can either manually type in the HEX color code or use the color picker tool. Applying this property will overwrite the default CSS class.

Ack_background.jpg

Acknowledged alarm foreground

Sets the foreground color of the alarms after they were acknowledged. The user can either manually type in the HEX color code or use the color picker tool. Applying this property will overwrite the default CSS class.

Ack_foreground.jpg

Acknowledged and gone alarm background

Sets the background color of the alarms after they were acknowledged and gone. The user can either manually type in the HEX color code or use the color picker tool. Applying this property will overwrite the default CSS class.

Ack_and_gone_background.jpg

Acknowledged and gone alarm foreground

Sets the foreground color of the alarms after they were acknowledged and gone. The user can either manually type in the HEX color code or use the color picker tool. Applying this property will overwrite the default CSS class.

Ack_and_gone_foreground.jpg

Active alarm background

Sets the background color of the alarms after they were active. The user can either manually type in the HEX color code or use the color picker tool. Applying this property will overwrite the default CSS class.

Active_alarm_background.jpg

Active alarm foreground

Sets the foreground color of the alarms after they were active. The user can either manually type in the HEX color code or use the color picker tool. Applying this property will overwrite the default CSS class.

Active_alarm_foreground.jpg

Border color

Sets the border color of the component. The user can either manually type in the HEX color code or use the color picker tool. Applying this property will overwrite the default CSS class.

Border_color.jpg

Buttons foreground

Sets the foreground color of the component's buttons. The user can either manually type in the HEX color code or use the color picker tool. Applying this property will overwrite the default CSS class.

Buttons_foreground.jpg

Buttons background

Sets the background color of the component's buttons. The user can either manually type in the HEX color code or use the color picker tool. Applying this property will overwrite the default CSS class.

Buttons_backgrround.jpg

Header background

Sets the background color of the component's header. The user can either manually type in the HEX color code or use the color picker tool. Applying this property will overwrite the default CSS class.

Header_background.jpg

Header foreground

Sets the foreground color of the component's header. The user can either manually type in the HEX color code or use the color picker tool. Applying this property will overwrite the default CSS class.

Header_foreground.jpg

Inactive alarm background

Sets the background color of the alarms after they were inactive. The user can either manually type in the HEX color code or use the color picker tool. Applying this property will overwrite the default CSS class.

Inactive_alarm_background.jpg

Inactive alarm foreground

Sets the foreground color of the alarms after they were inactive. The user can either manually type in the HEX color code or use the color picker tool. Applying this property will overwrite the default CSS class.

Inactive_alarm_foreground.jpg

Time Range

End offset

Selects the type of the end offset interval, allowing the user to chose between the drop-down list options: seconds, minutes, days, weeks, months, and years.

End_offset.jpg

End offset interval

Sets the numeric value for the end offset property, by manually filling in the desired value or by using the up / down arrows to increase or decrease the value.

End_offset_interval.jpg

Start offset

Selects the type of the start offset interval, allowing the user to chose between the drop-down list options: seconds, minutes, days, weeks, months, and years.

Start_offset.jpg

Start offset interval

Sets the numeric value for the start offset property, by manually filling in the desired value or by using the up / down arrows to increase or decrease the value.

Start_offset_interval.jpg

Appearance

Page size

Sets the number of visible alarms on a single page, by manually filling in the desired value or by using the up / down arrows to increase or decrease the value.

Page_size.jpg

Show buttons icons

Toggles the visibility of the button icons.

Show_buttons_icons.jpg

Show buttons label

Toggles the visibility of the text of the button.

Show_buttons_label.jpg

Show footer

Enables the possibility to switch between showing and hiding the Alarm table footer. If the property is set to True, the footer will be visible.

Show_footer.jpg

Show header

Enables the possibility to switch between showing and hiding the Alarm table header. If the property is set to True, the header will be visible.

Show_header.jpg

Show index column

Enables display of the index column, as the first table column, if the property is set to true.

Show_index_column.jpg

Typography

Header font family

Sets the font family of the component header, selecting from web-safe fonts available in the drop-down list.

Header_font_family.jpg

Header font size

Sets the size of the component's header font, using the up and down arrows to increase and decrease, or by manually typing the desired value.

Header_font_size.jpg

Header font-weight

Sets the weight of the component's header font, selecting from the drop-down list options: normal, 900 (fat), 800 (extra-bold), 700 (bold), 600 (semi-bold), 500 (medium), 400 (regular), 300 (light), 200 (extra-light) and 100 (thin).

header_font_weight.jpg

Style

Border width

Sets the width of the component's container. The value is specified in pixels.

Border_width.jpg

The top, bottom, left and right values can either be typed in the main property field or by using the Border width editor.

The Border width editor can be opened by clicking the Open button.

Border_width_editor.jpg

The components border width can be updated by setting the desired value and selecting the unit:

Options.jpg
  • Ems (em) - The em is a scalable unit. One em is equal to the current font size;

  • Pixels (px) - Pixels are are fixed-size units. One pixel is equal to one dot on the computer screen (the smallest division of a screen’s resolution).

  • Percent (%) - The percent unit is much like the “em” unit. When using the Percent unit the component remains fully scalable for mobile devices and accessibility.

Transform

Width

Sets the width of the component using the up and down arrows to increase and decrease, or by manually typing the desired pixels value.

The component width can also be adjusted directly on the design surface by means of mouse manipulation.

Control_width.jpg

Height

Sets the height of the component using the up and down arrows to increase and decrease, or by manually typing the desired pixels value.

The component height can also be adjusted directly on the design surface by means of mouse manipulation.

Control_height.jpg

Angle

Sets the rotation angle using the up and down arrows to increase and decrease, or by manually typing the desired degree value.

The component angle can also be adjusted directly on the design surface by means of mouse manipulation.

Angle.jpg

Left

Specifies the X (horizontal) coordinate of the component, on the grid, using the up and down arrows to increase and decrease, or by manually typing the desired value.

The component X coordinate can also be adjusted directly on the design surface by means of mouse manipulation.

Left.jpg

Top

Specifies the Y (vertical) coordinate of the component, on the grid, using the up and down arrows to increase and decrease, or by manually typing the desired value.

The component Y coordinate can also be adjusted directly on the design surface by means of mouse manipulation.

Top.jpg
Alarm State Manager
Abstract

Check out this article to learn more details about the i4designer Alarm state manager component and its properties.

The i4designer Alarm State Manager is a component that allows the users the possibility to change the processing state of alarms. Having an integrated security feature only the logged-in users having the appropriate set of permissions will be allowed to actually interact with the Alarm States.

The Alarm State Manager extension provides a straightforward filtering system, at run-time.

Alarm_state_manager.jpg

The Alarm State Manager component

Category

Property

Description

Common

Name

The name of the component, visible in other Designer locations (such as Page explorer).

Name_pipe.jpg

Object ID

Sets the Object ID of the component. By defining an object ID for the control, it can be passed as SignalPrefix when using parameter passing in navigation. The value of the Object ID can be used via a placeholder [OID] in other properties of this extension. The placeholder is supported in all signal properties, symbolic text, and states.

Example: Setpoint [OID]

Object_ID.jpg

Tooltip text

Optional tooltip text, that will be shown on mouseover at runtime.

Tooltip_text.jpg

Security

Project authorization

The project authorization required for displaying the component. If the logged in user does not have this project authorization, the component will not be visible or enabled (depending on the set Security access behavior). If the property is left empty, the component will be visible and enabled to all users. Further on, the user can also add multiple Project authorizations / Roles, separated by comma (,).

Project_authorization.jpg

Security access behavior

Sets the behavior of the element to either disabled (grayed out) or hidden, when the logged in user doesn't meet the conditions imposed by the Project authorization / Roles and System authorization / Permissions properties. In case both Project authorization / Roles and System authorization / Permissions properties are set, the logged user needs to meet both conditions to be able to see and utilize the component, at run-time. In case both Project authorization / Roles and System authorization / Permissions properties are set, the logged user needs to meet both conditions to be able to see and utilize the component, at run-time.

Security_access_behavior.jpg

System authorization

The system authorization required to display the component. If the logged in user does not have this system authorization, the component will not be visible or enabled (depending on the set Security access behavior). If the property is left empty, the component will be visible and enabled for all users. Further on, the user can also add multiple System authorizations / Permissions, separated by comma (,).

System_authorization.jpg

Layout

Layout mode

Sets the behavior of the component related to the page placement. The user can select the component layout from the options available in the drop-down list: Default, Dock top, Dock bottom, Dock left, Dock right, Stretched, Pin top left, Pin top center, Pin top right, Pin right middle, Pin bottom right, Pin bottom center, Pin bottom left, Pin left middle and Pin center.

Layout_mode.jpg

Margin

Sets the margin of the component relative to the drawing board area. The supported values are the standard CSS values for the margin.

The top, bottom, left and right values can either be typed in the main property field or by using the Margin editor.

Margin_small.jpg

The Margin editor can be opened by clicking the Open button.

Margin_large.jpg

The components margins can be updated by setting the margin value and selecting the desired unit:

  • Ems (em) - The em is a scalable unit. One em is equal to the current font size;

  • Pixels (px) - Pixels are are fixed-size units. One pixel is equal to one dot on the computer screen (the smallest division of a screen’s resolution).

  • Percent (%) - The percent unit is much like the “em” unit. When using the Percent unit the component remains fully scalable for mobile devices and accessibility.

Effects

Opacity

Sets the opacity of the component. The Opacity values should be numbers from 0 to 1 representing the opacity of the component. When the component has a value of 0 the element is completely invisible; a value of 1 is completely opaque (solid).

By default, the Component's opacity is set to value 1. Using the up / down arrows the user can control the opacity degree.

Opacity.jpg

By clicking the Open button the view is extended to display the Opacity slider.

Opacity_slider.jpg

Shadow color

Sets the color of the component shadow, either by manually typing in the HEX color code or by using the color picker tool. As the component colors are injected by the default CSS, changing the color will overwrite the CSS.

Shadow_color.jpg

Shadow offset X

Sets the offset of the shadow on the horizontal axis. The default value can be increased or decreased, either by manually typing in the desired value or by using the up and down arrows.

Shadow_offset_X.jpg

Shadow offset Y

Sets the offset of the shadow on the vertical axis. The default value can be increased or decreased, either by manually typing in the desired value or by using the up and down arrows.

Shadow_offset_Y.jpg

Shadow size

Sets the width of the component shadow. The default value can be increased or decreased, either by manually typing in the desired value or by using the up and down arrows.

Shadow_size.jpg

Configuration

Title text

Sets the text displayed by the component header.

Title_text.jpg

Alarms

Alarm tag

Sets a predefined tag used for filtering the alarms. The Alarm tag can be changed at run-time.

AlarmTag.jpg

Columns

Sets the columns displayed by the alarm state manager table. By default, the following columns are set: AlarmTag, SignalName, Text, Process, Display, and Action.

To view and manage the table columns, the user can click on the Expand array list button.

Columns.jpg

Furthermore, the following actions are available for each state:

  • Move up move_up.jpg

  • Move down move_down.jpg

  • Clone state clone_state.jpg

  • Remove state remove_state.jpg

Appearance

Header visibility

Enables or disables the visibility of the component's header.

Heeader_visiblity.jpg

Palette

Background color

Sets the background color of the component. The user can either manually type in the HEX color code or use the color picker tool. Applying this property will overwrite the default CSS class.

Background_color.jpg

Buttons background

Sets the background color of the component's buttons. The user can either manually type in the HEX color code or use the color picker tool. Applying this property will overwrite the default CSS class.

Buttons_backgrround.jpg

Buttons foreground

Sets the foreground color of the component's buttons. The user can either manually type in the HEX color code or use the color picker tool. Applying this property will overwrite the default CSS class.

Buttons_foreground.jpg

Foreground color

Sets the foreground color of the component. The user can either manually type in the HEX color code or use the color picker tool. Applying this property will overwrite the default CSS class.

Foreground_color.jpg

Header background

Sets the background color of the component's header. The user can either manually type in the HEX color code or use the color picker tool. Applying this property will overwrite the default CSS class.

Header_background.jpg

Header foreground

Sets the foreground color of the component's header. The user can either manually type in the HEX color code or use the color picker tool. Applying this property will overwrite the default CSS class.

Header_foreground.jpg

Transform

Angle

Sets the rotation angle using the up and down arrows to increase and decrease, or by manually typing the desired degree value.

The component angle can also be adjusted directly on the design surface by means of mouse manipulation.

Angle.jpg

Height

Sets the height of the component using the up and down arrows to increase and decrease, or by manually typing the desired pixels value.

The component height can also be adjusted directly on the design surface by means of mouse manipulation.

Control_height.jpg

Left

Specifies the X (horizontal) coordinate of the component, on the grid, using the up and down arrows to increase and decrease, or by manually typing the desired value.

The component X coordinate can also be adjusted directly on the design surface by means of mouse manipulation.

Left.jpg

Top

Specifies the Y (vertical) coordinate of the component, on the grid, using the up and down arrows to increase and decrease, or by manually typing the desired value.

The component Y coordinate can also be adjusted directly on the design surface by means of mouse manipulation.

Top.jpg

Width

Sets the width of the component using the up and down arrows to increase and decrease, or by manually typing the desired pixels value.

The component width can also be adjusted directly on the design surface by means of mouse manipulation.

Control_width.jpg