How to embed my pyqtgraph plot animation in a GUI application?

Christian Chacha

unread,

Dec 20, 2018, 5:47:23 PM12/20/18

to pyqtgraph

Hi everyone. I'm new in PyQt and pyqtgraph.

I'm trying to embed my pyqtgraph animation inside a GUI application made with Qt Designer.

I have this code for the animation:

import pyqtgraph as pg

from pyqtgraph.Qt import QtCore, QtGui

import numpy as np

win = pg.GraphicsWindow()

win.setWindowTitle('pyqtgraph example: Scrolling Plots')

# 1) Simplest approach -- update data in the array such that plot appears to scroll

# In these examples, the array size is fixed.

p1 = win.addPlot()

#data1 = np.random.normal(size=300)

#y = np.cos(2*np.pi*10*t)

y = np.random.normal(size=300)

curve1 = p1.plot(y)

ptr1 = 0

def update1():

global y, curve1, ptr1

y[:-1] = y[1:] # shift data in the array one sample left

# (see also: np.roll)

y[-1] = np.random.normal() # continua grafiacando a partir del ultimo punto graficado

curve1.setData(y)

ptr1 += 1

#update plot

def update():

update1()

timer = pg.QtCore.QTimer()

timer.timeout.connect(update)

timer.start(40)

## Start Qt event loop unless running in interactive mode or using pyside.

if __name__ == '__main__':

import sys

if (sys.flags.interactive != 1) or not hasattr(QtCore, 'PYQT_VERSION'):

QtGui.QApplication.instance().exec_()

And I want to embed the pyqtgraph plot in this code:

# -*- coding: utf-8 -*-

# Form implementation generated from reading ui file 'trainingEcg.ui'

#

# Created by: PyQt5 UI code generator 5.9.2

#

# WARNING! All changes made in this file will be lost!

from PyQt5 import QtCore, QtGui, QtWidgets

class Ui_MainWindow(object):

def setupUi(self, MainWindow):

MainWindow.setObjectName("MainWindow")

MainWindow.resize(700, 600)

self.centralwidget = QtWidgets.QWidget(MainWindow)

self.centralwidget.setObjectName("centralwidget")

self.label_2 = QtWidgets.QLabel(self.centralwidget)

self.label_2.setGeometry(QtCore.QRect(280, 40, 31, 31))

self.label_2.setObjectName("label_2")

self.BotonSimular = QtWidgets.QPushButton(self.centralwidget)

self.BotonSimular.setGeometry(QtCore.QRect(360, 30, 131, 41))

font = QtGui.QFont()

font.setBold(True)

font.setWeight(75)

self.BotonSimular.setFont(font)

self.BotonSimular.setStyleSheet("background-color: rgb(85, 255, 0);")

self.BotonSimular.setObjectName("BotonSimular")

self.label_3 = QtWidgets.QLabel(self.centralwidget)

self.label_3.setGeometry(QtCore.QRect(190, 100, 321, 41))

self.label_3.setObjectName("label_3")

self.BotonReset = QtWidgets.QPushButton(self.centralwidget)

self.BotonReset.setGeometry(QtCore.QRect(530, 30, 131, 41))

font = QtGui.QFont()

font.setBold(True)

font.setWeight(75)

self.BotonReset.setFont(font)

self.BotonReset.setStyleSheet("background-color: rgb(255, 0, 0);")

self.BotonReset.setObjectName("BotonReset")

self.label = QtWidgets.QLabel(self.centralwidget)

self.label.setGeometry(QtCore.QRect(20, 30, 141, 41))

self.label.setObjectName("label")

self.InBMP = QtWidgets.QLineEdit(self.centralwidget)

self.InBMP.setGeometry(QtCore.QRect(180, 40, 71, 31))

self.InBMP.setStyleSheet("background-color: rgb(255, 255, 255);")

self.InBMP.setObjectName("InBMP")

self.Plot = PlotWidget(self.centralwidget)

self.Plot.setGeometry(QtCore.QRect(40, 200, 611, 281))

self.Plot.setFrameShape(QtWidgets.QFrame.StyledPanel)

self.Plot.setFrameShadow(QtWidgets.QFrame.Raised)

self.Plot.setObjectName("Plot")

MainWindow.setCentralWidget(self.centralwidget)

self.statusbar = QtWidgets.QStatusBar(MainWindow)

self.statusbar.setObjectName("statusbar")

MainWindow.setStatusBar(self.statusbar)

self.retranslateUi(MainWindow)

QtCore.QMetaObject.connectSlotsByName(MainWindow)

def retranslateUi(self, MainWindow):

_translate = QtCore.QCoreApplication.translate

MainWindow.setWindowTitle(_translate("MainWindow", "ecgTrain"))

self.label_2.setText(_translate("MainWindow", "<html><head/><body>BMP</body></html>"))

self.BotonSimular.setText(_translate("MainWindow", "SIMULAR"))

self.label_3.setText(_translate("MainWindow", "<html><head/><body>ELECTROCARDIOGRAMA</body></html>"))

