i4designer Knowledgebase

Visualization

Abstract

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

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

Gauge
Abstract

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

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

Gauge_control.jpg

The Gauge component

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

The below table lists all the Gauge component properties:

Category

Property

Description

Common

Name

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

Name.jpg

Object ID

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

Object_ID.jpg

Tooltip text

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

Tooltip.jpg

Security

System authorization / Permission

The system authorization required to display the component. If the logged in user does not have this system authorization, the component will not be visible. 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

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

Configuration

Min range

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

Min_range.jpg

Max range

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

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

Max_range.jpg

Low range start

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

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

Low_range_start.jpg

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

Low range end

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

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

Low_range_end.jpg

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

High range start

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

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

High_range_start.jpg

High range end

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

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

High_range_end.jpg

Appearance

Label padding

The label padding can be either manually typed in the designated field or increased/decreased by clicking the up and down arrows.

Sets the signal name padding expressed in pixels, hence defining the space between the signal name label and the border.

Label_padding.jpg

Show signal label

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

Show_signal_label.jpg

Range labels padding

The label padding can be either manually typed in the designated field or increased/decreased by clicking the up and down arrows.

Sets the range labels padding expressed in pixels, hence defining the space between the range labels and their borders.

Range_labels_padding.jpg

Show min / max label

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

Show_min-max_label.jpg

Show value label

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

Show_value_label.jpg

Palette

Arc stroke color

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

ARC_STROKE_COLOR.jpg

Arc background

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

Arc_background.jpg

Progress color

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

Progress_color.jpg

Label foreground

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

Label_foreground.jpg

Value background

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

Value_background.jpg

Value foreground

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

Value_foreground.jpg

Low range fill color

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

Low_range_fill_color.jpg

High range fill color

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

High_range_fill_color.jpg

Range foreground

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

Range_foreground.jpg

Style

Skin

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

Skin.jpg

Icon

Icon class

Sets the CSS class for the icon of the component.

The icon can be selected from a large 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

Typography

Signal name font size

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

Signal_name_font_size.jpg

Label font weight

Sets the text thickness of the signal name label, selecting from the drop-down list options: 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

Value font size

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

Value_font_size.jpg

Value font weight

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

Value_font_weight.jpg

Ranges font size

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

Ranges_font_size.jpg

Ranges font weight

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

Ranges_fonbt_weight.jpg

Transform

Width

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

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

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

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

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

Sensor_component.jpg

The Sensor component

This condition based component features the following properties:

Category

Property

Description

Common

Name

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

Name.jpg

Object ID

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

Example: Setpoint [OID]

Object_ID.jpg

Tooltip text

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

Tooltip_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 number of the column where the component starts, measured in pixels. The default value can be increased or decreased, either by manually typing in the desired value, or by using the up and down arrows.

Layout_mode.jpg

Margin

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

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

Margin_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

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

Setpoint signal name

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

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

Setpoint_signal_name.jpg

Appearance

Sensor position

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

Sensor_position.jpg

Sensor shape

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

Sensor_shape.jpg

Pointer rotation

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

Pointer_rotation.jpg

Unit visibility

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

Unit_visibility.jpg

Pin size

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

Pin_size.jpg

Configuration

Format

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

Format.jpg

Static unit text

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

Static_unit_text.jpg

Palette

Sensor background

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

Sensor_background.jpg

Sensor foreground

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

Sensor_foreground.jpg

Sensor border color

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

Sensor_border_color.jpg

Label background

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

Label_background.jpg

Label foreground

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

Label_foreground.jpg

Label border color

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

Label_border_color.jpg

Setpoint background

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

Setpoint_background.jpg

Setpoint foreground

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

Setpoint_foreground.jpg

Setpoint border color

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

Setpoint_border_color.jpg

States

Current States

A component can have multiple states, each carrying 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
Signal information
Abstract

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

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

signal_information.jpg

The Signal information component

Category

Property

Description

Common

Name

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

