[OpenCV实战]28 基于OpenCV的GUI库cvui

liferecords 2023-03-28 原文

有很多很棒的GUI库，例如Qt和imgui，可以与OpenCV一起使用，允许您在运行时调整参数。但是，在某些情况下，您可能没有（或不希望）此类库的依赖关系，例如，您没有使用Qt支持编译OpenCV，或者您无法使用OpenGL。在这种情况下，您只需要一种快速，轻松的方式来创建GUI来调整算法。

这就是cvui的目的。它是一个基于OpenCV绘图基元构建的跨平台GUI库，仅需使用头文件就可以搭建。除了OpenCV本身（您可能已经在使用）之外，它没有依赖关系。Cvui在C++下通过.h文件实现全部功能，在Python下直接提供.py文件。本文仅仅讲述cvui在C++下的构建，python通常用的少。

cvui遵循一行代码就可以在屏幕上产生一个UI组件的规则。cvui具有友好的C类API，没有类/对象和多个组件，例如，跟踪栏，按钮，文字等等。cvui界面如下所示，

cvui相关使用见：

工程文件及下载见：

1 cvui的使用

1.1 如何在您的应用程序中添加cvui

为了使用cvui，你只需要把cvui.h文件放到工程目录下，包含头文件就行了。但是对于比较新的版本，本文用的是cvui2.7版本则需要在cvui.h前加入#define CVUI_IMPLEMENTATION，具体如下所示：

#include &lt;opencv2/opencv.hpp&gt;
#define CVUI_IMPLEMENTATION
#include "cvui.h"

1.2 基本的“hello world”应用程序

让我们通过创建一个带有一些UI交互功能的简单hello-world应用程序来了解cvui的功能。该应用程序包含一个按钮和一个可视界面，可视界面显示该按钮被单击的次数。代码如下：

#include &lt;opencv2/opencv.hpp&gt;
#define CVUI_IMPLEMENTATION
#include "cvui.h"

#define WINDOW_NAME "CVUI Hello World!"

int main(void)
{
    cv::Mat frame = cv::Mat(200, 500, CV_8UC3);
    int count = 0;

    // Init a OpenCV window and tell cvui to use it.
    cv::namedWindow(WINDOW_NAME);
    cvui::init(WINDOW_NAME);

    while (true) {
        // Fill the frame with a nice color
        frame = cv::Scalar(49, 52, 49);

        // Show a button at position (110, 80)
        if (cvui::button(frame, 110, 80, "Hello, world!")) {
            // The button was clicked, so let's increment our counter.
            count++;
        }

        // Show how many times the button has been clicked.
        // Text at position (250, 90), sized 0.4, in red.
        cvui::printf(frame, 250, 90, 0.4, 0xff0000, "Button click count: %d", count);

        // Update cvui internal stuff
        cvui::update();

        // Show everything on the screen
        cv::imshow(WINDOW_NAME, frame);

        // Check if ESC key was pressed
        if (cv::waitKey(20) == 27) {
            break;
        }
    }
    return 0;
}

上面代码的结果如下：

确保cvui与您的项目正常工作：

cvui::init()在创建任何组件之前调用初始化函数。

cvui::update() 在创建所有组件后调用一次。

关于上面代码中使用的组件，每次单击按钮时cvui::button() 函数都会返回true，因此您可以方便地在if语句中使用它。该cvui::printf()功能与标准C功能的工作方式类似printf()，%d and %s.分别表示文字和数字。您还可以使用十六进制值选择文本的颜色0xRRGGBB，例如0xFF0000（红色），0x00FF00（绿色）和0x0000FF（蓝色）。具体看代码就知道了。

2 更高级的应用

现在让我们构建一些更复杂的东西，但就像以前一样容易。该应用程序将Canny Edge算法应用于图像，允许用户启用/禁用该技术并调整其阈值。Canny边缘算法详细见：

基础