self.BotonReset.setText(_translate("MainWindow", "RESET"))

self.label.setText(_translate("MainWindow", "<html><head/><body>Frecuencia Cardiaca</body></html>"))

from pyqtgraph import PlotWidget

if __name__ == "__main__":

import sys

app = QtWidgets.QApplication(sys.argv)

MainWindow = QtWidgets.QMainWindow()

ui = Ui_MainWindow()

ui.setupUi(MainWindow)

MainWindow.show()

sys.exit(app.exec_())

If someone has an idea

Thanks

20181220_155256.mp4

Capture.PNG

Patrick

unread,

Dec 20, 2018, 10:10:59 PM12/20/18

to pyqtgraph

Hi,

I would suggest a slightly different way of using the .ui files from Qt Designer/Creator, and that is to dynamically load the .ui instead of manually generating code using the pyuic tool. This way it's easier to modify the .ui, and keep all the code separate.

Here's an example:

#!/usr/bin/env python3

import sys
from PyQt5 import QtCore, QtGui, QtWidgets, uic
import numpy as np
import pyqtgraph as pg

class PlotWindow(QtWidgets.QMainWindow):

    def __init__(self):
        super().__init__()

        # Load GUI layout from .ui file (named same as this source file, but with .ui extension)
        uic.loadUi(__file__.split('.py')[0] + '.ui', self)

        # Finish up the GUI and connections
        self.lineEdit.setText("Some text")
        self.pushButton.clicked.connect(self.pushButton_clicked)
        self.pushButton_2.clicked.connect(self.pushButton_2_clicked)
        # ...

        # Store your data here in the class (instead of using global variables)
        self.y = np.random.normal(size=300)
        self.curve1 = self.plotWidget.plot(self.y)

        self.timer = pg.QtCore.QTimer()
        self.timer.timeout.connect(self.update)
        self.timer.start(40)

    def pushButton_clicked(self):
        self.statusbar.showMessage('pushButton clicked...')

    def pushButton_2_clicked(self):
        self.statusbar.showMessage('pushButton_2 clicked...')

    def update(self):
        self.y[:-1] = self.y[1:]  # shift data in the array one sample left
                                  # (see also: np.roll)
        self.y[-1] = np.random.normal() # continua grafiacando a partir del ultimo punto graficado
        self.curve1.setData(self.y)   

def main():
    app = QtWidgets.QApplication(sys.argv)
    mainwindow = PlotWindow()
    mainwindow.show()
    sys.exit(app.exec_())

if __name__ == '__main__':
    main()

and for completeness, here's the contents of the .ui file (name it same as python source file above, but with .ui extension):

<?xml version="1.0" encoding="UTF-8"?>
<ui version="4.0">
 <class>MainWindow</class>
 <widget class="QMainWindow" name="MainWindow">
  <property name="geometry">
   <rect>
    <x>0</x>
    <y>0</y>
    <width>800</width>
    <height>600</height>
   </rect>
  </property>
  <property name="windowTitle">
   <string>MainWindow</string>
  </property>
  <widget class="QWidget" name="centralwidget">
   <layout class="QVBoxLayout" name="verticalLayout">
    <item>
     <layout class="QHBoxLayout" name="horizontalLayout_2">
      <item>
       <widget class="QLineEdit" name="lineEdit"/>
      </item>
      <item>
       <widget class="QPushButton" name="pushButton_2">
        <property name="text">
         <string>PushButton</string>
        </property>
       </widget>
      </item>
      <item>
       <widget class="QPushButton" name="pushButton">
        <property name="text">
         <string>PushButton</string>
        </property>
       </widget>
      </item>
     </layout>
    </item>
    <item>
     <widget class="QGroupBox" name="groupBox">
      <property name="title">
       <string>It's a plot</string>
      </property>
      <layout class="QHBoxLayout" name="horizontalLayout">
       <item>
        <widget class="PlotWidget" name="plotWidget"/>
       </item>
      </layout>
     </widget>
    </item>
   </layout>
  </widget>
  <widget class="QMenuBar" name="menubar">
   <property name="geometry">
    <rect>
     <x>0</x>
     <y>0</y>
     <width>800</width>
     <height>19</height>
    </rect>
   </property>
  </widget>
  <widget class="QStatusBar" name="statusbar"/>
 </widget>
 <customwidgets>
  <customwidget>
   <class>PlotWidget</class>
   <extends>QGraphicsView</extends>
   <header>pyqtgraph</header>
  </customwidget>
 </customwidgets>
 <resources/>
 <connections/>
</ui>

Good luck!

Patrick

Christian Chacha

unread,

Dec 21, 2018, 12:00:44 PM12/21/18

to pyqtgraph

Thanks a lot, bro

Message has been deleted

Christian Chacha

unread,

Dec 21, 2018, 3:46:39 PM12/21/18

to pyqtgraph

Patrick.

How do I make the animation start when I press a PushBotton?, please help me

Reply all

Reply to author

Forward