Page History

The Dynamics and UI Elements page is a comprehensive guide to understanding and configuring various dynamic behaviors and UI components in FactoryStudio. This guide covers a wide range of topics, including appearance settings, text input/output, hyperlink and security configurations, and other essential aspects of designing a user interface for optimal interaction with automated processes.These features allow objects in the user interface to change in appearance, position, or behavior in response to user actions, events, or changing conditions.

On this page:

Table of Contents

maxLevel	3

Description

Dynamic configurations are settings that enable the customization of the behavior and appearance of objects in a user interface. These configurations can be used to define object properties such as size, opacity, color, position, and behavior in response to user interaction, data changes, or other events. This section will provide an overview of the different dynamic configurations available and how they can be used to create dynamic and interactive user interfaces.

Dynamics allow you yo configure real-time changes for an object's appearance, position, size, colors, Dynamics allow you yo configure real-time changes for an object's appearance, position, size, colors, the value the object reflects, the user action for when a user clicks, and more. This dynamic behavior is configured by creating links between the object properties, tags, or other runtime properties for the project.

In some systems, "animation" is used to refer to these dynamic runtime changes. For FactoryStudio, we elected to use the term "Dynamics" to provide a clear distinction between the WPF animations features. WPF animations also refer to changes that occur in a graphic's object properties when running the displays. This occurs when timers and other object statuses are used to guide the animation, not real-time database values.

When you double-click an object, click the Dynamics button — or select it on the right-click context menu — to show a list of compatible dynamics that can be applied to the selected object.

Dynamics
Setting	Description
Action	Executes actions and commands triggered by the user interface.
Shine	Changes the object appearance dynamically.
TextIO	Text input and text output Dynamic.
HyperLink	Opens a hyperlink.
Security	Sets the object runtime permissions to execute actions.
FillColor	Changes the object fill color dynamically.
LineColor	Changes the object line color dynamically.
TextColor	Changes the object text color dynamically.
Bargraph	Bargraph dynamic.
Visibility	Changes the object visibility and opacity dynamically.
MoveDrag	Moves the object dynamically.
Scale	Changes the object size dynamically.
Rotate	Rotates the object dynamically.
Skew	Skews the object dynamically.
TextOutput	Text output dynamic.

Get, Apply, and Replace

After adding a dynamic to an object, the Get and Apply buttons can be used to move the dynamic's settings configuration from one object to another. Select the object with the dynamics you want to use, and click Get. Right-click the dynamic name in the left panel, in order to enable or disable the ones that will be applied. Select one or more target objects and click Apply.

You can use the Replace button to change the tags in the dynamics of the selected objects. The String button is used to change all of the strings for the selected objects.

Action Dynamic

Action Dynamic configuration

Setting

Description

Action

Executes

is a feature that enables the execution of an action triggered by the user interface. It offers different options for events like mouse clicks, movements, or keyboard inputs, allowing developers to choose the appropriate action, such as setting an object's value or running a script. This tool creates dynamic and engaging user interfaces that respond to user actions in real-time, enhancing FactoryStudio usability and interactivity. Dynamic actions are a powerful tool in user interface design.

Action Dynamic configuration
Setting	Description
Action	Executes an action triggered by the user interface.
Event	Choose events for mouse's actions. More than one event can be selected for each action. For example, you can set one action for MouseLeftButtonDown and another action for MouseLeftButtonUp.
Action	Select an action for the
Event	Choose events for mouse's actions. More than one event can be selected for each action. For example, you can set one action for MouseLeftButtonDown and another action for MouseLeftButtonUp.
Action	Select an action for the given event: None—No action. SetValue—Sets the value of the object. Object—The object that will receive the value. Value—The value that will be passed to the object. Toggle—Toggles the object value. If the object's current value is zero, the value will be 1. If the object's current value is different from zero, the value will be 0. Object—The object that will be toggled. OpenDisplay—Opens a display. Display—The name of the display that will be opened. CloseDisplay—Closes a display. Display—The name of the display that will be closed. OpenLayout—Opens a layout. Layout—The name of the layout that will be opened. RunScript—Runs a script that is placed in the display CodeBehind tab. Do one of the following: Enter the new method name and click New. Select one of the existing methods in the comboBox. RunExpressions—Runs the given expression. Expression—Enter the expression. For example: Tag.a + 1, or Tag.a + Tag.b, or Math.Cos(Tag.angle) Math.PI*. Result (optional)—Enter the tag or the property that will receive the expression value.

