将 pyqtgraph 图嵌入到 QT .ui 中？

Posted 2023-03-25

【中文标题】将 pyqtgraph 图嵌入到 QT .ui 中？

【英文标题】：Embed a pyqtgraph plot into a QT .ui?

【发布时间】：2020-08-16 01:39:09

【问题描述】：

首先，我希望您对我有一些耐心，因为我是这类项目的新手，我也希望不要问愚蠢的问题。话虽如此，我的主要目标是为树莓派 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 用户进行快速聊天，您可以吗？我来自墨西哥

听起来不错！非常感谢朋友！