Image Mnaipulation Tools Dialog

In the previous post I showed the first three image manipulation tools that were added to Nomacs. The tools were placed in a Qt Dock Widget and a change in tools values resulted in a change of the displayed image colors. For changing the colors of an image we need to go through each of its pixels and do a calculation depending on the tools values.  As we can see on the graph in the post Image histogram - speed upgrade the time needed for going through all the pixels exponentially increases with the image size. So the manipulation of larger pictures took more time and this resulted in a bad user experience.

The solution was to move the tools from the main window to a dialog with a small picture preview. This way all the changes that user makes are firstly displayed on a scaled image. This is done faster then on an unscaled image. This way the changes on the slider are smooth and the preview is redisplayed right away. Only after the user is satisfied with the preview, the changes are made to the image in the main window.

The current look of the dialog is displayed bellow:

Image manipulation tools

The main goal of my first part of the Google Summer of Code program is to create image manipulation tools. I started programming them after I finished the histogram. I've added the Qt Dock Widget, which will contain different image manipulation tool widgets.

The widgets I've added so far are three sliders for changing the brightness, contrast and saturation of the opened image. The picture bellow shows the current look of the added widgets.

Let's also take a look at the changes we get with different slider values of brightness, contrast and saturation.

Brightness from -100 to 100, step 20:

Contrast from -100 to 100, step 20:

Saturation from -255 to 255, step 25.5:

Image histogram - speed upgrade

When creating an image histogram we need to go through all the pixels in the image. In larger images there can be a lot of pixels so this process can be slow if not programmed correctly.

First time I used Qt and its QImage::pixel(x, y) function to access pixels in the image. It was very slow. It took more then one second to go through an image of size 4320 by 2868. One second waiting for a histogram to show is a long time and an user certainly wouldn't be pleased with it. The alternative way is to use OpenCV and its class Mat which needed a quarter of a second. This is a pretty big difference and a big improvement in user experience.

Bellow I've created a graph showing the time in milliseconds needed for calculating a histogram of a square image. The horizontal axes shows the number of pixels in one side of the image.

We can see that using Qt gives us larger calculation times. This is why I don't recommend it for image manipulations where we need to read or modify all the pixels in the image.

Image histogram

Every beginning on a new project that is already a fully functional program is hard. There is a lot of code already written that you need to get used to and in Nomacs there is also the Qt framework that I am using for the first time. After some days of looking at the code and getting a general feel on how things work and how the code is written I started programming.

As my first coding task I wanted to do something fairly simple that would introduce me to Nomacs and Qt. I decided to create a panel with a histogram of the displayed picture. The histogram will be useful also when coding tools for image manipulation because we can compare the histogram with other programs. To create the histogram we go through each image pixel and for each channel we count the number of pixels with the same color. From the normalized calculated data we draw the histogram in a DkHistogram widget that is based on DkMetadata and DkInfoLabel widgets as it was kindly suggested by my mentors.

The final result is shown in the image bellow.