Info

title	Examples

Run Expressions Examples:

Sum two values and pass the result to another tag.

Expression—Tag.quantity1 + Tag.quantity2.
Result—Tag.totalQuantity.

Increment a tag.

Expression—tagCounter + 1.
Result—tagCounter.

Increment a tag (0 - 10).

Expression—If(tagCounter < 10,tagCounter + 1,0).
Result:—tagCounter.

Shine Dynamic

Shine Dynamic Configuration enables dynamic object appearance changes with various features such as mouse-over and selection effects, scale adjustments, and reference position settings.

configuration

Shine Dynamic configuration
Setting	Setting	Description
Shine	Changes the object appearance dynamically.
IsMouseOver	Enter a tag that will receive the OverValue or the NotOverValue.
OverValue	The IsMouseOver value when the mouse is over the object.
NotOverValue	The IsMouseOver value when the mouse is not over the object.
Mouse Over Appearance	The object appearance when the mouse is over it. Opacity—The object opacity (0 = transparent, 1 = opaque). Scale—The object size (0.5 = half, 1 = the same size, 1.5 = one and a half, 2 = double size). OuterGlow—Defines the OuterGlow color, the check box enables or disables it. TextColor—Defines the text color, the check box enables or disables it.
Mouse Not Over Appearance	The object appearance when the mouse is Not over it: Opacity—The object opacity (0 = transparent, 1 = opaque). Scale—The object size (0.5 = half, 1 = the same size, 1.5 = one and a half, 2 = double size).
Is Selected Appearance	The object appearance when it is selected: IsSelected—Defines whether the object is selected. Opacity—The object opacity (0 = transparent, 1 = opaque). Scale—The object size (0.5 = half, 1 = the same size, 1.5 = one and a half, 2 = double size).
Scale Reference	Center Left Up Right Down
ShowUid	Set to show the Uid of the object on hover
Tooltip	Set to show as a tooltip on hover

Text I/O dynamic

The Text I/O

Dynamic configuration

Setting

Description

TextIO

Text

dynamic enables the configuration of text input and output, including parameter settings like input range and maximum length. Objects can be bound to tags and set for input, output, or both, allowing for system customization.

Text I/O Dynamic configuration
Setting	Description
TextIO	Text input and text output Dynamic. If text is text output Dynamic. If text is a tag value or a property, it must be between curly brackets. For example: {Tag.analogInt1}
Binding Mode	Associate an object with a tag: TwoWay—Input and output allowed. InputOnly—Only input allowed (the current tag value is not shown, but new values can be entered). OutputOnly—Only output allowed.
Object or Expression	Object (input) or Expression (output only) connected with the Text Box.
DesignModeCaption	The value shown in design mode: ShowObjectNames—The content of the text field is shown exactly as it is. ShowPlaceHolders—The characters ### are shown, the number of characters is defined by the MaxLength field.
Input Range	Defines the numeric range for the entered value.
MaxLength	Defines the maximum number of characters.
Format	Defines the text format for the field, example: mm/dd/yyyy, is a format used to express a date time input; 0.00, is a format of a decimal number with two digits after the point.

Hyperlink and Security dynamic

The Hyperlink dynamic configuration enables opening links of various types, while the Security configuration defines runtime permissions, including Esign requirements, confirmation messages, and access restrictions for specific permission groups.

Dynamic configuration

Hyperlink Dynamic configuration
Field	Description	Field	Description
HyperLink	Opens a hyperlink.
HyperLinkType	Selects the hyperlink type: http ftp file mailto telnet
Url	Sets the URL to open.

Security Dynamic configuration

Setting

Description

Security

Sets the

Dynamic Security configuration is a feature that allows you to set object runtime permissions

.

Disable

Enters

to execute actions. This configuration includes a Disable setting, where you can enter a tag, a property, or an expression

returning

that returns a value. If the resulting value is

:

