Numeric Input

The Numeric Input graphic element is a control with built-in animation properties to show a tag value and open the virtual numeric keypad to change the value. Numeric Input appears under
Common Controls
in the
Toolbox
.
Use the Numeric Input graphic element to show the operator numeric information from the data source and to enable the operator to write a numeric value to the data source using the
Virtual Numeric Keypad
or inline editing.
By default, the
Virtual Numeric Keypad
opens on
PanelView
 projects when interacting with a Numeric Input graphic element.
The range of input values that can be entered in the virtual numeric keypad are specified by the
KeypadMaxValue
 and
KeypadMinValue
 property values.
Mask the value displayed in the graphic element and in the virtual numeric keypad by selecting the
MaskedValue
 box in the
Properties
window.
Bind the
Value
property to a numeric tag (DINT, INT, SINT, or REAL). Bind the
Value
property to a string tag if the string consists of only numerals. For example, the string value 456 displays as an integer and the string value 321.0 displays as a floating-point value.
Use the
Rounding
field to specify how the numeric tag value appears when the amount of decimal places used by the numeric tag value exceeds the
DigitsAfterDecimal
value. For example, if
DigitsBeforeDecimal
is 3, DigitsAfterDecimal is 2, and
Rounding
= Nearest, the value 112.345 displays as 112.35.
TIP:
Tips:
  • If the
    Value
     property is assigned to an integer tag, the
    DigitsAfterDecimal
     property value is ignored. For example, if
    DigitsBeforeDecimal
     is 3 and
    DigitsAfterDecimal
     is 1, the INT tag value 123 displays as 123 instead of 123.0.
  • If the
    Value
     property is unassigned, the numeric display fills with asterisks.
  • If the value does not fit within the bounding box of the graphic element, the numeric display is filled with asterisks.
  • If the integer portion of the value, including the minus sign, contains more digits than specified for the display, the numeric display shows the value in scientific notation.
  • If the number of characters required to show the value in scientific notation exceeds the sum of the
    DigitsBeforeDecimal
     and
    DigitsAfterDecimal
     fields, the numeric display fills with asterisks.
  • If the value contains invalid characters, the numeric display shows dashes in place of the value. An error message appears above the graphic element.
  • To change the method for entering values in this graphic element, change the ValueEntryMethod property for the graphic element. The ValueEntryMethod property specifies whether entering values is inherited from the project properties, performed through the
    Virtual Numeric Keypad
    .
