Skip to main content

i4designer Knowledgebase

Input

Abstract

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

The components under the Input category are a collection of buttons and switches allowing the user to control data or devices, due to their straightforward configurations. Each component will be described in the upcoming articles.

Buffer button
Abstract

Check out this article and learn more details about the i4designer Buffer button component and the properties it features.

The i4designer Buffer button component is a configurable button used for writing signal values from buffer to signal. The Buffer Button is merely used in the context of buffer writing actions.

Note

When Buffer writing, the user can make changes to as many signals needed, without actually modifying the signal values, but storing those changes in a buffer, ready to be written all at once. This allows the user to take time to fine-tune the signal values and applying all the changes at once, using the Buffer Button.

Buffer_button.jpg

The Buffer button component

Category

Property

Description

Common

Name

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

Name_pipe.jpg

Object ID

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

Example: Setpoint [OID]

Object_ID.jpg

Tooltip text

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

Tooltip_text.jpg

Security

System 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_authorization.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_small.jpg

The Margin editor can be opened by clicking the Open button

Margin_large.jpg

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

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

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

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

Effects

Opacity

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

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

Opacity.jpg

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

Opacity_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

Miscellaneous

Clear Buffer

Indicates if the buffer of the signal values will be cleared or not after the write operation occurs.

Clear_buffer.jpg

Configuration

Button text

Sets the text displayed by the button.

Button_text.jpg

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 maximum image size is 1MB.

Button_image.jpg

Appearance

CSS Class

Sets the CSS class of the button, selecting from the drop-down list items: btn-primary, btn-warning, btn-success and btn-danger.

CSS_Class.jpg

Flat

Removes additional visual elements such as shadow or gloss from the component, if the property is set to False.

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

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

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

Background color

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

Background_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_color.jpg

Icon color

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

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

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.

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

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

Font weight

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

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_weight.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_the_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.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.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
Button
Abstract

Check out this article and learn more details about the i4designer Button component and its properties.

The i4designer Button component is a button-type control that can write values to predefined signals.

Button.jpg

The Button 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_text.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_authorization.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_small.jpg

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

Margin_large.jpg

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

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

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

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

Effects

Opacity

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

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

Opacity.jpg

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

Opacity_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_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_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

Miscellaneous

Signal write items

Allows possibility to add additional items for writing multiple signals, by clicking the Add new item button.

Add_item.jpg

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

Signal_write_items.jpg

Furthermore, the following actions are available for each item:

  • Move up move_up.jpg

  • Move down move_down.jpg

  • Remove item remove_state.jpg

Write item# Name

Sets the name of the signal that will be represented or manipulated by the component.

Signa_write_item_name.jpg

Write item# Value

Sets the signal value that will be considered, at run-time, by the component.

Value.jpg

Configuration

Button text

Sets the text displayed by the button.

Button_text.jpg

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 maximum image size is 1MB.

Button_image.jpg

Increment mode

Activates the increment mode of the button. On writing the value of the property "writeValue" will be added to the current signal value.

Increment_mode.jpg

Push-button mode

If the property is set to True, the button will write the Write-Up-Value when releasing the mouse button.

Push_button_mode.jpg

Reset on overflow

On writing the value of the signal will be reset, as follows:

  • to the Min value - when the current value of the signal is greater than the value of options Max value.

  • to the Max value - when the current value of the signal is smaller than the value of option Min value.

This property will be considered only if increment mode is enabled.

Reset_on_overflow.jpg

Write secure

The signal value will be written into the signal after confirming the password.

Write_secure.jpg

Write to buffer

Enables the possibility to locally buffer the signal value, rather than writing it directly into the signal, if the property is set to True.

Write_to_buffer.jpg

Write up delay

Sets the delay, in milliseconds, before writing the signal value when releasing the button (on MouseUp event). The delay can be defined by using the up/down values or by manually typing in the desired value.

Write_up_delay.jpg

Appearance

CSS Class

Sets the CSS class of the button, selecting from the drop-down list items: btn-primary, btn-warning, btn-success, and btn-danger.

CSS_Class.jpg