Zero—Object will be enabled.

Greater than zero—Object

greater than zero, the object will be disabled.

For more information, see Configuring Expressions.

Verify Permissions

When selected, only the chosen permission groups

The Verify Permissions setting allows you to select specific permission groups that can access the object

.

Confirm Message

Shows a confirmation dialog before taking some action:

textBox—Enter the message that will appear in the dialog.
checkBox—Enables or Disables the Confirm Message.

ESign Required

Sets if the Esign is required

, providing an additional layer of security. The Confirm Message setting enables you to show a dialog box with a message before taking any action, and the ESign Required setting determines whether an electronic signature is required before the action is executed. This feature enhances the security of your project and ensures that actions are executed only by authorized users.

Security

Fill, Line, and Text Color Dynamic

Fill, Line, and Text Color Dynamic configuration
Setting	Description
FillColorSecurity	Changes Sets the object fill color dynamicallyruntime permissions.
Expression	The value used for the FillColor dynamic.
Change Color	UsingLimits—The resulting color is determined when the value is equal or higher than one of the limits. AbsoluteValue—The color will be the expression value. The value must be a valid color name or hexadecimal color. For example: "White" or "#FFFFFFFF" Example Limits: 1 - Red 10 - Blue When the value is 0, the object will have its own color (fill color dynamic will not do anything) When the value is 1 to 9, the object will have the red color. When the value is greater than 10, the object will have the blue color.
Bad Quality	Selects color when the related tag quality is bad.
Undefined Quality	Selects color when the related tag quality is undefined.
LineColor	Changes the object line color dynamically.
Expression	The value used for the LineColor dynamic.
Change Color	UsingLimits—The resulting color is determined when the value is equal or higher than one of the limits. AbsoluteValue—The color will be the expression value. The value must be a valid color name or hexadecimal color. For example: "White" or "#FFFFFFFF" Example Limits: 1 - Red 10 - Blue When the value is 0, the object will have its own color (fill color dynamic will not do anything) When the value is 1 to 9, the object will have the red color. When the value is greater than 10, the object will have the blue color.
TextColor
Disable	Enters a tag, a property, or an expression returning a value. If the resulting value is: Zero—Object will be enabled. Greater than zero—Object will be disabled. For more information, see Configuring Expressions.
Verify Permissions	When selected, only the chosen permission groups can access the object.
Confirm Message	Shows a confirmation dialog before taking some action: textBox—Enter the message that will appear in the dialog. checkBox—Enables or Disables the Confirm Message.
ESign Required	Sets if the Esign is required

Fill, Line, and Text Color Dynamic

FillColor - Changes the object fill color dynamically.

A dynamic configuration that changes an object's fill color and can be customized in real-time using expressions and valid color names/hexadecimal codes, providing a flexible way to adjust the appearance of objects' fill.

LineColor - Changes the object line color dynamically.

A dynamic configuration that changes an object's line color and can be customized in real-time using expressions and valid color names/hexadecimal codes, providing a flexible way to adjust the appearance of lines in objects.

TextColor - Changes the object text color dynamically.

Expression

The value used for the TextColor dynamic.

A dynamic configuration that changes an object's text color and can be customized in real-time using expressions and valid color names/hexadecimal codes, providing a flexible way to adjust the appearance of objects' text.

Fill, Line, and Text Color Dynamic configuration
Setting	Description
FillColor	Changes the object fill color dynamically.
Expression	The value used for the FillColor dynamic.
Change Color	UsingLimits—The resulting color is determined when the value is equal or higher than one of the limits. AbsoluteValue—The color will be the expression value. The value must be a valid color name or hexadecimal color. For example: "White" or "#FFFFFFFF" Example Limits: 1 - Red 10 - Blue When the value is 0, the object will have its own color (fill color dynamic will not do anything) When the value is 1 to 9, the object will have the red color. When the value is greater than 10, the object will have the blue color.
Bad Quality	Selects color when the related tag quality is bad.
Undefined Quality	Selects color when the related tag quality is undefined.
LineColor	Changes the object line color dynamically.
Expression	The value used for the LineColor dynamic.
Change Color	UsingLimits—The resulting color is determined when the value is equal or higher than one of the limits. AbsoluteValue—The color will be the expression value. The value must be a valid color name or hexadecimal color. For example: "White" or "#FFFFFFFF" Example Limits: 1 - Red 10 - Blue When the value is 0, the object will have its own color (fill color dynamic will not do anything) When the value is 1 to 9, the object will have the red color. When the value is greater than 10, the object will have the blue color.
TextColor	Changes the object text color dynamically.
Expression	The value used for the TextColor dynamic.
Change Color	UsingLimits—The resulting color is determined when the value is equal or higher than one of the limits. AbsoluteValue—The color will be the expression value. The value must be a valid color name or hexadecimal color. For example: "White" or "#FFFFFFFF" Example Limits: 1 - Red 10 - Blue When the value is 0, the object will have its own color (fill color dynamic will not do anything) When the value is 1 to 9, the object will have the red color. When the value is greater than 10, the object will have the blue color.

