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.

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 or enabled (depending on the set Security access behavior). If the property is left empty, the component will be visible and enabled for all users. Further on, the user can also add multiple System authorizations / Permissions, separated by comma (,). This property is named "System authorization" for projects created on i4SCADA platform. This property is named "Permissions" for projects created on i4connected platform.
	Project authorization / Role	The project authorization required for displaying the component. If the logged in user does not have this project authorization, the component will not be visible or enabled (depending on the set Security access behavior). If the property is left empty, the component will be visible and enabled to all users. Further on, the user can also add multiple Project authorizations / Roles, separated by comma (,). This property is named "Project authorization" for projects created on i4SCADA platform. This property is named "Role" for projects created on i4connected platform.
	Security access behavior	Sets the behavior of the element to either disabled (grayed out) or hidden, when the logged in user doesn't meet the conditions imposed by the Project authorization / Roles and System authorization / Permissions properties. In case both Project authorization / Roles and System authorization / Permissions properties are set, the logged user needs to meet both conditions to be able to see and utilize the component, at run-time. In case both Project authorization / Roles and System authorization / Permissions properties are set, the logged user needs to meet both conditions to be able to see and utilize the component, at run-time.
Layout	Layout mode	Sets the behavior of the element to either disabled (grayed out) or hidden, when the logged in user doesn't meet the conditions imposed by the Project authorization / Roles and System authorization / Permissions properties.
Layout	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: 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. 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	Sets the padding of the component label (defines the space between the label and its border). The top, bottom, left and right values can either be typed in the main property field or by using the Padding editor. The Padding editor can be opened by clicking the Open button. The components padding can be updated by setting the value and the desired unit: Ems (em) - The em is a scalable unit. One em is equal to the current font-size; Pixels (px) - Pixels are 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.
	Show signal label	Sets the visibility of the signal value label, by toggling the switch as True or False.
	Range labels padding	Sets the range labels padding (defines the space between the range labels and their borders). The top, bottom, left and right values can either be typed in the main property field or by using the Padding editor. The Padding editor can be opened by clicking the Open button. The components padding can be updated by setting the value and the desired unit: Ems (em) - The em is a scalable unit. One em is equal to the current font-size; Pixels (px) - Pixels are 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.
	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

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.

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 or enabled (depending on the set Security access behavior). If the property is left empty, the component will be visible and enabled for all users. Further on, the user can also add multiple System authorizations / Permissions, separated by comma (,). This property is named "System authorization" for projects created on i4SCADA platform. This property is named "Permissions" for projects created on i4connected platform.
	Project authorization / Role	The project authorization required for displaying the component. If the logged in user does not have this project authorization, the component will not be visible or enabled (depending on the set Security access behavior). If the property is left empty, the component will be visible and enabled to all users. Further on, the user can also add multiple Project authorizations / Roles, separated by comma (,). This property is named "Project authorization" for projects created on i4SCADA platform. This property is named "Role" for projects created on i4connected platform.
	Security access behavior	Sets the behavior of the element to either disabled (grayed out) or hidden, when the logged in user doesn't meet the conditions imposed by the Project authorization / Roles and System authorization / Permissions properties. In case both Project authorization / Roles and System authorization / Permissions properties are set, the logged user needs to meet both conditions to be able to see and utilize the component, at run-time. In case both Project authorization / Roles and System authorization / Permissions properties are set, the logged user needs to meet both conditions to be able to see and utilize the component, at run-time.
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	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: 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. 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.
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.
Configuration	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: Move up Move down Clone state Remove 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: 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.
	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: 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.
	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

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.

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 or enabled (depending on the set Security access behavior). If the property is left empty, the component will be visible and enabled for all users. Further on, the user can also add multiple System authorizations / Permissions, separated by comma (,). This property is named "System authorization" for projects created on i4SCADA platform. This property is named "Permissions" for projects created on i4connected platform.
	Project authorization / Role	The project authorization required for displaying the component. If the logged in user does not have this project authorization, the component will not be visible or enabled (depending on the set Security access behavior). If the property is left empty, the component will be visible and enabled to all users. Further on, the user can also add multiple Project authorizations / Roles, separated by comma (,). This property is named "Project authorization" for projects created on i4SCADA platform. This property is named "Role" for projects created on i4connected platform.
	Security access behavior	Sets the behavior of the element to either disabled (grayed out) or hidden, when the logged in user doesn't meet the conditions imposed by the Project authorization / Roles and System authorization / Permissions properties. In case both Project authorization / Roles and System authorization / Permissions properties are set, the logged user needs to meet both conditions to be able to see and utilize the component, at run-time. In case both Project authorization / Roles and System authorization / Permissions properties are set, the logged user needs to meet both conditions to be able to see and utilize the component, at run-time.
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	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: 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. 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.
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

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.

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 or enabled (depending on the set Security access behavior). If the property is left empty, the component will be visible and enabled for all users. Further on, the user can also add multiple System authorizations / Permissions, separated by comma (,). This property is named "System authorization" for projects created on i4SCADA platform. This property is named "Permissions" for projects created on i4connected platform.
	Project authorization Role	The project authorization required for displaying the component. If the logged in user does not have this project authorization, the component will not be visible or enabled (depending on the set Security access behavior). If the property is left empty, the component will be visible and enabled to all users. Further on, the user can also add multiple Project authorizations / Roles, separated by comma (,). This property is named "Project authorization" for projects created on i4SCADA platform. This property is named "Role" for projects created on i4connected platform.
	Security access behavior	Sets the behavior of the element to either disabled (grayed out) or hidden, when the logged in user doesn't meet the conditions imposed by the Project authorization / Roles and System authorization / Permissions properties. In case both Project authorization / Roles and System authorization / Permissions properties are set, the logged user needs to meet both conditions to be able to see and utilize the component, at run-time. In case both Project authorization / Roles and System authorization / Permissions properties are set, the logged user needs to meet both conditions to be able to see and utilize the component, at run-time.
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	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: 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. 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: Move up Move down Clone state Remove 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: 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.
	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: 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.
	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

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.

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 or enabled (depending on the set Security access behavior). If the property is left empty, the component will be visible and enabled for all users. Further on, the user can also add multiple System authorizations / Permissions, separated by comma (,). This property is named "System authorization" for projects created on i4SCADA platform. This property is named "Permissions" for projects created on i4connected platform.
	Project authorization / Role	The project authorization required for displaying the component. If the logged in user does not have this project authorization, the component will not be visible or enabled (depending on the set Security access behavior). If the property is left empty, the component will be visible and enabled to all users. Further on, the user can also add multiple Project authorizations / Roles, separated by comma (,). This property is named "Project authorization" for projects created on i4SCADA platform. This property is named "Role" for projects created on i4connected platform.
	Security access behavior	Sets the behavior of the element to either disabled (grayed out) or hidden, when the logged in user doesn't meet the conditions imposed by the Project authorization / Roles and System authorization / Permissions properties. In case both Project authorization / Roles and System authorization / Permissions properties are set, the logged user needs to meet both conditions to be able to see and utilize the component, at run-time. In case both Project authorization / Roles and System authorization / Permissions properties are set, the logged user needs to meet both conditions to be able to see and utilize the component, at run-time.
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	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: 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. 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/#/parsing/string-format/. 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.
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.
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 padding of the component (defines the space between the component contents and its border). The top, bottom, left and right values can either be typed in the main property field or by using the Padding editor. The Padding editor can be opened by clicking the Open button. The components padding can be updated by setting the value and the desired unit: Ems (em) - The em is a scalable unit. One em is equal to the current font-size; Pixels (px) - Pixels are are fixed-size units. One pixel is equal to one dot on the computer screen (the smallest division of a screen’s resolution). Percent (%) - The percent unit is much like the “em” unit. When using the Percent unit the component remains fully scalable for mobile devices and accessibility.
States	Current States	A component can have multiple states, each carrying 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: Move up Move down Clone state Remove 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: 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.
	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: 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.
	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

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:

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 or enabled (depending on the set Security access behavior). If the property is left empty, the component will be visible and enabled for all users. Further on, the user can also add multiple System authorizations / Permissions, separated by comma (,). This property is named "System authorization" for projects created on i4SCADA platform. This property is named "Permissions" for projects created on i4connected platform.
	Project authorization / Role	The project authorization required for displaying the component. If the logged in user does not have this project authorization, the component will not be visible or enabled (depending on the set Security access behavior). If the property is left empty, the component will be visible and enabled to all users. Further on, the user can also add multiple Project authorizations / Roles, separated by comma (,). This property is named "Project authorization" for projects created on i4SCADA platform. This property is named "Role" for projects created on i4connected platform.
	Security access behavior	Sets the behavior of the element to either disabled (grayed out) or hidden, when the logged in user doesn't meet the conditions imposed by the Project authorization / Roles and System authorization / Permissions properties. In case both Project authorization / Roles and System authorization / Permissions properties are set, the logged user needs to meet both conditions to be able to see and utilize the component, at run-time. In case both Project authorization / Roles and System authorization / Permissions properties are set, the logged user needs to meet both conditions to be able to see and utilize the component, at run-time.
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	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: 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. 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: 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.
	Padding	Sets the padding of the component (defines the space between the component contents and its border). The top, bottom, left and right values can either be typed in the main property field or by using the Padding editor. The Padding editor can be opened by clicking the Open button. The components padding can be updated by setting the value and the desired unit: Ems (em) - The em is a scalable unit. One em is equal to the current font-size; Pixels (px) - Pixels are 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.
	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 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.