Flat

Enables possibility remove additional visual elements or gloss from the component.

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

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

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

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

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

Write value

Sets the value of the signal to be written by the component to the specified signal.

write_value.jpg

Min value

Sets the minimum value written by the component.

min_value.jpg

Max value

Sets the maximum value written by the component.

max_value.jpg

Write up value

The value is written when releasing the button (on the MouseUp event).

write_up_value.jpg

Palette

Background color

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

Background_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_color.jpg

Icon color

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

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

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.

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.

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

Font weight

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

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

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_the_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.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.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
Combobox
Abstract

Check out this article in order to learn more details about the i4designer Combobox component and the properties it provides.

The Combobox component serves as a drop-down button that can be used for writing various values to signals. The Combobox allows the user to write predefined values by selecting them from the options list. Each option can write a value to the same or different signal, of another i4designer component.

Combobox.jpg

The Combobox 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_text.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_authorization.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_small.jpg

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

Margin_large.jpg

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

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

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

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

Effects

Opacity

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

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

Opacity.jpg

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

Opacity_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

Appearance

CSS Class

Sets the CSS class displayed when the component is in a normal (default) state. The CSS class can be selected from the drop-down list options: btn-primary, btn-warning, btn-success, btn-danger.

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

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

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

Configuration

Symbolic text normal state

Sets a language-agnostic text (which is automatically translated) displayed by the component when it is in normal (default) state.

symbolic_text_normal_state.jpg

Write to buffer

Enables the possibility to locally buffer the signal value, rather than writing it directly into the signal, if the property is set to True. Writing should be done via the Buffer button component.

write_to_buffer.jpg

Write secure

The signal value will be written to the signal only after confirming the password of the user.

write_secure.jpg

Palette

Background color

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

Background_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_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.

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

Border width

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

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

Font weight

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

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

Signal

Signal write items

Allows possibility to add additional items for writing multiple signals, by clicking the Add new item button.

Add_item.jpg

To see the list of items the user can click on the Expand array list button.

Signal_write_items.jpg

Furthermore, the following actions are available for each item:

  • Move up move_up.jpg

  • Move down move_down.jpg

  • Remove item remove_state.jpg

Write item# Name

Sets the name of the signal that will be represented or manipulated by the component.

Signa_write_item_name.jpg

Write item# Value

Sets the signal value that will be considered, at run-time, by the component.

Value.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
Checkbox
Abstract

Check out this article in order to learn more details about the i4designer Checkbox component and the properties it features.

The i4designer Checkbox component can be configured to write a predefined value to a predefined signal for its checked position and a different value for its unchecked position. The control can also start (at run-time) in a predefined position, writing the corresponding value to the signal.

The checked and unchecked position toggling can be done with a single click (check on mouse down and uncheck on mouse up) or it can have the standard behavior where clicking once checks the box and clicking the second time unchecks the box.

Checkbox_component.jpg

The Checkbox component

Category

Property

Description

Common

Name

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

name_check.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_text.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_authorization.jpg

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

Permissions.jpg

Project authorization / Role

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 "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_small.jpg

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

Margin_large.jpg

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

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

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

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

Effects

Opacity

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

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

Opacity.jpg

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

Opacity_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_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_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

Checked value

Allows the user to set the value to be written to the signal when the checkbox state is checked.

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

Unchecked value

Allows the user to set the value to be written to the signal when the checkbox state is unchecked.

Unchecked_value.jpg

Configuration

Checkbox text

Allows the user to set the text displayed by the checkbox element.

Checkbox_text.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: M/d/yyyy

Datetime_format.jpg

Is alphanumeric

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

Is_alphanumeric.jpg

Is datetime

Defines if the signal value should be shown as a DateTime type format. This property should be enabled only if a DateTime format was previously selected.

Is_datetime.jpg

Write secure

The signal value will be written to the signal only after confirming the password of the user.

write_secure.jpg

Write to buffer

Enables the possibility to locally buffer the signal value, rather than writing it directly into the signal, if the property is set to True. Writing should be done via the Buffer button component.

