Radio Button

The Radio Button is a graphic element with built-in animation properties to select and clear radio button. This graphic element appears in the
System
category of the
Toolbox
.
Use a Radio Button to select options on the HMI device. Group multiple radio buttons to present a list of mutually exclusive options from which to select. Implementing this functionality requires additional functionality.
TIP:
Create two radio buttons to switch a process between running a machine automatically or manually (for example, to jog a conveyor manually during maintenance). For this example, assume there is a tag in the controller named Mode. This tag specifies manual versus automatic mode. The value 1 specifies Automatic mode and the value 0 specifies Manual mode. Pressing a radio button selects it and clears the other radio button. Pressing a selected radio button keeps the radio button selected.
  1. Add two Radio Button graphic elements to the screen.
  2. Next to each radio button, add a Text Display graphic element with text describing the option you are selecting. For example, type
    Manual
     after one radio button and type
    Automatic
    after the other radio button.
  3. For each radio button, add a
    Touch Release
     event with a
    Value Write
     command.
  4. Select the Automatic radio button and for the
    Value Write
     command, in the
    Write To
     box, browse to select the Mode tag in the controller. In the box below the
    Write To
    box, type
    1
    . Pressing the Automatic button on the HMI device writes a 1 to the Mode tag and runs the machine automatically.
  5. Select the Manual radio button and for the
    Value Write
     command, in the
    Write To
    box, browse to select the Mode tag in the controller. In the box below the
    Write To
     box, type
    0
    . Pressing the Manual button on the HMI device writes a 0 to the Mode tag and runs the machine manually.
  6. For each radio button, on the
    Properties
    tab, in the
    ShowMark
    box, browse to select the Mode tag. In the
    Expression
    box below the
    ShowMark
    box, enter the expression for each graphic element. For example, select the Automatic radio button and in the
    Expression Editor
    , type
    Mode == 1
    . Select the Manual radio button and in the
    Expression Editor
    , type
    Mode == 0
    . When the result of the expression is 1, this selectes the Automatic radio button. When the result of the expression is 0, this selected the Manual radio button. Selecting the Manual radio button when the machine is in Automatic mode writes a 0 to the controller and places the machine in manual mode.
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.
Name
Category
Purpose
Accepted values
ShowMark
General
Specifies the selected or cleared state of the check box.
  • Show mark - selected
  • Do not show mark - cleared
Unique properties
Unique properties are properties that not all graphic elements in the
Toolbox
share.
Name
Category
Purpose
Accepted values
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.
MarkColor
Appearance
Specifies the color of the checkmark.
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.
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)
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