Element-specifiable properties

                               

Property:

Description:

Text

Changes text

Format

Specifies the formatting for numbers.


For the formatting we use the library numeral.js Therefore we refer to the page http://numeraljs.com/#format for explanation of valid formatting.


Dependence on the InputType

Although only numbers can be formatted, this feature is available to both numeric and alphanumeric text boxes.

However, there are differences in the formatting that is allowed.


For numeric text boxes, the format may only contain the following characters:

+
-
0
.

[

]


There is no restriction for alpahnumeric text boxes.


Prefixes and Suffixes

For alphanumeric text boxes, it is also possible to specify a prefix and/or suffix in the format.


To prefix a number with a specific character string, the character string must be placed in curly brackets before the format.


To append a specific character string to a number, the character string must be appended to the format in curly brackets.


Example:

A number is to be displayed as a temperature with one decimal place.

Input: 12

Format: 0.0{ °C}

Output: 12.0 °C


Please note that any spaces to be displayed between number and prefix/suffix must be specified within the curly brackets.

Spaces between the format and curly brackets are ignored.

InputType

Defines the type of text displayed.


When using the on-screen keyboard, a corresponding keyboard layout appears depending on the selected type.


Possible values are:

  • Numeric
  • AlphaNumeric


An alphanumeric text box allows all characters to be entered.

A validation of the input is possible by using regular expressions (see property Regex).


A numeric text box, on the other hand, allows only digits, plus/minus signs and decimal separators.

In addition to validation using regular expressions, the contents of numeric text boxes can also be checked for a value range (see properties Min and Max).

Min

Serves, together with "Max", to validate numeric text boxes.


Specifies the smallest value still allowed for this text box. If a number is smaller than this value, the text box is marked with a red frame
and the value of the "Text" property can no longer be used to write variables or other properties.


If both properties, "Min" and "Max" are set to 0, validation is disabled.

Max

Serves, together with "Min", to validate numeric text boxes.


Specifies the largest value still allowed for this text box. If a number is greater than this value, the text box is marked with a red frame
and the value of the "Text" property can no longer be used to write variables or other properties.


If both properties, "Min" and "Max" are set to 0, validation is disabled.

Regex

Used to validate text boxes using regular expressions.


Regular expressions can be used to perform complex checks on character strings.

At this point only 2 links, because the explanation of regular expressions should not be part of this documentation:


https://en.wikipedia.org/wiki/Regular_expression


For testing/developing/learning regular expressions:

https://regexr.com/


The following applies to formatted text boxes: The regular expression is checked after the format has been applied.


If the content of the text box does not match the regular expression, the text box is marked with a red frame
and the value of the property "Text" can no longer be used to write variables or other properties.

MaxChars

Sets the limits of characters of the textbox. If value is 0, no limit of characters will be Sets.

IsReadOnly

Here you can Sets it is possible to write in the text box or only reading. Options: Left | Center | Right

Font

Changes font

> Make sure the selected font is installed on the target machine as well. Otherwise a sans-serif fallback font will be displayed.

FontSize

Changes font size

TextColor

Changes font color

TextAlignment

Align the text. Options: Left | Center | Right

TextBackroundColor

Sets the background color of the text


General properties


Property:

Description:

Name

Unique name of the element | Name has to be Sets to use the control in an action function.

BackgroundColor

Background color of the element | The color is applied to the free and visible area of the control.

Enabled

Activate or deactivate the control | Is the control deactivated it can´t operate by mouse or keyboard.

Visible

Visual visibility of the element | The element can be made visually visible or invisible.

Z-Index

Level of the element | An item with a higher index value visually obscures an item with a lower index value.

Width

Width of the element | Here, the width of the control can be determined.

Height

Height of the element | Here, the height of the control can be determined.

ElementRotation

Elements are rotated | Also possible: If you use the mouse wheel without the shift key, the element rotates 10 degrees per step.

With pressed Shift key, it´s even more accurate with 1 degree per step.

ElementRotationPoint

Sets the point from which the rotation will originates | Options: Center |TopLeft | TopRight | BottomLeft | BottomRight.

Blink

Let's the item visually flash | Several speeds can be Sets. Options: None | Slow | Medium | Fast

PositionX

Position X on the Axis | The exact position of the element on the editor desktop can be determined for the X Axis.

PositionY

Position Y on the Axis | The exact position of the element on the editor desktop can be determined for the Y Axis.

ZoomFrom

Zoom to ... | Here you can Sets from which zoom range the element should be displayed. This increases the overview, especially for larger projects.

ZoomTo

Zoom from ... | Here you can Sets up to which zoom range the element should be displayed. This increases the overview, especially for larger projects.

TooltipText

Tool tip | Here you can specify the text that appears when the mouse is left on the element.


Actions


Action:

Description:

OnLeftButtonClick

Here an action can be defined which is started by clicking on the element with the left mouse button.

OnRightButtonClick

Here an action can be defined which is started by clicking on the element with the right mouse button.

OnMouseDown

Here an action can be defined, which is started by holding down the element with a mouse button.

OnMouseUp

Here an action can be defined, which is started by releasing a mouse click.

Clicked        

Here an action can be defined which is started by clicking on the element with a mouse button.


To learn how to use controls, visit the following link:

>> To the chapter "Using the control elements"