Versions Compared

Old Version 4

changes.mady.by.user Jose Porto

Saved on

compared with

New Version 5

changes.mady.by.user Jose Porto

Saved on

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.
Tip

To facilitate the creation of screens, in addition to the direct drawing of objects, there is also the possibility of direct insertion of complete objects, such as boxes with lists, buttons, graphics, alarm lists, and others that can be imported from external WPF libraries.

Control toolbox

In the area DRAW, on the left side is shown the panel setting screen properties and preview controls. The following sections show details about these settings.

UId and Text

When you create a new object or symbol on the screen, it receives a number that the uniquely identifies: The <Uid>. This Uid can be renamed by any String, which is very useful when you need to write Script code (CodeBehind) involving the control.
As an example, a Text object used in the Login window is presented to receive user code. This object has had its number changed to txbUserName to facilitate your understanding within the code, as can be seen in the following figure:

For each object item screen or also the very Screen one can choose whether or not to participate in the Themes which can be used not only in the engineering interface, but also in the project screens.

Text is the area where you can specify a legend or title for a control that allows this functionality. You can specify the font, size, and color of the text, as well as the text itself.

Every time you can specify a color and the object has been marked as enabled for Themes instead of choosing a color if you choose a function for the color, for example background color, front color, etc. Then, as the chosen Theme will be displayed the color used for that function in the current theme.

The option Localizable should be checked if you are using language dictionaries in the project, and if you want this text to be changed according to the dictionary. 

Properties of Preview Items

For each object item screen or also the screen itself has display properties that are shown below.

Content Alignment - In controls that there is content, such as text, within a box or frame, the settings shown are offered, which allow the choice of alignment of this content.

Appearance - Appearance of the control, includes the choice of background color (or background figure), and the existence or not of a line around the control. Also can be chosen the color of the line and its shape, dashed, dotted, full. The fund may also have the definition of the percentage of opacity or even full transparency.

Transformation- Serves to define control slope or angular deformation of the control.

Layout- Sets the position on the screen and the size of the control.

Colors and Themes

In this new version, both themes in the development environment and project themes have been improved!

Development environment themes

  • Choose from several themes for the style you like best, perhaps to suit your usage environment (rest your eyes with dark mode).

  • Open multiple projects or multiple copies of the same project, and each can have its own theme to make it easier for you to work or reference.

Project Themes

  • Allows users to easily choose a theme with the new theme selector to better suit their environment or visual skills.

  • Easily build your own theme or use one of our predefined themes.

  • You can disable the theme for an item or even for an entire page, just fill in the check box.

See also all the details on topics in the section Color Themes.

Color Editor Window

As already mentioned, in several places you can specify colors, such as in backgrounds, lines text. In these same places, in this case only in backgrounds, one can specify instead of a color of an image or pattern as a reticulate.

For this setting, when you click on the appropriate locations for this choice (usually frames with colors), the window for choosing colors appears, Color Editor, shown in the following figure.

In this window you can choose not only the color, but also the appearance of gradients and color saturation with blacks and whites.

Also in this window, one can choose besides color, a function for this choice. This is the basic definition for the use of Themes of colors. The word the word appears in the window DefaultColor, which will be the color used whenever there is no function choice. So, if you used this color and this function for the background of a control, always this site will be with this DefaultColor, whatever the theme chosen. It is a virtualization of the choice of color.

Themes Color Window

In the Color Editor window, by clicking next to the function name for a color, the theme definition window appears, with all the colors that are defined for each function and for each theme.

This window is shown in the figure. The colors of each function for a given theme are displayed in the columns. See in the theme column Blue , the colors that will be used in each color function such as DisplayBackground, TextForeground, etc. are shown.

Dynamics and Animations

The configuration area Dynamics allows you to configure real-time changes in an object's appearance, position, size, colors, the value shown by the object, the action that the object must present when a user clicks it, and other things. This dynamic behavior is configured by creating links between object properties and tag properties or other runtime properties of the project.
In some systems, the animation name is used to refer to these dynamic changes at runtime. In Action.NET the term Dynamics is used to clearly distinguish them from the animation features provided by WPF. WPF animations also refer to changes in the graphical properties of objects running on monitors, but using timers and other object status estoms to direct the animation, not the values of the database in real time.
When you double-click an object, or press the Dynamics button, or select it from the right-click context menu, a list of dynamics that can be applied to the selected object is displayed.
Table 3 lists the available dynamics.


Dynamics and Animations

Configuration

Description

Action

Performs ui-driven actions and commands.

Shine

Changes the object appearance dynamically.

Textio

Dynamic input and output of texts

HyperLink

Opens a hyperlink.

Security

Sets object permissions to perform actions at run time

FillColor

Dynamically changes the fill color of the object

LineColor

Dynamically changes the color of the object line

TextColor

Dynamically changes the text color of the object