write_to_buffer.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
Radio buttons
Abstract

Check out this article in order to learn more details about the i4designer Radio buttons component and the properties it provides.

The Radio buttons component allows the user to select and write multiple values to a preselected Signal.

Radio_button.jpg

The Radio buttons 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_authorization.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_small.jpg

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

Margin_large.jpg

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

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

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

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

Effects

Opacity

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

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

Opacity.jpg

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

Opacity_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_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_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.jpg

Values

Sets the Signal values, allowing the user to define as many Signal values as needed.

By clicking the Expand array list Expand_array_list.jpg button the view is expanded to display the list of Array items.

Values_list.jpg

By using the following action buttons, the user can manage the list of Signal values:

  • Add new item button, located at the top of the list Add_new_item.jpg

  • Move up button, located next to each listed array item Move_up.jpg

  • Move down button, located next to each listed array item Move_down.jpg

  • Remove button, located next to each listed array item Remove_item.jpg

Each Signal value item allows the user to insert a value for the Signal.

Values.jpg

Configuration

Write secure

Enables the possibility to locally buffer the signal value, rather than writing it directly into the signal, if the property is set to True.

write_secure.jpg

Write to buffer

The signal value will be written to the signal only after confirming the password of the user.

write_to_buffer.jpg

Miscellaneous

Show inline

Changes the display of the radio buttons array into a single line and not as a list, as they are by default parsed.

Show_inline.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 control
Abstract

Check out this article in order to learn more details about the i4designer Signal control component and the properties it provides.

The Signal control component is a date display control that can display a preselected Signal value. If a set of conditions are fulfilled, the user can also change the Signal value at run-time. More details of the properties used by this component, at design time can be read in the below table.

Signal_control_component.jpg

The Signal control component

Category

Property

Description

Common

Name

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

name_signal.jpg

Object ID

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

Example: Setpoint [OID]

Object_ID.jpg

Tooltip text

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

Tooltip_text.jpg

Security

System 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_authorization.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_small.jpg

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

Margin_large.jpg

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

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

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

Popover position

Sets the position of the confirmation popover.

Popover_position.jpg

Effects

Opacity

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

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

Opacity.jpg

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

Opacity_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_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_x.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

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

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

Signal name format

Defines the format in which the signal information appears.

The Signal name format property supports these formats, written between square brackets: [name] [value] [unit] [description], 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.

Signal_name_format.jpg

Signal name label

Enables the possibility to show the Signal name, if the property is set to True.

Signal_name_label.jpg

Configuration

Show confirmation

Enables the possibility to show the confirmation button used to ensure that the new value will be written if the property is set to True.

Show_confirmation.jpg

DateTime format

Selects the format in which the date and time are displayed by the component, at run-time. 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

Mode

Sets Read/Write permissions applied to the Signal used by the component. The user can select from the following drop-down list options:

  • Read - the component Signal can be only read

  • ReadWrite - the component Signal can be read and updated with new values

Mode.jpg

Is alphanumeric

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

Is_alphanumeric.jpg

Is datetime

Defines if the signal value should be shown as a DateTime type format. This property should be enabled only if a DateTime format was previously selected.

Is_Datetime.jpg

Label text

Defines if the signal value should be shown as a DateTime type format. This property should be enabled only if a DateTime format was previously selected.

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

Signal changed duration

Sets the amount of time required by the additional CSS class to be applied to the control by the signal value change, using the up and down arrows to increase and decrease, or by manually typing the desired value.

Signal_changed_duration.jpg

Signal changed class

Sets the CSS class that will be applied to the component when the designated signal changes value. The user can select from the predefined options none, warning, danger, or success.

Signal_changed_class_2.jpg

Write to buffer

Enables the possibility to locally buffer the signal value, rather than writing it directly into the signal, if the property is set to True. Writing should be done via the Buffer button component.

Write_to_buffer.jpg

Write secure

The signal value will be written into the signal after confirming the password.

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

Label text-align

Sets the text alignment of the component label.

Label_text_align.jpg

Label visibility

Allows the possibility to enable /disable the visibility of the Signal name label. If the property is set to True the Signal label will be visible.

