Page History

Terminology

The Dynamics and UI Elements page is dedicated to providing comprehensive information about the various dynamic configurations available in FactoryStudio. These configurations, ranging from Action and Shine dynamics to TextOutput and Security dynamics, enable users to create interactive and visually engaging user interfaces.

Interactive Dynamics

This includes Action Dynamic and Hyperlink and Security Dynamic, which enable user interaction, such as triggering actions or navigating to different pages based on user inputs.

Visual Enhancement Dynamics

This category encompasses Shine Dynamic, Fill, Line, and Text Color Dynamic, and BarGraph Dynamic. These configurations enable dynamic visual alterations to objects, such as color changes and bar graph adjustments, to improve data representation.

Visibility and Movement Dynamics

This includes Visibility Dynamic and MoveDrag Dynamics, which control the visibility and movement of UI elements. These features allow for dynamic hiding, showing, and positioning of objects in the interface.

Transformation Dynamics

This group comprises Scale Dynamic, Rotate Dynamic, and Skew Dynamic. These configurations allow objects to be dynamically resized, rotated, and skewed, providing greater flexibility in visual design.

Text and Security Dynamics

This includes Text I/O Dynamic, TextOutput Dynamic, and Security Dynamic configuration. These configurations provide dynamic text output and input capabilities and enable security features for user interface elements.

These key concepts, when applied effectively, can greatly enhance the user experience and data visualization capabilities in FactoryStudio.

Working the Dynamics and UI Elements

Dynamics allow you to 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 solution.

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 types

Action

Dynamic Action defines actions in response to events, such as mouse clicks and keyboard inputs.You can select from options such as setting object values, toggling values, opening or closing displays, or executing scripts.

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. 

CodeBehind

Action Dynamic configuration  

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.

Shine

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  

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

Security

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

Expressions can be used in various places using VB.Net syntax to determine values or set conditions. They are compiled using the standard VB.Net compiler and accept everything that would be accepted in the code editor. The syntax is similar to C#, but does not require a semicolon at the end. Both VB.Net and C# programmers can use expression fields without any issues. In expressions, it is not necessary to prefix tag names with "@" since there are no local .NET variables, and the solution object is used directly. Arithmetic operands use standard .NET operands. 

To allow single-line evaluations, the .NET language has the IIF command, which currently is used only with VB.Net. The IIF command has three parameters.  

Example 

IIF (A, B, C) 

The first parameter is a condition. This method will return B if condition A is true, and it returns C if the condition is false. 

Example 

IIF (tag.A = 1, "True", "False") will return the string "True" if the value of tag.A is 1, or "False" if tag.A has a different value. 

In this .NET method, all three parameters are evaluated independent of the condition. For instance, if you have IIF (tag.A = 1, script.class.client.Func1(), script.class.client.Func2()), both Func1 and Func2 will always be executed. Only the return value will be different based on the value of tag.A. 

Run Expression Example IF: 

In this example of an expression, we have used an IF statement for its implementation. In this case, when the Tag equals 1, a Messagebox containing the word "True" will appear on the screen. Otherwise, if the Tag contains any other value, when the button is pressed, an action will trigger the event and a second Messagebox will appear on the screen containing the word "False". 

If(Tag.Integer = 1, MessageBox.Show( "True "), MessageBox.Show("False "))

Image Added

CodeBehind

Expressions can be used in various places using VB.Net syntax to determine values or set conditions. They are compiled using the standard VB.Net compiler and accept everything that would be accepted in the code editor.

The syntax is similar to C#, but does not require a semicolon at the end. Both VB.Net and C# programmers can use expression fields without any issues. In expressions, it is not necessary to prefix tag names with "@" since there are no local .NET variables, and the solution object is used directly. Arithmetic operands use standard .NET operands. To allow single-line evaluations, the .NET language has the IIF command, which currently is used only with VB.Net.

The IIF command has three parameters.  

Example IIF (A, B, C) 

The first parameter is a condition.This method will return B if condition A is true, and it returns C if the condition is false. 

Example IIF (tag.A = 1, "True", "False") will return the string "True" if the value of tag.A is 1, or "False" if tag.A has a different value. 

In this .NET method, all three parameters are evaluated independent of the condition. For instance, if you have IIF (tag.A = 1, script.class.client.Func1(), script.class.client.Func2()), both Func1 and Func2 will always be executed. Only the return value will be different based on the value of tag.A. 

