将 pyqtgraph 图嵌入到 QT .ui 中?

Posted

技术标签:

【中文标题】将 pyqtgraph 图嵌入到 QT .ui 中?【英文标题】:Embed a pyqtgraph plot into a QT .ui? 【发布时间】:2018-02-02 23:08:28 【问题描述】:

首先,我希望您对我有一些耐心,因为我是这类项目的新手,我也希望不要问愚蠢的问题。话虽这么说,我的主要目标是为树莓派 3 创建一个 UI,它可以感应电池和太阳能电池板的电压、电流等。

由于我正在研究树莓派并且对 Python3 有一些了解,我决定使用 QTCreator,据我所知,它可以通过 pyqt (https://nikolak.com/pyqt-qt-designer-getting-started/) 翻译成 python3。我将它安装在我的树莓派上并制作了以下 UI:

在有了基本的 UI 之后,我使用 pyuic5 命令将 .ui 文件转换为 .py,我可以使用“python3 main.py”打开 UI,一切似乎都正常:

打开 main.py 文件后 UI 的外观

现在,我想在 UI 上绘制几个图(例如电压与时间的关系等)。我正在使用以下内容进行测试:

import sys
import pyqtgraph as pg
from pyqtgraph.Qt import QtCore, QtGui
import numpy as np

pg.setConfigOption('background', 'w')
pg.setConfigOption('foreground', 'k')
win = pg.GraphicsWindow()
win.setWindowTitle('pyqtgraph example: Scrolling Plots')


p1 = win.addPlot(labels =  'left':'Voltage', 'bottom':'Time')
data1 = np.random.normal(size=10)
data2 = np.random.normal(size=10)
curve1 = p1.plot(data1, pen=(3,3))
curve2 = p1.plot(data2, pen=(2,3))
ptr1 = 0

def update1():
    global data1, curve1, data2, ptr1

    data1[:-1] = data1[1:]  # shift data in the array one sample left
                            # (see also: np.roll)
    data1[-1] = np.random.normal()
    ptr1 += 1

    curve1.setData(data1)
    curve1.setPos(ptr1,0)



    data2[:-1] = data2[1:]  # shift data in the array one sample left
                            # (see also: np.roll)
    data2[-1] = np.random.normal()
    curve2.setData(data2)
    curve2.setPos(ptr1,0)


def update():
    update1()

timer = pg.QtCore.QTimer()
timer.timeout.connect(update)
timer.start(2000) # number of seconds (every 1000) for next update



if __name__ == '__main__':
    QtGui.QApplication.instance().exec_()

是否可以将该图嵌入到我的 main.py 文件中?如果我理解正确,我应该使用 QTCreator 上的推广小部件功能。提前谢谢各位!

【问题讨论】:

【参考方案1】:

通过Qt Designer提升的是一个Widget,即一个类,所以不能直接提升,我们要做的就是把它放在一个类里面,如下图:

Plotter.py

class  CustomWidget(pg.GraphicsWindow):
    pg.setConfigOption('background', 'w')
    pg.setConfigOption('foreground', 'k')
    ptr1 = 0
    def __init__(self, parent=None, **kargs):
        pg.GraphicsWindow.__init__(self, **kargs)
        self.setParent(parent)
        self.setWindowTitle('pyqtgraph example: Scrolling Plots')
        p1 = self.addPlot(labels =  'left':'Voltage', 'bottom':'Time')
        self.data1 = np.random.normal(size=10)
        self.data2 = np.random.normal(size=10)
        self.curve1 = p1.plot(self.data1, pen=(3,3))
        self.curve2 = p1.plot(self.data2, pen=(2,3))

        timer = pg.QtCore.QTimer(self)
        timer.timeout.connect(self.update)
        timer.start(2000) # number of seconds (every 1000) for next update

    def update(self):
        self.data1[:-1] = self.data1[1:]  # shift data in the array one sample left
                            # (see also: np.roll)
        self.data1[-1] = np.random.normal()
        self.ptr1 += 1
        self.curve1.setData(self.data1)
        self.curve1.setPos(self.ptr1, 0)
        self.data2[:-1] = self.data2[1:]  # shift data in the array one sample left
                            # (see also: np.roll)
        self.data2[-1] = np.random.normal()
        self.curve2.setData(self.data2)
        self.curve2.setPos(self.ptr1,0)

if __name__ == '__main__':
    w = CustomWidget()
    w.show()
    QtGui.QApplication.instance().exec_()

在继续之前,我假设文件具有以下结构:

.
├── main.py
└── Plotter.py
    首先要做的是选择小部件:

    然后我们右键单击它并选择提升到..的选项:

    在对话框中,我们将 CustomWidget 放在 Promoted Class Name 中,将 Plotter.h 放在 Header File 中,然后按添加推广按钮。

    然后我们将 .ui 文件转换为 .py

【讨论】:

非常感谢eyllanesc,您的回答非常有用!我现在可以将我的情节嵌入到我用 QTCreator 制作的 UI 中!我只是有几个额外的疑问,希望你能帮助我:1)在你的第三步,你写道:“在对话框中,我们将 CustomPlot 放在提升的类名中”。如果我理解正确,名称应该是 CustomWidget,因为我们应该将类的名称放在 Plotter.py 文件中,对吧? (这是你在图片上写的,可能你和名字有点混淆) 2) 最后...我最初想使用基于我阅读的其他几个站点的 GraphicsView 小部件,包括您也回答过的站点(哈哈,我几分钟前才注意到您的名字!):***.com/questions/44718779/…我想知道他的剧情和我的有什么不同,为什么推荐他实际使用GraphicsView? "在“Promoted class Name”中放置制作图形的类的名称,在我的示例中是 CustomWidget,在“头文件”中,通过将扩展名 .py 更改为.h – eyllanesc 11 分钟前” 酷!这会让其他需要类似答案的人更清楚:) 我无法向您发送聊天请求,因为我是新手,如果我给您我的 Skype 用户进行快速聊天,您可以吗?我来自墨西哥 听起来不错!非常感谢朋友!

以上是关于将 pyqtgraph 图嵌入到 QT .ui 中?的主要内容,如果未能解决你的问题,请参考以下文章

使用 PySide2 在 Qt-Designer 中嵌入 PyQtGraph

在 Qt 中嵌入 PyQtGraph 而不生成新窗口

使用 pyside2 将 pyqtgraph 图添加到 QTDesigner

在 PyQt (pyqtgraph) 中嵌入“图形类型”Seaborn 图

将 pyqtgraph 嵌入到 enaml 中......如何?

将 Pyqtgraph 嵌入到 PySide2