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. 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 the outRgbImage output,
    • inMonoImage using the outMonoImage output,
    • inUseColor using the input of the macrofilter,
    • and the 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 the SmoothImage_Gauss in the PROCESS section to perform basic smoothing. Connect the outImage output from the GrabImage macrofilter to the inImage.

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

  8. Add the RotateImage filter. Connect the outImage to the 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 the MultiPanelControl first. Add the following items into its first page:

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

  13. Add the following controls into the second page:

    • the GroupBox control and set its Text property to Options,
    • the Label control and set its Text property to Image source,
    • two RadioButton controls and set their "Use Color Image" (connect its output to the GrabImage step macrofilter inputs as the inUseColor) and the Use Mono Image (have the property Checked set to True),
    • two another Label controls named "Effects" and "Rotation angle",
    • the 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 the 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 the Integer input called inPageIndex and manually change its value to 1.

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

    • the 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 the SetActivePage macrofilter to the current macrofilter. Change the value of the inPageIndex to 0.

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

Macrofilter Main

Macrofilter GrabImage

Macrofilter SetActivePage

Macrofilter ConfigurationDone

Macrofilter ConfigurationEntered

Used Filters

Icon Name Description
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).
TestImage Makes it possible to quickly present results of various image processing filters.
RotateImage Rotates an image clockwise.

Further Readings