Palette	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.
Navigation	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

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:

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 or enabled (depending on the set Security access behavior). If the property is left empty, the component will be visible and enabled for all users. Further on, the user can also add multiple System authorizations / Permissions, separated by comma (,). This property is named "System authorization" for projects created on i4SCADA platform. This property is named "Permissions" for projects created on i4connected platform.
	Project authorization / Role	The project authorization required for displaying the component. If the logged in user does not have this project authorization, the component will not be visible or enabled (depending on the set Security access behavior). If the property is left empty, the component will be visible and enabled to all users. Further on, the user can also add multiple Project authorizations / Roles, separated by comma (,). This property is named "Project authorization" for projects created on i4SCADA platform. This property is named "Role" for projects created on i4connected platform.
	Security access behavior	Sets the behavior of the element to either disabled (grayed out) or hidden, when the logged in user doesn't meet the conditions imposed by the Project authorization / Roles and System authorization / Permissions properties. In case both Project authorization / Roles and System authorization / Permissions properties are set, the logged user needs to meet both conditions to be able to see and utilize the component, at run-time. In case both Project authorization / Roles and System authorization / Permissions properties are set, the logged user needs to meet both conditions to be able to see and utilize the component, at run-time.
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	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: 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. 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.
Palette	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: 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.
	Padding	Sets the padding of the component (defines the space between the component contents and its border). The top, bottom, left and right values can either be typed in the main property field or by using the Padding editor. The Padding editor can be opened by clicking the Open button. The components padding can be updated by setting the value and the desired unit: Ems (em) - The em is a scalable unit. One em is equal to the current font-size; Pixels (px) - Pixels are 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.
	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 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.
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: Move up Move down Clone state Remove 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: 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.
	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: 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.
	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 pat

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.

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 or enabled (depending on the set Security access behavior). If the property is left empty, the component will be visible and enabled for all users. Further on, the user can also add multiple System authorizations / Permissions, separated by comma (,). This property is named "System authorization" for projects created on i4SCADA platform. This property is named "Permissions" for projects created on i4connected platform. This property is named "Permissions" for projects created on i4connected platform.
	Project authorization / Role	The project authorization required for displaying the component. If the logged in user does not have this project authorization, the component will not be visible or enabled (depending on the set Security access behavior). If the property is left empty, the component will be visible and enabled to all users. Further on, the user can also add multiple Project authorizations / Roles, separated by comma (,). This property is named "Project authorization" for projects created on i4SCADA platform. This property is named "Role" for projects created on i4connected platform.
	Security access behavior	Sets the behavior of the element to either disabled (grayed out) or hidden, when the logged in user doesn't meet the conditions imposed by the Project authorization / Roles and System authorization / Permissions properties. In case both Project authorization / Roles and System authorization / Permissions properties are set, the logged user needs to meet both conditions to be able to see and utilize the component, at run-time. In case both Project authorization / Roles and System authorization / Permissions properties are set, the logged user needs to meet both conditions to be able to see and utilize the component, at run-time.
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	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: 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. 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: 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
	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	Allows possibility to set the link target to internal or external. If property is set to False, the user can manually fill in the target URL, to the Link property. If property is set to True a current project page can be set as target. The user can select the project page for the Link property or manually type in the path pointing to it.
	Navigation parameters	Allows possibility to add additional parameters for the navigation, 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: Move up Move down Clone Remove item
	Write item# Parameter name	Defines the name of the parameter(s) that will be passed to the source page (e.g. "panelSize").
	Write item# Value	Defines the value of the inserted parameter(s) that will be passed to the source page (e.g. - when passing the size of the panel - sm, md, lg, xlg, xxlg, 3xlg, 6xlg).
	Navigation url	The URL to an internal or external page, that will be displayed at run-time when clicking the component.
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.
Appearance	Padding	Sets the padding of the component (defines the space between the component contents and its border). The top, bottom, left and right values can either be typed in the main property field or by using the Padding editor. The Padding editor can be opened by clicking the Open button. The components padding can be updated by setting the value and the desired unit: Ems (em) - The em is a scalable unit. One em is equal to the current font-size; Pixels (px) - Pixels are are fixed-size units. One pixel is equal to one dot on the computer screen (the smallest division of a screen’s resolution). Percent (%) - The percent unit is much like the “em” unit. When using the Percent unit the component remains fully scalable for mobile devices and accessibility.
Palette	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.
Palette	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: Move up Move down Clone state Remove 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: 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.
	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: 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.
	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

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.

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	System authorization / Permission	The system authorization required to display the component. If the logged in user does not have this system authorization, the component will not be visible or enabled (depending on the set Security access behavior). If the property is left empty, the component will be visible and enabled for all users. Further on, the user can also add multiple System authorizations / Permissions, separated by comma (,). This property is named "System authorization" for projects created on i4SCADA platform. This property is named "Permissions" for projects created on i4connected platform.
	Project authorization / Role	The project authorization required for displaying the component. If the logged in user does not have this project authorization, the component will not be visible or enabled (depending on the set Security access behavior). If the property is left empty, the component will be visible and enabled to all users. Further on, the user can also add multiple Project authorizations / Roles, separated by comma (,). This property is named "Project authorization" for projects created on i4SCADA platform. This property is named "Role" for projects created on i4connected platform.
	Security access behavior	Sets the behavior of the element to either disabled (grayed out) or hidden, when the logged in user doesn't meet the conditions imposed by the Project authorization / Roles and System authorization / Permissions properties. In case both Project authorization / Roles and System authorization / Permissions properties are set, the logged user needs to meet both conditions to be able to see and utilize the component, at run-time. In case both Project authorization / Roles and System authorization / Permissions properties are set, the logged user needs to meet both conditions to be able to see and utilize the component, at run-time.
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	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: 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. 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.
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	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.
	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.
	Value format	Sets the format of numerical values. The available numeric formats can be found under https://github.com/adamwdraper/Numeral-js.
