Creating a Spin Button Control

Scenario: You want to draw a Spin button command control on your graphic so you can increase or decrease the Present Value of an Analog Output data point from within your graphic.

There are two methods of doing this:

  • You can gather object type information for a data point and then draw and configure a customized command symbol or graphical element, such as a button, that allows you to send commands from within a graphic.
  • You can drag an existing default command symbol from a project library to a graphic. To add a default command symbol from a project library, proceed directly to Designating and Adding a Default Command Symbol to a Graphic.

 

Reference:

  • For overall background information, see Command Control Configuration.
  • For command control and navigation properties background information, see Command Control Properties and Command and Navigation Properties.
  • For symbols background support when creating command control symbols, see Symbol Property Substitution.

 

Workflow diagram:

 

 

Prerequisites:

 

Steps:

To draw and configure the Spin button command control, complete the following procedures in the specified order.

1 – Draw a Spin Button Control

This procedure is just one example of how a Spin button command control can be drawn and configured to send commands.

  • You have reviewed or completed the Preparing to Create Controls to Command Objects workflow.
  1. To create a new command control element on a graphic, from the File menu, select New Graphic .
  1. From the Elements group, select any elements that you would like to use to create two buttons for the Up and Down commands in the Spin button.
    NOTE: The Path or Polygon elements can easily be used to draw an UP or DOWN arrow.
  1. On the canvas, position the elements to depict how you want them to command your point: on top of each other or side-by-side.
  1. Click Command Control , and draw a rectangular shape encompassing the buttons on the canvas.
  1. With the command control selected on the canvas, from the Property View (Command Control Properties), expand the Command Control properties, and from the Control Type drop-down menu, select Spin Button.
  1. Navigate to the Element Tree view, select the element that represents the DOWN spin button, and hold down the CTRL key and select the Spin Button Control and right-click.
  1. From the menu that displays, navigate to Group, and then select Join or leave Command Control. Repeat Step 5 for the Up element.
  • In the Element Tree, the two UP and DOWN buttons display as children of the Spin button control.
  • The first child element represents the [up] button, whereas the second represents the [down] button. If the first element grouped with the Spin button control is the DOWN arrow, and the second grouped element is the UP arrow, change the order by using the Move Up and Move Down arrows from the Element Tree view.
  1. Click Save .

 

2 – Configure the Spin Button Command Control Properties

Scenario: You want to configure the Command Control properties of a Spin button command control that allows you to increase or decrease the Present Value property of an Analog Output data point from within your graphic.

  • You have completed the steps in Drawing a Spin Button Set.
  1. In the Element Tree view or on the canvas, select the Spin Button Control.
  1. In the Spin Button Control Properties view, expand the Command Control properties.
  1. In the Parameter Name field, type the data point’s Parameter name obtained from the Models & Functions Command Configuration table. This field is case–sensitive. For this example, type Value. This property will be the same Parameter property later defined in the Command and Navigation section.
  1. In the Minimum field, enter the lowest acceptable value of your command.
  1. In the Maximum field, enter the highest acceptable value of your command.
  1. In the Change Amount field, enter the incremental amount of each change when the UP or DOWN arrow is selected.
  1. In the Update Delay field, leave the default value of 500 (milliseconds). This field displays the time, in milliseconds, that it will take to update the value from the last click the Spin button command control.

 

3 – Configure the Spin Button Command and Navigation Properties

Scenario: You want to configure the Command and Navigation properties of a Spin button in order to increase or decrease the Present Value property of an Analog Output data point, from within your graphic.

NOTE:
If you create a command control element in a symbol instead of on a graphic, follow the steps below, replacing the Target and any other hard-coded references with * substitutions in the Evaluation Editor. For more information, see Symbol Property Substitutions.

  • You have reviewed the Command and Navigation properties section and have a full understanding of the fields and the options available to you for configuring the Command and Navigation properties group.
  • You have drawn a Spin button control on the graphic and configured the Command Control properties.
  1. In the Properties view (Spin Button Control properties), expand the Command and Navigation properties group.
  1. In the Target field, drag a designated data point from System Browser. If the target designation does not specify a property, the default property is targeted. Otherwise you must specify the property by typing a period (.) and then the property name after you drag the data point into the Target field, for example: CCProject.LogicalView:Logical.PXRack.B.Block.Hcrv;.Property_Name.
  • For this example, drag the Analog Output data point into the Target field. No property extension is required, as the default property is .Present_Value.
    NOTE: If you have the data point selected in System Browser, or you have selected a symbol instance of the data point on the canvas, the data point information is displayed in the Operations and Extended Operations tab, from there, drag the property you want to target into the Target field. The property name is added automatically.
  1. From the Command Name drop-down menu, select or type the command rule that you want to apply to the property.
  • For this example, select or type Write.
    NOTE:     The command name must match the name of the command in the Models and Functions Command Configuration section. This field is case-sensitive.
  1. In the Parameter field, do one of the following:
  • Select the value from the drop-down menu.
    NOTE:     For a stand-alone command control, if you have multiple parameters, only one parameter receives the value from the control itself and all other parameter values must be hard-coded.
  • For this example, delete everything but the parameter name, which in this case is: Value.
  1. From the Trigger drop-down menu, select how to initiate the command: Single click or Double click.
  • In this example, select Single Click.
  1. (Optional) In the Description field, type a brief description of the command that will appear in the tooltip.
  1. In the Element Tree view, click the Thumb elements ([up] and [down] buttons) of the Spin button, and in the Property view navigate to the Command and Navigation property section and from the Cursor drop-down menu, select the cursor preference that you want to display when the command is active. The cursor must be set in the Thumb element properties, if you want the specified cursor to display when the cursor moves over the thumb.
  1. Select the Command Trigger check box to enable the command control to send a command.
  1. (Optional) To disable the command control, select the Disabled check box, and from the Disabled Style drop-down menu, select how the disabled command control displays when disabled. For example, if the selected data point is Out_of_Service and the command is disabled, the selected disabled style will be active at runtime to reflect this.
  1. The Extended Tooltip check box is selected by default. It displays the following command object details: Target, Command Name, and Parameter. If enabled, the extended tooltip is added to any existing tooltips configured for the element.
  1. Click Save As .
  1. To test the Spin button in Runtime mode, from the Home tab, in the Modes group, select Runtime mode .
  1. If you created a symbol and want to designate it as the default command symbol for an object type, proceed to Designating and Adding a Default Command Symbol to a Graphic.