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 straight-forward 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 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

Project authorization

The project authorization required for displaying the component. If the logged in user does not have this project authorization, the component will not be visible. If the property is left empty, the component will be visible to all users.

This property is named "Project authorization" for projects created on i4SCADA platform and "Role" on i4connected platform projects.

Project_authorization.jpg

Security access behavior

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.

Security_access_behavior.jpg

System authorization

The system authorization required to display the component. If the logged in user does not have this system authorization, the component will not be visible. If the property is left empty, the component will be visible to all users.

This property is named "System authorization" for projects created on i4SCADA platform and "Permission" on i4connected platform projects.

System_authorization.jpg

Layout

Layout mode

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

Layout_mode.jpg

Margin

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

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

Margin_small.jpg

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

Margin_large.jpg

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

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

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

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

Effects

Opacity

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

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

Opacity.jpg

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

Opacity_slider.jpg

Shadow color

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

Padding

Sets the pixels for the component padding, hence defining the space between the components contents and its border. The padding value can be either manually typed in the designated field or increased / decreased by clicking the up and down arrows.

Padding.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 to 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 to 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 to 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 to 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 percentage. The border radius value can be either manually typed in the designated field or increased / decreased by clicking the up and down arrows.

This field supports the standard CSS notation.

Border_radius.jpg

Border width

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

Border_width.jpg

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 familiy

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

Font_family.jpg

Icon

Icon class

Sets the CSS class for the icon of the component.

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.

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

States

Current States

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

Current_states.jpg

Further more, 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# 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) 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 pin-point 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 with 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's 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.

Control_width.jpg

Height

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

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

Control_height.jpg

Angle

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

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

Angle.jpg

Left

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

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

Left.jpg

Top

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

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

Top.jpg
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 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. If the property is left empty, the component will be visible to all users.

This property is named "System authorization" for projects created on i4SCADA platform and "Permission" on i4connected platform projects.

System_authorization.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. If the property is left empty, the component will be visible to all users.

This property is named "Project authorization" for projects created on i4SCADA platform and "Role" on i4connected platform projects.

Project_authorization.jpg

Security access behavior

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.

Security_access_behavior.jpg

Layout

Layout mode

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

Layout_mode.jpg

Margin

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

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

Margin_small.jpg

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

Margin_large.jpg

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

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

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

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

Effects

Opacity

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

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

Opacity.jpg

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

Opacity_slider.jpg

Shadow color

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

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

Further more, 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 of 1MB.

Button_image.jpg

Write to buffer

Enables possibility to locally buffer the signal value, rather than writing it directly into the signal, if 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

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

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 option 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 confirm password.

Write_secure.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 pixels for the component padding, hence defining the space between the components contents and its border. The padding value can be either manually typed in the designated field or increased / decreased by clicking the up and down arrows.

Padding.jpg

Icon

Icon class

Sets the CSS class for the icon of the component.

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.

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_aray.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 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 to 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 to 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 to 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 to 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 percentage. The border radius value can be either manually typed in the designated field or increased / decreased by clicking the up and down arrows.

This field supports the standard CSS notation.

Border_radius.jpg

Border width

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

Border_width.jpg

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 their own set of properties. The user can add states, by clicking the Add new state button.

Current_states.jpg

Further more, 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# 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) 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 pin-point 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 with 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's 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.

Control_width.jpg

Height

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

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

Control_height.jpg

Angle

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

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

Angle.jpg

Left

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

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

Left.jpg

Top

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

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

Top.jpg
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 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. If the property is left empty, the component will be visible to all users.

This property is named "System authorization" for projects created on i4SCADA platform and "Permission" on i4connected platform projects.

System_authorization.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. If the property is left empty, the component will be visible to all users.

This property is named "Project authorization" for projects created on i4SCADA platform and "Role" on i4connected platform projects.

Project_authorization.jpg

Security access behavior

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.

Security_access_behavior.jpg

Layout

Layout mode

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

Layout_mode.jpg

Margin

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

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

Margin_small.jpg

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

Margin_large.jpg

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

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

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

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

Effects

Opacity

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

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

Opacity.jpg

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

Opacity_slider.jpg

Shadow color

Sets the color of the component'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 component is normal (default) state. The CSS class can be selecte from the drop-down list options: btn-primary, btn-warning, btn-success, btn-danger.

CSS_Class.jpg

Padding

Sets the pixels for the component padding, hence defining the space between the components contents and its border. The padding value can be either manually typed in the designated field or increased / decreased by clicking the up and down arrows.

Padding.jpg

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 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 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 to 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 to 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 to 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 value can be either manually typed in the designated field or increased / decreased by clicking the up and down arrows.

Border_width.jpg

Border width

Sets the curvature of the border corners expressed in pixels or percentage. The border radius value can be either manually typed in the designated field or increased / decreased by clicking the up and down arrows. This field supports the standard CSS notation.

