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

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 TestImage filter.

Output

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 - 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 Formula filter to switch between RGB and Mono image. Connect outRgbImage and outMonoImage and add inUseColorImageChecked input of Bool type to it. Create new output ChosenImage of type Image and create there an message:

    outChosenImage = if inUseColorImageChecked then inRgbImage else inMonoImage

  3. Add the RotateImage filter to perform image rotation. Connect inImage with ChosenImage output.

  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 inUseColorImageChecked 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