Skip to main content

i4designer Knowledge Base

Visualization

Abstract

Here are the i4designer Visualization components for your new project created on the i4scada platform.

The components in the Visualization category are a set of signal state indicators, allowing the user to create various visualization use cases, for signal values output. The components in this category are described individually in the upcoming articles.

Gauge
Abstract

The i4designer Gauge component is a graphical rich indicator that can be used for displaying speed or levels, measured by a Signal.

The Gauge is a graphical rich indicator component that can be used to display the speed or levels measured by a Signal.

gauge.jpg

The Gauge component

The Gauge component can feature a contrasting color scheme allowing the user to adjust the limits that separate the low and high-range zones (green, yellow, and red).

The below table lists all the Gauge component properties:

Category

Property

Description

Common

Name

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

Name.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 texts and states.

object_id.jpg

Tooltip text

Sets the component's tooltip, to be displayed when hovering the component, at run-time.

tooltip.jpg

Security

System authorization / Permission

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 (,).

This property is named "System authorization" for projects created on i4scada platform.

system_authorizations.jpg

This property is named "Permissions" for projects created on i4connected platform.

permissions.jpg

Project authorization / Role

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 (,).

This property is named "Project authorization" for projects created on i4scada platform.

project_authorization.jpg

This property is named "Role" for projects created on i4connected platform.

roles.jpg

Security access behavior