我们首先创建一个没有UI元素的应用程序。Canny Edge算法的使用由布尔变量（use_canny）定义，而算法阈值由两个整数（low_threshold和high_threshold）定义。使用这种方法，我们必须在每次要启用/禁用canny或调整low_threshold和high_threshold时重新编译代码。

该部分代码如下：

#include &lt;opencv2/opencv.hpp&gt;
#define CVUI_IMPLEMENTATION
#include "cvui.h"

#define WINDOW_NAME "CVUI Canny Edge"

int main(int argc, const char *argv[])
{
    cv::Mat lena = cv::imread("lena.jpg");
    cv::Mat frame = lena.clone();
    int low_threshold = 50, high_threshold = 150;
    bool use_canny = false;

    cv::namedWindow(WINDOW_NAME);

    while (true) {
        // Should we apply Canny edge?
        if (use_canny) {
            // Yes, we should apply it.
            cv::cvtColor(lena, frame, CV_BGR2GRAY);
            cv::Canny(frame, frame, low_threshold, high_threshold, 3);
        } else {
            // No, so just copy the original image to the displaying frame.
            lena.copyTo(frame);
        }

        // Show everything on the screen
        cv::imshow(WINDOW_NAME, frame);

        // Check if ESC was pressed
        if (cv::waitKey(30) == 27) {
            break;
        }
    }
    return 0;
}

结果在应用程序显示原始图像（use_canny设置为false）或显示检测到的边缘图像（use_canny设置true）。结果如下：

(2)动态启用/禁用边缘检测

让我们通过使用cvui并添加一个复选框来控制值use_canny。使用该方法，用户可以在应用程序仍在运行时启用/禁用Canny Edge。我们添加所需的cvui代码并使用该cvui::checkbox函数：

仅仅这个小修改就可以节省测试应用程序的时间，而无需重新编译所有内容。代码如下：

#include &lt;opencv2/opencv.hpp&gt;
#define CVUI_IMPLEMENTATION
#include "cvui.h"

#define WINDOW_NAME "CVUI Canny Edge"

int main(void)
{
    cv::Mat lena = cv::imread("lena.jpg");
    cv::Mat frame = lena.clone();
    int low_threshold = 50, high_threshold = 150;
    bool use_canny = false;

    // Init a OpenCV window and tell cvui to use it.
    cv::namedWindow(WINDOW_NAME);
    cvui::init(WINDOW_NAME);

    while (true) {
        // Should we apply Canny edge?
        if (use_canny) {
            // Yes, we should apply it.
            cv::cvtColor(lena, frame, CV_BGR2GRAY);
            cv::Canny(frame, frame, low_threshold, high_threshold, 3);
        } else {
            // No, so just copy the original image to the displaying frame.
            lena.copyTo(frame);
        }

        // Checkbox to enable/disable the use of Canny edge
        cvui::checkbox(frame, 15, 80, "Use Canny Edge", &amp;use_canny);

        // Update cvui internal stuff
        cvui::update();

        // Show everything on the screen
        cv::imshow(WINDOW_NAME, frame);

        // Check if ESC was pressed
        if (cv::waitKey(30) == 27) {
            break;
        }
    }
    return 0;
}

结果如下：

复选框及其标签显示效果取决于所使用的图像，某些背景下复选框可能无法显示。我们可以通过创建一个cvui::window() 用来容纳复选框的窗口来防止这个问题。代码如下：

#include &lt;opencv2/opencv.hpp&gt;
#define CVUI_IMPLEMENTATION
#include "cvui.h"

#define WINDOW_NAME "CVUI Canny Edge"

