You are here: Start » Tutorial Exercises » HMI Multipanel Control

HMI Multipanel Control

Aim:

Create a multi-screen application. One window is for configuration, and the other one for image presentation.

Input:

The Lena image from the TestImage filter.

Output:

An application with HMI, as in the image below.

Hints

In this exercise, most useful HMI controls are presented:

MultiPanelControl - responsible for window layout and easy multi-screen configuration.
RadioButton - a two-state control, especially useful with several option but only one is allowed.
CheckBox - a two-state control which allows to change state of process,
VideoBox - a control which presents an image in HMI.
Knob - a control which allows to change a real value.

In this exercise, all communication with HMI should be performed in the Main macrofilter.

To create application that uses HMI controls, loop generator should be added to the project.

Solution (FIS)

►Click here to show the solution.

Creating basic program

Add the TestImage filter to the project.
Add the Formula filter to switch between RGB and Mono images. Connect outRgbImage and outMonoImage, and add inUseColorImageChecked input of Bool type to it. Create a new output, ChosenImage, of type Image and create there an message:

outChosenImage = if inUseColorImageChecked then inRgbImage else inMonoImage
Add the RotateImage filter to perform image rotation. Connect inImage with the ChosenImage output.
Add the SmoothImage_Gauss filter. This filter's input will be outImage from RotateImage.
Add the Loop filter to run the program in a loop.

Creating HMI form

Open HMI Designer using main toolbar by clicking on the HMI button in the image below.
From HMI Controls window add following controls.
- 1 MultiPanelControl control, and after double click on area of this control, in the new window, click Add page and call it Configure.
- 2 Label controls, and in Properties window, set their Text property to: "Output image" and "Smoothing level".
- 1 VideoBox control.
- 1 Knob control, and in Properties window set its Maximum to: "15".
- 1 MultiPanelSwitchButton named "Configure". Double clicking the button or using the Properties window set TargetPage to "Configure".
The image below shows positions and sizes of added controls.
Now, using the right arrow of MultiPanelControl or by double-clicking on the control and selecting Configure, go to the Configure page and add the following controls:
- 2 RadioButton controls, and in the Properties window set their Text to "Use Color Image" and "Use Mono Image". Set the property Checked to True for the "Use Color Image" control.
- 1 Label control, and in Properties window set its Text to "Rotation Angle",
- 1 NumericUpDown control and in Properties window, set its Maximum to 360 and Increment to 10,
- 1 MultiPanelSwitchButton named "OK". Set TargetPage property to "Display". This control allows you to go back to the main window of HMI.
The Configure screen should look like the image below.

Now, go back to the Program Editor and perform the following operations:
Connect inUseColorImageChecked with outChecked from "Use Color Image" RadioButton,
Connect inAngle port to outValue from the NumericUpDown control,
Connect inStdDevX with the Knob's outValue.