Sets the behavior of the element to either disable (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.

security_access_behavior.jpg

Layout

Layout mode

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.

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_1.jpg

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

margin_2.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 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_1.jpg

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

opacity_2.jpg

Shadow color

Sets the color of the component's shadow. The user can either manually type in the HEX color code or use the color picker tool.

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

Signal

Signal name

Sets the name of the signal that will be represented or manipulated by the component. The user can select the Signal from the list view, by clicking the Open file explorer button, or by directly typing in the name of the desired Signal.

signal_name_1.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 are 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

High range end

Sets the value for the top limit of the high-value range of the gauge.

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

high_range_end.jpg

High range start

Sets the value for the bottom limit of the high-value range of the gauge.

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

high_range_start.jpg

Is alphanumeric

Defines the signal value as alphanumeric. If true, the signal value will not be considered as pure numeric and can be displayed without taking into account the property format.

is_alphanumeric.jpg

Is datetime

Defines the signal value as DateTime. If true, the signal value will be considered as date time and will consider the value of the DateTime format property.

is_datetime.jpg

Low range end

Sets the value for the bottom limit of the mid-value range of the gauge. When the signal value is equal to the low range start value, the gauge color is changed to yellow.

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

low_range_end.jpg

NOTE: usually the value of this property is the same as the High range start value.

Low range start

Sets the value for the bottom limit of the mid-value range of the gauge. When the signal value is equal to the low range start value, the gauge color is changed to yellow.

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

low_range_start.jpg

NOTE: usually the value of this property is the same as the High range start value.

Max range

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

max_range.jpg

Min range

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

min_range.jpg

Value format

The format of the numeric values. For more details about the available numeric formats, the user can be found on the Github.

value_format.jpg

Appearance

Label padding

Sets the padding of the component label (defines the space between the label and its border).

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

label_padding_1.jpg

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

label_padding_2.jpg

The components padding can be updated by setting the value and the desired unit:

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

  • Pixels (px) - Pixels 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.

Show signal label

Sets the visibility of the signal value label, by toggling the switch as True or False.

show_signal_label.jpg

Range labels padding

Sets the range labels padding (defines the space between the range labels and their borders).

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

range_labels_padding.jpg

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

range_labels_padding_2.jpg

The components padding can be updated by setting the value and the desired unit:

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

  • Pixels (px) - Pixels 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.

Show min/max label

Sets the visibility of the min/max labels, by toggling the switch as True or False.

show_min_max_label.jpg

Show value label

Sets the visibility of the signal name label, by toggling the switch as True or False.

show_value_label.jpg

Palette

Arc stroke color

Sets the stroke color of the gauge arc. The user can either manually type in the HEX color code or use the color picker tool.

arc_stroke_color.jpg

Arc background

Sets the background color of the gauge arc. The user can either manually type in the HEX color code or use the color picker tool.

arc_background.jpg

Progress color

Sets the color of the gauge arc progress. The user can either manually type in the HEX color code or use the color picker tool.

progress_color.jpg

Label foreground

Sets the color if the signal name label. The user can either manually type in the HEX color code or use the color picker tool.

label_foreground.jpg

Value background

Sets the background color of the value label. The user can either manually type in the HEX color code or use the color picker tool.

value_background.jpg

Value foreground

Sets the color of the value label. The user can either manually type in the HEX color code or use the color picker tool.

value_foreground.jpg

Low range fill color

Sets the color of the background of the low range area. The user can either manually type in the HEX color code or use the color picker tool.

low_range_fill_color.jpg

High range fill color

Sets the background color of the high range area. The user can either manually type in the HEX color code or use the color picker tool.

high_range_fill_color.jpg

Range foreground

Sets the color of the min / max range labels. The user can either manually type in the HEX color code or use the color picker tool.

range_foreground.jpg

Style

Skin

Changes the overall appearance of the component. The skin of the component can be selected from the drop-down list: default, dark, and light.

skin.jpg

Icon

Icon class

Sets the CSS class for the icon of the component.

The icon can be selected from a large number of icons accessible by clicking the Open panel to see the icon list button.

The list of icons allows the user to toggle between actual icons and icon names. A simple filtering mechanism is also provided to support the user to easily pinpoint the desired icon.

icon_class.jpg

Typography

Signal name font size

Sets the font size for the signal name label, using the up and down arrows to increase and decrease, or by manually typing the desired value.

signal_name_font_size.jpg

Label font-weight

Sets the text thickness of the signal name label, selecting from the drop-down list options: 900 (fat), 800 (extra-bold), 700 (bold), 600 (semi-bold), 500 (medium), 400 (normal), 300 (light), 200 (extra-light) and 100 (thin).

label_font_weight.jpg

Value font size

Sets the font size of the signal value label, using the up and down arrows to increase and decrease, or by manually typing the desired value.

value_font_size.jpg

Value font weight

Sets the text thickness of the signal value label, selecting from the drop-down list options: 900 (fat), 800 (extra-bold), 700 (bold), 600 (semi-bold), 500 (medium), 400 (normal), 300 (light), 200 (extra-light) and 100 (thin).

value_font_weight.jpg

Ranges font size

Sets the font size of the range labels, using the up and down arrows to increase and decrease, or by manually typing the desired value.

ranges_font_size.jpg

Ranges font-weight

Sets the text thickness of the signal value label, selecting from the drop-down list options: 900 (fat), 800 (extra-bold), 700 (bold), 600 (semi-bold), 500 (medium), 400 (normal), 300 (light), 200 (extra-light) and 100 (thin).

ranges_font_weight.jpg

Transform

Width

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

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

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 pixel value.

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

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

Disable flip

Disables any flip transformation for this component. This keeps the component in the default position even when its container is flipped.

disable_flip.jpg

Horizontal flip

Flips the selected component horizontally.

horizontal_flip.jpg

Vertical flip

Flips the selected component vertically.

vertical_flip.jpg
Gauge with bands
Abstract

The i4designer Gauge with bands is an am-chart component that allows conditional formatting of different ranges.

The Gauge with bands component is a graphical rich indicator component that can be used to display various signal measurements. Unlike the Gauge component, the Gauge with bands allows conditional formatting of different ranges.

gauge_with_bands.jpg

The Gauge with bands component

The below table lists all the Gauge with bands component properties:

Category

Property

Description

Common

Name

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

Name.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 texts, and states.

object_id.jpg

Tooltip text

Sets the component's tooltip to be displayed when hovering the component, at run-time.

tooltip.jpg

Security

Project authorizations / Roles

This property is named "System authorizations" for projects created on i4scada platform.

project_authorization.jpg

This property is named "Roles" for projects created on the i4connected platform.

permissions.jpg

Security access behavior

Sets the behavior of the element to either disable (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.

security_access_behavior.jpg

System authorizations / Permissions

This property is named "System authorizations" for projects created on i4scada platform.

system_authorizations.jpg

This property is named "Permissions" for projects created on i4connected platform.

permissions.jpg

Layout

Layout mode

Sets the behavior of the element to either disabled (grayed out) or hidden, when the logged in user does not meet the conditions imposed by the Project authorizations / Roles and System authorizations / Permissions properties.

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_1.jpg

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

margin_2.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 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_1.jpg

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

opacity_2.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

Signal

Signal name

Sets the name of the signal that will be represented or manipulated by the component. The user can select the Signal from the list view, by clicking the Open file explorer button, or by directly typing the name of the desired Signal.

signal_name_1.jpg

Configuration

Chart Max Signal name

Sets the signal name used by the Gauge with bands component to provide the maximum gauge value. As soon as a signal is set for this property, the Max property will be ignored by the system.

The user can select the Signal from the list view, by clicking the Open file explorer button, or by directly typing the name of the desired Signal.

chart_max_signal_name.jpg

Chart Min Signal name

Sets the signal name used by the Gauge with bands component to provide the minimum gauge value. As soon as a signal is set for this property, the Min property will be ignored by the system.

The user can select the Signal from the list view, by clicking the Open file explorer button, or by directly typing the name of the desired Signal.

chart_min_signal_name.jpg

Max

Sets the maximum gauge arc value. The default value can be increased or decreased, either by manually typing the desired value or by using the up and down arrows.

max.jpg

Min

Sets the minimum gauge arc value. The default value can be increased or decreased, either by manually typing in the desired value or by using the up and down arrows.

min.jpg

Out of Range Label

Allows the user to set the text of the label displayed when the value of the gauge is out of range.

out_of_range.jpg

Ranges

Allows the user the possibility to define multiple ranges (bands), by defining the range value (From/To). Ranges can be configured to display different colors.

By clicking the Expand array list button, a list of modular color range properties is exposed. By default, the Gauge with bands provides three predefined ranges, which can be customized as desired by changing the values of the following properties:

ranges.jpg
  • From - sets the start of the range measurement.

  • From signal name - sets the name of the signal that will be used as the min of the range.

  • To signal name - sets the name of the signal that will be used as the max of the range.

  • Text color - sets the color displayed by the range text.

  • To - sets the end of the range measurement.

  • Title - sets the text displayed by the range.

  • Color - sets the color displayed by the range.

Unit

Sets the name of the Unit measured on the Gauge's scale. This is a free text field, therefore, the user can type in any desired value (e.g. "kH", "m/s", etc). The Unit will be displayed by the Gauge with bands component only if the Show unit label property is set to True.

unit.jpg

Text

Sets the text label, providing multiple details about the Gauge scope. This is a free text field, therefore, the user can type in any desired value (e.g. "temperature", "speed", etc). The Text label will be displayed only if the Show text label property is set to True.

text.jpg

Value format

The format of the numeric values. More details about the available numeric formats, can be found on the Github.

value_format.jpg

Appearance

End Angle

Sets the ending angle of the gauge radar (measured in degrees). Normally, a circular gauge ends exactly where it was started, forming a full 360 circle (at 270 degrees). You can use the End angle to end the circle at any desired point.

To obtain a perfect angle, the sum of the End Angle and Start Angle needs to be 360. However, the user can customize the radial axis of the gauge, using the up and down arrows, or by normally inserting the desired value.

end_angle.jpg

E.g. By setting the End angle to 180, will make the radar face end at the horizontal line to the left of the corner.

Gauge Type

Sets the gauge type, allowing the user to select the following options.

  • Speedometer - Sets the gauge to a default End Angle of 55 and Start Angle of -235.

  • ReverseU - Sets the gauge to a default End Angle of 0, and a Start Angle of -180.

  • Custom - allows the user to customize the Start/ End angle.

gauge_type.jpg

Range Size

Sets the size of the ranges of the gauge allowing the user to choose between Thin, Normal, Thick.

range_size.jpg

Show icon

Sets the visibility of the icon, by toggling the switch as True or False.

show_icon.jpg

Show text label

Sets the visibility of the text label, by toggling the switch as True or False.

show_text_label.jpg

Show unit label

Sets the visibility of the unit label, by toggling the switch as True or False.

show_unit_label.jpg

Show value label

Sets the visibility of the value label, by toggling the switch as True or False.

show_value_label.jpg

Start Angle

Sets the starting angle of the gauge angle (measured in degrees). Normally, a circular gauge begins at the top center (at -90 degrees). Setting the start angle to 0 will make the radial axis start horizontally to the right, as opposed to vertical.

To obtain a perfect circle, the sum of the Start angle and End angle needs to be 360. However, the user can customize the radial axis of the gauge, using the up and down arrows, or by normally inserting the desired value.

start_angle.jpg

E.g. If the Start angle is set to -90 degrees with an Eng angle of 0, a quarter of a circle gauge will be obtained.

Toggle Range Name

Allows the user the possibility to show the names of the applied ranges. Therefore, by enabling this property, the gauge will show the name of a range, when the Signal value is within the respective range. If no ranges are defined for the component, enabling this property will have no effect at run-time.

toggle_range_name.jpg

Palette

Icon color

Sets the color of the icon, if the Show icon is set to True. The user can either manually type in the HEX color code or use the color picker tool.

As the component colors are injected by the default CSS, changing the color will overwrite the CSS.

icon_color.jpg

Needle color

Sets the color of the needle. The user can either manually type in the HEX color code or use the color picker tool.

As the component colors are injected by the default CSS, changing the color will overwrite the CSS.

needle_color.jpg

Text color

Sets the color of the text label, if the Show text label is set to True. The user can either manually type in the desired HEX color code or use the color picker tool.

As the component colors are injected by the default CSS, changing the color will overwrite the CSS.

text_color.jpg

Unit color

Sets the color of the unit label, if the Show unit label is set to True. The user can either manually type in the HEX color code or use the color picker tool.

As the component colors are injected by the default CSS, changing the color will overwrite the CSS.

unit_color.jpg

Value color

Sets the color of the Signal value, if the Show value label was set to True. The user can either manually type in the HEX color code or use the color picker tool.

As the component colors are injected by the default CSS, changing the color will overwrite the CSS.

value_color.jpg

Icon

Icon class

Sets the CSS class for the icon of the component.

The icon can be selected from a large number of icons accessible by clicking the Open panel to see the icon list button.

icon_class.jpg

Icon size

Sets the size of the icon, using the up and down arrows to increase and decrease, or by manually typing the desired value.

icon_size.jpg

Typography

Font family

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

font_family.jpg

Font weight

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

font_weight.jpg

Needle size

Allows the user to select the size of the needle, using the up and down arrows to increase or decrease, or by manually typing the desired value.

needle_size.jpg

Needle start offset

Sets the starting position for the needle of the gauge, using the up and down arrows to increase or decrease, or by manually typing the desired value.

needle_start_offset.jpg

Position Offset

Allows the user to shift the position of the textual information, such as: Unit, Text, Signal Value, and Icon, by using the up and down arrows to increase or decrease, or by manually typing the desired value.

position_offset.jpg

Scale font size

Allows the user to adjust the size of the textual information displayed within the gauge's bands, using the up and down arrows to increase and decrease, or by manually typing the desired value.

scale_font_size.jpg

Text font size

Sets the size of the text label, using the up and down arrows to increase or decrease, or by manually typing the desired value.

text_font_size.jpg

Unit font size

Allows the user to adjust the size of the unit label, using the up and down arrows to increase and decrease, or by manually typing the desired value.

unit_font_size.jpg

Value font size

Sets the font size of the signal value label, using the up and down arrows to increase and decrease, or by manually typing the desired value.

value_font_size.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

Disable flip

Disables any flip transformation for this component. This keeps the component in the default position even when its container is flipped.

disable_flip.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.

height.jpg

Horizontal flip

Flips the selected component horizontally.

horizontal_flip.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.

top.jpg

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

Vertical flip

Flips the selected component vertically.

vertical_flip.jpg

Width

Sets the width of the component using the up and down arrows to increase or 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.

width.jpg
Sensor
Abstract

The i4designer Sensor is a value output component, condition-based capable to display various types of PID symbols.

The Sensor is a value output component capable to display various types of PID symbols, such as speed, temperature, flow, etc.

sensor.jpg

The Sensor component

This condition-based component features the following properties:

Category

Property

Description

Common

Name

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

Name.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.jpg

Security

System authorizations / Permissions

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 (,).

This property is named "System authorization" for projects created on i4scada platform.

system_authorizations.jpg

This property is named "Permissions" for projects created on i4connected platform.

permissions.jpg

Project authorizations / Roles

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 (,).

This property is named "Project authorization" for projects created on i4scada platform.

project_authorization.jpg

This property is named "Role" for projects created on i4connected platform.

roles.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.

security_access_behavior.jpg

Layout

Layout mode

Sets the number of the column where the component starts, measured in pixels. The default value can be increased or decreased, either by manually typing in the desired value or by using the up and down arrows.

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_1.jpg

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

margin_2.jpg

The component's 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 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_1.jpg

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

opacity_2.jpg

Shadow color

Sets the color of the component's shadow. The user can either manually type in the HEX color code or use the color picker tool.

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

Signal

Signal name

Sets the name of the signal that will be represented or manipulated by the component. The user can select the Signal from the list view, by clicking the Open file explorer button, or by directly typing in the name of the desired Signal.

signal_name_1.jpg

Setpoint signal name

Sets an optional signal name to be displayed by the sensor component. The setpoint value will be displayed as a secondary value label next to the sensor label value if a signal name is defined for this field.

The user can select the Signal from the list view, by clicking the Open file explorer button, or by directly typing in the name of the desired Signal.

setpoint_signal_name.jpg

Appearance

Sensor position

Sets the position of the sensor, relative to the component container. The sensor position can be selected from the options provided by the drop-down list: top left, top right, bottom left, bottom right, middle left, middle right.

sensor_position.jpg

Sensor shape

Sets the shape of the sensor, allowing the user to select from the drop-down list options: square, ellipse and pin.

sensor_shape.jpg

Pointer rotation

Sets the angle of the pointer relative to the sensor. The default value can be increased or decreased, either by manually typing in the desired value, or by using the up and down arrows.

pointer_rotation.jpg

Unit visibility

Sets the visibility of the unit value, by toggling between True and False values.

unit_visibility.jpg

Pin size

Sets the size of the sensor pin type. The default value can be increased or decreased, either by manually typing in the desired value, or by using the up and down arrows.

pin_size.jpg

Configuration

Value format

Sets the format of numerical values. The available numeric formats can be found under https://github.com/adamwdraper/Numeral-js.

value_format.jpg

Static unit text

Replaces the signal unit with the defined static string. The Unit label property has to be true to display the static unit text property.

static_unit_text.jpg

Status text

Allows the user to set the text displayed on the sensor.

status_text.jpg

Palette

Sensor background

Sets the background color of the sensor component. The user can either manually type in the HEX color code or use the color picker tool.

Sensor_background.jpg

Sensor foreground

Sets the foreground color of the sensor component. The user can either manually type in the HEX color code or use the color picker tool.

Sensor_foreground.jpg

Sensor border color

Sets the color for the border of the sensor. The user can either manually type in the HEX color code or use the color picker tool.

Sensor_border_color.jpg

Label background

Sets the background color for the label of the indicator. The user can either manually type in the HEX color code or use the color picker tool.

Label_background.jpg

Label foreground

Sets the foreground color for the label of the indicator. The user can either manually type in the HEX color code or use the color picker tool.

label_foreground.jpg

Label border color

Sets the border color of the indicator label. The user can either manually type in the HEX color code or use the color picker tool.

Label_border_color.jpg

Setpoint background

Sets the background color for the setpoint signal value of the sensor. The user can either manually type in the HEX color code or use the color picker tool.

Setpoint_background.jpg

Setpoint foreground

Sets the foreground color for the setpoint signal value of the sensor. The user can either manually type in the HEX color code or use the color picker tool.

Setpoint_foreground.jpg

Setpoint border color

Sets the color for the setpoint signal value of the sensor. The user can either manually type in the HEX color code or use the color picker tool.

Setpoint_border_color.jpg

States

Current States

A component can have multiple states, each carrying its own set of properties. The user can add states, by clicking the Add new state button.

current_states.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

State Name

By setting the Name property, the respective state will inherit that name, making the States easier to read.

name_of_state.jpg

State# Condition rule

The required rule in order for the extension to enter the state. The signal names must be always surrounded by percentage (%) characters, followed by logical operators and the Signal value.

For example: %Setpoint 1% != 0

The Condition rule can be either manually typed in or generated, using the State editor. The State editor can be opened by clicking the Expand array list button. This way, the user can easily generate a Condition rule, as follows:

  • Signal name - allows the user to select a Signal name for the Condition rule.

  • Comparator - allows the user to select the logical operator to construct the Condition rule.

  • Signal value - allows the user to add the Signal value, used to trigger the state condition.

condition_rule.jpg

State# CSS class name

Sets the behavior of the element when the logged-in user doesn't belong to the project authorization indicated by the projectAuthorization property. In this case, the element can be either disabled or hidden.

css_class_name.jpg

State# Symbolic text

The language-agnostic text (which is automatically translated) is displayed by the extension.

symbolic_text.jpg

State# Display state

Sets the component visibility and accessibility when the state evolution passed. The user can choose from the following options:

  • Normal - the component will be displayed when the state evolution passed.

  • Hidden - the component will be hidden when the state evolution passed.

  • Disabled - the component will be displayed as disabled when the state evolution passed.

display_state.jpg

State# Foreground

Sets the foreground color of the button. Applying this property will override the default css class.

foreground.jpg

State# Background

Sets the background color of the button. Applying this property will override the default css class.

background.jpg

State# Animation

Sets the component animation class when the state evolution passed. The user can select the animation class from the drop-down list options: Fade in, Fade out, or Blink.

animation_states.jpg

Load from assets

Lists the State assets defined under the Assets management page, of the global actions area.

A simple filtering mechanism is also provided to support the user to easily pinpoint the desired state asset.

After selecting an asset from the list view, the user can click the Load button to apply it.

load_from_assets.jpg

Save to assets

Allows the user the possibility to save a state asset defined during the current session. In this view, the user can either click the Generate name button to set a name for the asset or type in the name in the designated field.

By clicking the Apply button, the new state asset will be made available for further management actions in the Assets management page, of the global actions area. Also, the asset can be reused for other Component states.

save_to_assets.jpg

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.

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.

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

Disable flip

Disables any flip transformation for this component. This keeps the component in the default position even when its container is flipped.

disable_flip.jpg

Horizontal flip

Flips the selected component horizontally.

horizontal_flip.jpg

Vertical flip

Flips the selected component vertically.

vertical_flip.jpg
Signal information
Abstract

The i4designer Signal information is a data display component that can show various information about a selected signal.

The i4designer Signal information is a data display component that can show various information about a selected signal.

signal_information.jpg

The Signal information component

Category

Property

Description

Common

Name

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

Name.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.jpg

Security

System authorization / Permission

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 (,).

This property is named "System authorization" for projects created on i4scada platform.

system_authorizations.jpg

This property is named "Permissions" for projects created on i4connected platform.

permissions.jpg

Project authorization / Role

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 (,).

This property is named "Project authorization" for projects created on i4scada platform.

project_authorization.jpg

This property is named "Role" for projects created on i4connected platform.

roles.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.

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_1.jpg

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

margin_2.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 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_1.jpg

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

opacity_2.jpg

Shadow color

Sets the color of the component's shadow. The user can either manually type in the HEX color code or use the color picker tool.

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

Signal

Signal name

Sets the name of the signal that will be represented or manipulated by the component. The user can select the Signal from the list view, by clicking the Open file explorer button, or by directly typing in the name of the desired Signal.

signal_name_1.jpg

Log tag name

Sets the log tag that will be displayed by the component.

log_tag_name.jpg

Configuration

Property name

Sets the Property that will be displayed by the component at run-time. The Property name can be selected from the drop-down list options: unit, name, alias, description, active, min, max, and lastUpdate.

property_name.jpg

Typography

Font family

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

font_family.jpg

Font size

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

font_size.jpg

Font style

Sets the style of the component font, selecting from the drop-down list options: normal or italic.

font_style.jpg

Font weight

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

font_weight.jpg

Text alignment

Sets the alignment of the text on the component surface. The text alignment options can be selected from the drop-down list options: auto, left, right, and center (default).

text_alignment_3.jpg

Transform

Width

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

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

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 pixel value.

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

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

Disable flip

Disables any flip transformation for this component. This keeps the component in the default position even when its container is flipped.

disable_flip.jpg

Horizontal flip

Flips the selected component horizontally.

horizontal_flip.jpg

Vertical flip

Flips the selected component vertically.

vertical_flip.jpg
Signal information resolver
Abstract

The i4designer Signal information resolver is a data display component that can show various information about a selected signal.

The Signal Information Resolver component is used to pass a set of standard Signal parameters. The "Text" property of the Signal Information Resolver component uses placeholders written between square brackets. For example: [name], [description], [unit], [value], etc.

signal_information_resolver.jpg

The Signal information resolver

Category

Property

Description

Common

Name

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

Name.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.jpg

Security

System authorizations / Permissions

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 (,).

This property is named "System authorization" for projects created on i4scada platform.

system_authorizations.jpg

This property is named "Permissions" for projects created on i4connected platform.

permissions.jpg

Project authorizations / Roles

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 (,).

This property is named "Project authorization" for projects created on i4scada platform.

project_authorization.jpg

This property is named "Role" for projects created on i4connected platform.

roles.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.

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_1.jpg

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

margin_2.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 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_1.jpg

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

opacity_2.jpg

Shadow color

Sets the color of the component's shadow. The user can either manually type in the HEX color code or use the color picker tool.

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

Text

This property can be used to extract the following Signal information, written between square brackets: [name] [value] [unit] [description], etc., therefore, at run-time, the Signal name, current value, unit of measure, and description will be displayed.

By default, these components will have the Signal name format property populated with the “[name]” value. The user can add other available formats, such as [value] [unit] [description], with or without space between them, separated by any type of separator (e.g. dot, comma, or semicolon). The information will be visible at both run-time and design time.

text.jpg

Palette

Border color

Sets the color of the component border. The user can either manually type in the HEX color code or use the color picker tool.

As the color palette is injected into this component by means of the default CSS class, applying this property the CSS class settings will be overwritten.

border_color.jpg

Foreground

Sets the foreground color of the button. The user can either manually type in the HEX color code or use the color picker tool.

As the color palette is injected into this component by means of the default CSS class, applying this property the CSS class settings will be overwritten.

foreground_states.jpg

States

Background

Sets the background color of the component, either by manually typing in the HEX color code or by using the color picker tool. Applying this property will overwrite the default CSS class.

background_states.jpg

Typography

Font family

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

font_family.jpg

Font size

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

font_size.jpg

Font style

Sets the style for the component font, selecting from the drop-down list options: normal or italic.

font_style.jpg

Font weight

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

font_weight.jpg

Text alignment

Sets the alignment of the text on the component surface. The text alignment options can be selected from the drop-down list options: auto, left, right and center (default).

text_alignment.jpg

Appearance

Padding

Sets the padding of the component (defines the space between the component contents and its border).

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

padding_1.jpg

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

padding_2.jpg

The components padding can be updated by setting the value and the desired unit:

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

  • Pixels (px) - Pixels 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.

Style

Border radius

Sets the curvature of the border corners expressed in pixels or percentages. The border-radius value can be either manually typed in the designated field or increased/decreased by clicking the up and down arrows.

border_radius.jpg

Border width

Sets the width of the container border in pixels. The border width values can be either manually typed in the designated field or increased/decreased by clicking the up and down arrows.

border_width.jpg

The components border width can be updated by setting the values and the desired unit.

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

  • Pixels (px) - Pixels 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.

Miscellaneous

Border Style

The Border Style property specifies what kind of border to display.

The following values can be manually typed in:

border_style.jpg
  • solid - Defines a solid border;

  • dotted - Defines a dotted border;

  • dashed- Defines a dashed border;

  • solid - Defines a solid border;

  • double - Defines a double border;

  • groove - Defines a 3D grooved border. The effect depends on the border-color value;

  • ridge - Defines a 3D ridged border. The effect depends on the border-color value;

  • inset - Defines a 3D outset border. The effect depends on the border-color value;

  • outset - Defines a 3D outset border. The effect depends on the border-color value;

  • none - Defines no border;

  • hidden - Defines a hidden border.

Signal

Signal name

Sets the name of the signal that will be represented or manipulated by the component. The user can select the Signal from the list view, by clicking the Open file explorer button, or by directly typing in the name of the desired Signal.

signal_name_1.jpg

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.

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.

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

Disable flip

Disables any flip transformation for this component. This keeps the component in the default position even when its container is flipped.

disable_flip.jpg

Horizontal flip

Flips the selected component horizontally.

horizontal_flip.jpg

Vertical flip

Flips the selected component vertically.

vertical_flip.jpg
State indicator
Abstract

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

The State indicator component is a condition-based indicator component that can display multiple states based on signal values.

state_indicatior.jpg

The State indicator component

Check out the table of properties used to configure the State indicator component:

Category

Property

Description

Common

Name

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

Name.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.jpg

Security

System authorizations / Permissions

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 (,).

This property is named "System authorization" for projects created on i4scada platform.

system_authorizations.jpg

This property is named "Permissions" for projects created on i4connected platform.

permissions.jpg

Project authorizations / Roles

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 (,).

This property is named "Project authorization" for projects created on i4scada platform.

project_authorization.jpg

This property is named "Role" for projects created on i4connected platform.

roles.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 authorizations / Roles and System authorizations / 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_1.jpg

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

margin_2.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 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_1.jpg

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

opacity_2.jpg

Shadow color

Sets the color of the component's shadow. The user can either manually type in the HEX color code or use the color picker tool.

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

Label text

Sets the text of the control label, visible at both design and run-time.

label_text.jpg

Typography

Font size

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

font_size.jpg

Icon font size

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

icon_font_size.jpg

Text alignment

Sets the alignment of the text on the component surface. The text alignment options can be selected from the drop-down list options: auto, left (default), right and center.

text_alignment_3.jpg

Appearance

Display label

Enables or disables the visibility of the component label.

display_label.jpg

Indicator position

Sets the position of the indicator relative to the component container, by selecting from the drop-down list options: left (default), right, top and bottom.

indicator_position.jpg

Indicator size

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

indicator_size.jpg

Palette

Indicator background

Sets the background color of the indicator. The user can either manually type in the HEX color code or use the color picker tool.

As the color palette is injected into this component by means of the default CSS class, applying this property the CSS class settings will be overwritten.

Indicator_background.jpg

Indicator border color

Sets the border color of the indicator. The user can either manually type in the HEX color code or use the color picker tool.

As the color palette is injected into this component by means of the default CSS class, applying this property the CSS class settings will be overwritten.

Indicator_border_color.jpg

Label background

Sets the background color of the indicator label. The user can either manually type in the HEX color code or use the color picker tool.

As the color palette is injected into this component by means of the default CSS class, applying this property the CSS class settings will be overwritten.

label_background.jpg

Label foreground

Sets the foreground color of the indicator label. The user can either manually type in the HEX color code or use the color picker tool.

As the color palette is injected into this component by means of the default CSS class, applying this property the CSS class settings will be overwritten.

label_foreground.jpg

Label border color

Sets the border color of the indicator label. The user can either manually type in the HEX color code or use the color picker tool.

As the color palette is injected into this component by means of the default CSS class, applying this property the CSS class settings will be overwritten.

label_border_color.jpg

Icon

Icon class

Sets the CSS class for the icon of the component.

The icon can be selected from a large number of icons accessible by clicking the Open panel to see the icon list button.

The list of icons allows the user to toggle between actual icons and icon names. A simple filtering mechanism is also provided to support the user to easily pinpoint the desired icon.

icon_class.jpg

States

Current States

A component can have multiple states, each carrying its own set of properties. The user can add states, by clicking the Add new state button.

current_states.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

State Name

By setting the Name property, the respective state will inherit that name, making the States easier to read.

name_of_state.jpg

State# Condition rule

The required rule in order for the extension to enter the state. The signal names must be always surrounded by percentage (%) characters, followed by logical operators and the Signal value.

For example: %Setpoint 1% != 0

The Condition rule can be either manually typed in or generated, using the State editor. The State editor can be opened by clicking the Expand array list button. This way, the user can easily generate a Condition rule, as follows:

  • Signal name - allows the user to select a Signal name for the Condition rule.

  • Comparator - allows the user to select the logical operator to construct the Condition rule.

  • Signal value - allows the user to add the Signal value, used to trigger the state condition.

condition_rule.jpg

State# CSS class name

Sets the behavior of the element when the logged-in user doesn't belong to the project authorization indicated by the projectAuthorization property. In this case, the element can be either disabled or hidden.

css_class_name.jpg

State# Symbolic text

The language-agnostic text (which is automatically translated) is displayed by the extension.

symbolic_text.jpg

State# Display state

Sets the component visibility and accessibility when the state evolution passed. The user can choose from the following options:

  • Normal - the component will be displayed when the state evolution passed.

  • Hidden - the component will be hidden when the state evolution passed.

  • Disabled - the component will be displayed as disabled when the state evolution passed.

display_state.jpg

State# Foreground

Sets the foreground color of the button. Applying this property will override the default CSS class.

foreground_states.jpg

State# Background

Sets the background color of the button. Applying this property will override the default CSS class.

background_states.jpg

State# Animation

Sets the component animation class when the state evolution passed. The user can select the animation class from the drop-down list options: Fade in, Fade out or Blink.

animation.jpg

Load from assets

Lists the State assets defined under the Assets management page, of the global actions area.

A simple filtering mechanism is also provided to support the user to easily pinpoint the desired state asset.

After selecting an asset from the list view, the user can click the Load button to apply it.

load_from_assets.jpg

Save to assets

Allows the user the possibility to save a state asset defined during the current session. In this view, the user can either click the Generate name button to set a name for the asset or type in the name in the designated field.

By clicking the Apply button, the new state asset will be made available for further management actions in the Assets management page, of the global actions area. Also, the asset can be reused for other Component states.

save_to_assets.jpg

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.

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.

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.

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.

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.

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.

top.jpg

Disable flip

Disables any flip transformation for this component. This keeps the component in the default position even when its container is flipped.

disable_flip.jpg

Horizontal flip

Flips the selected component horizontally.

horizontal_flip.jpg

Vertical flip

Flips the selected component vertically.

vertical_flip.jpg
Signal value
Abstract

Check out this article to learn more details about the i4designer Signal value component and the properties providing its functionality.

The Signal value component is a data display control that can show the value of a selected signal.

signal_value.jpg

The Signal value component

Category

Property

Description

Common

Name

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

Name.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.jpg

Security

System authorizations / Permissions

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 (,).

This property is named "System authorization" for projects created on i4scada platform.

system_authorizations.jpg

This property is named "Permissions" for projects created on i4connected platform.

permissions.jpg

Project authorizations / Roles

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 (,).

This property is named "Project authorization" for projects created on i4scada platform.

project_authorization.jpg

This property is named "Role" for projects created on i4connected platform.

roles.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.

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_1.jpg

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

margin_2.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 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_1.jpg

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

opacity_2.jpg

Shadow color

Sets the color of the component's shadow. The user can either manually type in the HEX color code or use the color picker tool.

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

Value format

The format of the numeric values. For more details about the available numeric formats, the user can be found on the Github.

value_format.jpg

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

Is alphanumeric

Defines the signal value as alphanumeric. If true, the signal value will not be considered as pure numeric and can be displayed without taking into account the property format.

is_alphanumeric.jpg

Is datetime

Defines the signal value as DateTime. If true, the signal value will be considered as date time and will consider the value of the DateTime format property.

is_datetime.jpg

Signal changed duration

Sets the amount of time required by the additional CSS class, in order to apply changes when signal value is changed. The value can be either manually typed in the designated field or increased/decreased by clicking the up and down arrows.

signal_changed_duration.jpg

Signal changed class

Sets the CSS class that will be applied to the component when the designated signal value is changed. The CSS class can be selected from the drop-down list, providing the following options: none, normal, danger, hand, warning, or running.

signal_changed_class.jpg

Signal

Array delimiter

Defines the delimiter of the values in the array. By default, the comma delimiter is set.

array_delimiter.jpg

Array index

Defines the index of the displayed value from the array.

array_index.jpg

Is array

Sets the values as an array. If the value is true, the property format will no longer be taken into account.

is_array.jpg

Signal value factor

Sets the number that the signal value is multiplied with, using the up and down arrows to increase and decrease, or by manually typing the desired value.

signal_value_factor.jpg

Signal name

Sets the name of the signal that will be represented or manipulated by the component. The user can select the Signal from the list view, by clicking the Open file explorer button, or by directly typing in the name of the desired Signal.

signal_name_1.jpg

Palette

Background color

Sets the background color of the component. As the color palette is injected into this component by means of the default CSS class, applying this property the CSS class settings will be overwritten.

background_color.jpg

Foreground

Sets the foreground color of the component. As the color palette is injected into this component by means of the default CSS class, applying this property the CSS class settings will be overwritten.

foreground.jpg

Border color

Sets the color of the component border. As the color palette is injected into this component by means of the default CSS class, applying this property the CSS class settings will be overwritten.

border_color.jpg

Style

Border radius

Sets the curvature of the border corners expressed in pixels or percentages. The border-radius value can be either manually typed in the designated field or increased/decreased by clicking the up and down arrows.

This field supports the standard CSS notation.

border_radius.jpg

Border width

Sets the width of the container border in pixels. The border width value can be either manually typed in the designated field or increased/decreased by clicking the up and down arrows.

border_width.jpg

The component's border width can be updated by setting the value and the desired unit:

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

  • Pixels (px) - Pixels are fixes-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.

Typography

Font size

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

font_size.jpg

Text alignment

Sets the alignment of the text on the component surface. The text alignment options can be selected from the drop-down list options: auto, left, right and center (default).

text_alignment_2.jpg

Font weight

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

font_weight.jpg

Font family

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

font_family.jpg

Appearance

Padding

Sets the padding of the component (defines the space between the component contents and its border).

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

padding_1.jpg

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

padding_2.jpg

The components padding can be updated by setting the value and the desired unit:

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

  • Pixels (px) - Pixels 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.

States

Current States

A component can have multiple states, each carrying its own set of properties. The user can add states, by clicking the Add new state button.

current_states.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

State Name

By setting the Name property, the respective state will inherit that name, making the States easier to read.

name_of_state.jpg

State# Condition rule

The required rule in order for the extension to enter the state. The signal names must be always surrounded by percentage (%) characters, followed by logical operators and the Signal value.

For example: %Setpoint 1% != 0

The Condition rule can be either manually typed in or generated, using the State editor. The State editor can be opened by clicking the Expand array list button. This way, the user can easily generate a Condition rule, as follows:

  • Signal name - allows the user to select a Signal name for the Condition rule.

  • Comparator - allows the user to select the logical operator to construct the Condition rule.

  • Signal value - allows the user to add the Signal value, used to trigger the state condition.

condition_rule.jpg

State# CSS class name

Sets the behavior of the element when the logged-in user doesn't belong to the project authorization indicated by the projectAuthorization property. In this case, the element can be either disabled or hidden.

css_class_name.jpg

State# Symbolic text

The language-agnostic text (which is automatically translated) is displayed by the extension.

symbolic_text.jpg

State# Display state

Sets the component visibility and accessibility when the state evolution passed. The user can choose from the following options:

  • Normal - the component will be displayed when the state evolution passed.

  • Hidden - the component will be hidden when the state evolution passed.

  • Disabled - the component will be displayed as disabled when the state evolution passed.

display_state.jpg

State# Foreground

Sets the foreground color of the button. Applying this property will override the default CSS class.

foreground_states.jpg

State# Background

Sets the background color of the button. Applying this property will override the default CSS class.

background_states.jpg

State# Animation

Sets the component animation class when the state evolution passed. The user can select the animation class from the drop-down list options: Fade in, Fade out or Blink.

animation.jpg

Load from assets

Lists the State assets defined under the Assets management page, of the global actions area.

A simple filtering mechanism is also provided to support the user to easily pinpoint the desired state asset.

After selecting an asset from the list view, the user can click the Load button to apply it.

load_from_assets.jpg

Save to assets

Allows the user the possibility to save a state asset defined during the current session. In this view, the user can either click the Generate name button to set a name for the asset or type in the name in the designated field.

By clicking the Apply button, the new state asset will be made available for further management actions in the Assets management page, of the global actions area. Also, the asset can be reused for other Component states.

save_to_assets.jpg

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.

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.

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

Disable flip

Disables any flip transformation for this component. This keeps the component in the default position even when its container is flipped.

disable_flip.jpg

Horizontal flip

Flips the selected component horizontally.

horizontal_flip.jpg

Vertical flip

Flips the selected component vertically.

vertical_flip.jpg
Image
Abstract

Check out this article in order to learn more details about the i4designer Image component and the properties provided by it.

The i4designer Image component is a data display component that can show an image selected by the user. The Image component is fully customizable, by using the below-listed properties:

image.jpg

The Image component

Category

Property

Description

Common

Name

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

Name.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.jpg

Security

System authorization / Permission

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 (,).

This property is named "System authorization" for projects created on i4scada platform.

system_authorizations.jpg

This property is named "Permissions" for projects created on i4connected platform.

permissions.jpg

Project authorization / Role

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 (,).

This property is named "Project authorization" for projects created on i4scada platform.

project_authorization.jpg

This property is named "Role" for projects created on i4connected platform.

roles.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.

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_1.jpg

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

margin_2.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 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_1.jpg

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

opacity_2.jpg

Image filter

Sets the CSS filters of the image.

image_filter.jpg

Shadow color

Sets the color of the component's shadow. The user can either manually type in the HEX color code or use the color picker tool.

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

Image

Allows selection of the image source. By clicking the Upload image button, the user can either drop files in the designated area or click to upload the image from the local machine. Additionally, if any images have been previously uploaded they will be displayed under the content folder and reused.

The image upload accepts files of type "jpeg", "jpg", "jpe", "gif", "png", "svg", "ico", "webp", up to 5 MB in size.

image.jpg

Appearance

Background position

Sets the background position of the image used by the component, selecting from the drop-down list options:

  • center (default) - background image is positioned centrally

  • left - background image is positioned to the left

  • right - background image is positioned to the right

  • top - background image is positioned at the top

  • bottom - background image is positioned at the bottom

  • initial - background image uses the value of the previously saved selection.

background_position.jpg

Padding

Sets the padding of the component (defines the space between the component contents and its border).

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

padding_1.jpg

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

padding_2.jpg

The components padding can be updated by setting the value and the desired unit:

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

  • Pixels (px) - Pixels 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.

Background repeat

Sets the background-repeat mode of the image used by the component, selecting from the drop-down list options:

  • contain (default) - resizes the background image to make sure that the image is fully visible.

  • auto - sets the background image to its original size.

  • cover - resizes the background image to make sure the image is fully visible.

  • inherit - gets the property from the parent element

  • initial - gets the value of the previously saved selection.

  • unset - acts as either "inherit" or "initial". It will act as inherit if the parent has a value that matches, otherwise it will act as initial.

background_repeat.jpg

Background size

Sets the size of the background, reported to the image used by the component, selecting from the drop-down list options:

background_size.jpg

Palette

Background color

Sets the background color. 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. Sets the background color. 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. Sets the background color. 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_states.jpg

Border color

Sets the color of the component border. 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

Style

Border width

Sets the width of the container border in pixels. The border width value can be either manually typed in the designated field or increased/decreased by clicking the up and down arrows.

border_width.jpg

Navigation

Is internal link

Defines if by clicking on an image, the link navigates to an internal or an external page.

is_internal_link.jpg

Link

Sets the URL of the navigation button, by either manually filing in the URL in the designated field, or by selecting the internal page.

For an easier management of the project pages, the "Navigate to page" button allows the user to open a tab showing the linked page.

link.jpg

States

Current States

A component can have multiple states, each carrying its own set of properties. The user can add states, by clicking the Add new state button.

current_states.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

State Name

By setting the Name property, the respective state will inherit that name, making the States easier to read.

name_of_state.jpg

State# Condition rule

The required rule in order for the extension to enter the state. The signal names must be always surrounded by percentage (%) characters, followed by logical operators and the Signal value.

For example: %Setpoint 1% != 0

The Condition rule can be either manually typed in or generated, using the State editor. The State editor can be opened by clicking the Expand array list button. This way, the user can easily generate a Condition rule, as follows:

  • Signal name - allows the user to select a Signal name for the Condition rule.

  • Comparator - allows the user to select the logical operator to construct the Condition rule.

  • Signal value - allows the user to add the Signal value, used to trigger the state condition.

condition_rule.jpg

State# CSS class name

Sets the behavior of the element when the logged-in user doesn't belong to the project authorization indicated by the projectAuthorization property. In this case, the element can be either disabled or hidden.

css_class_name.jpg

State# Symbolic text

The language-agnostic text (which is automatically translated) is displayed by the extension.

symbolic_text.jpg

State# Display state

Sets the component visibility and accessibility when the state evolution passed. The user can choose from the following options:

  • Normal - the component will be displayed when the state evolution passed.

  • Hidden - the component will be hidden when the state evolution passed.

  • Disabled - the component will be displayed as disabled when the state evolution passed.

display_state.jpg

State# Foreground

Sets the foreground color of the button. Applying this property will override the default CSS class.

foreground_states.jpg

State# Background

Sets the background color of the button. Applying this property will override the default CSS class.

background_states.jpg

State# Animation

Sets the component animation class when the state evolution passed. The user can select the animation class from the drop-down list options: Fade in, Fade out or Blink.

animation.jpg

Load from assets

Lists the State assets defined under the Assets management page, of the global actions area.

A simple filtering mechanism is also provided to support the user to easily pinpoint the desired state asset.

After selecting an asset from the list view, the user can click the Load button to apply it.

load_from_assets.jpg

Save to assets

Allows the user the possibility to save a state asset defined during the current session. In this view, the user can either click the Generate name button to set a name for the asset or type in the name in the designated field.

By clicking the Apply button, the new state asset will be made available for further management actions in the Assets management page, of the global actions area. Also, the asset can be reused for other Component states.

save_to_assets.jpg

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.

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.

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

Disable flip

Disables any flip transformation for this component. This keeps the component in the default position even when its container is flipped.

disable_flip.jpg

Horizontal flip

Flips the selected component horizontally.

horizontal_flip.jpg

Vertical flip

Flips the selected component vertically.

vertical_flip.jpg
State image
Abstract

The i4designer State image component is described by this article along with the component properties and their main functions.

The i4designer State image is a condition-based component that can display multiple images in multiple states, based on signal value. The below table describes each property available for this component:

state_image.jpg

The State image component

Category

Property

Description

Common

Name

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

Name.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 texts, and states.

Example: Setpoint [OID]

object_id.jpg

Tooltip text

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

tooltip.jpg

Security

System authorizations / Permissions

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 (,).

This property is named "System authorization" for projects created on i4scada platform.

system_authorizations.jpg

This property is named "Permissions" for projects created on i4connected platform.

permissions.jpg

Project authorizations / Roles

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 (,).

This property is named "Project authorization" for projects created on i4scada platform.

project_authorization.jpg

This property is named "Role" for projects created on i4connected platform.

roles.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.

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_1.jpg

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

margin_2.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 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_1.jpg

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

opacity_2.jpg

Image filter

Sets the CSS filters of the image.

image_filter.jpg

Shadow color

Sets the color of the component's shadow. The user can either manually type in the HEX color code or use the color picker tool.

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

Palette

Background color

Sets the background color. 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

Border color

Sets the color of the component border. 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

Appearance

Background position

Sets the background-position of the component. The positioning can be selected from the drop-down list options:

  • center (default) - background image is positioned centrally

  • left - background image is positioned to the left

  • right - background image is positioned to the right

  • top - background image is positioned to the top

  • bottom - background image is positioned to the bottom

  • initial - background image uses the value of the previously saved selection.

background_position.jpg

Padding

Sets the padding of the component (defines the space between the component contents and its border).

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

padding_1.jpg

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

padding_2.jpg

The components padding can be updated by setting the value and the desired unit:

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

  • Pixels (px) - Pixels 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.

Background repeat

Sets the background-repeat mode of the image used by the component, selecting from the drop-down list options:

  • no-repeat (default) - the image will not be repeated

  • repeat - the image will be repeated both horizontally and vertically

  • repeat-x - the image will be repeated horizontally

  • repeat-y - the image will be repeated vertically

  • initial - gets the value of the previously saved selection.

background_repeat.jpg

Background size

Sets the size of the background, reported to the image used by the component, selecting from the drop-down list options:

  • contain (default) - resizes the background image to make sure that the image is fully visible.

  • auto - sets the background image to its original size.

  • cover - resizes the background image to make sure the image is fully visible.

  • inherit - gets the property from the parent element

  • initial - gets the value of the previously saved selection.

  • unset - acts as either "inherit" or "initial". It will act as inherit if the parent has a value that matches, otherwise it will act as initial.

background_size.jpg

Style

Border width

Sets the width of the container border in pixels. The border width value can be either manually typed in the designated field or increased/decreased by clicking the up and down arrows.

border_width.jpg

The component's border width can be updated by setting the value and the desired unit:

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

  • Pixels (px) - Pixels are fixes-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.

Configuration

Image

Allows selection of the image source. By clicking the Upload image button, the user can either drop files in the designated area or click to upload the image from the local machine. Additionally, if any images have been previously uploaded they will be displayed under the content folder and reused.

The image upload accepts files of type "jpeg", "jpg", "jpe", "gif", "png", "svg", "ico", "webp", up to 5 MB in size.

image.jpg

States

Current States

A component can have multiple states, each carrying its own set of properties. The user can add states, by clicking the Add new state button.

current_states.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

State Name

By setting the Name property, the respective state will inherit that name, making the States easier to read.

name_of_state.jpg

State# Condition rule

The required rule in order for the extension to enter the state. The signal names must be always surrounded by percentage (%) characters, followed by logical operators and the Signal value.

For example: %Setpoint 1% != 0

The Condition rule can be either manually typed in or generated, using the State editor. The State editor can be opened by clicking the Expand array list button. This way, the user can easily generate a Condition rule, as follows:

  • Signal name - allows the user to select a Signal name for the Condition rule.

  • Comparator - allows the user to select the logical operator to construct the Condition rule.

  • Signal value - allows the user to add the Signal value, used to trigger the state condition.

condition_rule.jpg

State# CSS class name

Sets the behavior of the element when the logged-in user doesn't belong to the project authorization indicated by the projectAuthorization property. In this case, the element can be either disabled or hidden.

css_class_name.jpg

State# Symbolic text

The language-agnostic text (which is automatically translated) is displayed by the extension.

symbolic_text.jpg

State# Display state

Sets the component visibility and accessibility when the state evolution passed. The user can choose from the following options:

  • Normal - the component will be displayed when the state evolution passed.

  • Hidden - the component will be hidden when the state evolution passed.

  • Disabled - the component will be displayed as disabled when the state evolution passed.

display_state.jpg

State# Foreground

Sets the foreground color of the button. Applying this property will override the default CSS class.

Foreground.jpg

State# Background

Sets the background color of the button. Applying this property will override the default CSS class.

background_states.jpg

State# Animation

Sets the component animation class when the state evolution passed. The user can select the animation class from the drop-down list options: Fade in, Fade out or Blink.

animation_states.jpg

Load from assets

Lists the State assets defined under the Assets management page, of the global actions area.

A simple filtering mechanism is also provided to support the user to easily pinpoint the desired state asset.

After selecting an asset from the list view, the user can click the Load button to apply it.

load_from_assets.jpg

Save to assets

Allows the user the possibility to save a state asset defined during the current session. In this view, the user can either click the Generate name button to set a name for the asset or type in the name in the designated field.

By clicking the Apply button, the new state asset will be made available for further management actions in the Assets management page, of the global actions area. Also, the asset can be reused for other Component states.

save_to_assets.jpg

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.

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.

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

Disable flip

Disables any flip transformation for this component. This keeps the component in the default position even when its container is flipped.

disable_flip.jpg

Horizontal flip

Flips the selected component horizontally.

horizontal_flip.jpg

Vertical flip

Flips the selected component vertically.

vertical_flip.jpg
Svg path
Abstract

Check out this article in order to learn more details about the i4designer Svg path component and the properties used by it.

The i4designer Svg path component is a flexible value display and status component based on vector data and optional URL navigation.

svg_path.jpg

The Svg path component

Category

Property

Description

Common

Name

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

Name.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.jpg

Security

System authorizations/ Permissions

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 (,).

This property is named "System authorization" for projects created on i4scada platform.

system_authorizations.jpg

This property is named "Permissions" for projects created on i4connected platform.

This property is named "Permissions" for projects created on i4connected platform.

Project authorizations / Roles

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 (,).

This property is named "Project authorization" for projects created on i4scada platform.

project_authorization.jpg

This property is named "Role" for projects created on i4connected platform.

roles.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.

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_1.jpg

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

margin_2.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 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_1.jpg

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

opacity_2.jpg

Shadow color

Sets the color of the component's shadow. The user can either manually type in the HEX color code or use the color picker tool.

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

Hover animation

Allows the possibility to enable the hover animationif the property is set to True.

hover_animation.jpg

Path CSS Class

Sets an optional class name for the SVG path.

path_css_class.jpg

Path data

Sets the vector data for the path having the following command available:

  • M = moveto

  • L = lineto

  • H = horizontal lineto

  • V = vertical lineto

  • C = curveto

  • S = smooth curveto

  • Q = quadratic Bézier curve

  • T = smooth quadratic Bézier curveto

  • A = elliptical Arc

  • Z = closepath

All of the commands above can also be expressed with lower letters. Capital letters mean absolutely positioned, lower cases mean relatively positioned.

For example: M0 0 H100 V100 H0 L 0 0 Z

path_data.jpg

View box

Sets the size of the viewBox, which are "the points" seen on the drawing area, represented by 4 values separated by white space or commas (min x, min y, width, and height).

For example: 0 0 100 100

viewbox.jpg

Shape

Sets the SVG shape, selecting from the drop-down list items: none, triangle, rectangle, and ellipse.

shape.jpg

Navigation

Is internal link

Allows the possibility to set the link target to internal or external.

If the property is set to False, the user can manually fill in the target URL, to the Link property.

For easier management of the project pages, the "Navigate to page" button allows the user to open a tab showing the linked page.

is_internal_link_1.jpg

If the property is set to True a current project page can be set as a target. The user can select the project page for the Link property or manually type in the path pointing to it.

is_internal_link_2.jpg

Navigation parameters

Allows the possibility to add additional parameters for the navigation, by clicking the Add new item button.

navigation_parameters_1.jpg

In order to see the list of items, the user can click on the Expand array list button.

navigation_parameters_2.jpg

Furthermore, the following actions are available for each item:

  • Move up move_up.jpg

  • Move down move_down.jpg

  • Clone Clone_param.jpg

  • Remove item remove_state.jpg

Write item# Parameter name

Defines the name of the parameter(s) that will be passed to the source page (e.g. "panelSize").

navigation_name.jpg

Write item# Value

Defines the value of the inserted parameter(s) that will be passed to the source page (e.g. - when passing the size of the panel - sm, md, lg, xlg, xxlg, 3xlg, 6xlg).

parameter_value.jpg

Navigation url

The URL to an internal or external page, that will be displayed at run-time when clicking the component.

nav_url.jpg

Appearance

Aspect ratio

Sets the aspect ratio of the SVG shape, setting it to stretch (xMidYMid - X-axis middle and Y-axis middle) or uniform scaling.

aspect_ratio.jpg

Padding

Sets the padding of the component (defines the space between the component contents and its border).

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

padding_1.jpg

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

padding_2.jpg

The components padding can be updated by setting the value and the desired unit:

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

  • Pixels (px) - Pixels 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.

Palette

Fill

Sets the fill color of the SVG element. The user can either manually type in the HEX color code or use the color picker tool.

fill.jpg

Hover fill color

Sets the fill color of the SVG hover element. The user can either manually type in the HEX color code or use the color picker tool.

hover_fill_color.jpg

Hover stroke color

Sets the stroke color of the SVG hover element. The user can either manually type in the HEX color code or use the color picker tool.

hover_stroke_color.jpg

Stroke color

Sets the stroke color of the SVG element. The user can either manually type in the HEX color code or use the color picker tool.

stroke_color.jpg

Style

Stroke width

Sets the stroke width of the graphical component. The width can be either manually typed in the designated field or increased/decreased by clicking the up and down arrows.

stroke_width.jpg

States

Current States

A component can have multiple states, each carrying its own set of properties. The user can add states, by clicking the Add new state button.

current_states.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

State Name

By setting the Name property, the respective state will inherit that name, making the States easier to read.

name_of_state.jpg

State# Condition rule

The rule to be met in order for the extension to enter the state. The signal names must be always surrounded by percentage (%) characters, followed by logical operators and the Signal value.

For example: %Setpoint 1% != 0

The Condition rule can be either manually typed in or generated, using the State editor. The State editor can be opened by clicking the Expand array list button. This way, the user can easily generate a Condition rule, as follows:

  • Signal name - allows the user to select a Signal name for the Condition rule.

  • Comparator - allows the user to select the logical operator to construct the Condition rule.

  • Signal value - allows the user to add the Signal value, used to trigger the state condition.

condition_rule.jpg

State# CSS class name

Sets the behavior of the element when the logged-in user doesn't belong to the project authorization indicated by the projectAuthorization property. In this case, the element can be either disabled or hidden.

css_class_name.jpg

State# Symbolic text

The language-agnostic text (which is automatically translated) is displayed by the extension.

symbolic_text.jpg

State# Display state

Sets the component visibility and accessibility when the state evolution passed. The user can choose from the following options:

  • Normal - the component will be displayed when the state evolution passed.

  • Hidden - the component will be hidden when the state evolution passed.

  • Disabled - the component will be displayed as disabled when the state evolution passed.

display_state.jpg

State# Foreground

Sets the foreground color of the button. Applying this property will override the default CSS class.

foreground_states.jpg

State# Background

Sets the background color of the button. Applying this property will override the default CSS class.

background_states.jpg

State# Animation

Sets the component animation class when the state evolution passed. The user can select the animation class from the drop-down list options: Fade in, Fade out or Blink.

animation_states.jpg

Load from assets

Lists the State assets defined under the Assets management page, of the global actions area.

A simple filtering mechanism is also provided to support the user to easily pinpoint the desired state asset.

After selecting an asset from the list view, the user can click the Load button to apply it.

load_from_assets.jpg

Save to assets

Allows the user the possibility to save a state asset defined during the current session. In this view, the user can either click the Generate name button to set a name for the asset or type in the name in the designated field.

By clicking the Apply button, the new state asset will be made available for further management actions in the Assets management page, of the global actions area. Also, the asset can be reused for other Component states.

save_to_assets.jpg

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.

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.

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

Disable flip

Disables any flip transformation for this component. This keeps the component in the default position even when its container is flipped.

disable_flip.jpg

Horizontal flip

Flips the selected component horizontally.

horizontal_flip.jpg

Vertical flip

Flips the selected component vertically.

vertical_flip.jpg
Bar graph
Abstract

Check out this article and learn more details about the design-time properties of the Bar graph component and how to decide which settings suit you best.

The i4designer Bar graph is an indicator component that displays the value of a signal as a quantized value on a bar graph. The change of signal value drives the animation which fills up the bar graph, in the limits defined by the user at design time.

bar_graph.jpg

The Bar graph component

Category

Property

Description

Common

Name

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

Name.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.jpg

Security

System authorizations / Permissions

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 (,).

This property is named "System authorization" for projects created on i4scada platform.

system_authorizations.jpg

This property is named "Permissions" for projects created on i4connected platform.

permissions.jpg

Project authorizations / Roles

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 (,).

This property is named "Project authorization" for projects created on i4scada platform.

project_authorization.jpg

This property is named "Role" for projects created on i4connected platform.

roles.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.

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_1.jpg

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

margin_2.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 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_1.jpg

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

opacity_2.jpg

Shadow color

Sets the color of the component's shadow. The user can either manually type in the HEX color code or use the color picker tool.

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

Max scale

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

max_scale.jpg

Max scale signal name

Applies the signal that will be considered by the maximum scale.

The user can select the Signal from the list view, by clicking the Open file explorer button, or by directly typing in the name of the desired Signal.

Max_scale_signal_name.jpg

Min scale

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

min_scale.jpg

Min scale signal name

Applies the signal that will be considered by the minimum scale.

The user can select the Signal from the list view, by clicking the Open file explorer button, or by directly typing in the name of the desired Signal.

min_scale_signal_name.jpg

Ticks number

The number of ticks to be displayed on the scale, between the min and max values of the scale.

ticks_number.jpg

Title text

Sets the text displayed by the component header.

title_text.jpg

Unit

Sets the name of the unit, measured on the Bar graph's scale. This is a free text field, therefore the user can type in the desired value (e.g. "mm", "m/s", etc). The unit will be displayed by the component only if the Show unit property is set to True.

unit.jpg

Value format

Sets the format of numerical values. The available numeric formats can be found under https://github.com/adamwdraper/Numeral-js.

value_format.jpg

Appearance

Orientation

Sets the orientation of the menu to Vertical down, Vertical up, and Horizontal right. The user can select the orientation from the options available in the designated drop-down list.

orientation.jpg

Scale position

Sets the position of the scale.

scale_position.jpg

The Scale position property depends on the Bargraph orientation property. The user can choose the desired scale position, from the dedicated drop-down list:

  • After

    • with Orientation "horizontal left" - scale is displayed at the top of the bar graph, and min value is on the left side and the max value is on the rights side.

    • with Orientation "horizontal right" - scale is displayed at the top of the bar graph, and max value is on the left side and the min value is on the rights side.

    • with Orientation "vertical up" - scale is displayed at the left side of the bar graph, and min value is on the bottom side and the max value is on the top side.

    • with Orientation "vertical down" - scale is displayed at the left side of the bar graph, and max value is on the bottom side and the min value is on the top side.

  • Before

    • with Orientation "horizontal left" - scale is displayed at the bottom of the bar graph, and min value is on the left side and the max value is on the rights side.

    • with Orientation "horizontal right" - scale is displayed at the bottom of the bar graph, and max value is on the left side and the min value is on the rights side.

    • with Orientation "vertical up" - scale is displayed at the right side of the bar graph, and min value is on the bottom side and the max value is on the top side.

    • with Orientation "vertical down" - scale is displayed at the right side of the bar graph, and max value is on the bottom side and the min value is on the top side.

Show scale

Allows the user to enable/disable the display of the scale.

show_scale.jpg

Show unit

Allows the user to enable/disable the unit display, of the Signal driving the bar if the Signal has a unit

show_unit.jpg

Show value

Allows the user to enable/disable the value display, of the Signal driving the bar.

show_value.jpg

Signal

Signal name

Sets the name of the signal that will be represented or manipulated by the component. The user can select the Signal from the list view, by clicking the Open file explorer button, or by directly typing in the name of the desired Signal.

signal_name_1.jpg

Palette

Background color

Sets the color of the component's background. The user can either manually type in the HEX color code or use the color picker tool.

background_color.jpg

Bar color

Sets the color of the component's progress bar. The user can either manually type in the HEX color code or use the color picker tool.

bar_color.jpg

Scale color

Sets the color of the bar graph scale. The user can either manually type in the HEX color code or use the color picker tool.

scale_color.jpg

Title foreground

Sets the foreground color of the component's title. The user can either manually type in the HEX color code or use the color picker tool.

title_foreground.jpg

Value color

Sets the color of the Signal value, if the Enable value property was set to TRUE. The user can either manually type in the HEX color code or use the color picker tool.

value_color.jpg

Typography

Font family

Sets the font family used by all textual and numerical elements displayed by the component. The user can select the font family from the web-safe fonts available in the drop-down list.

font_family.jpg

Ticks font size

Sets the size of the bar graph ticks, using the up and down arrows to increase and decrease, or by manually typing the desired value.

tiks_font_size.jpg

Ticks font weight

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

ticks_font_weight.jpg

Title font size

Sets the size of the bar graph title, using the up and down arrows to increase and decrease, or by manually typing the desired value.

tiks_font_size.jpg

Title font weight

Sets the weight of the bar graph title, selecting from the drop-down list options: 900 (fat), 800 (extra-bold), 700 (bold), 600 (semi-bold), 500 (medium), 400 (normal), 300 (light), 200 (extra-light) and 100 (thin).

title_font_weight.jpg

States

Current states

A component can have multiple states, each carrying its own set of properties. The user can add states, by clicking the Add new state button.

current_states.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

State Name

By setting the Name property, the respective state will inherit that name, making the States easier to read.

name_of_state.jpg

State#Condition rule

The rule to be met in order for the extension to enter the state. The signal names must be always surrounded by percentage (%) characters, followed by logical operators and the Signal value.

For example: %Setpoint 1% != 0

The Condition rule can be either manually typed in or generated, using the State editor. The State editor can be opened by clicking the Expand array list button. This way, the user can easily generate a Condition rule, as follows:

  • Signal name - allows the user to select a Signal name for the Condition rule.

  • Comparator - allows the user to select the logical operator to construct the Condition rule.

  • Signal value - allows the user to add the Signal value, used to trigger the state condition.

condition_rule.jpg

State# Display state

Sets the component visibility and accessibility when the state evolution passed. The user can choose from the following options:

  • Normal - the component will be displayed when the state evolution passed.

  • Hidden - the component will be hidden when the state evolution passed.

  • Disabled - the component will be displayed as disabled when the state evolution passed.

display_state.jpg

State# Background

Sets the background color of the component, when the state evolution passed. The user can either manually type in the HEX color code or use the color picker tool.

As the color palette is injected to this component by means of the default CSS class, applying this property the CSS class settings will be overwritten.

background_states.jpg

Load from assets

Lists the State assets defined under the Assets management page, of the global actions area.

A simple filtering mechanism is also provided to support the user to easily pinpoint the desired state asset.

After selecting an asset from the list view, the user can click the Load button to apply it.

load_from_assets.jpg

Save to assets

Allows the user the possibility to save a state asset defined during the current session. In this view, the user can either click the Generate name button to set a name for the asset or type in the name in the designated field.

By clicking the Apply button, the new state asset will be made available for further management actions in the Assets management page, of the global actions area. Also, the asset can be reused for other Component states.

save_to_assets.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.

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.

width.jpg

Disable flip

Disables any flip transformation for this component. This keeps the component in the default position even when its container is flipped.

disable_flip.jpg

Horizontal flip

Flips the selected component horizontally.

horizontal_flip.jpg

Vertical flip

Flips the selected component vertically.

vertical_flip.jpg
Watchdog
Abstract

Check out this article in order to learn more details about the Watchdog component and the properties it features, provided to you by i4designer.

The i4designer Watchdog component is used to provide visual information about changes at the level of signal values using three states.

watchdog.jpg
  • Online state - the component will be in an online state if the signal value changes during the applied time interval.

  • Offline state - the component will be in an offline state if the signal does not get any value updates after the applied time interval.

  • Unavailable state - the component will be in an unavailable state if no signal was applied.

Category

Property

Description

Common

Name

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

Name.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.jpg

Security

Project authorizations / Roles

This property is named "Project authorization" for projects created on i4scada platform.

project_authorization.jpg

This property is named "Roles" for projects created on i4connected platform.

roles.jpg

Security access behavior

Sets the behavior of the element to either disable (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.

security_access_behavior.jpg

System authorizations/ Permissions

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 (,).

This property is named "System authorization" for projects created on i4scada platform.

system_authorizations.jpg

This property is named "Permissions" for projects created on i4connected platform.

permissions.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_1.jpg

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

margin_2.jpg

The component's 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 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_1.jpg

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

opacity_2.jpg

Shadow color

Sets the color of the component's shadow. The user can either type in the HEX color code or use the color picker tool.

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

Signal

Signal name

Sets the name of the signal that will be represented or manipulated by the component. The user can select the Signal from the list view, by clicking the Open file explorer button, or by directly typing in the name of the desired Signal.

signal_name_1.jpg

Configuration

Period time

Allows the user to specify the period time measured in milliseconds. This property will be considered by the online and offline states.

period_time.jpg

Palette

Offline color

Sets the color of the offline state of the component. Therefore, the component will be highlighted in the selected offline color.

The component will be in an offline state If the signal does not get any value updates after the interval applied for the "Period time" property has passed.

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.

offline_color.jpg

Online color

Sets the color of the online state of the component. Therefore, the component will be highlighted in the selected online color.

The component will be in an online state if the signal value changes during the applied time interval.

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.

online_color.jpg

Unavailable color

Sets the color of the offline state of the component. Therefore, the component will be highlighted in the selected offline color if no signal is set for the Watchdog.

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.

unavailable_color.jpg

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.

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.

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

Disable flip

Disables any flip transformation for this component. This keeps the component in the default position even when its container is flipped.

disable_flip.jpg

Horizontal flip

Flips the selected component horizontally.

horizontal_flip.jpg

Vertical flip

Flips the selected component vertically.

vertical_flip.jpg