int main(void)
{
    cv::Mat lena = cv::imread("lena.jpg");
    cv::Mat frame = lena.clone();
    int low_threshold = 50, high_threshold = 150;
    bool use_canny = false;

    // Init a OpenCV window and tell cvui to use it.
    cv::namedWindow(WINDOW_NAME);
    cvui::init(WINDOW_NAME);

    while (true) {
        // Should we apply Canny edge?
        if (use_canny) {
            // Yes, we should apply it.
            cv::cvtColor(lena, frame, CV_BGR2GRAY);
            cv::Canny(frame, frame, low_threshold, high_threshold, 3);
        } else {
            // No, so just copy the original image to the displaying frame.
            lena.copyTo(frame);
        }

        // Render the settings window to house the UI
        cvui::window(frame, 10, 50, 180, 180, "Settings");

        // Checkbox to enable/disable the use of Canny edge
        cvui::checkbox(frame, 15, 80, "Use Canny Edge", &amp;use_canny);

        // Update cvui internal stuff
        cvui::update();

        // Show everything on the screen
        cv::imshow(WINDOW_NAME, frame);

        // Check if ESC was pressed
        if (cv::waitKey(30) == 27) {
            break;
        }
    }
    return 0;
}

结果如下：

调整阈值

是时候允许用户在运行时选择low_threashold和high_threashold的值。由于这些参数可以在一个间隔内变化，我们可以cvui::trackbar()用来创建一个滑动窗口栏。代码如下：

#include &lt;opencv2/opencv.hpp&gt;
#define CVUI_IMPLEMENTATION
#include "cvui.h"

#define WINDOW_NAME "CVUI Canny Edge"

int main(void)
{
    cv::Mat lena = cv::imread("lena.jpg");
    cv::Mat frame = lena.clone();
    int low_threshold = 50, high_threshold = 150;
    bool use_canny = false;

    // Init a OpenCV window and tell cvui to use it.
    cv::namedWindow(WINDOW_NAME);
    cvui::init(WINDOW_NAME);

    while (true) {
        // Should we apply Canny edge?
        if (use_canny) {
            // Yes, we should apply it.
            cv::cvtColor(lena, frame, CV_BGR2GRAY);
            cv::Canny(frame, frame, low_threshold, high_threshold, 3);
        } else {
            // No, so just copy the original image to the displaying frame.
            lena.copyTo(frame);
        }

        // Render the settings window to house the UI
        cvui::window(frame, 10, 50, 180, 180, "Settings");

        // Checkbox to enable/disable the use of Canny edge
        cvui::checkbox(frame, 15, 80, "Use Canny Edge", &amp;use_canny);

        // Two trackbars to control the low and high threshold values
        // for the Canny edge algorithm.
        cvui::trackbar(frame, 15, 110, 165, &amp;low_threshold, 5, 150);
        cvui::trackbar(frame, 15, 180, 165, &amp;high_threshold, 80, 300);

        // Update cvui internal stuff
        cvui::update();

        // Show everything on the screen
        cv::imshow(WINDOW_NAME, frame);

        // Check if ESC was pressed
        if (cv::waitKey(30) == 27) {
            break;
        }
    }
    return 0;
}

该 cvui::trackbar() 函数接受指定轨迹栏允许的最小值和最大值的参数。在上面的例子中，它们分别是[5,150] low_threshold和[80,300] high_threshold。结果是一个完全交互式的应用程序，允许用户快速，轻松地探索Canny Edge参数的调整，以及启用/禁用它的使用。效果如图所示：

3 代码

以下是此应用程序的完整代码，您不需要多行代码就可以为您的应用程序生成最小（且有用）的UI界面。该cvui并非旨在成为复杂图形应用程序开发的完整解决方案。它在很多方面都很简单并且有限。但是，它实用，易于使用，可以为您节省数小时的挫折和繁琐的工作。如果实际工程应用推荐QT而不是MFC(个人观点)。

本文所有代码和cvui头文件见：

hello world代码：

#include "pch.h"
#include &lt;opencv2/opencv.hpp&gt;
#define CVUI_IMPLEMENTATION
#include "cvui.h"

//cvui界面名字
#define WINDOW_NAME "CVUI Hello World!"

int main()
{
    cv::Mat frame = cv::Mat(200, 500, CV_8UC3);
    int count = 0;

    // Init a OpenCV window and tell cvui to use it.
    //创建cvui窗口
    cv::namedWindow(WINDOW_NAME);
    //初始化窗口
    cvui::init(WINDOW_NAME);

    //必须要用无限循环，每次变动cvui会生成新的一个图像，看起来界面变化了
    while (true)
    {
        // Fill the frame with a nice color 创建程序窗口背景图像
        frame = cv::Scalar(49, 52, 49);

        // Buttons will return true if they were clicked
        //在背景图像(110,80)点添加按钮(按钮的左上角顶点坐标，所有的cvui坐标都是左上角顶点)，按钮显示名字为“hello,world”
        //当按钮被点击时，会返回true
        if (cvui::button(frame, 110, 80, "Hello, world!"))
        {
            // The button was clicked, so let's increment our counter.
            //统计按钮被点击次数
            count++;
        }

        // Sometimes you want to show text that is not that simple, e.g. strings + numbers.
        // You can use cvui::printf for that. It accepts a variable number of parameter, pretty
        // much like printf does.
        // Let's show how many times the button has been clicked.
        //在frame(250,90)点添加一个文本框，文本框字体大小为0.5,颜色为0xff0000
        //显示的内容为"Button click count: %d", count
        cvui::printf(frame, 250, 90, 0.5, 0xff0000, "Button click count: %d", count);

        // This function must be called *AFTER* all UI components. It does
        // all the behind the scenes magic to handle mouse clicks, etc.
        //更新cvui界面
        cvui::update();

        // Show everything on the screen
        //把所有的东西显示出来
        cv::imshow(WINDOW_NAME, frame);
        // Check if ESC key was pressed
        //ESC退出循环
        if (cv::waitKey(20) == 27)
        {
            break;
        }
    }

    return 0;
}

canny算子代码：


#include "pch.h"
#include &lt;opencv2/opencv.hpp&gt;
#define CVUI_IMPLEMENTATION
#include "cvui.h"

//cvui界面名字
#define WINDOW_NAME "CVUI Canny Edge"

int main()
{
    //读图像
    cv::Mat lena = cv::imread("lena.jpg");
    //背景图像
    cv::Mat frame = lena.clone();
    //canny阈值
    int low_threshold = 50, high_threshold = 150;
    //是否使用边缘检测
    bool use_canny = false;

    // Init a OpenCV window and tell cvui to use it.
    // If cv::namedWindow() is not used, mouse events will
    // not be captured by cvui.
    //创建cvui窗口
    cv::namedWindow(WINDOW_NAME);
    //初始化窗口
    cvui::init(WINDOW_NAME);

    while (true)
    {
        // Should we apply Canny edge?
        //是否使用边缘检测
        if (use_canny)
        {
            // Yes, we should apply it.
            cv::cvtColor(lena, frame, CV_BGR2GRAY);
            cv::Canny(frame, frame, low_threshold, high_threshold, 3);
            cv::cvtColor(frame, frame, CV_GRAY2BGR);
        }
        else
        {
            // No, so just copy the original image to the displaying frame.
            //直接显示图像
            lena.copyTo(frame);
        }

        // Render the settings window to house the checkbox
        // and the trackbars below.
        //debug下可能有bug
        //主要问题在于cvui.h，void window函数问题，解决办法aOverlay = theBlock.where.clone();
        //在frame(10,50)处设置一个长宽180，180的名为Settings窗口
        cvui::window(frame, 10, 50, 180, 180, "Settings");

        // Checkbox to enable/disable the use of Canny edge
        //在frame(15,80)点添加复选框，复选框文本名"Use Canny Edge"，调整参数use_canny
        cvui::checkbox(frame, 15, 80, "Use Canny Edge", &amp;use_canny);

        // Two trackbars to control the low and high threshold values
        // for the Canny edge algorithm
        //滑动条控制最低分割阈值
        //在frame(15,110)点添加滑动条，滑动条宽165，控制值low_threshold，值变化范围5到150
        cvui::trackbar(frame, 15, 110, 165, &amp;low_threshold, 5, 150);
        //滑动条控制最高分割阈值
        cvui::trackbar(frame, 15, 180, 165, &amp;high_threshold, 80, 300);

        // This function must be called *AFTER* all UI components. It does
        // all the behind the scenes magic to handle mouse clicks, etc.
        //更新ui界面
        cvui::update();

        // Show everything on the screen
        //把所有的东西显示出来
        cv::imshow(WINDOW_NAME, frame);

        // Check if ESC was pressed
        //ESC退出
        if (cv::waitKey(30) == 27)
        {
            break;
        }
    }

    return 0;
}

有关[OpenCV实战]28 基于OpenCV的GUI库cvui的更多相关文章

叮咚买菜基于 Apache Doris 统一 OLAP 引擎的应用实践 - 2
导读：随着叮咚买菜业务的发展，不同的业务场景对数据分析提出了不同的需求，他们希望引入一款实时OLAP数据库，构建一个灵活的多维实时查询和分析的平台，统一数据的接入和查询方案，解决各业务线对数据高效实时查询和精细化运营的需求。经过调研选型，最终引入ApacheDoris作为最终的OLAP分析引擎，Doris作为核心的OLAP引擎支持复杂地分析操作、提供多维的数据视图，在叮咚买菜数十个业务场景中广泛应用。作者｜叮咚买菜资深数据工程师韩青叮咚买菜创立于2017年5月，是一家专注美好食物的创业公司。叮咚买菜专注吃的事业，为满足更多人“想吃什么”而努力，通过美好食材的供应、美好滋味的开发以及美食品牌的孵
Vscode+Cmake配置并运行opencv环境(Windows和Ubuntu大同小异) - 2
之前在培训新生的时候，windows环境下配置opencv环境一直教的都是网上主流的vsstudio配置属性表，但是这个似乎对新生来说难度略高(虽然个人觉得完全是他们自己的问题)，加之暑假之后对cmake实在是爱不释手，且这样配置确实十分简单(其实都不需要配置)，故斗胆妄言vscode下配置CV之法。其实极为简单，图比较多所以很长。如果你看此文还配不好，你应该思考一下是不是自己的问题。闲话少说，直接开始。0.CMkae简介有的人到大二了都不知道cmake是什么，我不说是谁。CMake是一个开源免费并且跨平台的构建工具，可以用简单的语句来描述所有平台的编译过程。它能够根据当前所在平台输出对应的m
基于C#实现简易绘图工具【100010177】 - 2
C#实现简易绘图工具一.引言实验目的:通过制作窗体应用程序(C#画图软件),熟悉基本的窗体设计过程以及控件设计,事件处理等,熟悉使用C#的winform窗体进行绘图的基本步骤,对于面向对象编程有更加深刻的体会.Tutorial任务设计一个具有基本功能的画图软件**·包括简单的新建文件,保存,重新绘图等功能**·实现一些基本图形的绘制,包括铅笔和基本形状等,学习橡皮工具的创建**·设计一个合理舒适的UI界面**注明:你可能需要先了解一些关于winform窗体应用程序绘图的基本知识,以及关于GDI+类和结构的知识二.实验环境Windows系统下的visualstudio2017C#窗体应用程序三.
微信小程序开发入门与实战（Behaviors使用） - 2
@作者:SYFStrive @博客首页:HomePage📜：微信小程序📌：个人社区（欢迎大佬们加入）👉：社区链接🔗📌：觉得文章不错可以点点关注👉：专栏连接🔗💃：感谢支持,学累了可以先看小段由小胖给大家带来的街舞👉微信小程序（🔥）目录自定义组件-behaviors 1、什么是behaviors 2、behaviors的工作方式 3、创建behavior 4、导入并使用behavior 5、behavior中所有可用的节点 6、同名字段的覆盖和组合规则总结最后自定义组件-behaviors 1、什么是behaviorsbehaviors是小程序中，用于实现
kvm虚拟机安装centos7基于ubuntu20.04系统 - 2
需求：要创建虚拟机，就需要给他提供一个虚拟的磁盘，我们就在/opt目录下创建一个10G大小的raw格式的虚拟磁盘CentOS-7-x86_64.raw命令格式：qemu-imgcreate-f磁盘格式磁盘名称磁盘大小qemu-imgcreate-f磁盘格式-o?1.创建磁盘qemu-imgcreate-fraw/opt/CentOS-7-x86_64.raw10G执行效果#ls/opt/CentOS-7-x86_64.raw2.安装虚拟机使用virt-install命令，基于我们提供的系统镜像和虚拟磁盘来创建一个虚拟机，另外在创建虚拟机之前，提前打开vnc客户端，在创建虚拟机的时候，通过vnc
Ruby，使用包含 TK GUI 的 ocra 部署一个 exe - 2
Ocra无法处理需要“tk”的应用程序require'tk'puts'nope'用奥克拉http://github.com/larsch/ocra不起作用(如链接中的一个问题所述)问题:https://github.com/larsch/ocra/issues/29(Ocra是1.9的"new"rubyscript2exe，本质上它用于将rb脚本部署为可执行文件)唯一的问题似乎是缺少tcl的DLL文件我不认为这是一个问题据我所知，问题是缺少tk的DLL文件如果它们是已知的，则可以在执行ocra时将它们包括在内有没有办法知道tk工作所需的DLL依赖项？最佳答
ruby-on-rails - (Ruby,Rails) 基于角色的身份验证和用户管理...？ - 2
我正在寻找用于Rails的优质管理插件。似乎大多数现有的插件/gem(例如“restful_authentication”、“acts_as_authenticated”)都围绕着self注册等展开。但是，我正在寻找一种功能齐全的基于管理/管理角色的解决方案——但不是简单地附加到另一个非基于角色的解决方案。如果我找不到，我想我会自己动手......只是不想重新发明轮子。最佳答案 RyanBates最近做了两个关于授权的railscast(注意身份验证和授权之间的区别；身份验证检查用户是否如她所说的那样，授权检查用户是否有权访问资源
ruby - 在 Rakefile 中动态生成 Rake 测试任务(基于现有的测试文件) - 2
我正在根据Rakefile中的现有测试文件动态生成测试任务。假设您有各种以模式命名的单元测试文件test_.rb.所以我正在做的是创建一个以“测试”命名空间内的文件名命名的任务。使用下面的代码，我可以用raketest:调用所有测试require'rake/testtask'task:default=>'test:all'namespace:testdodesc"Runalltests"Rake::TestTask.new(:all)do|t|t.test_files=FileList['test_*.rb']endFileList['test_*.rb'].eachdo|task|n
ruby - 如何使用 Ruby 基于字母数字字符串生成颜色？ - 2
我想要像“嘿那里”这样的东西变成，例如，#316583。我希望将任意长度的字符串“归结”为十六进制颜色。我不知道从哪里开始。我在想，每个字符串的MD5散列都是不同的-但如何将该散列转换为十六进制颜色数字？最佳答案你可以只取几位前几位:require'digest/md5'color=Digest::MD5.hexdigest('Mytext')[0..5] 关于ruby-如何使用Ruby基于字母数字字符串生成颜色？，我们在StackOverflow上找到一个类似的问题：
【自动驾驶环境感知项目】——基于Paddle3D的点云障碍物检测 - 2
文章目录1.自动驾驶实战：基于Paddle3D的点云障碍物检测1.1环境信息1.2准备点云数据1.3安装Paddle3D1.4模型训练1.5模型评估1.6模型导出1.7模型部署效果附录show_lidar_pred_on_image.py1.自动驾驶实战：基于Paddle3D的点云障碍物检测项目地址——自动驾驶实战：基于Paddle3D的点云障碍物检测课程地址——自动驾驶感知系统揭秘1.1环境信息硬件信息CPU:2核AI加速卡:v100总显存:16GB总内存:16GB总硬盘:100GB环境配置Python:3.7.4框架信息框架版本:PaddlePaddle2.4.0（项目默认框架版本为2.3