# An End-to-End WebHMI Application

Before attempting to create a WebHMI WebPage, familiarize yourself with WebHMI: Type Compatibility .

Any application you can create with Cognex Designer can be hosted on a WebHMI WebPage, providing the rules of type compatibility are followed.

To create your WebHMI application, do the following:

1. Register and Enable a Web Server.
   1. In the left-pane Explorer, navigate to System > Settings and double-click Settings. The Project Settings dialog opens.
   2. In the Project Settings dialog, select WebHMI.
   3. Select Enable Web Server.
   4. Enter the Port number you want to host Web Services, or accept the default of Port 80.
   5. While logged-in as Administrator, click Register Port.
2. Enable authentication for your application.
   1. In the Project Settings dialog box, select Enable Built-in Authentication.
3. Optionally, enhance security by defining an inactivity timeout setting, which specifies the number of time in minutes that the WebHMI session remains active before lock-out by the log-in dialog. To set a timeout value, do the following. If you do not want to set a timeout value, proceed to the next step.
   1. Select Inactivity Timeout.
   2. Enter the timeout limit value in minutes in the (min) drop-down box, or use the arrows on the right-side of the box to advance or decrement the value by one minute.
4. Click Apply and OK.
5. Add users and configure permissions.
   1. In the left-pane Explorer, double-click System > Users to open the User Configuration dialog box.
   2. Select the Authentication Mode you want to use, either Active Directory or Standard.
   3. Define each Usernames, along with associated Passwords and CurrentAccessLevel that you want to assign to the user. After you complete each user's entry, press ENTER. A blank row will appear. When you finish adding all users, proceed to the next step.

   For information about customizing fields for use when programming security applications based on access level, see WebHMI: A Functional Overview

6. If you haven't already done so, create an application with Cognex Designer and verify that it runs successfully in Test Mode. For this example, we'll display an image from a PatMax example created with VisionPro. Visit the Cognex Corporation Downloads page and search for Cognex Designer sample projects that use PatMax.
   1. Create a web page and add a Display object.
      1. In the left-pane Explorer, create a WebPage by double-clicking WebPages > WebPage.
      2. From the Toolbox, drag the Display block onto your WebPage. The Display object appears on your web page.

      If the Display object does not appear, verify that your Web Server registered properly on Port 80 and that Port 80 is not in use by another application.

7. Bind the Display object to the Image(vprorecord) created by the PatMax application.
   1. Select the Display object on your WebPage.
   2. In the Properties pane, in Frequently Used > Source, click the double-arrow icon. The Expression Builder opens.

   3. In the Expression Builder, click Tag Selector.
   4. Navigate to your Camera or Image File device and select the Image(vprorecord) tag. Click Accept.
   5. In the Expression Builder, click OK.
   6. On the Cognex Designer menu, click Project > Run.

   The image bound to tag Image(vprorecord) is displayed on the WebPage in the Display object.