Bargraph Dynamic

The Bargraph Dynamic Configuration creates dynamic bar graphs by defining an expression for the value, setting the fill percentage range, color, and orientation. It is useful for displaying data in a visually appealing and easy-to-understand way.

Bargraph Dynamic configuration
Setting	Description
Bargraph	Bargraph dynamic.
Expression	The value used for the bargraph dynamic.
Value Range	The

Change Color

UsingLimits—The resulting color is determined when the value is equal or higher than one of the limits.

AbsoluteValue—The color will be the expression value. The value must be a valid color name or hexadecimal color. For example: "White" or "#FFFFFFFF"
Example
Limits:
1 - Red
10 - Blue
When the value is 0, the object will have its own color (fill color dynamic will not do anything)
When the value is 1 to 9, the object will have the red color.
When the value is greater than 10, the object will have the blue color.

Bargraph Dynamic

Bargraph Dynamic configuration

Setting

Description

Bargraph

Bargraph dynamic.

Expression

The value used for the bargraph dynamic.

Value Range

The minimum and maximum values that will correspond to the minimum and maximum fill percentage.

Fill (%)

The minimum and maximum bargraph fill percentage.

Bar Color

The bar graph color.

Orientation

The bar graph orientation:
Image Removed to up
Image Removed horizontal center
Image Removed to down
Image Removed to right
Image Removed vertical center
Image Removed to left

Visibility Dynamic

Visibility Dynamic configuration

Setting

Description

Visibility

Changes the object visibility and opacity dynamically.

Visible

Enter a tag, a property, or an expression returning a value. If the resulting value is:

Zero - Object will be visible.

Greater than zero - Object will be hidden.
For more information, seeConfiguring Expressions.

Hide when security is enabled

Hides the component when security is enabled for the current user.

Opacity

Expression—The value used to set the opacity.
Range—The minimum and maximum values that will correspond to the minimum and maximum opacity.
Opacity—The minimum and maximum opacity (0 - invisible, 0.5 - a bit transparent, 1 - opaque).

MoveDrag Dynamics

MoveDrag Dynamic configuration

Setting

Description

MoveDrag

Moves the object dynamically.

BindingMode

TwoWay—Input moving and output moving.
InputOnly—Input moving only. The object does not move when the object value changes.
OutputOnly—Output moving only. The object does not move with user interaction.

Horizontal Move

Expression with the horizontal move reference.
Range—The minimum and maximum values that will correspond to the minimum and maximum horizontal position.
Position—The minimum and maximum horizontal position.

Vertical Move

Expression with the vertical move range.
Range—The minimum and maximum values that will correspond to the minimum and maximum vertical position.
Position—The minimum and maximum vertical position.

Use previous object for position reference

Reference the current object's position based on the previous object

Scale Dynamic

Scale Dynamic configuration
Setting	Description
Scale	Changes the object size dynamically.
Width Scale	Object—the value used for the width scaling. Range—The minimum and maximum values that will correspond to the minimum and maximum width scale fill percentage.
Scale Fill (%) —The	The minimum and maximum width scaling bargraph fill percentage.
Height Scale	Object—the value used for the height scaling. Range—The minimum and maximum values that will correspond to the minimum and maximum height scale percentage. Scale (%)—The minimum and maximum height scaling percentage.
Scale Reference:	Image Removed Center Image Removed Left Image Removed Up Image Removed Right Image Removed Down

Rotate Dynamic

Rotate Dynamic configuration

Setting

Description

Rotate

Rotates the object dynamically.

Expression

The value used for the rotation.

Value Range

The minimum and maximum values that will correspond to the minimum and maximum angle. For example: 0 to 100.

Angle

The minimum and maximum rotation angle. For example: 0 to 360.

RPM

Number of rotations per minute. The value can be defined on Expression.

Center Reference

Clockwise – Check if you want Clockwise.

Image Removed Center

Image Removed Left

Image Removed Up

Image Removed Right

Image Removed Down
Offset X – Defines the distance of the center of the Rotation in X axis.
Offset Y – Defines the distance of the center of the Rotation in Y axis.

ON/OFF

Enter with the object property that will turn ON/OFF the Rotation Dynamic

Bar Color	The bar graph color.
Orientation	The bar graph orientation: Image Added to up Image Added horizontal center Image Added to down Image Added to right Image Added vertical center Image Added to left

Visibility Dynamic

The Visibility Dynamic Configuration changes an object's visibility and opacity dynamically by hiding or showing objects based on tags, properties, or expressions, setting opacity based on a range of values, and providing a security option for hiding components for certain users. It is useful for creating interactive and dynamic user interfaces.

Visibility Dynamic configuration
Setting	Description
Visibility	Changes the object visibility and opacity dynamically.
Visible	Enter a tag, a property, or an expression returning a value. If the resulting value is: Zero - Object will be visible. Greater than zero - Object will be hidden. For more information, seeConfiguring Expressions.
Hide when security is enabled	Hides the component when security is enabled for the current user.
Opacity	Expression—The value used to set the opacity. Range—The minimum and

Skew Dynamic

Skew Dynamic configuration

Setting

Description

Skew

Skews the object dynamically.

X-axis Skew

ObjectValue— the value used for the X-axis skewing.

Range—The minimum and

maximum values that will correspond to the minimum and maximum

X-axis skewing angle. For example: 0 to 100.Skew (º)— The

opacity.
Opacity—The minimum and maximum

X-axis skewing angle. For example: 0 to 180º.

Y axis skew

ObjectValue— the value used for the Y-axis skewing.
Range—The minimum and maximum values that will correspond to the minimum and maximum Y-axis skewing angle. For example: 0 to 100.
Skew (º)— The minimum and maximum Y-axis skewing angle. For example: 0 to 180º.

Skew Reference

Image Removed Center
Image Removed Left
Image Removed Up
Image Removed Right
Image Removed Down

TextOutput Dynamic

opacity (0 - invisible, 0.5 - a bit transparent, 1 - opaque).

MoveDrag Dynamics

MoveDrag Dynamics is a feature for dynamically moving objects in a display, commonly used in interactive applications and user interfaces. It can be configured with different modes, expressions, and settings, and even use previous objects as a reference for position. This tool is powerful for creating dynamic and interactive projects inFactoryStudio.

MoveDrag Dynamic configuration
Setting	Description
MoveDrag	Moves the object dynamically.
BindingMode	TwoWay—Input moving and output moving. InputOnly—Input moving only. The object does not move when the object value changes. OutputOnly—Output moving only. The object does not move with user interaction.
Horizontal Move	Expression with the horizontal move reference. Range—The minimum and maximum values that will correspond to the minimum and maximum horizontal position. Position—The minimum and maximum horizontal position.
Vertical Move	Expression with the vertical move range. Range—The minimum and maximum values that will correspond to the minimum and maximum vertical position. Position—The minimum and maximum vertical position.
Use previous object for position reference	Reference the current object's position based on the previous object

Scale Dynamic

Scale Dynamic configuration enables dynamic resizing of an object with Width and Height Scale settings that can be specified as a percentage of minimum and maximum values. Scale Reference allows choosing the reference point for scaling. This configuration provides flexibility in designing and displaying visual elements by adjusting the object size based on changing values or conditions.

