HMI Handling Events

Designing the user interface. Its layout can be similar to the one above, but feel free to play around and modify it as much as you like.

1. Open the HMI Designer by clicking its icon in the Application Toolbar.

2. Drag the GroupBox HMI Control from the "Containers" category and drop it onto the HMI Canvas. Set its Text property to Image.

3. Drag the View2DBox HMI Control from the "Indicators" category and drop it in the GroupBox. Set its Dock property to Fill so that the image will always fit the GroupBox.

4. Add another GroupBox to the HMI and set its Text property to Results. This control will contain HMI controls for displaying the current position of the cursor and the color of the selected pixel. Adjust its size if necessary.

5. Add four Label controls to the HMI and set their Text properties to Cursor Coordinates:, Pixel Color:, Selected Pixel Color: and Color Distance:.

6. Add four more Labels that will be used for displaying values corresponding to the labels from the previous point. Place them next to the corresponding labels.

7. Add the Panel control to the HMI and put it under the Pixel Color: Label. Later, we will create an algorithm that will set its color to the value of the selected pixel and allow us to display not only the numeric values of RGB channels but also the color they represent.

8. Add another Panel and put it under the Selected Pixel Color:.

9. Add two Labels and place them under the image preview. Set the Text property of the first one to Iterations:. The value of the second one will be set by the program in every iteration, and it will display the total number of executed iterations.

Before we move on, make sure that your HMI contains all the controls mentioned in points 1-9, as well as visible in the screenshot above. If they are all in place, we can start creating the algorithm.

1. Add the LoadImage filter to load a single image from a file. Place it in the ACQUIRE section.

2. Connect the outImage with the inImage input of the View2DBox HMI control.

3. Add the EnumerateIntegers filter to the ACQUIRE section. It will generate a loop and increase the iteration counter in every iteration. Connect its outValue output with the Label intended for displaying the iteration counter. Finally, set its inDelay input to 100 so that each iteration will last 100ms.

4. Now it is time to create an event-handling macrofilter that will be executed in response to the View2DBox's Click event (an event that occurs when the user clicks the left mouse button over the image). To create such a macrofilter, click the View2DBox on the HMI and then click the "lightning" icon in the Properties window. This will open the Events window where you will see all events that can be handled. Click the drop-down list next to the "ImageMouseClick" event and select <add new...> as shown below: Change the name of the new event handler to the View2DBox_ImageMouseClick in the pop-up window and click OK.
   
   NOTE: There are many more events associated with this HMI Control. If you want to see the complete list, right-click on the View2DBox, select Edit Ports and Events Visibility... and go to the Events tab.

5. Now that we've set up the event handler, we can start creating the algorithm that will return the value of a pixel clicked in the image. Add the GetImagePixel filter to the View2DBox_ImageMouseClick event handler and connect the input of the handler to the GetImagePixel's inLocation. Put the filter in the PROCESS section.

6. As there is no image source inside the event handler, the input image has to be transferred from the main loop. We will do this by using a Global Parameter. To create one, click the Create New Global Parameter... button in the Project Explorer. Name it InputImage and choose the Image data type.

7. To update the global parameter every time the image is acquired, add WriteParameter filter to the Main loop and click "Add input" on it. Next, select the InputImage from the list.

8. Connect the outImage with the inInputImage.

9. Return to the View2DBox_ImageMouseClick event handler. Drag the InputImage global parameter from the Project Explorer and drop it on the inImage.

10. Create a Formula to format RGB values into a String. outPixelColorString = "R = " + toString(inPixelRGB.X) + " G = " + toString(inPixelRGB.Y) +
" B = " + toString(inPixelRGB.Z) In order to display the outPixelColorString on the HMI, connect it to the inText of the Label HMI Control (the one that is placed under the Selected Pixel Color:).

11. Connect the inLocation input of the macrofilter with the formula. This will create an input of the same name and type.

12. Create another formula output to send the clicked point's location to the View2DBox HMI Control. outLocationToHMI = inLocation

13. Connect the outLocationToHMI with the inData1 input of the View2DBox HMI Control.

14. The next step is to set the color of Panel HMI Control to show the color of the selected pixel. Right-click on the Panel, select Edit Ports and Events Visibility... and check the inBackColor from the list. After clicking OK, you will notice that the inBackColor input became available, and you just need to connect the outPixel of the GetImagePixel to it.

15. Run the program and click on the image. The value of the clicked pixel should be displayed on the HMI.

16. Create a global parameter of the Pixel? data type and name it SelectedPixelColor.

17. Add the WriteParameter filter to the PROCESS section. Drag the outPixel, drop it on the WriteParameter and select the inSelectedPixelColor from the list. We will use this global parameter for setting up another event handler in the following steps.

18. Create a macrofilter that will handle the mouse movement over the View2DBox. You can do this the same way you did earlier with the View2DBox_ImageMouseClick event handler. Name it View2DBox_ImageMouseMove.

19. Add the Formula block to the PROCESS section.

    • Connect the inLocation input of the macrofilter to the formula. An input of the same name and type will be created.
    • Connect the SelectedPixelColor global parameter to the formula.

20. Now we will create the formula to format cursor position to a string and send it to the HMI: outCoordinatesString = "X = " + toString(inLocation.X) + " Y = " + toString(inLocation.Y) Connect this output to the inText of the Label HMI Control (the one that is placed under the Cursor Coordinates:).

21. In the case of a negative cursor position, the GetImagePixel filter will throw a Domain Error. To avoid this, create the following formula to ensure that only positive points are transferred to the GetImagePixel. Otherwise, a Nil value is returned and the filter is not executed. outPositiveLocation =
if inLocation.X >= 0
and inLocation.X < inInputImage.Width
and inLocation.Y >= 0
and inLocation.Y < inInputImage.Height
then inLocation else Nil

22. Add the GetImagePixel filter to the PROCESS section. Connect the InputImage global parameter to the inImage and the outPositiveLocation to the inLocation.

23. Connect the outPixel to the inBackColor of the second Panel HMI Control, just like in step 14.

24. Create the new Formula block, connect the outPixel to it, name the new input "inPixelRGB" and create the output that will format the outPixel to String: outPixelColorString = "R = " + toString(inPixelRGB.X) + " G = " + toString(inPixelRGB.Y) +
" B = " + toString(inPixelRGB.Z) Connect this output to the inText of the Label HMI Control (the one that is placed under the Pixel Color:).

25. The last step is to compare the previously clicked pixel with the current one. To do this, add the ColorDistance to the program.

    • Connect the SelectedPixelColor to the inPixelA.
    • Connect the outPixel to the inPixelB.
    • Connect the outDistance to the inText of the Label HMI Control (the one that is placed next to the Color Distance:).

Macrofilter Main

Macrofilter View2DBox_ImageMouseClick

Macrofilter View2DBox_ImageMouseMove