Dynamics and UI Elements

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

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

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

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

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

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

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

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

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

The root page @parent could not be found in space v10.

Space shortcuts

Page tree