使用Qt Designer 结合pyqt5与matplotlib

原文链接: https://yapayzekalabs.blogspot.com/2018/11/pyqt5-gui-qt-designer-matplotlib.html
Chrome翻译插件显示原文是土耳其语, 可以利用google网页翻译翻译成英语, 还是比较通顺的. 这里帮助一下英语不太好的同学.

1.0 环境配置

需求依赖: matplotlib, Pyqt5, Qt Designer, Python3

步骤 1.1 GUI搭建

使用QT designer 搭建一个GUI 示例如下

创建一个 Main Window, 里面塞一个 Widget 和 一个Pushbutton

步骤 1.2 将组建转换为mplWidget(名称为自定义python文件, 下面会解释)

如上图所示, 选中Widget之后右键选择Promote to, 之后会弹出一个窗口

点击Promoted class name, 输入你想要的名字(这里作者写的是MplWidget).
然后点击Add按钮.

然后下一步如上图所示, 选中MplWidget之后打钩, 点击Promote, 组建更新就完成了.
然后再点击保存或者按Ctrl+S 就可以获得由Qt Designer程序生成的.ui文件.

2.0 Python代码部分

首先 全部的项目需要三个文件, 分别是

1. main.py 程序的主入口, 渲染GUI的代码
2. mplWidget.py Matplotlib模块的部分 QT Designer会使用的代码
3. qt_designer.ui 由Qt Designer生成的ui文件

步骤2.1 mplwidget.py 部分( 2020 9 14更新 经过测试这个组件的文件名必须要和步骤1.2最后一张图的hedafile部分的.h文件之前的名字一模一样(大小写敏感), 如果不这样可能编译器无法找到对应的py文件进行组件编译 感谢@dutwzc的评论)

# ------------------------------------------------- ----- 
# -------------------- mplwidget.py -------------------- 
# -------------------------------------------------- ---- 
from  PyQt5.QtWidgets  import * 
from  matplotlib.backends.backend_qt5agg  import  FigureCanvas 
from  matplotlib.figure  import  Figure 

    
class  MplWidget ( QWidget ): 
    def  __init__ ( self ,  parent  =  None ): 
        QWidget . __init__ ( self ,  parent )
        self . canvas  =  FigureCanvas ( Figure ()) 
        
        vertical_layout  =  QVBoxLayout () 
        vertical_layout . addWidget ( self . canvas ) 
        
        self . canvas . axes  =  self . canvas . figure . add_subplot ( 111 ) 
        self . setLayout ( vertical_layout )

代码比较简单就不一一解释了 有几个注意点

1. 如果说第二个import报错的话, 就换成下面这样

from matplotlib.backends.backend_qt5agg import FigureCanvasQTAgg as FigureCanvas

2. QVBoxLayout 是可以换成其他的layout的

步骤 2.2 main.py部分

# ------------------------------------------------- ----- 
# ---------------------- main.py ------------------- ---- 
# --------------------------------------------- --------- 
from  PyQt5.QtWidgets  import * 
from  PyQt5.uic  import  loadUi 

from  matplotlib.backends.backend_qt5agg  import  ( NavigationToolbar2QT  as  NavigationToolbar ) 

import  numpy  as  np 
import  random 
     
class  MatplotlibWidget ( QMainWindow ): 
    
    def  __init__ ( self ) :
        
        QMainWindow . __init__ ( self ) 

        loadUi ( "qt_designer.ui" , self ) 

        self . setWindowTitle ( "PyQt5 & Matplotlib Example GUI" ) 

        self . pushButton_generate_random_signal . clicked . connect ( self . update_graph ) 

        self . addToolBar ( NavigationToolbar ( self . MplWidget . canvas ,  self )) 


    def  update_graph( self ): 

        fs  =  500 
        f  =  random . randint ( 1 ,  100 ) 
        ts  =  1 / fs 
        length_of_signal  =  100 
        t  =  np . linspace ( 0 , 1 , length_of_signal ) 
        
        cosinus_signal  =  np . cos ( 2 * np . pi * f * t ) 
        sinus_signal  = np . sin ( 2 * np . pi * f * t ) 

        self . MplWidget . canvas . axes . clear () 
        self . MplWidget . canvas . axes . plot ( t ,  cosinus_signal ) 
        self . MplWidget . canvas . axes . plot ( t ,  sinus_signal ) 
        self .MplWidget . canvas . axes . legend (( 'cosinus' ,  'sinus' ), loc = 'upper right' ) 
        self . MplWidget . canvas . axes . set_title ( ' Cosinus - Sinus Signal' ) 
        self . MplWidget . canvas . draw () 
        

app  =  QApplication ([]) 
window  =  MatplotlibWidget () 
window . show () 
app. exec_ ()

主要由一个类两个函数组成. 第一个函数__init()__就是初始化函数, 主要作用就是渲染UI并初始化组建. (话说我是第一次知道PyQt5.uic这个东西, 以后研究研究, 争取早日告别PyUIC)

注意这个self.pushButton_generate_random_signal 这个变量必须和Qt Designer里的pushbutton按钮名字一致, 如果想要照抄代码记得去QT Designer里把按钮的名字改掉. 当然也可以改成你喜欢的名字.

第二个函数update_graph( self ) 主要是示例, 可以根据自己的需要修改, 这个函数主要功能是实现随机生成信号.

最后的效果就是这样