How to make a simple window with one button using OpenCV HighGui only?

Question

I am working on a game-project using OpenCV. Now I have to make a simple GUI: a window with one button, using HighGui only.

I'm not sure but I think I'm supposed to use something like this:

cvNamedWindow( "NameWindow" , CV_WINDOW_AUTOSIZE);

Any help is much appreciated.

Answer 1

OpenCV does not provide a button, but you can easily use a colored rectangle, and check if the clicked point on the image is inside this rectangle.

Remember that OpenCV HighGui is very simple and is meant only for debugging purposes. You may want to use a full featured graphic library as Qt, or similar.

However, this is a small example that shows a (green) image, and a button on top:

Clicking the button will print "Clicked" on stdout:

Code:

#include <opencv2\opencv.hpp>
#include <iostream>
using namespace cv;
using namespace std;


Mat3b canvas;
string buttonText("Click me!");
string winName = "My cool GUI v0.1";

Rect button;


void callBackFunc(int event, int x, int y, int flags, void* userdata)
{
    if (event == EVENT_LBUTTONDOWN)
    {
        if (button.contains(Point(x, y)))
        {
            cout << "Clicked!" << endl;
            rectangle(canvas(button), button, Scalar(0,0,255), 2);
        }
    }
    if (event == EVENT_LBUTTONUP)
    {
        rectangle(canvas, button, Scalar(200, 200, 200), 2);
    }

    imshow(winName, canvas);
    waitKey(1);
}

int main() 
{
    // An image
    Mat3b img(300, 300, Vec3b(0, 255, 0));

    // Your button
    button = Rect(0,0,img.cols, 50);

    // The canvas
    canvas = Mat3b(img.rows + button.height, img.cols, Vec3b(0,0,0));

    // Draw the button
    canvas(button) = Vec3b(200,200,200);
    putText(canvas(button), buttonText, Point(button.width*0.35, button.height*0.7), FONT_HERSHEY_PLAIN, 1, Scalar(0,0,0));

    // Draw the image
    img.copyTo(canvas(Rect(0, button.height, img.cols, img.rows)));

    // Setup callback function
    namedWindow(winName);
    setMouseCallback(winName, callBackFunc);

    imshow(winName, canvas);
    waitKey();

    return 0;
}

Answer 2

You can now create buttons and other useful tools on OpenCV windows. The page below shows a couple of useful examples.

https://docs.opencv.org/master/dc/d46/group__highgui__qt.html

The gist of it is:

#include <opencv2/highgui.hpp>
void myButtonName_callback(int state, void*userData) {
    // do something
    printf("Button pressed\r\n");
}
createButton("myButtonName",myButtonName_callback,NULL,CV_PUSH_BUTTON,1);

Answer 3

you are aware that openCV is not a GUI library, but an image processing lib?

it ships with highgui: http://docs.opencv.org/2.4/modules/highgui/doc/highgui.html

for those cases where you really have no other options, but need to create a window for displaying stuff.

While OpenCV was designed for use in full-scale applications and can be used within functionally rich UI frameworks (such as Qt*, WinForms*, or Cocoa*) or without any UI at all, sometimes there it is required to try functionality quickly and visualize the results. This is what the HighGUI module has been designed for.

see OpenCV and creating GUIs

edit: "this doesn't answer the question": -> more help..

you can't.

or that is, if you know your underlying window manager, you can. i.e. if you'r on windows, you could get the window handle, and dynamically add more controls.. if not, you need to know what platform you'r on, and how to do it in that.

I wouldn't dare to try and put this in a simple answer

Answer 4

@Miki, why I cannot use my buttons alternately? How to fix it? I mean I want to use them at the same time.

EDIT: I fixed it myself. No need of help. :)

#include <opencv2\opencv.hpp>
#include <iostream>
using namespace cv;
using namespace std;


Mat3b canvas;
string buttonText("Nacisnij guzik!");
string buttonText2("Nacisnij guzik NR2!");
string winName = "PokerGui";
int a = 0;//mozna pozniej usunac, potrzebne tylko czy button reaguje jak nalezy

Rect button, button2;



void callBackFunc(int event, int x, int y, int flags, void* userdata)
{
    if (event == EVENT_LBUTTONDOWN)
    {
        if (button.contains(Point(x, y)))//ponizej to co ma sie wykonac po nacisnieciu klawisza
        {
            a = a + 7;
            cout << "Nacisnales guzik!\n" << endl;
            printf("liczba = %i\n", a);
            rectangle(canvas(button), button, Scalar(0, 0, 255), 2);

        }
        else if (button2.contains(Point(x, y)))//ponizej to co ma sie wykonac po nacisnieciu klawisza
        {
            //a = a + 7;
            cout << "Nacisnales guzik NR2!\n" << endl;
            //printf("liczba = %i\n", a);
            rectangle(canvas(button2), button, Scalar(0, 0, 255), 2);
        }
    }
    //if (event == EVENT_LBUTTONUP)
    //{
    //rectangle(canvas, button, Scalar(200, 200, 200), 2);
    //}

    imshow(winName, canvas);
    waitKey(1);
}

void callBackFunc2(int event, int x, int y, int flags, void* userdata)
{
    if (event == EVENT_LBUTTONDOWN)
    {
        if (button2.contains(Point(x, y)))//ponizej to co ma sie wykonac po nacisnieciu klawisza
        {
            //a = a + 7;
            cout << "Nacisnales guzik NR2!\n" << endl;
            //printf("liczba = %i\n", a);
            rectangle(canvas(button2), button, Scalar(0, 0, 255), 2);

        }
    }
    //if (event == EVENT_LBUTTONUP)
    //{
    //rectangle(canvas, button, Scalar(200, 200, 200), 2);
    //}

    imshow(winName, canvas);
    waitKey(1);
}

int main()
{
    // An image
    Mat3b img(300, 300, Vec3b(0, 255, 0));

    // Your button
    button = Rect(0, 0, img.cols, 50);
    button2 = Rect(0, 60, img.cols, 50);

    // The canvas
    canvas = Mat3b(img.rows + button.height, img.cols, Vec3b(0, 0, 0));

    // Draw the button
    canvas(button) = Vec3b(200, 200, 200);
    canvas(button2) = Vec3b(200, 200, 200);
    putText(canvas(button), buttonText, Point(button.width*0.35, button.height*0.7), FONT_HERSHEY_PLAIN, 1, Scalar(0, 0, 0));
    putText(canvas(button2), buttonText2, Point(button.width*0.25, button.height*0.7), FONT_HERSHEY_PLAIN, 1, Scalar(0, 0, 0));

    // Draw the image
    //img.copyTo(canvas(Rect(0, button.height, img.cols, img.rows)));

    // Setup callback function
    namedWindow(winName);
    setMouseCallback(winName, callBackFunc);
    //setMouseCallback(winName, callBackFunc2);

    imshow(winName, canvas);
    waitKey();

    return 0;
}