# Deploy Your Vision Application to the Web

When you use Project Types to create a vision application, in addition to getting preconfigured task blocks, script blocks, and an HMI, a WebHMI is also created.

To supply a ready-made WebHMI, Cognex Designer registers and enables a Web Server instance on your local computer using Port 80 as the default "listening" port.

When you enter test mode, a WebHMI opens by default in the Web Browser tab that is virtually identical to the Run Mode tab, which displays the client-side (local) HMI.

For a complete overview of the steps you would need to manually perform in order to enable a Web Server on your local PC and host an WebHMI, see the topic WebHMI: Functional Overview, Compatible Types, and an Example WebHMI: A Functional Overview

Note: When working with non-Web applications, you utilize C# code when scripting with Cognex Designer. When working with WebHMI, you'll use JavaScript instead.

## Modifying Your WebHMI for Deployment

You modify your WebHMI in a very similar manner to how you modified your client-side (local) HMI in the topic Add a Field to an HMI

1. Add a label to the WebHMI for displaying Total Blobs Counted.
   1. In the Explorer pane, double-click Web Pages > WebPage to open a WebHMI instance. The tab WebPage opens.
   2. From the Toolbox pane, drag Controls > Label on to the WebPage.
   3. Customize the label to read Total Blobs Counted : , using the same techniques you used to rename labels in the local HMI.
2. Replicate the expression in the local HMI that increments $Blob_Count_Cumulative in the Web HMI.
   1. In the Explorer pane, click Pages > SingleCamera to open your local HMI.
   2. Select the Total Blobs Counted : field.
   3. In the Properties pane, click the bi-directional arrow button in the Frequently Used > Text field. The Expression Builder opens.
   4. Copy the expression (String.Format("Total Blobs Counted : {0}", $Blob_Count_Cumulative)) by selecting it and right-clicking Copy.
   5. Click OK to close the Expression Builder.
   6. Select the WebPage tab.
   7. Select the Total Blobs Counted : field that you just created on he WebHMI.
   8. In the Properties pane, in the Frequently Used > Text field, click the bi-directional arrow to open the Expression Builder. The Expression Builder opens.
   9. Paste the copied expression in the WebHMI's Expression Builder by selecting it and right-clicking Paste.
3. Create a checkbox to reset $Blob_Count_Cumulative.
   1. From the Toolbox pane, drag Controls > Checkbox to the WebPage. The WebHMI checkbox looks slightly different from the local HMI checkbox.

   2. In the Properties pane for the selected Checkbox, modify Frequently Used > Text to read: Reset Cumulative Blob Count.
   3. With the Checkbox still selected, click the pencil icon in Frequently Used > On Checked. A script window titled CheckBox.Checked opens with a predefined signature.
   4. Copy the following JavaScript code into the script: $Blob_Count_Cumulative = 0;.
   5. Validate the script by clicking the green check-mark. If a green stripe appears on the line of code, it is validated and ready for use.
   6. Close the CheckBox.Checked script.
4. Test your WebHMI interface and application before deploying it.
   1. Select the Task window and Run All.
   2. Enable test mode by clicking Project > Run.
   3. Click Manual Run to accumulate more test data.
   4. Test out the Reset Cumulative Blob Count checkbox to ensure it is operating as designed.
   5. Click Project > Stop to stop testing.
5. Save your project for the final time by clicking File > Save All.

## Deploying Your Application to the Web

1. Select the WebPage tab.
Tip: If the tab still reads WebBrowser not WebPage, you are still in test mode. Click Project > Stop.
2. Select the title Single Camera Setup on your WebPage.
3. In the Properties pane, in the Frequently Used > Text field, replace Single Camera Setup with an appropriate title such as Blob Defect Checker.
4. Click Project > Deploy. Complete the selections and click OK. See Deploying a Cognex Designer Project
5. Click Accept to dismiss the Deployment Successful dialog box.
6. Once your project has been deployed successfully, and an icon to run your project has been placed on your desktop, click OK to dismiss the Deployment Successful dialog box.

Congratulations. Your project is deployed!

Finally, host your packaged deployment executable on either a PC running Cognex Designer with an WebHMI: A Functional Overview or in a production environment with an Apache Web Server on the back-end.