# Add a Field to an HMI

In this tutorial step, you'll learn how to use tags to bind specific fields on an HMI (Human Machine Interface), how to add an additional field that displays the total number of blobs (defects) your application finds, and a HMI checkbox object to clear the Process Image for Defects with CogBlobTool.

When you work with Creating a New Project with Project Types, as we are in this tutorial, you get a preconfigured HMI each time you create a project. This saves you time as predefined project types create many basic HMI objects for you such as buttons, titles, and check-boxes.

In addition, a project created from a Project Type already contains scripts such as Task.OnComplete (the script within the predefined task block CalculateResult), which tallies the number of images your application processes per task execution.

## How Tags are Bound to Fields on an HMI

Before you add a new field to the HMI, take some time to examine how HMI fields are bound via tags, and how you can use the Properties Pane and Expression Builder to explore these fields, their relationships, and their values.

HMIs, either in a GUI or on a Web Server, are updated dynamically as your Cognex Designer project processes tasks.

Note: Unlike many other Cognex Designer project components, the HMI is not represented in the Task window by a block.

1. Select the Task window. Click Run All to run your application again.
2. In the Explorer pane, double-click Pages > SingleCamera. The SingleCamera HMI opens as a new tab in the Sequence Editor area.

3. Activate the Toolbox by clicking the Toolbox tab, if it isn't already selected.
4. On the HMI, select the field Count :. Notice that the Properties pane in the lower-right side of the Cognex Designer interface populates with information about the selected field. The Count : label on the HMI is defined by the Text field in the Properties pane.

5. Click the Bi-Directional Arrow button () next to the Frequently Used > Text field. This opens the Expression Builder, which is used for binding tags to HMI objects, such as HMI labels.

6. As you can see from the Expression Builder, The tag $TotalInspections has been bound to the label Count: and the Result of the expression is a String (a label with a string value of Count : {0}). In a similar way, you will use the Expression Builder to bind your new label, Total Blobs Counted, to the tag you created earlier, Blob_Count_Cumulative, the value of which is calculated by script block CalculateCumulativeBlobs.
7. Click OK to close the Expression Builder.

## Adding a New Field To an HMI

Add a Total Blobs Counted field to your HMI by doing the following.

1. With the SingleCamera tab selected (see above procedure for opening it), select Controls > Label from the Toolbox pane. Drag the Label to where you want it to appear on the HMI.
2. With the label still selected, edit the Properties pane.
   1. In the field Frequently Used > Text, replace the default value Text with Total Blobs Counted :. Press Enter.
   2. In the Appearance section for the new label, increase the Font Size to 24. You base this sizing on values that are assigned to existing labels; select them to verify Font Size. You can size the text box according to your needs by selecting and dragging the text box edges. You can select and drag the text box to move it to another part of the HMI. Your HMI should now look something like the following figure.
   Tip: Ensure that you expand the text box enough to display a three-digit figure. This may involve slightly realigning the text box with the other text box labels for purposes of symmetry. In addition, instead of manually adding the label as in the step above, you can enter the value quickly in the Appearance > Text field in the Properties Pane.

3. Select Total Blobs Counted : and click the Bi-Directional Arrow button () next to the Frequently Used > Text field. This opens the Expression Builder.
4. In the Expression Builder, click Tag Selector.
5. In the Tag Selector dialog box, select Blob_Count_Cumulative.
6. Click Accept. The $Blob_Count_Cumulative tag appears in the Expression Builder.
7. Position your cursor before the dollar sign ($).
8. In the Insert area of Expression Builder, click Function.
9. In the Expression Builder (Text, String) dialog box, scroll down until you see Function String.Format(...). Double-click String.Format(...) to enter the function into the Expression Builder.

10. Modify the expression to read: String.Format("Total Blobs Counted : {0}", $Blob_Count_Cumulative). This expression indicates that the value linked to tag $Blob_Count_Cumulative is displayed on the HMI as a string literal ("Total Blobs Counted :" with a placeholder for an integer, represented by Blob_Count_Cumulative. The default value of Blob_Count_Cumulative has been set to {0}. Your expression should be identical to the expression in the following graphic.

    Note: Remember to use the curly braces, quotes, commas, and parenthesis, as shown. Double-check the case of the tags you are referencing for consistency.

11. Click Validate to validate the expression you entered, to ensure it will execute successfully when your application runs. You should receive the message Expression validated successfully. If not, correct the expression before continuing. The Expression Builder will re-evaluate the expression as you modify it and display any errors it finds.
12. Click OK to accept the expression.
13. Finally, in order to display the cumulative blob count on your HMI, you will need to tell Cognex Designer that the task block CogBlobInspect must pass its tagged output Results_GetBlobs_Count as an input to the script block CalculateCumulativeBlobs.
    1. Select the Task window.
    2. Select the output connector pin of block CogBlobInspect.
    3. With your mouse, drag a connection to the input connector of script block CalculateCumulativeBlobs, shown in the graphic below.

This step illustrates two important Cognex Designer concepts.

- You pass data between blocks either by tagging explicitly, as when you create a tag in the Tag Manager or by tagging implicitly, as when you add a graphical connector between blocks. For instance, if you had not connected the pins in this step, Cognex Designer could not have obtain Results_GetBlobs_Count to calculate Blob_Count_Cumulative.
- An application can only be termed "complete" when you run the entire sequence from the Task window in test mode (by clicking Project > Run). In other words, unless all proper connections and definitions are made in the Task window, your application can not be properly modeled in test mode or deployed to a production environment.

## Adding a CheckBox Object to the HMI

Since we have added a cumulative blob counter, it makes sense to add a control that allows us to reset that counter whenever we want.

Though there are many ways to accomplish this in Cognex Designer, we use a checkbox object in this example.

1. Select the SingleCamera tab to open the HMI.
2. From the Toolbox pane, select Controls > Checkbox.
3. Drag Checkbox into the HMI, positioning it between the buttons Manual Run and Shut Down, as in the graphic below.
4. From the Toolbox pane, drag a Controls > Label to the HMI and position it to the right of the checkbox you added.
5. With the CheckBox object selected, type Reset Cumulative Blob Count : in the Properties pane Frequently Used > Text field to label the CheckBox.
Tip: Instead of manually adding the label as in the step above, you can enter the value quickly in the Appearance > Text field in the Properties Pane.
6. As you did when you added the label Total Blobs Counted :, re-size, move, and change the fonts as needed to adjust the appearance of the new label.

7. On the HMI, select the checkbox you added if it is not already selected.
   1. In the Properties pane, click the pencil icon () next to Events > On Checked. This opens a script in a window (CheckBox.Checked) with a predefined method signature that you can use to specify actions to occur when a user clicks the CheckBox.
      1. In the Toolbox pane, select Blob_Count_Cumulative and drag it into the script window.
      2. Modify the line of code in the script to read: $Blob_Count_Cumulative = 0;, a simple C# initialization to zero.
      3. Click the green check mark () to validate your script. Fix any errors, if needed.
      4. Close the CheckBox.Checked window.
8. Select the title Single Camera Setup on your HMI.
9. In the Properties pane, in the Frequently Used > Text field, replace Single Camera Sample with an appropriate title such as Blob Defect Checker.

You've finished configuring the HMI with new fields.

In the next topic, you'll test both the HMI and your new application to ensure it performs as you expect.