CVUI Construir GUI para OpenCV

En muchas ocasiones cuando estamos desarrollando una aplicación requerimos cambiar los parámetros de entrada mientras nuestra aplicación se ejecuta, usualmente usamos el control trackbar, el ratón y el teclado para ello, esta opción no puede quitar mucho tiempo además de ser bastante limitado, otra opción que tenemos es recompilar la librería con Qt activado, esto requiere la inclusión de dicha librería, la opción más simple es utilizar cvui.h una pequeña biblioteca que nos permite generar GUI de manera rápida y sencilla sin tener que agregar dependencias externas.

La biblioteca cvui puede generar elementos como: botones, trackbars, checkbox, ventanas, etiquetas, entre otros, no requerimos dependencias adicionales ni compilación, solo bastará con agregar el archivo cvui.h a nuestro proyecto y listo, su funcionamiento es similar al de la librería imgui si ya la conoces no tendrás problemas y podrás empezar a programar inmediatamente.

En repositorio github de cvui podrás encontrar la librería y un par de ejemplos, la imagen que vemos arriba es uno de ellos, puedes usar CMake para generarlos.

Usando CVUI en proyecto OpenCV

Lo único que debes hacer es incluir el archivo cvui.h a tu proyecto OpenCV, luego agregas la inclusión al código C/C++ #include "cvui.h" y listo.

Veamos nuestra primera aplicación.

#include <iostream>

#include <opencv2/core/core.hpp>
#include <opencv2/highgui/highgui.hpp>

#include "cvui.h"

#define WINDOW_NAME "CVUI Test"

int main(int argc, const char *argv[])
{
    cv::Mat frame = cv::Mat(250, 600, CV_8UC3);

    cv::namedWindow(WINDOW_NAME);
    cvui::init(WINDOW_NAME);

    while (true) {
        frame = cv::Scalar(49, 52, 49);

        cvui::text(frame, 200, 30, "Hello cvui.h", 1, 0xff0000);

        if (cvui::button(frame, 10, 60, "Cerrar ventana")) {
            break;
        }

        cvui::update();

        cv::imshow(WINDOW_NAME, frame);
        cv::waitKey(30);
    }

    return 0;
}

Para utilizar la biblioteca necesitamos dos funciones importantes:

• cvui::init() usada para inicializar los componentes, debemos invocarla antes de generar cualquier componente de la UI.
• cvui::update() usada para manejar la interacción con los elementos de la UI, debe ser invocada después de generar los componentes.

Para agregar elementos a la UI usamos las respectivas funciones, en nuestro caso:

cvui::text(frame, 200, 30, "Hello cvui.h", 1, 0xff0000);

Agrega un mensaje de texto, debemos indicar el Mat sobre el que se genera la UI, las posiciones X e Y, el texto a mostrar, el tamaño porcentual de la fuente, y el color en formato hexadecimal.

if (cvui::button(frame, 10, 60, "Cerrar ventana")) {
    break;
}

Esta función crea un botón en la posición indicada y muestra el texto establecido, el valor devuelto es true si se ha hecho clic sobre el botón, en este caso lo usamos para detener el bucle while y salir de la aplicación.

Un ejemplo más práctico, veamos como podemos modificar el comportamiento de nuestra aplicación mientras aplicamos un filtro sobre nuestra imagen de prueba.

Creando una UI más avanzada

La UI que vamos a crear nos permitirá cambiar la imagen de escala de grises a colores usando un checkbox, por medio de un trackbar establecemos el nivel de blur que deseamos aplicar a la imagen, y en la parte inferior de la ventana mostramos in mensaje informativo, veamos como se hace:

#include <opencv2\opencv.hpp>

#include "cvui.h"

#define WINDOW_NAME "CVUI Test"

int main(int argc, const char *argv[])
{
    cv::Mat src = cv::imread("imagen/lena.jpg");
    cv::Mat frame;

    cv::namedWindow(WINDOW_NAME);
    cvui::init(WINDOW_NAME);

    bool isGrayImage = false;
    int ksize = 1;

    while (true) {
        frame = src.clone();

        if (isGrayImage) {
            cv::cvtColor(frame, frame, cv::COLOR_BGR2GRAY);
        }

        cv::blur(frame, frame, cv::Size(ksize, ksize));

        cvui::checkbox(frame, 10, 28, "Escala de grises", &isGrayImage);
        cvui::trackbar(frame, 160, 10, 340, &ksize, 1, 50);
        cvui::printf(frame, 10, 490, "Tutor de programacion :: Blur size: %d", ksize);

        cvui::update();

        cv::imshow(WINDOW_NAME, frame);

        if(cv::waitKey(30) == 27) break;
    }

    return 0;
}

El control usado para cambiar de escala de grises a colores y viceversa es creado con el siguiente código, la variable booleana isGrayImage almacena el valor del control:

if (isGrayImage) {
    cv::cvtColor(frame, frame, cv::COLOR_BGR2GRAY);
}

cvui::checkbox(frame, 10, 28, "Escala de grises", &isGrayImage);

El nivel de blur lo controlamos con el código siguiente, la variable ksize guarda el valor seleccionado con este control:

cv::blur(frame, frame, cv::Size(ksize, ksize));

cvui::trackbar(frame, 160, 10, 340, &ksize, 1, 50);

Los parámetros: 160, 10, 340 indican la posición X, Y y el ancho del control, 1, 50 establecen los mínimos y máximos valores posibles.

El mensaje mostrado en la parte inferior es creado usando, las función cvui::printf(...) la cual funciona de manera similar a la función del mismo nombre del lenguaje C, usando %s, %d, etc. podemos agregar datos a la cadena.

Como puedes ver, utilizar esta librería es muy intuitivo y sencillo, te recomiendo revisar los ejemplos para conocer los diversos controles y como utilizarlos.

Descargar ejemplo: cvui-test.zip