Appearance	Orientation	Sets the orientation of the menu to Vertical down, Vertical up, Horizontal left, Horizontal right. The user can select the orientation from the options available in the designated drop-down list.
	Show ticks labels	Enables the display of ticks labels if property is set to True.
	Show unit label	Allows the user to enable / disable the display of the unit label.
	Show value label	Allows the user to enable / disable the display of the value label.
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.
Palette	Progressbar color	Sets the color of the component's progress bar. The user can either manually type in the HEX color code or use the color picker tool.
Typography	Font family	Sets the font family of the component font, selecting from web-safe fonts available in the drop-down list.
	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 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).
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.

Bar graph

Abstract

Check out this article and learn more details about the design-time properties of the Bar graph component and how to decide which settings suit you best.

The i4designer Bar graph 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 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 or enabled (depending on the set Security access behavior). If the property is left empty, the component will be visible and enabled for all users. Further on, the user can also add multiple System authorizations / Permissions, separated by comma (,). This property is named "System authorization" for projects created on i4SCADA platform. This property is named "Permissions" for projects created on i4connected platform.
	Project authorization / Role	The project authorization required for displaying the component. If the logged in user does not have this project authorization, the component will not be visible or enabled (depending on the set Security access behavior). If the property is left empty, the component will be visible and enabled to all users. Further on, the user can also add multiple Project authorizations / Roles, separated by comma (,). This property is named "Project authorization" for projects created on i4SCADA platform. This property is named "Role" for projects created on i4connected platform.
	Security access behavior	Sets the behavior of the element to either disabled (grayed out) or hidden, when the logged in user doesn't meet the conditions imposed by the Project authorization / Roles and System authorization / Permissions properties. In case both Project authorization / Roles and System authorization / Permissions properties are set, the logged user needs to meet both conditions to be able to see and utilize the component, at run-time. In case both Project authorization / Roles and System authorization / Permissions properties are set, the logged user needs to meet both conditions to be able to see and utilize the component, at run-time.
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	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: 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. 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	Max scale	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.
	Max scale signal name	Applies the signal that will be considered by the maximum scale. 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.
	Min scale	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 scale signal name	Applies the signal that will be considered by the minimum scale. 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.
	Ticks number	The number of ticks to be displayed on the scale, between the min and max values of the scale.
	Title text	Sets the text displayed by the component header.
	Value format	Sets the format of numerical values. The available numeric formats can be found under https://github.com/adamwdraper/Numeral-js.
