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

HMI Configuration Page

Aim

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

Hints

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. 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. Now add the TestImage filter.

  3. Add the ChooseByPredicate filter of Image type. Connect outRgbImage to inObjectIfTrue and outMonoImage to inObjectIfFalse.

  4. Create a macrofilter input inUseColor of Bool type and connect it to inCondition.

  5. Connect outObject to macrofilter outputs as outImage.

  6. Step out of the GrabImage macrofilter and create a variant macrofilter App. Let the forking port be a register of Integer type. Name it State. Add two new variants: "0" and "1". You can remove the "default" variant.

  7. Connect the output from the previous macrofilter to the current one as inImage. In the "0" variant add SmoothImage_Gauss to perform basic smoothing.

  8. Connect macrofilter's input inImage to inImage. Show the inStdDevX port by clicking "Show/Hide Ports" on the filter and selecting inStdDevX.

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

  10. Add the ChooseByPredicate filter of Integer type:

    • Click on the filter and set inObjectIfTrue to 1,
    • Connect the macrofilter's prevState to inObjectIfFalse,
    • Connect outObject to the macrofilter's nextState
    • Create an additional macrofilter output by dragging outObject and dropping it on the "Macrofilter Outputs". Name it outNextPage.

      In case you want to know how to create macrofilters in a few different ways, please see the Creating Macrofilters.

  11. In the "1" variant add the ChooseByPredicate of Integer type:

  12. Now go back to the Main and add the ChooseByCase filter of String type. Its output will be used later as a message on the HMI:

  13. 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:

  14. Add MultiPanelControl first. Add 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 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.
  15. 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:

  16. 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.
  17. Below the GroupBox control on the second page, add ImpulseButton named "OK" and connect its output to the inCondition input of the ChooseByPredicate filter in the "1" case of the App variant macrofilter.

  18. Connect the outNextPage output of the App variant macrofilter to MultiPanelControl's inputs "inActivePageIndex" and "inActivePageNumber".

  19. Add Label control below the MultiPanelControl and connect outObject to its input "inText".

Macrofilter Main

Macrofilter App(0)

Macrofilter App(1)

Macrofilter GrabImage

Used Filters

Icon Name Description
ChooseByCase Returns one of the input objects depending on the specified case index.
ChooseByPredicate E.g. to choose GREEN color to visualize correct objects or RED to visualize defective ones.
SmoothImage_Gauss Removal of gaussian noise from images.
TestImage Makes it possible to quickly present results of various image processing filters.
RotateImage Rotates an image clockwise.
Loop Put this filter into a task that should have a loop, but does not have any other loop generators (e.g. GrabImage).

Further Readings