You are here: Start » Tutorial Exercises » HMI Multipanel Control (hmi_multipanel_control)

HMI Multipanel Control (hmi_multipanel_control)


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


The Lena image from TestImage filter.


Application with HMI as in the image below.


In this exercise most useful HMI controls are presented:

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

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

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

Solution (AVS)

Creating basic program

  1. Add the TestImage filter to the project.

  2. Add the ChooseByPredicate filter to switch between RGB and Mono image. Connect input inObjectIfTrue with outRgbImage and inObjectIfFalse with outMonoImage.

  3. Add the RotateImage filter to perform image rotation. Connect inImage with outObject from the ChooseByPredicate filter.

  4. Add the SmoothImage_Gauss filter. This filter's input will be outImage from RotateImage.

  5. Add the Loop filter to run the program in a loop.

Creating HMI form

  1. Open HMI Designer using main toolbar by clicking on the HMI button in the image below:

  2. From HMI Controls window add following controls:

    • One MultiPanelControl control and after double click on area of this control in the new window click Add page and call it Configure,

    • Two Label controls and in Properties window set their Text property to: "Output image" and "Smoothing level",

    • One VideoBox controls,

    • Knob control and in Properties window set its Maximum to: "15",

    • One 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.

  3. Now, using right arrow of MultiPanelControl or by double clicking on the control and selecting Configure, go to Configure page and add the following controls:

    • Two RadioButton controls and in Properties window set their Text to "Use Color Image" and "Use Mono Image". Control with "Use Color Image" set property Checked to True,
    • One Label control and in Properties window set its Text to "Rotation Angle",
    • One NumericUpDown control and in Properties window set its Maximum to "360" and Increment "10",
    • One MultiPanelSwitchButton named "OK". Set TargetPage property to "Display". This control allows you to go back to main window of HMI.

    Configure screen should look like on the image below.

    Now come back to Program Editor and perform the following operations:

  4. Connect inCondition with outChecked from "Use Color Image" RadioButton,

  5. Connect inAngle port to outValue from NumericUpDown control,

  6. Connect inStdDevX with Knob's outValue.

Macrofilter Main creates application loop and gathers and process informations from HMI.

Further Readings