socket图传上位机设计记录

之前的文章已经对TCP/UDP进行数据传输做了一定的个介绍了，并进行了聊天器还有图像传输的设计，因此这里就来结合之前的pyqt来做最后的一点完善，把上位机这个部分给他补全掉。

如果有需要详细了解的可以看我之前的专栏

TCP/UDP记录-图像传输系统

TCP/UDP记录-聊天器

TCP通信与UDP通信记录

1、上位机页面和功能设计

1、页面设计

页面这块还是比较简单吧，用QT拖下块块就行了，然后主要就是几个输入框的定义，定义下我们需要的变量即可

这里变量定义如下，建议还是自己事先先做变量定义，然后再对变量进行修改，这样会方便一点，一方面是这里面变量太多了，用的时候容易弄混，另一方面还是这样弄得快一点。

这里的视频部分选择label即可，label控件是用来显示文字的，但是图像的本质不就是字节吗，所以这里用字节的方式来代替这个文本就可以了。

2、功能定义

因为这里只是做一个demo，所以也就没必要弄得特别多的功能了，主要就是视频的显示，然后图像的截取保存等操作，当然这里涉及到图像的一些保存，所以就放了一个文件夹的选项事先选定一下文件夹，这样就方便很多，就是上图展示的选定文件的按钮，同时为了方便看一些提示性的信息，这里最好还是加上一个信息输出框，这样方便我们查看我们的一些调试过程，因此总结下功能大概就是：

• 图像显示
• 图像保存
• 视频录制

这里只是做个基本的示例，所以程序部分就只做部分的移植，这里我仅移植UDP的部分，前面介绍了三种方式来进行图像传输，这里就不全部移植一套了。

2、上位机程序设计

代码这边并不是很多，看到最后也只有100多行，除去中间的空行，还有一些重复的，固件有效代码也才50多行吧，所以这个部分其实还是很简单的

首先是初始化部分，初始化部分这里一方面是一些变量的初始化，另一方面就是我们套接字的初始化了，这里套接字的初始化把ip地址还有端口号单独留出来就行

下面是选择用来存文件的文件夹，这里用到了qt的官方函数

函数源码如下，这里预先输入的是一个起始路径

        self.path = QtWidgets.QFileDialog.getExistingDirectory(None,"选取文件夹","G:/")  # 起始路径

效果就是按下之后会有一个文件选择框跳出来

之后是开启图像还有关闭图像了，这个部分其实基本上可以说是最重要的部分了，先看下代码吧

这里为了防止输错加了一个try，这样就不会出什么大问题了，在下方的信息输出框提示输入正确的ip地址和端口号，这里我认为还是比较重要的，因为如果弄错了这个qt的程序就会闪退，挺麻烦的

这样当定时器开启之后就会进入我们的定时器这个函数了，然后再把之前的udp传输的解码函数放到定时器里面来解码，这样就实现了一个循环更新，然后用官方的函数来填充图像，函数如下：

 showimage = QtGui.QImage(self.iamge.data, self.iamge.shape[1], self.iamge.shape[0], self.iamge.shape[1] * 3,
                                        QtGui.QImage.Format_RGB888)

这里其实也要做一个注意就是把BGR的图像转成RGB的，不然显示上那个通道错乱带来的感觉其实还是很不爽，这里使用opencv官方的函数就行了

self.iamge = cv2.cvtColor(self.img, cv2.COLOR_BGR2RGB)

最后的完整代码如下

下面是保存图片部分，这个部分也基本上调用opencv的官方函数

最后就是保存视频了，这里也是用的之前的官方函数，函数如下：

 self.video_out = cv2.VideoWriter(str(self.path) + '/' + str(self.video_index) + '.avi',
                                                 cv2.VideoWriter_fourcc('M', 'J', 'P', 'G'), 50, (640, 480))

当然这个函数是要一直保存的，所以需要把他加到定时器的函数里面

这样就完成了全部的工作了，下面就是测试了

3、测试效果

这里我用的树莓派进行连接，延时还可以，基本上看不太出来，效果如下