label_visibility.jpg

Unit text-align

Sets the text alignment for the component unit, by selecting from the drop-down list options: left, right, or center.

Unit_text_align.jpg

Unit visibility

Allows the possibility to enable /disable the visibility of the Signal unit. If the property is set to True the unit label will be visible.

unit_visibility.jpg

Value text-align

Sets the text alignment of the component value.

Value_text_align.jpg

Palette

Label background

Sets the background color for the label of the component. 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 for the label of the component. 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 foreground color for the label of the component. 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

Value background

Sets the background color for the component value area. 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.

Value_background.jpg

Value foreground

Sets the border color for the component value area. 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.

Value_foreground.jpg

Value border color

Sets the border color for the component value area. 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.

Value_border_color.jpg

Unit background

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

Unit_background.jpg

Unit foreground

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

Unit_foreground.jpg

Unit border-color

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

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

Font weight

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

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

Style

Label border width

Sets the width of the space designated for the label border.

The Label border editor can be opened by clicking the Open button.

Label_border_width.jpg

The border width of the component's label can be updated by setting the desired value and selecting the 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.

Label width

Sets the width of the space designated for the label, expressed in pixels. The user can increase or decrease the value, using the up / down arrows or by manually typing in the desired value.

Label_width.jpg

Unit border width

Sets the width of the space designated for the unit border.

The Unit border editor can be opened by clicking the Open button.

Unit_border_width.jpg

The border width of the unit can be updated by setting the desired value and selecting the 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.

Unit width

Sets the width of the space designated for the unit expressed in pixels. The user can increase or decrease the value, using the up / down arrows by manually typing in the desired value.

Unit_width.jpg

Value border width

Sets the width of the space designated for the signal value border.

The Value border editor can be opened by clicking the Open button.

Value_border_width.jpg

The border width of the value can be updated by setting the desired value and selecting the 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_the_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.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 list
Abstract

Check out this article and learn more details about the Signal List component and how to add project signals and check their values, while at run-time.

The Signal List component is a collection of numeric and textual display extensions that can display signal values with labels and icons.

Signal_List_component.jpg

The Signal List component

Tip

For a step-based tutorial describing the usage of the Signal list component, please visit the dedicated tutorials, here.

Category

Property

Description

Common

Name

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

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

For details, please visit the dedicated tutorials, here.

Tooltip text

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

Tooltip_text.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_authorization.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_small.jpg

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

Margin_large.jpg

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

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

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

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

Effects

Opacity

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

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

Opacity.jpg

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

Opacity_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_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_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

Default signal configuration

Defines a set of default configuration settings for all new signals:

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

  • Label text - Sets the text of the control label, visible at both design and run-time, if the Signal name label property is disabled.

  • Mode - Sets the Signal mode, allowing the user to choose between Read and ReadWrite options.

    If the Mode is set to Read, the listed Signals will be only displayed in reading mode. If the ReadWrite Mode is enabled, the user will be allowed to read and write signal values.

  • Signal name label - Enables or disables the display of the Signal name label. If this field is enabled, the Signal name will be displayed. If this field is disabled, and a Label text is available, the Signal name will be replaced with the value of the Label text field.

  • Static unit text - Replaces the signal unit with the defined static string.

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

  • 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

  • Label width - Sets the width of the Signal label area, measured in pixels.

  • Unit width - Sets the width of the Signal unit area, measured in pixels.

Override signals configuration

Overrides the default configuration with a specific one, by defining an individual set of configuration settings for each signal added to the list:

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

  • Label text - Sets the text of the control label, visible at both design and run-time, if the Signal name label property is disabled.

  • Mode - Sets the Signal mode, allowing the user to choose between Read and ReadWrite options.

    If the Mode is set to Read, the listed Signals will be only displayed in reading mode. If the ReadWrite Mode is enabled, the user will be allowed to read and write signal values.

  • Signal name - Allows the selection of a Signal, using the list of project Signals.

    Please note that if no Signals were imported/synchronized to the project, the list will be empty.

  • Signal name label - Enables or disables the display of the Signal name label. If this field is enabled, the Signal name will be displayed. If this field is disabled, and a Label text is available, the Signal name will be replaced with the value of the Label text field.

  • Static unit text - Replaces the signal unit with the defined static string.

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

  • 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

  • Label width - Sets the width of the Signal label area, measured in pixels.

  • Unit width - Sets the width of the Signal unit area, measured in pixels.