Run Expression Example IF: In this example of an expression, we have used an IF statement for its implementation. In this case, when the Tag equals 1, a Messagebox containing the word "True" will appear on the screen. Otherwise, if the Tag contains any other value, when the button is pressed, an action will trigger the event and a second Messagebox will appear on the screen containing the word "False". If(Tag.Integer = 1, MessageBox.Show( "True "), MessageBox.Show("False "))Image Added

Shine

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

Security

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 solution and ensures that actions are executed only by authorized users. 

Text, Line and Fill 


To do this, the "Expression" field in FillColor needs to be filled with a Timer type Tag, which contains the following parameters:

Image Added

Model: DelayOff Interval: <desired time for the object to blink>

In this way, the object configuration will be as follows:

Image Added

Following the steps above, when the value of Tag.timer2 is equal to 1, the object will blink during the defined interval, and at the end of this time, the Tag returns to 0 and the object stops blinking.

Visibility

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. 

Text, Line and Fill 


Setting

Description

Expression

The value used for the 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"

ImageWebUrl: 

Bad Quality

Selects color when the related tag quality is bad.

Undefined Quality

Selects color when the related tag quality is undefined.

To do this, the "Expression" field in FillColor needs to be filled with a Timer type Tag, which contains the following parameters:

Image Removed

Model: DelayOff Interval: <desired time for the object to blink>

In this way, the object configuration will be as follows:

Image Removed

Following the steps above, when the value of Tag.timer2 is equal to 1, the object will blink during the defined interval, and at the end of this time, the Tag returns to 0 and the object stops blinking.

Visibility

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  

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

Greater than zero: Object will be visible.

MoveDrag

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

Skew

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. 

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

Expressions can be used in various places using VB.Net syntax to determine values or set conditions. They are compiled using the standard VB.Net compiler and accept everything that would be accepted in the code editor. The syntax is similar to C#, but does not require a semicolon at the end. Both VB.Net and C# programmers can use expression fields without any issues. In expressions, it is not necessary to prefix tag names with "@" since there are no local .NET variables, and the solution object is used directly. Arithmetic operands use standard .NET operands. 

To allow single-line evaluations, the .NET language has the IIF command, which currently is used only with VB.Net. The IIF command has three parameters.  

Example 

IIF (A, B, C) 

The first parameter is a condition. This method will return B if condition A is true, and it returns C if the condition is false. 

Example 

IIF (tag.A = 1, "True", "False") will return the string "True" if the value of tag.A is 1, or "False" if tag.A has a different value. 

In this .NET method, all three parameters are evaluated independent of the condition. For instance, if you have IIF (tag.A = 1, script.class.client.Func1(), script.class.client.Func2()), both Func1 and Func2 will always be executed. Only the return value will be different based on the value of tag.A. 

Run Expression Example IF: 

In this example of an expression, we have used an IF statement for its implementation. In this case, when the Tag equals 1, a Messagebox containing the word "True" will appear on the screen. Otherwise, if the Tag contains any other value, when the button is pressed, an action will trigger the event and a second Messagebox will appear on the screen containing the word "False". 

If(Tag.Integer = 1, MessageBox.Show( "True "), MessageBox.Show("False "))

Moving Objects

Image Added

Use the code below to move objects on the screen:

Image Added

We emphasize that the MoveDrag property is made for this type of application and can be used if desired.

Below is an example of how the MoveDrag property works.

The image below illustrates the Range and Position fields of the Vertical Move section:

Image Added

The YPOS Tag added to the expression is set in the TextBox present on the screen.

The Position field represents the range of pixels in which the object can move on the screen.

The Range field represents the range of values that the Tag can assume.

Therefore, in the example shown in the image, the user can type a number from 0 to 4, which will be converted to the range of pixels between 0 and 400.

That is, if the user types 1 for the Tag value, the object will move 100px down. If they type 2, it will move 200px, 3 - 300px, and 4 - 400px.

This is just an example, you could leave both the Range and Position fields with equal values, such as 0 and 400 for both.

Then, the user would be allowed to type values between 0 and 400, being displaced exactly the value that was typed by the user, following a 1:1 ratio in this case while in the previous case a 1:100 ratio was being followed.

Scale

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. 

Rotate

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. 

Skew

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. 

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.

Image Removed

Text I/O

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. 

TextOutput

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. 

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

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. 

Available Dynamics

Action: Executes actions and commands triggered by the user interface.

Shine: Changes the object appearance dynamically.

CodeBehind: Event > OnDisplayOpening, OnDisplayIsOpen and OnDisplayClosing.

Code Execution > SetValue, ToggleValue, RunExpressions, ServerRequest and HTTPRequest.

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.

In this section: