i4designer Knowledgebase

Miscellaneous

Abstract

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

The components available in the Miscellaneous category of the i4designer Toolbox panel are described individually in the upcoming articles.

Car 1
Abstract

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

The i4designer Car 1 is an SVG graphic component capable to display multiple states based on different signals.

Car_1.jpg

The Car component

Category

Property

Description

Common

Name

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

Name_pipe.jpg

Object ID

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

Example: Setpoint [OID]

Object_ID.jpg

Tooltip text

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

Tooltip_text.jpg

Security

System authorization

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

System_authorization.jpg

Project authorization

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

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

Column end

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.

Column_end.jpg

Column start

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

Column_end.jpg

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.

Row end

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

Row_end.jpg

Row start

Sets the number of the row where the components starts to stretch. The default value can be increased or decreased, either by manually typing in the desired value, or by using the up and down arrows.

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

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

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.

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

The style of the icon for the current state. The CSS class name selection can be done by choosing from the drop-down list values: none, normal, danger, hand, writing and running.

CSS_class_name.jpg

State# Symbolic text

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

Symbolic_text.jpg

State# Is visible

Sets the component visibility when the state evaluation passed.

Is_visible.jpg

State# Is enabled

Sets the component accessibility when the state evolution passed.

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

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

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

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

The i4designer Car is an SVG graphic component capable to display multiple states based on different signals.

Car.jpg

The Car component

Category

Property

Description

Common

Name

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

Name_pipe.jpg

Object ID

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

Example: Setpoint [OID]

Object_ID.jpg

Tooltip text

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

Tooltip_text.jpg

Security

System authorization

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

System_authorization.jpg

Project authorization

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

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

Column end

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.

Column_end.jpg

Column start

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

Column_end.jpg

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.

Row end

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

Row_end.jpg

Row start

Sets the number of the row where the components starts to stretch. The default value can be increased or decreased, either by manually typing in the desired value, or by using the up and down arrows.

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

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

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.

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

The style of the icon for the current state. The CSS class name selection can be done by choosing from the drop-down list values: none, normal, danger, hand, writing and running.

CSS_class_name.jpg

State# Symbolic text

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

Symbolic_text.jpg

State# Is visible

Sets the component visibility when the state evaluation passed.

Is_visible.jpg

State# Is enabled

Sets the component accessibility when the state evolution passed.

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

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_class.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
HMI terminal
Abstract

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

The i4designer MHI terminal is an SVG graphic component capable to display multiple states based on different signals.

HMI_terminal.jpg

The HMI terminal

Category

Property

Description

Common

Name

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

Name_pipe.jpg

Object ID

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

Example: Setpoint [OID]

Object_ID.jpg

Tooltip text

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

Tooltip_text.jpg

Security

System authorization

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

System_authorization.jpg

Project authorization

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

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

Column end

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.

Column_end.jpg

Column start

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

Column_end.jpg

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.

Row end

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

Row_end.jpg

Row start

Sets the number of the row where the components starts to stretch. The default value can be increased or decreased, either by manually typing in the desired value, or by using the up and down arrows.

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

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

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.

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

The style of the icon for the current state. The CSS class name selection can be done by choosing from the drop-down list values: none, normal, danger, hand, writing and running.

CSS_class_name.jpg

State# Symbolic text

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

Symbolic_text.jpg

State# Is visible

Sets the component visibility when the state evaluation passed.

Is_visible.jpg

State# Is enabled

Sets the component accessibility when the state evolution passed.

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

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_class.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
Light bulb
Abstract

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

The i4designer Light bulb is an SVG graphic component capable to display multiple states based on different signals.

Light_bulb.jpg

The Light bulb component

Category

Property

Description

Common

Name

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

Name_pipe.jpg

Object ID

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

Example: Setpoint [OID]

Object_ID.jpg

Tooltip text

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

Tooltip_text.jpg

Security

System authorization

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

System_authorization.jpg

Project authorization

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

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

Column end

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.

Column_end.jpg

Column start

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

Column_end.jpg

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.

Row end

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

Row_end.jpg

Row start

Sets the number of the row where the components starts to stretch. The default value can be increased or decreased, either by manually typing in the desired value, or by using the up and down arrows.

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

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

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.

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

The style of the icon for the current state. The CSS class name selection can be done by choosing from the drop-down list values: none, normal, danger, hand, writing and running.

CSS_class_name.jpg

State# Symbolic text

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

Symbolic_text.jpg

State# Is visible

Sets the component visibility when the state evaluation passed.

Is_visible.jpg

State# Is enabled

Sets the component accessibility when the state evolution passed.

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

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_class.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
PC
Abstract

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

The i4designer PC is an SVG graphic component capable to display multiple states based on different signals.

PC_component.jpg

The PC component

Category

Property

Description

Common

Name

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

Name_pipe.jpg

Object ID

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

Example: Setpoint [OID]

Object_ID.jpg

Tooltip text

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

Tooltip_text.jpg

Security

System authorization

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

System_authorization.jpg

Project authorization

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

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

Column end

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.

Column_end.jpg

Column start

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

Column_end.jpg

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.

Row end

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

Row_end.jpg

Row start

Sets the number of the row where the components starts to stretch. The default value can be increased or decreased, either by manually typing in the desired value, or by using the up and down arrows.

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

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

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.

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

The style of the icon for the current state. The CSS class name selection can be done by choosing from the drop-down list values: none, normal, danger, hand, writing and running.

CSS_class_name.jpg

State# Symbolic text

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

Symbolic_text.jpg

State# Is visible

Sets the component visibility when the state evaluation passed.

Is_visible.jpg

State# Is enabled

Sets the component accessibility when the state evolution passed.

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

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_class.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
Refrigerator
Abstract

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

The i4designer Refrigerator is an SVG graphic component capable to display multiple states based on different signals.

Refrigerator.jpg

The Refrigerator component

Category

Property

Description

Common

Name

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

Name_pipe.jpg

Object ID

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

Example: Setpoint [OID]

Object_ID.jpg

Tooltip text

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

Tooltip_text.jpg

Security

System authorization

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

System_authorization.jpg

Project authorization

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

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

Column end

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.

Column_end.jpg

Column start

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

Column_end.jpg

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.

Row end

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

Row_end.jpg

Row start

Sets the number of the row where the components starts to stretch. The default value can be increased or decreased, either by manually typing in the desired value, or by using the up and down arrows.

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

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

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.

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

The style of the icon for the current state. The CSS class name selection can be done by choosing from the drop-down list values: none, normal, danger, hand, writing and running.

CSS_class_name.jpg

State# Symbolic text

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

Symbolic_text.jpg

State# Is visible

Sets the component visibility when the state evaluation passed.

Is_visible.jpg

State# Is enabled

Sets the component accessibility when the state evolution passed.

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

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_class.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
Robot
Abstract

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

The i4designer Robot is an SVG graphic component capable to display multiple states based on different signals.

Robot.jpg

The Robot component

Category

Property

Description

Common

Name

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

Name_pipe.jpg

Object ID

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

Example: Setpoint [OID]

Object_ID.jpg

Tooltip text

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

Tooltip_text.jpg

Security

System authorization

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

System_authorization.jpg

Project authorization

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

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

Column end

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.

Column_end.jpg

Column start

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

Column_end.jpg

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.

Row end

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

Row_end.jpg

Row start

Sets the number of the row where the components starts to stretch. The default value can be increased or decreased, either by manually typing in the desired value, or by using the up and down arrows.

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

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

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.

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

The style of the icon for the current state. The CSS class name selection can be done by choosing from the drop-down list values: none, normal, danger, hand, writing and running.

CSS_class_name.jpg

State# Symbolic text

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

Symbolic_text.jpg

State# Is visible

Sets the component visibility when the state evaluation passed.

Is_visible.jpg

State# Is enabled

Sets the component accessibility when the state evolution passed.

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

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_class.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
Server
Abstract

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

The i4designer Server is an SVG graphic component capable to display multiple states based on different signals.

Server.jpg

The Server component

Category

Property

Description

Common

Name

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

Name_pipe.jpg

Object ID

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

Example: Setpoint [OID]

Object_ID.jpg

Tooltip text

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

Tooltip_text.jpg

Security

System authorization

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

System_authorization.jpg

Project authorization

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

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

Column end

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.

Column_end.jpg

Column start

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

Column_end.jpg

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.

Row end

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

Row_end.jpg

Row start

Sets the number of the row where the components starts to stretch. The default value can be increased or decreased, either by manually typing in the desired value, or by using the up and down arrows.

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

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

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.

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

The style of the icon for the current state. The CSS class name selection can be done by choosing from the drop-down list values: none, normal, danger, hand, writing and running.

CSS_class_name.jpg

State# Symbolic text

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

Symbolic_text.jpg

State# Is visible

Sets the component visibility when the state evaluation passed.

Is_visible.jpg

State# Is enabled

Sets the component accessibility when the state evolution passed.

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

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