Developing HMI Applications

An HMI application is created in an HMI project. Ideally, this project was created initially with the wizard Create HMI project. 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 views Visualizations, Data source manager, and HMI features. The objects not relevant to HMI are located in the Programming view and are usually hidden.

Note

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

See also

• Command ‘Select perspective’
• Dialog ‘Create HMI project - Select HMI device’

Connecting HMI applications to a controller

1. Open the initially created HMI project.

2. Select the Data source manager object.

3. Click Add object ‣ Data source.

   ⇒

   The Add data source dialog opens and helps you to configure the data source. The data source type CODESYS Symbolic 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 connection type CODESYS V3 is preset.

5. In Device name or device address, specify the network name of the active controller whose data should be visualized. Example: Device_A

   ⇒

   The connection from the development system to the controller is established and the available variables are read. The Initialize data source wizard - Search data source variables dialog opens. The variables of the Device_A controller that can be accessed are listed in a table.

6. Activate the variables that you need for your HMI application, and click Exit.

   ⇒

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

See also

• Object ‘Data source manager’: _cds_obj_data_sources_manager
• Object ‘Data source’: _cds_obj_data_source

Creating visualizations

1. Now create your visualization as usual. Open the editor for the visualization and add the “Box” base element.

2. Select the element.

3. Configure in the Properties view:

   Texts ‣ Text: Output: %i

   Text variable ‣ Text variable: App_PLC_A.PLC_PRG.iVal

   ⇒

   This 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.

See also

• Designing Visualizations with Elements

Executing HMI applications

1. Click the symbol.

   ⇒

   The application is compiled.

2. Click the symbol.

   ⇒

   The application is downloaded to HMI device.

3. Click the start symbol ( ).

   ⇒

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

   

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