Visualization
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
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.
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).  |
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.  | |
Tooltip text | Sets the component's tooltip, to be displayed when hovering the component, at run-time.  | |
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.  |
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.  | |
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.  | |
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.  |
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.  The Margin editor can be opened by clicking the Open button.  The components margins can be updated by setting the margin value and selecting the desired unit:
| |
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.  By clicking the Open button the view is extended to display the Opacity slider.  |
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 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 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 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.  | |
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.  |
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.  |
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.  | |
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.  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.  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 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.  | |
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.  |
Show signal label | Sets the visibility of the signal value label, by toggling the switch as True or False.  | |
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.  | |
Show min / max label | Sets the visibility of the min / max labels, by toggling the switch as True or False.  | |
Show value label | Sets the visibility of the signal name label, by toggling the switch as True or False.  | |
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 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.  | |
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.  | |
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.  | |
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 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.  | |
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.  | |
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.  | |
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.  | |
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.  |
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.  |
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.  |
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).  | |
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 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 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 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).  | |
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.  |
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.  | |
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.  | |
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.  | |
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.  |
Sensor
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.
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).  |
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]  | |
Tooltip text | Optional tooltip text, that will be shown on mouseover at runtime.  | |
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. |
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. | |
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. | |
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.  |
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. The Margin editor can be opened by clicking the Open button. The components margins can be updated by setting the margin value and selecting the desired unit:
| |
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. By clicking the Open button the view is extended to display the Opacity slider. |
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 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 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 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. | |
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. |
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.  | |
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 shape | Sets the shape of the sensor, allowing the user to select from the drop-down list options: square, ellipse and pin.  | |
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.  | |
Unit visibility | Sets the visibility of the unit value, by toggling between True and False values.  | |
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.  | |
Configuration | Format | Sets the format of numerical values. The available numeric formats can be found under https://github.com/adamwdraper/Numeral-js.  |
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.  | |
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 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 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.  | |
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 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 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.  | |
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 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 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.  | |
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.  Further more, the following actions are available for each state:
|
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:
 | |
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.  | |
State# Symbolic text | The language-agnostic text (which is automatically translated) displayed by the extension.  | |
State# Display state | Sets the component visibility and accessibility when the state evolution passed. The user can choose from the following options:
 | |
