Dynamics and UI Elements

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, user actions 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. In the platform, we have elected to use the term "Dynamics" to provide a clear distinction from the WPF animation features. WPF animations refer to changes that occur in a graphic's object properties when running the displays. This happens when timers and other object statuses are used to guide the animation, rather than real-time database values.

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

Using Expressions

Expressions can be used in various places on Dynamics 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 the example below, 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". 

Expression example:

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

→ For more information, see Scripts Expressions.

Dynamics Types

Action

Dynamic Action allows to define actions that are triggered by user interactions event, such as clicks or keyboard inputs.

CodeBehind

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. 

Hyperlink

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. 

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. 

Bargraph

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. 

TextColor

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

LineColor

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

FillColor

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

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

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

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

Following the steps above, when the value of Tag.Timer 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. 

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. 

Moving Objects

Use the code below to move objects on the screen:

public void Update (double SPMedidal) 
{
	Ref2 = this.CurrentDisplay.GetControl("Ref2") as Rectangle;
	Ref4 = this.CurrentDisplay.GetControl("Ref4") as Rectangle;
	Thickness myThickness = new System.Windows.Thickness();

	myThickness.Top = SPMedidal;
	Ref2.Margin = myThickness;
	@Info.Trace("Position UP-DOWN-Ref2: "+Ref2.Margin.ToString());

	myThickness.Top = -SPMedidal+400;
	Ref4.Margin = myThickness;
	@Info.Trace("Position DOWN-UP-Ref4: "+Ref4.Margin.ToString());
}

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:

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

In the left panel, under Drawing Properties, you'll find the Dynamics options, which contain the Get, Apply and Edit buttons. Edit will simply open the Dynamics Configuration of the selected object, but Get and Apply allow you copy and paste dynamics' settings configuration from one object to another.

Select the object with the dynamics you want to use, and click Get. It'll show all the dynamics you have configured below the buttons and that are ready to be applied to other objects. Select one or more target objects and click Apply and all the configured dynamics will be copied.

Below the Dynamics, in the left panel, you'll find the Replace Tags/String options.

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.

Using Assets in Dynamics

In Portable/HTML5 displays, Assets cannot be treated as dynamic objects due to limitations in NetStandard 2.0. To use them them in Dynamics (as values or in expressions), you must first convert them to the required data type (e.g., integer, string, digital, DataTable) using methods such as TK.ToInt, TK.ToString, etc. 

In this example, we converted the Asset to an integer using TK.ToInT to determine if the  object will be visible.

In WPF-only displays, which are based on .NET Framework 4.8, Asset calls return values that can be handled dynamically, without the need to explicitly define the data type.

In this section: