# WebPages HMI Scripting

The WebPages HMI scripting is based on JavaScript and supports HTML5.

WebPage HMI scripting is composed using the Script Editor, and has the following characteristics:

- Executes in a Web browser, and only execute when the project is in deployed mode.
- Tags are stored at the beginning of the script; if the tag value is updated by another component of the system while the WebPage HMI script is being executed, that change will not affect the tag’s value within the WebPage HMI script. After the WebPage HMI script completes, the updated tag value will be written back to the tag, and will overwrite any other changes to the tag while the WebPage HMI script was executing.

- The execution of $ Functions and the updating of tags within WebPage HMI scripts are asynchronous to the Cognex Designer project. For processes that are tied to controlling parts of the application, bundle the commands in scripts that execute on the controller, such as Data Change Scripts or User Scripts.

  Note: The User Scripts can be called by using the Button Click Command - User Scripts property.

- For actions that only affect the HMI, use the WebPage Elements Event handler scripts. If the action requires an immediate update, use a Promise within the code. Promises should be used to get the return values of a WebPage script, and then execute any dependent script code.

  Note: For more information about using promises, see the WebPages JavaScript Promises topic.

There are two methods for interacting with WebPage Elements and using a project in deployed mode via script:

- Data Change Scripts (WebHMI)

  These scripts are used to monitor and perform actions when tags associated with WebPages are modified or change state.

  Note: These tags are listed in the WebPages Element Property Tags topic.

- WebPage Elements Event Handler Scripts

  These scripts are used with WebPage Elements Events, such as On Mouse Enter, On Mouse Up, On Changed, etc.

The WebPages HMI scripting can interact with:

- The properties of WebPage Elements, which are published as Tags (WebPages Element Property Tags), and WebPage HMI-related tags (WebPages Tags).

  This allows you to access elements' properties, such as a Slider element's Value property or a TextBox element's Text property, using tags.

  For example:

      $MyTag = 45;

      console.log($MyErrorMessageTag);

      $WebPages.WebPage.TextBox.Text = "new text";

      $WebPages.WebPage.DataTable.Content = { Header: ["Header1"], Data: [ ["test"], ["test2] ] }

      $WebPages.WebPage.DataTable.Content = new TableData(["Header1"], [ ["test"], ["test2"] ] )

  Note: The two DataTable examples produce the same result.

- $ Functions require the use of a promise if you want to use the return value.

- The "static" HMI $ functions ($ Functions: WebPages HMI) and the individual element's $ functions and properties.

Note:

- For more in-depth information about the JavaScript programming language, please consult the following (Internet access is required):

  - Mozilla JavaScript Guide
  - Mozilla JavaScript Language Reference
  - "JavaScript: The Definitive Guide" by David Flanagan
- For more information about script execution, and the differences in where they execute, see the Scripts Execution topic.