Built-in animation properties
Built-in animation properties appear under the
General
category of the
Properties
window. Specify values for these properties in order to animate the graphic element or change the information the graphic element shows on the HMI device.
Property
Category
Purpose
Accepted Values
Value
General
Specifies the value of the graphic element.
Bound tag
Unique properties
Unique properties are properties that not all graphic elements in the
Toolbox
share.
Property
Category
Purpose
Accepted Values
  • CornerRadius
    Appearance
    Specifies the curve of the corners.
    0 or a positive number
    FillColor
    Appearance
    Specifies the fill color.
    Any selected color in the
    Color Picker
     or a Hex color value entered manually. The Hex value must be in the format #RRGGBB. R, G, and B are Hex digits from 0 through F and represent the color channel values for red, green, and blue. For example, #ffff00 produces yellow.
    TextAlignment
    Appearance
    Specifies the vertical and horizontal alignment of the text.
    Vertical alignment:
    • Top
    • Center
    • Bottom
    Horizontal alignment:
    • Left justified
    • Centered
    • Right justified
    Color
    Appearance/Border
    Specifies the color of the border.
    Any selected color in the
    Color Picker
     or a Hex color value entered manually. The Hex value must be in the format #RRGGBB. R, G, and B are Hex digits from 0 through F and represent the color channel values for red, green, and blue. For example, #ffff00 produces yellow.
    Style
    Appearance/Border
    Specifies the style of the border line.
    • Any selected Line style - None, Solid, Dash, Dot, Dash Dot, or Dash Dot Dot
    • Any selected Cap style - Flat, Round, or Square
    • Any selected Join style - Miter, Bevel, or Round
    Width
    Appearance/Border
    Specifies the width of the border line.
    • None
    • 1 point
    • 2 point
    • 4 point
    • 8 point
    FontName
    Appearance
    Specifies the font of the text.
    Any selected font
    FontColor
    Appearance
    Specifies the color of the text.
    Any selected color in the
    Color Picker
     or a Hex color value entered manually. The Hex value must be in the format #RRGGBB. R, G, and B are Hex digits from 0 through F and represent the color channel values for red, green, and blue. For example, #ffff00 produces yellow.
    FontSize
    Appearance
    Specifies the size of the text.
    Positive numbers
    Bold
    Appearance
    Makes the text or value on the graphic element bold.
    • Bold - selected
    • Not bold - cleared
    Padding
    Appearance
    Specifies the distance, in points, between the content of the element and the edge of the element.
    Any numeric value
    UsePredefinedDisabled
    Appearance
    Specifies if a crosshatch overlay shows on the control element when you disable the element.
    • Use predefined disabled appearance
      (selected)
    • Do not use predefined disabled appearance
      (cleared)
    DigitsBeforeDecimal
    Numeric
    Specifies the number of digits before the decimal point.
    0 - 9
    DigitsAfterDecimal
    Numeric
    Specifies the number of digits after the decimal point.
    0 - 9
    LeadingZero
    Numeric
    Places a zero before REAL numbers that are less than 1.
    • Leading zero (selected)
    • No leading zero (cleared)
    TrailingZeros
    Numeric
    Specifies that zeros fill the remaining decimal places.
    • Trailing zeros (selected)
    • No trailing zeros (cleared)
    Rounding
    Numeric
    Specifies the rounding method for the decimal portion of REAL numbers.
    • None - Do not round the number
    • Up - Round up to the nearest number
    • Nearest - Round up or down to the nearest number
    MaskedValue
    Input
    Specifies that asterisks mask the value entered on the numeric keypad.
    • Value masked (selected)
    • Value not masked (cleared)
    KeypadMaxValue
    Input
    Specifies the maximum value to show and enter on the numeric keypad.
    Any numeric value that is greater than the KeypadMinValue property value
    KeypadMinValue
    Input
    Specifies the minimum value to show and enter on the numeric keypad
    Any numeric value that is less than the KeypadMaxValue property value
    ValueEntryMethod
    Input
    Specifies the method for entering values in the graphic element. The default is to inherit the value entry method from the project. Selecting the virtual keypad value entry method overrides the default setting of the project.
    • InheritProjectSetting
    • VirtualKeypad
    When binding to this property, use either the name of a value or the associated number:
    • 0 (InheritProjectSetting)
    • 1 (VirtualKeypad)
    KeypadPosition
    Input
    Specifies the position of the virtual numeric keypad on the screen. The default position is the center of the screen (Middle-center).
    • Top-left
    • Top-center
    • Top-right
    • Middle-left
    • Middle-center
    • Middle-right
    • Bottom-left
    • Bottom-center
    • Bottom-right
Common properties
Common properties exist for all graphic elements.
Property
Category
Purpose
Accepted Values
Access
Security
Specifies if all users have access to the control element, or if access is inherited from the screen.
  • Inherit - Access inherited from screen.
  • Full Access - Access granted to all users.
Angle
Position and Size
Specifies the rotation angle.
Enter 180 to display the graphic element upside down. If you enter a value larger than 360, the portion of numeric value that is over 360 becomes the value. For example, enter 380 to see a value of 20. If you enter a value less than 0, the negative value is subtracted from 360. For example, enter -30 to see a value of 330.
  • Numbers 0 to 360
Enabled
Appearance
Specifies if the graphic element is available on the HMI device and if the graphic element accepts touch and key input.
  • Enabled - selected
  • Not Enabled - cleared
Height
Position and Size
Specifies the height in pixels.
Any positive numeric value
Opacity
Appearance
Specifies the transparency of the graphic element.
0 (fully transparent) - 100 (fully opaque)
Visible
Appearance
Specifies if the graphic element is visible on the HMI device.
  • Visible - selected
  • Not visible - cleared
Width
Position and Size
Specifies the width in pixels.
Any positive number
X
Position and Size
Specifies the horizontal coordinate, in pixels, from the upper left corner of screen to the upper left corner of a graphic element or group with no rotation. If the graphic element or group is rotated, the X property value does not change.
Any positive number
Y
Position and Size
Specifies the vertical coordinate, in pixels, from the upper left corner of screen to the upper left corner of a graphic element or group with no rotation. If the graphic element or group is rotated, the Y property value does not change.
Any positive number
Provide Feedback
Have questions or feedback about this documentation? Please submit your feedback here.
Normal