View Source

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:

Description

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

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.

Shine Dynamic configuration
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 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 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.

Hyperlink Dynamic configuration
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

Dynamic Security configuration is a feature that allows you to set object runtime permissions to execute actions. This configuration includes a Disable setting, where you can enter a tag, a property, or an expression that returns a value. If the resulting value is greater than zero, the object will be disabled. The Verify Permissions setting allows you to select specific permission groups that can access the object, 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 Dynamic configuration
Setting	Description
Security	Sets the object runtime permissions.
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.

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 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: to up horizontal center to down to right vertical center 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, see Configuring 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 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 in FactoryStudio.

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:	Center Left Up Right 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. Center Left Up Right 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	Center Left Up Right 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