You are here: Start » Program Examples » HMI Configuration Page

HMI Configuration Page


The task is to create a functional HMI which would allow to modify the smoothness of an image and observe these changes straightaway.


Create a separate Step macrofilter for loading a test image in a loop. Then add a variant macrofilter with two variants in accordance with a current active page in the HMI.

Solution (AVS)

  1. In the ACQUIRE section, create a Step macrofilter and name it GrabImage. Inside of the macrofilter add the Loop filter so that the macrofilter will emulate a camera working in the continuous acquisition mode.

  2. Create a macrofilter input inUseColor of Bool type.

  3. Now add the TestImage filter.

  4. Add a Formula with three inputs:

    • inRgbImage using outRgbImage output,
    • inMonoImage using outMonoImage output,
    • inUseColor using the input of the macrofilter,
    • and output: outImage of type Image and create there an output message:

      outImage = if inUseColor then inRgbImage else inMonoImage

  5. Connect the output of the formula to macrofilter outputs as outImage.

  6. Go outside the GrabImage macrofilter and add SmoothImage_Gauss in the PROCESS section to perform basic smoothing. Connect outImage output from the GrabImage macrofilter to the inImage.

  7. Show the inStdDevX port by clicking "Show/Hide Ports" on the filter and selecting inStdDevX.

  8. Add the RotateImage filter. Connect outImage to inImage.

  9. Create a formula with an inActivePageName input of String type and one output:

    • Output StatusBarText of type String and create there an output message:

      StatusBarText = "Current page: " + inActivePageName

  10. The next step would be creating the HMI. To do so, please click on the HMI Designer button. You should create the HMI looking more or less like this:

  11. Add MultiPanelControl first. Add the following items into its first page:

    • Label control and set the Text property to "Output page",
    • VideoBox control available in the category of the same name in the HMI Controls window. Connect outImage to its input "inImage",
    • another Label named "Smoothing label",
    • Knob control available in the "Controls" category. Connect its output "outValue" to inStdDevX input of the SmoothImage_Gauss filter. Make the following changes in the Properties window:
    • ImpulseButton control available in the "Controls" category. Set its Text property to "Configure...". Connect its output to inCondition in the "0" variant of the App variant macrofilter.
  12. To add a new page into MultiPanelControl, you have to click on the control and press the button shown below. MultiPanelControl window will be prompted immediately. There you can add new pages or delete them:

  13. Add the following controls into the second page:

    • GroupBox control and set its Text property to "Options",
    • Label control and set its Text property to "Image source",
    • two RadioButton controls and set their "Use Color Image" (connect its output to GrabImage step macrofilter inputs as inUseColor) and "Use Mono Image" (have the property Checked set to True),
    • two another Label controls named "Effects" and "Rotation angle",
    • NumericUpDown control in range (-360, +360) and connect its output to the inAngle input of the RotateImage filter.
  14. Now you need to create two Event macrofilters using OK and Configure... buttons. To do so, press the second one on the HMI and go to Events window to create a new event handler for Click action. Set its name to ConfigurationEntered:

  15. Navigate to the newly created Event macrofilter by clicking it twice in the Project Explorer. Inside of it create a Step Macrofilter and set its name to SetActivePage. Add an Integer input called inPageIndex and manually change its value to 1.

  16. Inside of that macrofilter add a formula and connect inPageIndex to it. Also create a new output:

    • outActivePage of Integer type and add following message :

      outActivePageIndex = inPageIndex

  17. Connect the outActivePage output to the inActivePageIndex in the multiPanelControl on the HMI

  18. Now create an Event macrofilter for the OK button in the same manner. Name it ConfigurationDone and move inside of it to perform further actions.

  19. Drag and drop SetActivePage macrofilter to the current macrofilter. Change the value of inPageIndex to 0.

  20. Add Label control below the MultiPanelControl and connect outStatusBar to its input inText.

Macrofilter Main

Macrofilter GrabImage

Macrofilter SetActivePage

Macrofilter ConfigurationDone

Macrofilter ConfigurationEntered

Used Filters

Icon Name Description
TestImage Makes it possible to quickly present results of various image processing filters.
SmoothImage_Gauss Removal of gaussian noise from images.
Loop Put this filter into a task that should have a loop, but does not have any other loop generators (e.g. GrabImage).
RotateImage Rotates an image clockwise.

Further Readings