Bargraph

Graphic bar dynamics

Visibility

Dynamically changes object visibility and opacity.

MoveDrag

Dynamically moves the object.

Scale

Dynamically changes the size of the object.

Rotate

Rotates the object dynamically.

Skew

Distorts the object dynamically.

TextOutput

Creates text output dynamics.

Anchor
Action_Dynamic
Action_Dynamic
Action Dynamic

Configuration

Description

Action

Performs the action triggered by the UI.

Event

Choose one of the mouse events. More than one event can be selected for each action. For example: One action for the MouseLeftButtonDown event 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.

  • ToggleValue - Toggles the value of the object. If the current value of the object is zero, the value goes to 1. If the current value of the object is zero, the value goes to 0.

    • Object - The object that will be switched.

  • OpenDisplay - Opens a display.

    • Display- The name of the screen that will open.

  • CloseDisplay-Closes a display.

    • Display-The name of the screen that will be closed.

  • OpenLayout - Opens a layout.

    • Layout - The name of the layout that will open.

  • RunScript - Runs a script that should be placed in the Display> CodeBehind. Perform one of the following actions:

    • Enter the name of the new method and click New .

    • Choose one of the existing methods in the comboBox.

  • RunExpressions - Executes the given expression.

    • Expression - Type 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 property that will receive the value of the expression.

Info

Examples of Run Expresssions:

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

For more information, see "Configuring Expressions".

Shine Dynamic

Configuration

Description

Shine

Changes the appearance of the object dynamically.

IsMouseOver

Type a tag that will receive OverValue or NotOverValue.

OverValue

The value of IsMouseOver when the mouse is over the object.

NotOverValue

The value of IsMouseOver when the mouse is not over the object.

Tooltip

A caption text when hovering over the object

Mouse Over

The appearance of the object when the mouse is on it. Appearance  Opacity - The opacity of the object (0 = transparent, 1 =
opaque).

  • Scale - The size of the object (0.5 = half, 1 = the same size, 1.5 = one and a half year, 2 = double the size).

  • OuterGlow - Sets the outerglow color, you must select to turn this effect on or off.

  • TextColor - Sets the color of the text, you must mark the selection to turn this effect on or off.

Mouse Not Over

The appearance of the object when the mouse is not on it: Appearance  Opacity - The opacity of the object(0 = transparent, 1 =
opaque).

  • Scale - The size of the object (0.5 = half, 1 = the same size, 1.5 = one and a half year, 2 = double the size).

Is Selected

The appearance of the object when it is selected: Appearance  IsSelected - Defines whether the object is selected

  • Opacity - The opacity of the object(0 = transparent, 1 = opaque).

  • Scale - The size of the object (0.5 = half, 1 = the same size, 1.5 = one and a half year, 2 = double the size).

Scale Reference

Dynamic Text I/O

Configuration

Description

Textio .

Dynamic input and output text.
If the text is a tag value or a property, it must be in brackets. For example: {Tag.analogInt1}

Binding Mode

Associate an object with a tag:

  • TwoWay - Allows entry and exit.

  • InputOnly - Only allows tetxo input (the value of the current tag is not shown, but new values can be entered).

  • OutputOnly - Only text output is allowed.

Object or Expression

Object (input) or Expression (out only) that is connected to the text box.

DesignModeCaption

The value shown in engineering mode:

  • ShowObjectNames - The contents of the text field are shown exactly as it is.

  • ShowPlaceHolders - ## # characters are shown, the number of characters that is set by the MaxLength field.

Input Range

Sets the numeric range for the inserted value.

Maxlength

Sets the maximum number of characters.

Format

Sets the format to use for numbers in the preview

Hyperlink Dynamic

Configuration

Description

HyperLink

Opens a hyperlink.

HyperLinkType

Select the type of hyperlink:

  • http

  • FTP

  • File

  • mailto

  • Telnet

Url

Set the URL to open om hyperlink

Security Dynamics

Configuration

Description

Security

Set the object permissions at run time:

Disable

Type a tag, property, or expression that returns a value. Considering the resulting value:

  • Zero - object will be enabled.

  • Greater than zero - the 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 any action:

  • textBox - Enter the message that will appear in the dialog box.

  • checkBox - Turns commit message on or off.

Dynamic Fill, Line and Text Color

Configuration

Description

FillColor

Changes the fill color of the object dynamically.

Expression

The value used for the FillColor dynamic.