Name.jpg

Object ID

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

Example: Setpoint [OID]

Object_ID.jpg

Tooltip text

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

Tooltip_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

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

Log tag name

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

Log_tag_name.jpg

Configuration

Property name

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

property_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
State indicator
Abstract

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

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

State_indicator_component.jpg

The State indicator component

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

Category

Property

Description

Common

Name

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

Name.jpg

Object ID

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

Example: Setpoint [OID]

Object_ID.jpg

Tooltip text

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

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

Configuration

Label text

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

Label_text.jpg

Typography

Font size

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

Font_size.jpg

Icon font size

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

Icon_font_size.jpg

Text alignment

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

Text_alignment.jpg

Appearance

Display label

Enables or disables the visibility of the component label.

Display_label.jpg

Indicator position

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

Indicator_position.jpg

Indicator size

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

Indicator_size.jpg

Palette

Indicator background

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

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

Indicator_background.jpg

Indicator border color

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

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

Indicator_border_color.jpg

Label background

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

As the color palette is injected 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 of the indicator label. The user can either manually type in the HEX color code or use the color picker tool.

As the color palette is injected 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 border color of the indicator label. The user can either manually type in the HEX color code or use the color picker tool.

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

Label_border_color.jpg

Icon

Icon class

Sets the CSS class for the icon of the component.

The icon can be selected from a large 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

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.

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

Left.jpg

Top

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

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

Top.jpg
Signal value
Abstract

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

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

Signal_value.jpg

The Signal value component

Category

Property

Description

Common

Name

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

Name.jpg

Object ID

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

Example: Setpoint [OID]

Obje_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 projectAuthroization property. In this case, the element can be either disabled or hidden.

Security_access_behavior.jpg

Layout

Layuot 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

Configuration

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

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: DD.MM.YYYY hh:mm:ss

DateTime_format.jpg

Is alphanumeric

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

Is_alphanumeric.jpg

Is datetime

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

Is_datetime.jpg

Signal changed duration

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

Signal_changed_duration.jpg

Signal changed class

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

Signal_changed_class.jpg

Signal

Array delimiter

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

Array_delimiter.jpg

Array index

Defines the index of the displayed value from the array.

Array_index.jpg

Is array

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

Is_array.jpg

Signal value factor

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

Signal_value_factor.jpg

Signal name

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

Signal_name.jpg

Palette

Background color

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

Border color

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

Appearance

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

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

X

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

Y

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

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

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

Image_component.jpg

The Image component

Category

Property

Description

Common

Name

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

Name.jpg

Object ID

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

Example: Setpoint [OID]

Object_IF.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 "Project authorization" for projects created on i4SCADA platform and "Role" 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 projectAuthroization 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

Image filter

Sets the CSS filters of the image.

Image_filter.jpg

Shadow color

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

Shadow_color.jpg

Shadow offset X

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

Shadow_offset_X.jpg

Shadow offset Y

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

Shadow_offset_Y.jpg

Shadow size

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

Shadow_size.jpg

Configuration

Image

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

The maximum image size is of 1MB.

Image.jpg

Appearance

Background position

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

  • center (default) - background image is positioned centrally

  • left - background image is positioned to the left

  • right - background image is positioned to the right

  • top - background image is positioned to the top

  • bottom - background image is positioned to the bottom

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

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

Background repeat

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

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

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

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

  • inherit - gets the property from the parent element

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

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

Background_repeat.jpg

Background size

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

Background_size.jpg

Palette

Background color

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

Background_color.jpg

Border color

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

Border_color.jpg

Style

Border width

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

Border_width.jpg

Navigation

Is internal link

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

Is_internal_link.jpg

Link

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

Link.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
State image
Abstract

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

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

State_image.jpg

The State image component

Category

Property

Description

Configuration

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

Image filter

Sets the CSS filters of the image.

Image_filter.jpg

Shadow color

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

Shadow_color.jpg

Shadow offset X

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

Shadow_offset_X.jpg

Shadow offset Y

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

Shadow_offset_Y.jpg

Shadow size

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

Shadow_size.jpg

Palette

Background color

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

Background_color.jpg

Border color

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

Border_color.jpg

Appearance

Background position

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

  • center (default) - background image is positioned centrally

  • left - background image is positioned to the left

  • right - background image is positioned to the right

  • top - background image is positioned to the top

  • bottom - background image is positioned to the bottom

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

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

Background repeat

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

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

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

  • repeat-x - the image will be repeated horizontally

  • repeat-y - the image will be repeated vertically

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

Background_repeat.jpg

Background size

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

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

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

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

  • inherit - gets the property from the parent element

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

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

Background_size.jpg

Style

Border width

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

Border_width.jpg

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
Svg path
Abstract

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

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

Svg_path.jpg

The Svg path component

Category

Property

Description

Common

Name

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

Name.jpg

Object ID

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

Example: Setpoint [OID]

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

Configuration

Path CSS Class

Sets an optional class name for the Svg path.

Path_css_class.jpg

Path data

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

  • M = moveto

  • L = lineto

  • H = horizontal lineto

  • V = vertical lineto

  • C = curveto

  • S = smooth curveto

  • Q = quadratic Bézier curve

  • T = smooth quadratic Bézier curveto

  • A = elliptical Arc

  • Z = closepath

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

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

Path_data.jpg

View box

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

For example: 0 0 100 100

viewBox.jpg

Shape

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

Shape.jpg

Navigation

Is internal link

Sets the link as internal if property is set to True.

Navigation parameters

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

Add_nav_param.jpg

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

Viw_list.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# Parameter name

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

Param_name.jpg

Write item# Value

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

param_value.jpg

Navigation url

Sets the navigation url for the svg path component. The navigation structure can be either directly typed in the designated field, or selected from the navigation tree, enabled by clicking the Open file explorer button.

Navigation_url.jpg

Appearance

Aspect ratio

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

Aspect_ratio.jpg

Padding

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

Fill

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

Fill.jpg

Stroke color

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

Stroke.jpg

Style

Stroke width

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

Stroke_width.jpg

States

Current States

A component can have multiple states, each carrying 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
Bar graph chart
Abstract

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

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

Bar_graph_chart.jpg

The Bar graph chart 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_IF.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 projectAuthroization property. In this case, the element can be either disabled or hidden.

Security_access_behavior.jpg

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

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

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

ProgressBar Opacity

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

Opacity_up_and_down_arrows.jpg

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

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

Opacity_Progress_bar.jpg

ProgressBar Ratio

Sets the ratio of the progress bar, allowing the user to chose a percentage value starting with 0 and ending with 100.

ProgressBar_Ratio.jpg

Regions

Allows the user to define a sequence of regions that will split the chart.

Regions.jpg

By clicking the Expand array list button the Add new item is exposed. In order to add a new region, the user needs to specify the following settings:

  • Foreground - sets the foreground color of the region.

  • From - sets the region starting point.

  • To - sets the region ending point.

Unit label

Allows the user to enable / disable the display of the unit label.

Unit_label.jpg

Value label

Allows the user to enable / disable the display of the value label.

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

Configuration

Format

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

Format.jpg

Max range

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

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

Max_range.jpg

Min range

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

Min_range.jpg

Ticks number

Sets the number of ticks displayed by the progress bar slider.

Ticks_number.jpg

Title text

Sets the text displayed by the component header.

Title_text.jpg

Appearance

Chart orientation

Allow the user to set the orientation of the chart to vertical or horizontal.

Chart_orientation.jpg

Show ticks labels

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

Show_ticks_labels.jpg

Palette

Foreground

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

Foreground.jpg

Transform

Angle

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

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

Angle.jpg

Height

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

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

Control_height.jpg

Left

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

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

Left.jpg

Top

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

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

Top.jpg

Width

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

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

Control_width.jpg