Scale Dynamic configuration
Setting	Description
Scale	Changes the object size dynamically.
Width Scale	Object—the value used for the width scaling. Range—The minimum and maximum values that will correspond to the minimum and maximum width scale percentage. Scale (%)—The minimum and maximum width scaling percentage.
Height Scale	Object—the value used for the height scaling. Range—The minimum and maximum values that will correspond to the minimum and maximum height scale percentage. Scale (%)—The minimum and maximum height scaling percentage.
Scale Reference:	Image Added Center Image Added Left Image Added Up Image Added Right Image Added Down

Rotate Dynamic

Rotate Dynamic configuration enables dynamic rotation of an object with user-defined settings, such as angle, speed, center reference, and offset values. An expression can be used to set the rotation value, and a value range can be defined for the minimum and maximum angle. The feature also includes an on/off property. It is useful for creating dynamic and interactive visual displays or animating objects in a graphical user interface.

Rotate Dynamic configuration
Setting	Description
Rotate	Rotates the object dynamically.
Expression	The value used for the rotation.
Value Range	The minimum and maximum values that will correspond to the minimum and maximum angle. For example: 0 to 100.
Angle	The minimum and maximum rotation angle. For example: 0 to 360.
RPM	Number of rotations per minute. The value can be defined on Expression.
Center Reference	Clockwise – Check if you want Clockwise. Image Added Center Image Added Left Image Added Up Image Added Right Image Added Down Offset X – Defines the distance of the center of the Rotation in X axis. Offset Y – Defines the distance of the center of the Rotation in Y axis.
ON/OFF	Enter with the object property that will turn ON/OFF the Rotation Dynamic

Skew Dynamic

Skew Dynamic configuration enables dynamic skewing of an object by distorting its shape along the x or y-axis. The setting includes values for X-axis and Y-axis skewing, ranges, and angles. The Skew Reference setting allows choosing the center of the skewing. This feature adds interactivity to your design by creating dynamic visual effects.

Skew Dynamic configuration
Setting	Description
Skew	Skews the object dynamically.
X-axis Skew	ObjectValue— the value used for the X-axis skewing. Range—The minimum and maximum values that will correspond to the minimum and maximum X-axis skewing angle. For example: 0 to 100. Skew (º)— The minimum and maximum X-axis skewing angle. For example: 0 to 180º.
Y axis skew	ObjectValue— the value used for the Y-axis skewing. Range—The minimum and maximum values that will correspond to the minimum and maximum Y-axis skewing angle. For example: 0 to 100. Skew (º)— The minimum and maximum Y-axis skewing angle. For example: 0 to 180º.
Skew Reference	Image Added Center Image Added Left Image Added Up Image Added Right Image Added Down

TextOutput Dynamic

TextOutput Dynamic configuration is a setting that enables text output dynamic. The configuration includes options such as Expression, which indicates the text to be shown, and Localizable, which indicates whether the text should be translated. Additionally, there is DesignModeCaption, which displays the value in design mode, and MaxLength, which defines the maximum number of characters. The Format setting allows specifying the field's format.

TextOuput Dynamic configuration
Setting	Description
TextOutput	Text output dynamic.
Expression	Indicates the text that will be shown in the object.
Localizable	Indicates whether the text must be translated when the dictionary changes.
DesignModeCaption	The value shown in design mode: ShowObjectNames—The content of the text field is shown exactly as it is. ShowPlaceHolders—The characters ### are shown, the number of characters is defined by the MaxLength field.
MaxLength	Defines the maximum number of characters.
Format	Specify the format of the field

In this section...

Page Tree

root	@parent
spaces	V10

Space shortcuts

Page tree

Versions Compared

Old Version 5

New Version 6

Key

Description

Get, Apply, and Replace

Action Dynamic

Shine Dynamic

Text I/O dynamic

Hyperlink and Security dynamic

Security Dynamic configuration

Fill, Line, and Text Color Dynamic

Fill, Line, and Text Color Dynamic

Bargraph Dynamic

Bargraph Dynamic

Visibility Dynamic

MoveDrag Dynamics

Scale Dynamic

Rotate Dynamic

Visibility Dynamic

Skew Dynamic

MoveDrag Dynamics

Scale Dynamic

Rotate Dynamic

Skew Dynamic

TextOutput Dynamic

In this section...