[vs+qt+opencv]手把手做GUI图像采集及处理UI交互界面

温馨提示,这里是最初的一次尝试,如果你想要用qt进行GUI的界面编程,建议直接用qt,就不要和vs配合着使用了,会更加好用。可参考这里:https://gitbook.cn/new/gitchat/activity/5cb5c29604db077a63871661

首先说明下工作平台vs2013+opencv2.4.9+qt5.7(附完整代码,可下载直接运行)

功能:如题,GUI图像采集及处理UI交互界面,点击采图和处理,在这里只做灰度化

先看效果界面,这也就是最后成功的样子

 

[vs+qt+opencv]手把手做GUI图像采集及处理UI交互界面_第1张图片

 

//////////////////////////////////////////////////////下面开始//////////////////////////////////////////////////////////

 

新建项目->模块,命名testgui

 

[vs+qt+opencv]手把手做GUI图像采集及处理UI交互界面_第2张图片

 

一直下一步,直到完成             

开始编写我们真个程序段部分               ///////////////////重点

 

主函数就这个样子,系统自己创建的,不用改,就这样

[vs+qt+opencv]手把手做GUI图像采集及处理UI交互界面_第3张图片

 

重点关注testgui.cpp  和testgui.h这是我们做设计的主要部分。,还有testgui.ui

下面就是testgui.ui的绘制

双击testgui.ui,进入qt designer界面,当然了,这样是保证你已经配置好qt designer的情况下,具体配置方案参考网上都有,还有opencv同样的需要配置

 

在这里我们加入了三个Push Button的按钮,分别表示开始,处理,和结束,objectName命名为Push_start.(针对开始按钮来说的,别的两个类似,不赘述)

 

两个Label,以后分别用于显示图像部分,objectName命名为pic_1和pic_2

 

如下图

 

[vs+qt+opencv]手把手做GUI图像采集及处理UI交互界面_第4张图片

 

现在切换到这种状态下,先不管这是叫什么按钮,先看标记部分

 

[vs+qt+opencv]手把手做GUI图像采集及处理UI交互界面_第5张图片

 

这种状态下,鼠标放在开始按钮上,按住左键拖动,引出槽函数(需要什么,自己编辑添加)

[vs+qt+opencv]手把手做GUI图像采集及处理UI交互界面_第6张图片

 

对象查看器

 

[vs+qt+opencv]手把手做GUI图像采集及处理UI交互界面_第7张图片

这事我们此次用到的几个按钮和函数部分

还有印出来的几个槽函数

如图

[vs+qt+opencv]手把手做GUI图像采集及处理UI交互界面_第8张图片

 

下面就是对真个UI部分来进行编码连接他们之间的关系

1.先写开始按钮

/////////////////////////////////////////////功能:点击开始按钮,摄像头开始启动采集图像//////////////////////////////

首先需要在testgui,h上定义一些点击开始按钮需要的一个量和函数,如下图勾画出来的部分

 

[vs+qt+opencv]手把手做GUI图像采集及处理UI交互界面_第9张图片

还有头文件

[vs+qt+opencv]手把手做GUI图像采集及处理UI交互界面_第10张图片

 

其中#include        /////////////用于时间循环采集帧图像

QImage show_image1;定义显示图像

////////一下类似了,就不那么啰嗦了,看一下理解一下,谨记定义槽函数部分

下面直接贴出代码testgui.cpp的【开始】按钮部分代码(不着急,最后会把所有代码上传的)

 

void testgui::flag1()
{
	flag_1 = !flag_1;
}
VideoCapture capture1(0);

void testgui::start()
{
	if (flag_1 == 1)//////flag函数
	{
		capture1 >> image1;
		cvtColor(image1, image1, CV_BGR2RGB);
		show_image1 = QImage((const unsigned char*)image1.data, image1.cols, image1.rows, image1.cols*image1.channels(), QImage::Format_RGB888);
		//namedWindow("1");
		//imshow("1", image1);
		ui.pic_1->setPixmap(QPixmap::fromImage(show_image1)); //pic--显示图片窗
	}
}


flag1用于出发按钮,以后类似

 

 

【处理】部分代码,与开始做对比吧

[这里只是灰度化变换【做了canny没有让他显示而已】

 

void testgui::flag2()
{
	flag_2 = !flag_2;
}

void testgui::process()
{
	if (flag_2 == 1)
	{
		Mat temp;
		Mat gray;
		cvtColor(image1, temp, CV_BGR2RGB);
		cvtColor(temp, gray, CV_RGB2GRAY);

		Mat midImage;
		Canny(gray, midImage, 50, 200, 3);
		Mat detImage;
		cvtColor(midImage, detImage, CV_GRAY2BGR);

	

		QImage iGray((const unsigned char*)(gray.data), gray.cols, gray.rows, QImage::Format_Indexed8);
		ui.pic_2->setPixmap(QPixmap::fromImage(iGray));

		
	}
}


到这里基本就把所有需要将的都描述清楚了,具体的细节直接看代码理解了,完整代码也会分享到CSDN上,详情下载

 

最后看下效果

[vs+qt+opencv]手把手做GUI图像采集及处理UI交互界面_第11张图片

 

[vs+qt+opencv]手把手做GUI图像采集及处理UI交互界面_第12张图片

 

[vs+qt+opencv]手把手做GUI图像采集及处理UI交互界面_第13张图片

OK,到此就可以做最基本的显示了,后期会对这个文档做修改,谢谢

需要完整代码段的,手动下载

 

点击打开链接(完整运行程序代码)

想get更多有趣知识?请加微信公众号“小白算法”,谢谢

[vs+qt+opencv]手把手做GUI图像采集及处理UI交互界面_第14张图片

 

你可能感兴趣的:(Qt)