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

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);

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:

enter image description here

Clicking the button will print "Clicked" on stdout:

enter image description here

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;
}