Appearance	Orientation	Sets the orientation of the menu to Vertical down, Vertical up, Horizontal left, Horizontal right. The user can select the orientation from the options available in the designated drop-down list.
	Scale position	Sets the position of the scale. The Scale position property depends on the Bargraph orientation property. The user can choose the desired scale position, from the dedicated drop-down list: After with Orientation "horizontal left" - scale is displayed at the top of the bar graph, and min value is on the left side and the max value is on the rights side. with Orientation "horizontal right" - scale is displayed at the top of the bar graph, and max value is on the left side and the min value is on the rights side. with Orientation "vertical up" - scale is displayed at the left side of the bar graph, and min value is on the bottom side and the max value is on the top side. with Orientation "vertical down" - scale is displayed at the left side of the bar graph, and max value is on the bottom side and the min value is on the top side. Before with Orientation "horizontal left" - scale is displayed at the bottom of the bar graph, and min value is on the left side and the max value is on the rights side. with Orientation "horizontal right" - scale is displayed at the bottom of the bar graph, and max value is on the left side and the min value is on the rights side. with Orientation "vertical up" - scale is displayed at the right side of the bar graph, and min value is on the bottom side and the max value is on the top side. with Orientation "vertical down" - scale is displayed at the right side of the bar graph, and max value is on the bottom side and the min value is on the top side.
	Show scale	Allows the user to enable / disable the display of the scale.
	Show unit	Allows the user to enable / disable the unit display, of the Signal driving the bar, if the Signal has a unit
	Show value	Allows the user to enable / disable the value display, of the Signal driving the bar.
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.
Palette	Background color	Sets the color of the component's background. The user can either manually type in the HEX color code or use the color picker tool.
	Bar color	Sets the color of the component's progress bar. The user can either manually type in the HEX color code or use the color picker tool.
	Scale color	Sets the color of the bar graph scale. The user can either manually type in the HEX color code or use the color picker tool.
	Title foreground	Sets the foreground color of the component's title. The user can either manually type in the HEX color code or use the color picker tool.
	Value color	Sets the color of the Signal value, if the Enable value property was set to TRUE. The user can either manually type in the HEX color code or use the color picker tool.
Typography	Font family	Sets the font family used by all textual and numerical elements displayed by the component. The user can select the font family from the web-safe fonts available in the drop-down list.
	Ticks font size	Sets the size of the bar graph ticks, using the up and down arrows to increase and decrease, or by manually typing the desired value.
	Ticks font weight	Sets the weight of the ticks 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).
	Title font size	Sets the size of the bar graph title, using the up and down arrows to increase and decrease, or by manually typing the desired value.
	Title font weight	Sets the weight of the bar graph title, using the up and down arrows to increase and decrease, or by manually typing the desired value.
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: Move up Move down Clone state Remove 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: 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.
	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.
	State# Background	Sets the background color of the component, when the state evolution passed. 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.
	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	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.

In this section:

i4designer Knowledgebase

Visualization

Gauge

Sensor

Signal information

State indicator

Signal value

Image

State image

Svg pat

Bar graph chart

Bar graph

Search results