Signals

Defines a list of Signals, configured as an array list of items. The user can either manually input the name of the Signal or select it from the list of Signals. The user can add multiple array items (Signals) by clicking the Add new item button.

Signals.jpg

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

  • Move up move_up.jpg

  • Move down move_down.jpg

  • Remove item remove_state.jpg

Signal name format

Defines the format in which the signal information appears.

This property can be used to extract the following Signal information, written between square brackets: [name] [value] [unit] [description], 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.

Signal_name_format.jpg

Configuration

Configuration namespace

The namespace used by the component predefined configuration. By setting this property, the respective configuration will be, by default, applied.

Configuration_namespace.jpg

Initial configuration

Sets the name of an existing configuration, that will be initially loaded for the component when opening the run-time project visualization.

Initial_configuration.jpg

Title text

Sets the title of the component. The defined title will be displayed both at design and run-time, by the component's header.

Title_text.jpg

Palette

Buttons background

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

Buttons_background.jpg

Buttons foreground

Sets the color of the foreground of the buttons. 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.

buttons_foreground.jpg

Header background

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

header_background.jpg

Header foreground

Sets the color of the header foreground. 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.

Header_foreground.jpg

Typography

Header font family

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

Header_font_family.jpg

Header font size

Sets the size of the header font.

The header font-size value can be either manually typed in the designated field or increased/decreased by clicking the up and down arrows.

Header_font_size.jpg

Header font weight

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

Header_font_weight.jpg

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
Slider
Abstract

Check out this article and learn more details about the i4designer Slider component and the properties it provides.

The i4designer Slider component is a slider control that can update the value of a signal based on a predefined range and steps.

Slider.jpg

The Slider 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_text.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 "Project authorization" for projects created on i4SCADA platform.

Project_authorization.jpg

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

Roles.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_small.jpg

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

Margin_large.jpg

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

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

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

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

Effects

Opacity

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

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

Opacity.jpg

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

Opacity_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_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_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

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

Signal

Array delimiter

Defines the delimiter of the values in the array.

Array_delimiter.jpg

Array index

Defines the index of the displayed array value. By default, the Array index starts from value 0, but it can be increased or decreased, using the up / down arrows or by manually typing in the desired value.

Array_index.jpg

Is array

Defines if the displayed value is an array. If the property is set to True, the property Format will not be considered.

Is_array.jpg

Signal value factor

Sets the number that the signal value is multiplied with.

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

Signal name label

Replaces the component label with the selected Signal name, if the property is set to True.

Signal_name_label.jpg

Configuration

Event

Defines the event for writing values allowing the user to select from the drop-down list options:

  • Slide stop - the value will be written when the slider's handle is no longer moving or the slider is clicked.

  • Change - the value is written when the slider's handle moves.

Event.jpg

Label text

Sets the text of the component label. If the Signal name label property is set to False, the textual information set for the label text will be displayed. If both the Label text and the Signal name label are empty and false, nothing will be displayed in this field.

Label_text.jpg

Max range

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

Max_range.jpg

Min range

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

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

Step

The increment value is applied to the signal value when using the slider. The default value can be increased or decreased, using the up / down arrows or by manually typing in the desired value.

Step.jpg

Ticks number

Sets the number of slider ticks displayed by the component. The default value can be increased or decreased, using the up / down arrows or by manually typing in the desired value.

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

Format.jpg

Write delay

Sets the delay, in milliseconds, applied when changing the signal value using the slider. Used only when the Event property is set to Change. The default value can be increased or decreased, using the up / down arrows or by manually typing in the desired value.

Write_delay.jpg

Write secure

The signal value will be written to the signal only after confirming the password of the user.

Write_secure.jpg

Write to buffer

Enables the possibility to locally buffer the signal value, rather than writing it directly into the signal, if the property is set to True. Writing should be done via the Buffer button component.

Write_to_buffer.jpg

Typography

Label font size

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

Label_font_size.jpg

Label font weight

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

Label_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

Show ticks label

Enables the display of ticks labels if the property is set to True.

Show_ticks_labels.jpg

Class name

Sets the CSS class of component. The desired CSS class can be selected from the drop-down list options: default, danger, primary, warning, success.

Class_name.jpg

Display vertical

Enables possibility to change the slider orientation from horizontal to vertical, by setting property to True.

Display_vertical.jpg

Reverse

Enables the possibility to change the slider direction (left to right, right to left, up to down, down to up), if setting the property to True.

Reverse.jpg

Unit visibility

Sets the visibility of the unit label, if the property is set to True.

Unit_visibility.jpg

Palette

Rail background

Sets the color of the slider rail. 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.

Rail_background.jpg

Ticks color

Sets the color of the slider ticks. 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.

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

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

Label_foregroun.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
Switch
Abstract

Check out this article in order to learn more details about the i4designer Switch component and the properties it provides.

The Switch component is a button-type control that can toggle between two values for the same signal.

Switch.jpg

The Switch component

Category

Property

Description

Common

Name

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

name_switch.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_text.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_authorization.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_small.jpg

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

Margin_large.jpg

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

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

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

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

Effects

Opacity

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

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

Opacity.jpg

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

Opacity_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_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_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

Appearance

Display vertical

Sets the switch component orientation to vertical, if the property is set to True.

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

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

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

Off background

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

Off_background.jpg

Off border color

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

Off_border_color.jpg

Off foreground

Sets the text color of the Off button. 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.

Off_foreground.jpg

Off icon color

Sets the icon color of the Off button. 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.

Off_icon_color.jpg

On background

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

On_background.jpg

On border color

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

On_border_color.jpg

On foreground

Sets the text color of the On button. 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.

On_foreground.jpg

On icon color

Sets the icon color of the on button. 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.

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

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

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 of the component surface, selecting from the drop-down list options: auto, left, right and center (default).

text_alignment.jpg

Font weight

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

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

Configuration

Off CSS class

Sets the icon displayed by the component when in Off state, selecting from the drop-down list options: primary, success, warning and danger.

OfF_CSS_class.jpg

Off label text

Sets the text displayed by the component when in Off state.

Off_label_text.jpg

On CSS class

Sets the icon displayed by the component when in On state, selecting from the drop-down list options: primary, success, warning and danger.

On_CSS_Class.jpg

On label text

Sets the text displayed by the component when in On state.

On_label_text.jpg

Write to buffer

Enables the possibility to locally buffer the signal value, rather than writing it directly into the signal, if the property is set to True. Writing should be done via the Buffer button component.

Write_to_buffer.jpg

Write secure

The signal value will be written to the signal only after confirming the password of the user.

Write_secure.jpg

Icon

Off icon

Sets the CSS class for the Off 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.

Off_icon.jpg

On icon

Sets the CSS class for the On 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.

On_icon.jpg

Signal

Off value

Sets the signal value for the Off state of the component. The default value can be increased or decreased, using the up / down arrows or by manually typing in the desired value.

Of_value.jpg

On value

Sets the signal value for the On state of the component. The default value can be increased or decreased, using the up / down arrows or by manually typing in the desired value.

On_value.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.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 event 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
Switch 3 states
Abstract

Check out this article in order to learn more details about the i4designer Switch 3 states component and the properties it provides.

The Switch 3 states component is a toggle button with a vertical switch design, which allows the user to toggle between two predefined values that are written to a selected signal.

Switch_3_states.jpg

The Switch 3 states component

Category

Property

Description

Common

Name

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

name_3_states.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_3.jpg

Tooltip text

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

tooltip_3.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_authorization.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_small.jpg

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

Margin_large.jpg

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

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

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

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

Effects

Opacity

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

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

Opacity.jpg

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

Opacity_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_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_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

Neutral color

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

neutral_color.jpg

Off color

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

Off_color.jpg

ON color

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

ON_color.jpg

Outline color

Sets the color of the element outline. 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.

Outline_color.jpg

Background color

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

Style

Border radius

Sets the radius of the border corners measures in pixels or percentage. The default value can be increased or decreased, using the up / down arrows or by manually typing in the desired value.

Switch_3_states.jpg

Stroke width

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

Stroke_width.jpg

Signal

Neutral value

Sets the signal value for the neutral state of the component. The default value can be increased or decreased, using the up / down arrows or by manually typing in the desired value.

Neutral_value.jpg

Off value

Sets the signal value for the Off state of the component. The default value can be increased or decreased, using the up / down arrows or by manually typing in the desired value.

Off_value.jpg

On value

Sets the signal value for the On state of the component. The default value can be increased or decreased, using the up / down arrows or by manually typing in the desired value.

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

Configuration

Neutral text

Sets the text displayed by the component when in neutral state.

Neutral_text.jpg

Off text

Sets the text displayed by the component when in Off state.

Off_text.jpg

On text

Sets the text displayed by the component when in On state.

On_text.jpg

Write to buffer

Enables the possibility to locally buffer the signal value, rather than writing it directly into the signal, if property is set to True. Writing should be done via the Buffer button component.

Write_to_buffer.jpg

Write secure

The signal value will be written into the signal after the user confirms the password.

Write_secure.jpg

Icon

Neutral icon

Sets the icon displayed by the component when in neutral state. 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 pin-point the desired icon.

neutral_icon.jpg

Off icon

Sets the icon displayed by the component when it is in the off state. The icon can be selected from a large amount 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 pin-point the desired icon.

Off_icon.jpg

On icon

Sets the icon displayed by the component when it is in on state. 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.

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

Flips the selected component vertically.

Vertical_flip.jpg
Toggle button
Abstract

Check out this article in order to learn more details about the i4designer Toggle button component and the properties it provides.

The Toggle button component can be configured to write predefined values to a predefined signal for it's checked position and a different value for its unchecked position. The position toggling can be done on a single click (checked position on mouse down and unchecked position on mouse up) or it can have the standard behavior, where clicking once, it toggles the checked position, and clicking the second time, it toggles the unchecked position.

Toggle_button.jpg

The Toggle button component

Category

Property

Description

Common

Name

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

name_toggle.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_toggle.jpg

Tooltip text

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

tooltip_toggle.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_authorization.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_small.jpg

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

Margin_large.jpg

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

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

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

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

Effects

Opacity

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

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

Opacity.jpg

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

Opacity_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_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_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

Appearance

CSS Class

Sets the CSS class of the button, selecting from the drop-down list items: btn-primary, btn-warning, btn-success and btn-danger.

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

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

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

Configuration

Buffered CSS Class

Sets the CSS class of the button while the signal value is written to buffer. The CSS class can be selected from the drop-down list options: btn-primary, btn-warning, btn-success, and btn-danger. The value of this property will only be applied if the Write to buffer property is enabled.

Buffered_CSS_Class.jpg

Button text

Sets the text displayed by the button.

Button_text.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/.

DateTime_format.jpg

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 maximum image size is 1MB.

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

Write to buffer

Enables the possibility to locally buffer the signal value, rather than writing it directly into the signal, if the property is set to True. Writing should be done via the Buffer button component.

Write_to_buffer.jpg

Write secure

The signal value will be written to the signal only after confirming the password of the user.

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

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

Toggle value 1

Sets the value that will be written to the signal name when the button is in the checked position.

Toggle_value_1.jpg

Toggle value 2

Sets the value that will be written to the signal name when the button is in an un-checked position.

Togle_value_2.jpg

Palette

Background color

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

Background_color.jpg

Foreground

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

Foreground.jpg

Icon color

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

Border color

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

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.

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

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 of the component surface, selecting from the drop-down list options: auto, left, right and center (default).

Text_alignment.jpg

Font weight

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

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

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

Load from assets

Allows the user with 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