Border_radius.jpg

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

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

Signal_write_items.jpg

Further more, 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.

Control_width.jpg

Height

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

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

Control_height.jpg

Angle

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

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

Angle.jpg

Left

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

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

Left.jpg

Top

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

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

Top.jpg
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 it's checked position and a different value for it's 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 on 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.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

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. If the property is left empty, the component will be visible to all users.

This property is named "Project authorization" for projects created on i4SCADA platform and "Role" on i4connected platform projects.

Project_authorization.jpg

Security access behavior

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.

Security_access_behavior.jpg

System authorization / Permission

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

This property is named "System authorization" for projects created on i4SCADA platform and "Permission" on i4connected platform projects.

System_authorization.jpg

Layout

Layout mode

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

Layout_mode.jpg

Margin

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

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

Margin_small.jpg

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

Margin_large.jpg

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

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

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

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

Effects

Opacity

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

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

Opacity.jpg

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

Opacity_slider.jpg

Shadow color

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

Shadow_color.jpg

Shadow offset X

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

Shadow_offset_X.jpg

Shadow offset Y

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

Shadow_offset_Y.jpg

Shadow size

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

Shadow_size.jpg

Signal

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 are available in the "Year, month, and day tokens" chapter under https://momentjs.com/ docs/.

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

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

Transform

Angle

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

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

Angle.jpg

Height

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

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

Control_height.jpg

Left

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

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

Left.jpg

Top

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

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

Top.jpg

Width

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

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

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

Object ID

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

Example: Setpoint [OID]

Object_ID.jpg

Tooltip text

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

Tooltip_text.jpg

Security

System authorization / 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. If the property is left empty, the component will be visible to all users.

This property is named "System authorization" for projects created on i4SCADA platform and "Permission" on i4connected platform projects.

System_authorization.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. If the property is left empty, the component will be visible to all users.

This property is named "Project authorization" for projects created on i4SCADA platform and "Role" on i4connected platform projects.

Project_authorization.jpg

Security access behavior

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.

Security_access_behavior.jpg

Layout

Layout mode

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

Layout_mode.jpg

Margin

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

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

Margin_small.jpg

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

Margin_large.jpg

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

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

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

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

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

Icon

Icon class

Sets the CSS class for the icon of the component.

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.

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 label

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

Signal_name_label.jpg

Configuration

Show confirmation

Enables possibility to show the confirmation button used to ensure that the new value will be written, if 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 are available in the "Year, month, and day tokens" chapter under https://momentjs.com/docs/.

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

Write_secure.jpg

Appearance

Label text align

Sets the text alignment of the component label.

Label_text_align.jpg

Label visibility

Allows possibility to enable /disable the visibility of the Signal name label. If 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 possibility to enable /disable the visibility of the Signal unit. If 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 to 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 to 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 to 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 to 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 to 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 to 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 to 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 to 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 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 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 of by manually typing in the desired value.

Unit_width.jpg

States

Current States

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

Current_states.jpg

Further more, 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# 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) 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 pin-point 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 with 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's 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.

Control_width.jpg

Height

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

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

Control_height.jpg

Angle

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

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

Angle.jpg

Left

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

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

Left.jpg

Top

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

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

Top.jpg
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_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. If the property is left empty, the component will be visible to all users.

This property is named "System authorization" for projects created on i4SCADA platform and "Permission" on i4connected platform projects.

System_authorization.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. If the property is left empty, the component will be visible to all users.

This property is named "Project authorization" for projects created on i4SCADA platform and "Role" on i4connected platform projects.

Project_authorization.jpg

Security access behavior

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.

Security_access_behavior.jpg

Layout

Layout mode

Sets the behaviour 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.jpg

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

margin_editor.jpg

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

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

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

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

Effects

Opacity

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

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

Opacity.jpg

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

Opacity_slider.jpg

Shadow color

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

Shadow_color.jpg

Shadow offset X

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

Shadow_offset_X.jpg

Shadow offset Y

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

Shadow_offset_Y.jpg

Shadow size

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

Shadow_size.jpg

Configuration

Label text

Sets the text of the control label.

Label_text.jpg

Write to buffer

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

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

Signal

Values

Sets the Signal values, allowing the user to define as many Signal value 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

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

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.

Control_width.jpg

Height

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

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

Control_height.jpg

Angle

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

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

Angle.jpg

Left

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

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

Left.jpg

Top

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

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

Top.jpg
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. If the property is left empty, the component will be visible to all users.

This property is named "System authorization" for projects created on i4SCADA platform and "Permission" on i4connected platform projects.

System_authorization.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. If the property is left empty, the component will be visible to all users.

This property is named "Project authorization" for projects created on i4SCADA platform and "Role" on i4connected platform projects.

Project_authorization.jpg

Security access behavior

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.

Security_access_behavior.jpg

Layout

Layout mode

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

Layout_mode.jpg