State# Foreground | Sets the foreground color of the button. Applying this property will override the default css class.  | |
State# Background | Sets the background color of the button. Applying this property will override the default css class.  | |
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.  | |
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.  | |
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.  | |
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. |
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. | |
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. | |
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. | |
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. |
Signal information
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.
The Signal information component
Category | Property | Description |
|---|---|---|
Common | Name | The name of the component, visible in other Designer locations (such as Page explorer). |
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]  | |
Tooltip text | Optional tooltip text, that will be shown on mouseover at runtime.  | |
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. |
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. | |
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. | |
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. |
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. The Margin editor can be opened by clicking the Open button. The components margins can be updated by setting the margin value and selecting the desired unit:
| |
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. By clicking the Open button the view is extended to display the Opacity slider. |
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 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 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 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. | |
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. |
Log tag name | Sets the log tag that will be displayed by the component.  | |
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.  |
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. |
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. | |
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. | |
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. | |
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. |
State indicator
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.
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). |
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]  | |
Tooltip text | Optional tooltip text, that will be shown on mouseover at runtime.  | |
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. |
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. | |
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. | |
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. |
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. The Margin editor can be opened by clicking the Open button. The components margins can be updated by setting the margin value and selecting the desired unit:
| |
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. By clicking the Open button the view is extended to display the Opacity slider. |
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 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 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 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. | |
Configuration | Label text | Sets the text of the control label, visible at both design and run-time.  |
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.  |
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.  | |
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.  | |
Appearance | Display label | Enables or disables the visibility of the component label.  |
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 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.  | |
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 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.  | |
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 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 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.  | |
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.  |
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. Further more, the following actions are available for each state:
|
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:
| |
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. | |
State# Symbolic text | The language-agnostic text (which is automatically translated) displayed by the extension. | |
State# Display state | Sets the component visibility and accessibility when the state evolution passed. The user can choose from the following options:
| |
State# Foreground | Sets the foreground color of the button. Applying this property will override the default css class. | |
State# Background | Sets the background color of the button. Applying this property will override the default css class. | |
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. | |
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. | |
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. | |
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. |
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. | |
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. | |
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. | |
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. |
Signal value
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.
The Signal value component
Category | Property | Description |
|---|---|---|
Common | Name | The name of the component, visible in other Designer locations (such as Page explorer). |
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]  | |
Tooltip text | Optional tooltip text, that will be shown on mouseover at runtime.  | |
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. |
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. | |
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. | |
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. |
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. The Margin editor can be opened by clicking the Open button. The components margins can be updated by setting the margin value and selecting the desired unit:
| |
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. By clicking the Open button the view is extended to display the Opacity slider. |
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 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 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 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. | |
Configuration | Format | The format of the numeric values. For more details about the available numeric formats the user can be found on the Github.  |
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  | |
Is alphanumeric | Defines the signal value as alphanumeric. If true, the signal value will not be considered as pure numeric and can be displayed without taking into account the property format.  | |
Is datetime | Defines the signal value as datetime. If true, the signal value will be considered as date time and will consider the value of the DateTime format property.  | |
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 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 | Array delimiter | Defines the delimiter of the values in the array. By default, the comma delimiter is set.  |
Array index | Defines the index of the displayed value from the array.  | |
Is array | Sets the values as an array. If the value is true, the property format will no longer be taken into account.  | |
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 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. | |
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.  |
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.  | |
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.  | |
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 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.  | |
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.  |
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).  | |
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 family | Sets the font family of the component font, selecting from web-safe fonts available in the drop-down list.  | |
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.  |
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. Further more, the following actions are available for each state:
|
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:
| |
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. | |
State# Symbolic text | The language-agnostic text (which is automatically translated) displayed by the extension. | |
State# Display state | Sets the component visibility and accessibility when the state evolution passed. The user can choose from the following options:
| |
State# Foreground | Sets the foreground color of the button. Applying this property will override the default css class. | |
State# Background | Sets the background color of the button. Applying this property will override the default css class. | |
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. | |
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. | |
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. | |
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. |
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. | |
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. | |
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. | |
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. |
Image
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:
The Image component
Category | Property | Description |
|---|---|---|
Common | Name | The name of the component, visible in other Designer locations (such as Page explorer).  |
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]  | |
Tooltip text | Optional tooltip text, that will be shown on mouseover at runtime. | |
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. |
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. | |
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. | |
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. |
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. The Margin editor can be opened by clicking the Open button. The components margins can be updated by setting the margin value and selecting the desired unit:
| |
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. By clicking the Open button the view is extended to display the Opacity slider. |
Image filter | Sets the CSS filters of the image.  | |
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 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 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 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. | |
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.  |
Appearance | Background position | Sets the background position of the image used by the component, selecting from the drop-down list options:
 |
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.  | |
Background repeat | Sets the background repeat mode of the image used by the component, selecting from the drop-down list options:
 | |
Background size | Sets the size of the background, reported to the image used by the component, selecting from the drop-down list options:  | |
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.  |
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.  | |
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.  |
Navigation | Is internal link | Defines if by clicking on an image, the link navigates to an internal or an external page.  |
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.  | |
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. |
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. | |
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. | |
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. | |
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. |
State image
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:
The State image component
Category | Property | Description |
|---|---|---|
Configuration | Name | The name of the component, visible in other Designer locations (such as Page explorer). |
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]  | |
Tooltip text | Optional tooltip text, that will be shown on mouseover at runtime.  | |
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. |
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. | |
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. | |
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. |
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. The Margin editor can be opened by clicking the Open button. The components margins can be updated by setting the margin value and selecting the desired unit:
| |
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. By clicking the Open button the view is extended to display the Opacity slider. |
Image filter | Sets the CSS filters of the image. | |
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 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 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 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. | |
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. |
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. | |
Appearance | Background position | Sets the background position of the component. The positioning can be selected from the drop-down list options:
 |
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. | |
Background repeat | Sets the background repeat mode of the image used by the component, selecting from the drop-down list options:
 | |
Background size | Sets the size of the background, reported to the image used by the component, selecting from the drop-down list options:
 | |
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. |
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. Further more, the following actions are available for each state:
|
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:
| |
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. | |
State# Symbolic text | The language-agnostic text (which is automatically translated) displayed by the extension. | |
State# Display state | Sets the component visibility and accessibility when the state evolution passed. The user can choose from the following options:
| |
State# Foreground | Sets the foreground color of the button. Applying this property will override the default css class. | |
State# Background | Sets the background color of the button. Applying this property will override the default css class. | |
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. | |
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. | |
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. | |
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. |
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. | |
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. | |
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. | |
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. |
Svg path
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.
The Svg path component
Category | Property | Description |
|---|---|---|
Common | Name | The name of the component, visible in other Designer locations (such as Page explorer). |
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] | |
Tooltip text | Optional tooltip text, that will be shown on mouseover at runtime. | |
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. |
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. | |
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. | |
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. |
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. The Margin editor can be opened by clicking the Open button. The components margins can be updated by setting the margin value and selecting the desired unit:
| |
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. By clicking the Open button the view is extended to display the Opacity slider. |
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 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 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 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. | |
Configuration | Path CSS Class | Sets an optional class name for the Svg path.  |
Path data | Sets the vector data for the path having the following command available:
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  | |
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  | |
Shape | Sets the svg shape, selecting from the drop-down list items: none, triangle, rectangle and ellipse.  | |
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.  In order to see the list of items the user can click on the Expand array list button.  Further more, the following actions are available for each item:
| |
Write item# Parameter name | Sets the name of the signal that will be represented or manipulated by the component.  | |
Write item# Value | Sets the signal value that will be considered, at run-time, by the component.  | |
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.  | |
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.  |
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. | |
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.  |
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.  | |
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.  |
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. Further more, the following actions are available for each state:
|
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:
| |
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. | |
State# Symbolic text | The language-agnostic text (which is automatically translated) displayed by the extension. | |
State# Display state | Sets the component visibility and accessibility when the state evolution passed. The user can choose from the following options:
| |
State# Foreground | Sets the foreground color of the button. Applying this property will override the default css class. | |
State# Background | Sets the background color of the button. Applying this property will override the default css class. | |
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. | |
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. | |
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. | |
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. |
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. | |
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. | |
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. | |
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. |
Bar graph chart
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.
The Bar graph chart component
Category | Property | Description |
|---|---|---|
Common | Name | The name of the component, visible in other Designer locations (such as Page explorer).  |
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] | |
Tooltip text | Optional tooltip text, that will be shown on mouseover at runtime. | |
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. |
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. | |
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. | |
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. |
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. The Margin editor can be opened by clicking the Open button. The components margins can be updated by setting the margin value and selecting the desired unit:
| |
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. By clicking the Open button the view is extended to display the Opacity slider. |
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 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 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 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. | |
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. |
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).  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.  |
ProgressBar Ratio | Sets the ratio of the progress bar, allowing the user to chose a percentage value starting with 0 and ending with 100.  | |
Regions | Allows the user to define a sequence of regions that will split the chart.  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:
| |
Unit label | Allows the user to enable / disable the display of the unit label.  | |
Value label | Allows the user to enable / disable the display of the value label.  | |
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. |
Configuration | Format | Sets the format of numerical values. The available numeric formats can be found under https://github.com/adamwdraper/Numeral-js. |
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. | |
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. | |
Ticks number | Sets the number of ticks displayed by the progress bar slider.  | |
Title text | Sets the text displayed by the component header.  | |
Appearance | Chart orientation | Allow the user to set the orientation of the chart to vertical or horizontal.  |
Show ticks labels | Enables the display of ticks labels if property is set to True.  | |
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.  |
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. |
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. | |
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. | |
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. | |
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. |