Change Color

  • UsingLimits - The resulting color is determined when the value is equal to or greater than one of the boundaries.

  • AbsoluteValue - The color will be the value of the expression. The value must be a valid color name or hexadecimal number for colors. For example: "White" or "#FFFFFFFF"

    Limits Example:
    1 - Red
    10 - Blue
    When the value is 0, the object will have its own color (the dynamic fill color won't do anything)
    When the value is from 1 to 9, the object will be red. When the value is greater than 10, the object will be blue.

LineColor

Changes the color of the object line dynamically:

Expression

The value used for the LineColor dynamic.

Change Color

  • UsingLimits - The resulting color is determined when the value is equal to or greater than one of the boundaries.

  • AbsoluteValue - The color will be the value of the expression. The value must be a valid color name or hexadecimal number for colors. For example: "White" or "#FFFFFFFF"

    Limits Example:
    1 - Red
    10 - Blue
    When the value is 0, the object will have its own color (linecolor dynamic won't do anything)
    When the value is from 1 to 9, the object will be red. When the value is greater than 10, the object will be blue.

TextColor

Changes the color of the object text dynamically.

Expression

the value used for textcolor dynamics.

Change Color

  • UsingLimits - The resulting color is determined when the value is equal to or greater than one of the boundaries.

  • AbsoluteValue - The color will be the value of the expression. The value must be a valid color name or hexadecimal number for colors. For example: "White" or "#FFFFFFFF"

    Limits Example:
    1 - Red
    10 - Blue
    When the value is 0, the object will have its own color (textcolor dynamic won't do anything)
    When the value is from 1 to 9, the object will be red. When the value is greater than 10, the object will be blue.

Dynamic Bargraph

Configuration

Description

Bargraph

Bar chart dynamics

Expression

the value used for bar chart dynamics.

Value Range

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

Fill (%)

The minimum and maximum fill percentage. of the graphic bar

Bar Color

The color of the bar chart.

Orientation

The orientation of the bar chart:

Visibility Dynamics

Configuration

Description

Visibility

Dynamically changes the visibility and opacity of the object

Visible

Type a tag, property, or expression that returns a value. Considering the resulting value:

  • Zero - Object will be visible.

  • Greater than zero - Object will be hidden.
    For more information, see "Setting Up Configuring Expressions."

Tooltip

A text that will be displayed as a tooltip

Opacity

Opacity

  • ObjectValue - The value used to set opacity.

  • Range - The minimum and maximum values that correspond to the maximum and minimum. opacity.

  • Opacity - The minimum and maximum opacity (0 - invisible, 0.5 - a little transparent, 1 - opaque).

Dynamic MoveDrag

Configuration

Description

MoveDrag

Dynamically moves the object

BindingMode

  • TwoWay - Inlet and Output Cause Movement

  • InputOnly - Only input causes movement. The object does not move when the value of the object changes.

  • OutputOnly - Only output causes movement. The object does not move with user interaction.

Horizontal Move

  • Expression with reference for horizontal movement

  • Range - The minimum and maximum values that correspond to the minimum and maximum horizontal positions.

  • Position - The minimum and maximum horizontal positions

Vertical Move

  • Expression with reference to vertical movement

  • Range - The minimum and maximum values that correspond to the minimum and maximum vertical positions.

  • Position - The minimum and maximum vertical positions

Dynamic Scale

Setting

Description

Scale

Changes the size of the object dynamically.

Width Scale

  • Expression - The value used for the width scale.

  • Range - The minimum and maximum values that correspond to the minimum and maximum percentages of the scale width

  • Scale (%) - The minimum and maximum scale width percentage.

Height Scale

  • Expression - the value used for the height scale

  • Range - The minimum and maximum values that correspond to the minimum and maximum percentages of the scale height

  • Scale (%) - The minimum and maximum percentage of scale height.

Scale Reference:

Dynamic Rotate

Configuration

Description

Rotate

Rotates the object dynamically.

Expression

the value used for rotation.

Value Range

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

Angle

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

Center Reference

Dynamic Skew

Configuration

Description

Skew

Distorts the object dynamically.

X-axis Skew

  • ObjectValue - the value used for the X-axis slope.

  • Range - The maximum and minimum values that correspond to the maximum and minimum deviation angles of the X axis.

  • Skew (º) - The minimum and maximum angle of deviation of the X axis. For example: from 0 to 180 º.

Axis Skew

  • ObjectValue - the value used for the Y-axis slope.

  • Range - The maximum and minimum values that correspond to the maximum and minimum deviation angles of the Y axis. For example: from 0 to 100.

  • Skew (º) - The minimum and maximum angle of deviation of the Y axis. For example: from 0 to 180 º.

Skew Reference

Dynamic TextOutput

Configuration

Description

TextOutput

Text output dynamics.

Expression

Indicates the text that will be shown on the object.

Localizable

Indicates whether the text should be translated when the dictionary changes.

DesignModeCaption

The value shown in design mode:

  • ShowObjectNames- The contents of the text field are shown exactly as it is.

  • ShowPlaceHolders - The characters ### are shown, the number of characters is set by the field

Maxlength

Sets the maximum number of characters.

Format

Sets the format to use for numbers in the preview

Panel

On this page:

Table of Contents
maxLevel2
minLevel1
printablefalse