Margin

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

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

Margin_small.jpg

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

Margin_large.jpg

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

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

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

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

Effects

Opacity

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

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

Opacity.jpg

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

Opacity_slider.jpg

Shadow color

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

Icon

Icon class

Sets the CSS class for the icon of the component.

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.

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 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 not longer moving or the slider is clicked.

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

Event.jpg

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

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

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

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

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

Label text

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

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

Step

The increment value 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

Write to buffer

Enables 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 to the signal only after confirming the password of the user.

Write_secure.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 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 possibility to change the slider direction (left to right, right to left, up to down, down to up), if setting property to True.

Reverse.jpg

Unit visibility

Sets the visibility of the unit label, if 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.

Control_width.jpg

Height

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

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

Control_height.jpg

Angle

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

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

Angle.jpg

Left

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

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

Left.jpg

Top

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

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

Top.jpg
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.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. If the property is left empty, the component will be visible to all users.

This property is named "System authorization" for projects created on i4SCADA platform and "Permission" on i4connected platform projects.

System_authorization.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. If the property is left empty, the component will be visible to all users.

This property is named "Project authorization" for projects created on i4SCADA platform and "Role" on i4connected platform projects.

Project_authorization.jpg

Security access behavior

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.

Security_access_behavior.jpg

Layout

Layout mode

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

Layout_mode.jpg

Margin

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

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

Margin_small.jpg

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

Margin_large.jpg

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

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

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

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

Effects

Opacity

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

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

Opacity.jpg

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

Opacity_slider.jpg

Shadow color

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

Shadow_color.jpg

Shadow offset X

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

Shadow_offset_X.jpg

Shadow offset Y

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

Shadow_offset_Y.jpg

Shadow size

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

Shadow_size.jpg

Palette

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

Border_radius.jpg

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

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

neutral_icon.jpg

Off icon

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

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.

Control_width.jpg

Height

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

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

Control_height.jpg

Angle

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

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

Angle.jpg

Left

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

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

Left.jpg

Top

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

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

Top.jpg
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 it's 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.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. If the property is left empty, the component will be visible to all users.

This property is named "System authorization" for projects created on i4SCADA platform and "Permission" on i4connected platform projects.

System_authorization.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. If the property is left empty, the component will be visible to all users.

This property is named "Project authorization" for projects created on i4SCADA platform and "Role" on i4connected platform projects.

Project_authorization.jpg

Security access behavior

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.

Security_access_behavior.jpg

Layout

Layout mode

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

Layout_mode.jpg

Margin

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

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

Margin_small.jpg

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

Margin_large.jpg

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

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

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

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

Effects

Opacity

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

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

Opacity.jpg

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

Opacity_slider.jpg

Shadow color

Sets the color of the component'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 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 pixels for the component padding, hence defining the space between the components contents and its border. The padding value can be either manually typed in the designated field or increased / decreased by clicking the up and down arrows.

Padding_appearance.jpg

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 are available in the "Year, month, and day tokens" chapter under https://momentjs.com/docs/.

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

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 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 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 percentage. The border radius value can be either manually typed in the designated field or increased / decreased by clicking the up and down arrows.

This field supports the standard CSS notation.

Border_radius.jpg

Border width

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

Border_width.jpg

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 their own set of properties. The user can add states, by clicking the Add new state button.

Current_states.jpg

Further more, 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# 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) 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 pin-point 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 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's 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.

Control_width.jpg

Height

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

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

Control_height.jpg

Angle

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

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

Angle.jpg

Left

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

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

Left.jpg

Top

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

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

Top.jpg
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.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. If the property is left empty, the component will be visible to all users.

This property is named "System authorization" for projects created on i4SCADA platform and "Permission" on i4connected platform projects.

System_authorization.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. If the property is left empty, the component will be visible to all users.

This property is named "Project authorization" for projects created on i4SCADA platform and "Role" on i4connected platform projects.

Project_authorization.jpg

Security access behavior

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.

Security_access_behavior.jpg

Layout

Layout mode

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

Layout_mode.jpg

Margin

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

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

Margin_small.jpg

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

Margin_large.jpg

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

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

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

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

Effects

Opacity

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

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

Opacity.jpg

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

Opacity_slider.jpg

Shadow color

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

Display vertical

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

Display_vertical.jpg

Padding

Sets the pixels for the component padding, hence defining the space between the components contents and its border. The padding value can be either manually typed in the designated field or increased / decreased by clicking the up and down arrows.

Pading.jpg

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 percentage. The border radius value can be either manually typed in the designated field or increased / decreased by clicking the up and down arrows.

This field supports the standard CSS notation.

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

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 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 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 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 CSS class for the On icon of the component. 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.

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.

Control_width.jpg

Height

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

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

Control_height.jpg

Angle

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

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

Angle.jpg

Left

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

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

Left.jpg

Top

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

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

Top.jpg