Skip to main content

Developing HMI Applications

An HMI application is created in an HMI project. Ideally, this project was created initially with the Create HMI project wizard. You can edit the HMI application in both the HMI perspective and the CODESYS perspective. In the HMI perspective, the relevant objects are displayed in the foreground. They are organized clearly in the Visualizations, Data Sources Manager, and HMI Features views. The objects not relevant to HMI are located in the Programming view and are usually hidden.

Tip

Select the HMI perspective for seeing only those objects that are relevant for typical HMI projects.

Connecting an HMI application to a controller

  1. Open the initially created HMI project.

  2. Select the Data Sources Manager object.

  3. Click Add Object → Data Source.

    The Add Data Source dialog opens and helps you to configure the data source. The CODESYS Symbolic data source type is set by default. You use this type if your control application has a symbol configuration.

  4. Specify a name for the data source. Example: Data_Source_A and click Add.

    The Initialize Data Source Wizard – Provider settings dialog opens.

    The CODESYS V3 connection type is set by default.

  5. In Name or address of device, specify the network name of the active controller whose data should be displayed in a visualization. Example: Device_A

    You can also specify an IEC variable as an alternative to the network name so that the communication parameters are configured dynamically at runtime.

    The connection from the development system to the controller is established and the available variables are read. The Initialize Data Source Wizard – Browse data items dialog opens. The variables of the Device_A controller that can be accessed are listed in a table.

  6. Enable the variables that you need for your HMI application, and click Finish.

    The data source is created initially and inserted below the data source manager.

Creating visualizations

  1. Now create your visualization as usual. Open the editor for the visualization and add the basic rectangle element.

  2. Select the element.

  3. Configure the following settings in the Properties view:

    Texts → Text: Output: %i

    Text variables → Text variable: App_PLC_A.PLC_PRG.iVal

    The element is configured so that a value is output. The value of the variable is a data source variable and it is configured in the editor of the data source in the Variables tab. The data source communicates cyclically with the controller so that the actual value is displayed under consideration of the refresh rate.

For more information, see: Designing a Visualization with Elements

Running the HMI application

  1. Click the _cds_icon_build.png symbol.

    The application is compiled.

  2. Click the _cds_icon_login.png symbol.

    The application is downloaded to HMI device.

  3. Click the start _cds_icon_start.png symbol.

    The HMI application is executed. The visualization starts. The actual value from the controller is output.

    _visu_hmi_initial_app_in_runtime.png

    You can operate the visualization using the keyboard, mouse, or gestures.

: