embed a pyqtgraph in Qt designer GUI

[Iman Afrouzeh]

Dear all, 

I am new in Python and maybe it seems that this question has been answered in other ways before but I could not figure it out after 2 days.

I have a qtgraph plot and I want to show it in a QLabel, Qwidget or Graphicsview in a gui that I made in Qtdesigner but I can not find a direct way that shows that graph. I am streaming a video from a camera and I could easily show it in my GUI but I am struggling with this one.

Thank you in advance for your help and comments.

the problem is in showing

[Patrick]

Hi,

Have you followed the instructions here? http://www.pyqtgraph.org/documentation/how_to_use.html#embedding-widgets-inside-pyqt-applications

Change your existing imgLabel to a GraphicsView object and then promote it to a PlotWidget or GraphicsLayoutWidget as described there.

Patrick

[Iman Afrouzeh]

Thank you very much for your response. 

I have already done that but my problem is that I don't know how to call the data in it in the python script. 

I don't knwo what should I write instead if this:

            self.curve.setData(self.data)
            self.l = (self.l+self.n)
            self.line.setValue(self.bufferSize)
       
    ##########this is the place that I don't have any Idea to do

I know it seems a silly question but I really couldn't find it with a lot of searches.

Thank you in advance for your help.

[Jim Crowell]

Do you just want to display the image, or have a plot on top of it? I use this utility function to set up both, with a histogram (only tested with PyQt5, 'pg' is of course pyqtgraph):

To update the image data, you would later call

widget.imageItem.setImage(...)

def add_plot_image_histogram(widget, image_data, show_plot_axes=False,
                             add_scale_buttons=False):
    """
    Add a PlotItem, attached ImageItem, and HistogramLUTWidget to a QWidget.
    (e.g. created in QTDesigner)

    The image is offset such that integer plot coordinates correspond
    to pixel centers rather than corners (which is the default).

    widget: a QWidget
    image_data: initial image data
    show_plot_axes: if False, hide all the plot axes. If True, show
                    the default ('left' & 'bottom' are shown).
    add_scale_buttons: if True, add up- and down-triangle buttons to
                       increase and decrease image color map limits and
                       a square button for resetting them (see ImageItemUpdater).

    returns None
    """

    layout = QtGui.QGridLayout()
    widget.setLayout(layout)
    layout.setSpacing(0)

    widget.plotView = pg.GraphicsView()
    layout.addWidget(widget.plotView, 0, 0, 3, 1)

    widget.plotItem = pg.PlotItem()
    widget.plotItem.setAspectLocked()
    widget.plotItem.resize = widget.resize
    if not show_plot_axes:
        for axis in ('left','bottom','top','right'):
            widget.plotItem.showAxis(axis, False)
    widget.plotView.setCentralItem(widget.plotItem)

    widget.imageItem = pg.ImageItem(image=image_data)
    # to make plotted points _centered_ on corresponding image pixels
    widget.imageItem.translate(-.5,-.5)
    # put image _behind_ plot
    widget.imageItem.setZValue(-100)
    if add_scale_buttons:
        button_radius = 12 # pixels
        image_height = widget.imageItem.height()

        # 'up' button in upper-left corner
        widget.up_button = Button(button_radius, typ='tu', \
                                  parent=widget.imageItem)
        widget.up_button.setPos(0, 0.95*image_height)

        # 'down' button just below it
        widget.down_button = Button(button_radius, typ='td', \
                                  parent=widget.imageItem)
        widget.down_button.setPos(0, 0.80*image_height)

        # 'reset' (square) button in lower-left corner
        widget.reset_button = Button(button_radius, typ='s',
                                     parent=widget.imageItem)

    widget.plotItem.addItem(widget.imageItem)

    widget.histogramView = pg.GraphicsView()

[Jim Crowell]

Oh, and I'm just using numpy arrays to represent images, not QImages.

[Iman Afrouzeh]

I am displaying the image in the function above in displayImage but I cannot display my data in hist function inside my gui as graphicsview or something else

[Patrick]

Hi,

Oh, I see now you are plotting the histogram in a separate PlotWindow and the QLabel is just for the image.

Your lines 46 and 90:

self.mask = np.zeros((self.cameraHeight,self.cameraWidth),np.uint8)

Shouldn't height and width be swapped around? I changed these to

self.mask = np.zeros((self.cameraWidth,self.cameraHeight),np.uint8)

and the code seemed to run OK (I did also fake the data acquired in the capture.read() as I don't have a webcam).

Patrick

[Iman Afrouzeh]

thanks for your reply,

No the video stream works well.

I don't know how to embed the histogram in the GUI. How can I call the plot in my GUI as a separate window?

I know that the way that I ask the question may be strange and that is because I am new in python. Thank you in advance.

[Patrick]

Hi,

I still don't think I 100% understand -- you want the plot to be in the same window as the rest of the GUI? Then my first reply is correct, except you want to change your histLabel to a GraphicsView and then promote it, as the instructions I linked earlier. Your .ui file would then be as attached. In your code, delete the line

self.plt = pg.PlotWindow()

as self.plt is now a PlotWidget and is created when you do the loadUi().

I would also suggest looking through the pyqtgraph examples, particularly the Image Analysis one, as it looks like it does a lot of what you are trying to do manually with your GUI and OpenCV tools.

Patrick