Create a simple GUI image processor with PyQt6 and OpenCV

Hi all,

This is a super-short weekend project. We are going to create a simple GUI application in python which highlights specific colors in an image and reports which percentage of the image was highlighted. Let’s show an example of the GUI:

Given a source image of an incredible red Volvo, some input regarding the color we want to trace, and the tracing threshold, our program outputs the traced image and reports the percentage of the image which was traced.

Let’s start our project with some necessary imports:

Let’s create a MainWindow class which will be the one and only window in our application. We subclass the PyQt class QMainWindow and customize it to suit our needs. The main layout of this application will be a QVBoxLayout which stacks widgets vertically. Inside this layout, we will nest some QHBoxLayouts, which stack widgets horizontally. We also define additional variables which will be of use later in the code.

Let us continue the code for this class. We define the “select image” and “process buttons” and link their clicked event to some functions we will define later. We also set the RGB selectors, where each of them is a QSpinBox. We must define the maximum and minimum values so a user won’t enter illegal values (only numbers between 0 and 255 are valid RGB values).

We continue with the MainWindow class. We add the previously created widgets to the top_bar_layout. Then we start creating the widgets in the middle bar — image_bar_layout. This layout contains the source and processed images, including their labels. We also limit the image sizes by using the setMaximumSize methods, so our screen won’t explode with high-res images.

The following code ends the __init__() function of the MainWindow class. We define the bottom_bar_layout which will contain the “Save as file” button to save the processed image. It will also contain a label that will report which percentage of the image has been traced. We will end with the setCentralWidget method that will tell the MainWindow which widget to use. We set a dummy widget called widget whose whole purpose is to contain main_layout, which contains the “meat” of this window.

The following code contains the remaining methods in the MainWindow class. choose_source_image is used to select an image from the local filesystem. Notice that we resize the image. This is support the processing of larger files by the program (Qt limits image sizes to 128 megabytes).

process_image does the actual tracing by color. It later resizes the result image and sets the previously defined self.result_image to show the result.

save_as_file simly utilizes the imwrite function of opencv to save the result in the local file system, given a filename obtained from a filesystem dialog.

The following are helper functions which 1) resize the image using opencv, 2) create a Qt pixmap from an opencv image, and 3) apply the tracing process, which is the whole purpose of our program.

Finally, here is the whole code from start to finish:

As a bonus, to create a python executable from this, all you need to do is pip install pyinstaller and run pyinstaller image_tracer.py from the directory containing the code!

Thanks all, see you in the next post :)