Chapter 3. Learning the Graphical User Interface and Basic Filtering

In the previous chapter, we learned the basic classes and structures of OpenCV and the most important class called Mat.

We learned how to read and save images, videos, and the internal structure in the memory of images.

We are ready to work now, but we need to show our results and have some basic interaction with our images. OpenCV provides us with a few basic user interfaces to work with and help create our applications and prototypes.

To better understand how the user interface works, we are going to create a small application called PhotoTool at the end of this chapter. In this application, we will learn how to use filters and color conversions.

In this chapter, we will cover the following topics:

• The basic OpenCV user interface

• The OpenCV QT interface

• Sliders and buttons

• An advanced user interface—OpenGL

• Color conversion

• Basic filters

Introducing the OpenCV user interface

OpenCV has its own cross-operating system user interface that allows developers to create their own applications without the need to learn complex libraries for the user interface.

The OpenCV user interface is basic, but it gives Computer Vision developers the basic functions to create and manage their software developments. All of them are native and optimized for real-time use.

OpenCV provides two options for the user interface:

• A basic interface based on native user interfaces, such as Cocoa or Carbon for OS X and GTK for Linux or Windows user interfaces, that are selected by default when you compile OpenCV.

• A slightly more advanced interface based on the QT library that is cross-platform. You have to enable the QT option manually in CMake before you compile OpenCV.

  

A basic graphical user interface with OpenCV

We are going to create a basic user interface with OpenCV. The OpenCV user interface allows us to create windows, add images to it, move it, resize it, and destroy it.

The user interface is in the OpenCV's module called highui:

#include <iostream>
#include <string>
#include <sstream>
using namespace std;

// OpenCV includes
#include "opencv2/core.hpp"
#include "opencv2/highgui.hpp"
using namespace cv;

const int CV_GUI_NORMAL= 0x10;

int main( int argc, const char** argv )
{
  // Read images
  Mat lena= imread("../lena.jpg");
  Mat photo= imread("../photo.jpg");
  
  // Create windows
  namedWindow("Lena", CV_GUI_NORMAL);
  namedWindow("Photo", WINDOW_AUTOSIZE);

  // Move window
  moveWindow("Lena", 10, 10);
  moveWindow("Photo", 520, 10);
  
  // show images
  imshow("Lena", lena);
  imshow("Photo", photo); 

  // Resize window, only non autosize
  resizeWindow("Lena", 512, 512); 

  // wait for any key press
  waitKey(0);

...

The graphical user interface with QT

The QT user interface gives us more control and options to work with our images.

The interface is divided into three main areas:

• The toolbar

• The image area

• The status bar

  

The toolbar has the following buttons from left to right:

• Four buttons for panning

• Zoom x1

• Zoom x30 and show labels

• Zoom in

• Zoom out

• Save the current image

• Show the properties windows

These options can be seen more clearly in the following screenshot:

The image area shows an image and a contextual menu when we push the right mouse button over the image. This area can show an overlay message at the top of the area using the displayOverlay function. This function accepts three parameters: the window name, the text that we want to show, and the period in milliseconds when the overlay text is displayed. If the time is set to 0, the text never disappears:

// Display Overlay
displayOverlay("Lena", "Overlay 5secs", 5000);

Finally, the status bar shows the bottom part of the window, the pixel value, and the...

Adding slider and mouse events to our interfaces

Mouse events and slider controls are very useful in Computer Vision and OpenCV. Using these controls, users can interact directly with the interface and change the properties of their input images or variables.

In this section, we are going to introduce you to the concepts of adding slider and mouse events for basic interactions. To understand this correctly, we will create a small project, where we paint green circles in the image using the mouse events and blur the image with the slider:

// Create a variable to save the position value in track
int blurAmount=15;

// Trackbar call back function
static void onChange(int pos, void* userInput);

//Mouse callback
static void onMouse( int event, int x, int y, int, void* userInput );

int main( int argc, const char** argv )
{
  // Read images
  Mat lena= imread("../lena.jpg");
  
  // Create windows
  namedWindow("Lena");
  
  // create a trackbark
  createTrackbar("Lena", "Lena", &blurAmount...

Adding buttons to a user interface

In the previous chapter, we learned how to create normal or QT interfaces and interact with them with a mouse and slider, but we can create different types of buttons as well.

Note

Buttons are only supported in QT Windows.

The types of buttons supported are as follows:

• The push button

• The checkbox

• The radiobox

The buttons only appear in the control panel. The control panel is an independent window per program, where we can attach buttons and track bars.

To show the control panel, we can push the last toolbar button, right-click on any part of the QT window, and select the Display properties window or the Ctrl + P shortcut.

Let's see how to create a basic sample with buttons. The code is large, and we will first explain the main function and later explain each callback separately to understand each one of them:

Mat img;
bool applyGray=false;
bool applyBlur=false;
bool applySobel=false;
…
int main( int argc, const char** argv )
{
  // Read images
  img= imread("...

OpenGL support

OpenCV includes OpenGL support. OpenGL is a graphical library that is integrated in graphic cards as a standard. OpenGL allow us to draw from 2D to complex 3D scenes.

OpenCV includes OpenGL support due to the importance of representing 3D spaces in some tasks. To allow a window support in OpenGL, we have to set up the WINDOW_OPENGL flag when we create the window with the namedWindow call.

The following code creates a window with OpenGL support and draws a rotated plane that shows the web camera frames:

Mat frame;
GLfloat angle= 0.0;
GLuint texture; 
VideoCapture camera;

int loadTexture() {

    if (frame.data==NULL) return -1;
glGenTextures(1, &texture);
   glBindTexture( GL_TEXTURE_2D, texture ); 
   glTexParameteri(GL_TEXTURE_2D,GL_TEXTURE_MAG_FILTER,GL_LINEAR);
   glTexParameteri(GL_TEXTURE_2D,GL_TEXTURE_MIN_FILTER,GL_LINEAR);
   glPixelStorei(GL_UNPACK_ALIGNMENT, 1);

   glTexImage2D(GL_TEXTURE_2D, 0, GL_RGB, frame.cols, frame.rows,0, GL_BGR, GL_UNSIGNED_BYTE, frame...

Summary

In this chapter, we learned how to create different types of user interface to show images or 3D interfaces using OpenGL. We learned how to create sliders and buttons and draw in 3D. We learned some basic image processing filters as well.

In the next chapter, we will learn how to construct a complete photo tool application using all that we learned using the graphical user interface. We will also learn how to apply multiple filters to an input image.