Pyqt gui with buttons and number indicators placed on background image

Question

I want to develop a frontend human interface for my python script that takes various temperature and DI/DOs from Raspberry pi using custom designed electronic circuits. I have managed the python end. Now i wish to put all the input values and buttons (for operating DOs) on a LCD screen that a user can see and operate.

So far i have got the schematic of a particular application on a tab in a Qwidget using stylesheets. This was done through QT Designer, as i have no knowledge of QT. I can place buttons and indicators also, however they do not move when the widget is resized. In this first image, a test button is placed where i require.

Button properly placed in QT Designer.

But when i resize the window, the background image moves but the button remains.

Button does not move when window resized.

How can i make the button position and size relative to the widget window?

thanks!

EDIT: A similar question asked here. I read in various forums that some combination of resizeEvent() and move() has to be used. But i dont know where to add this to my code. My current code as converted from .ui file output of QT designer to .py:

from PyQt5 import QtCore, QtGui, QtWidgets

class Ui_TabWidget1(object):
    def setupUi(self, TabWidget1):
        TabWidget1.setObjectName("TabWidget1")
        TabWidget1.setEnabled(True)
        TabWidget1.resize(1092, 867) 
        # TabWidget1.move(0, 0)

        self.tab1 = QtWidgets.QWidget()
        self.tab1.setAutoFillBackground(False)
        self.tab1.setStyleSheet("image:url(:/images/Jaggery Unit Frontend V0.11.png)")
        self.tab1.setObjectName("tab1")

        self.pushButton = QtWidgets.QPushButton(self.tab1)
        self.pushButton.setGeometry(QtCore.QRect(310, 220, 75, 23))
        sizePolicy = QtWidgets.QSizePolicy(QtWidgets.QSizePolicy.Preferred, QtWidgets.QSizePolicy.Preferred)
        sizePolicy.setHorizontalStretch(0)
        sizePolicy.setVerticalStretch(0)
        sizePolicy.setHeightForWidth(self.pushButton.sizePolicy().hasHeightForWidth())
        self.pushButton.setSizePolicy(sizePolicy)
        self.pushButton.setContextMenuPolicy(QtCore.Qt.DefaultContextMenu)
        self.pushButton.setLayoutDirection(QtCore.Qt.LeftToRight)
        self.pushButton.setObjectName("pushButton")

        TabWidget1.addTab(self.tab1, "")
        self.tab2 = QtWidgets.QWidget()
        self.tab2.setObjectName("tab2")
        TabWidget1.addTab(self.tab2, "")

        self.retranslateUi(TabWidget1)
        TabWidget1.setCurrentIndex(0)

        QtCore.QMetaObject.connectSlotsByName(TabWidget1)

    def retranslateUi(self, TabWidget1):
        _translate = QtCore.QCoreApplication.translate
        TabWidget1.setWindowTitle(_translate("TabWidget1", "TabWidget"))
        self.pushButton.setText(_translate("TabWidget1", "PushButton"))
        TabWidget1.setTabText(TabWidget1.indexOf(self.tab1), _translate("TabWidget1", "Tab 1"))
        TabWidget1.setTabText(TabWidget1.indexOf(self.tab2), _translate("TabWidget1", "Tab 2"))

import resources

if __name__ == "__main__":
    import sys
    app = QtWidgets.QApplication(sys.argv)
    TabWidget1 = QtWidgets.QTabWidget()
    ui = Ui_TabWidget1()
    ui.setupUi(TabWidget1)
    TabWidget1.show()
    sys.exit(app.exec_())

Subir Bhaduri · Accepted Answer · 2018-07-01T15:51:42.520

I figured out how to do it. Due to my lack of knowledge in QT i dont know how this works, only that it works. My UI contains a window with tabs. On the first tab 'Overview', there are the buttons and LCDnumbers that i need to be repositioned.

As shown here, i followed its example and made another 'class object' that calls on the original UI created by QT Designer. The rest are comments in the following code.

class MainWindow(QtWidgets.QTabWidget):
    resized = QtCore.pyqtSignal()
    def  __init__(self, parent=None):
        super(MainWindow, self).__init__(parent=parent)

        # Here import the QTdesigner created ui class
        ui = Ui_TabWidget1()
        ui.setupUi(self)

        # First get the relative positions of the childwidgets wrt original screen.
        relative_widget_positions,widgetlist = self.get_relative_widget_positions()

        #Then connect the resized event with a function that manipulates the widgets
        self.resized.connect(lambda: self.reposition_widgets_on_resize(relative_widget_positions,widgetlist))
    #-----------------------------------------------------------------

    # Find the various children widgets of 'Overviewtab' of the imported UI.
    def get_relative_widget_positions(self):
        # get list of widgets along with their positions, sizes
        widgetlist = self.findChildren((QtWidgets.QLCDNumber , QtWidgets.QPushButton))

        # Compute the background image coordinates
        I_x,I_y,I_w,I_h = self.get_image_coordinates()

        # initate the relative positions array
        relative_widget_positions =[]

        # iterate over each widget to compute its relative position wrt image width and height
        for w in widgetlist:
            pos = w.pos()
            relative_x = (pos.x()-I_x)/I_w
            relative_y = (pos.y()-I_y)/I_h
            relative_widget_positions.append([relative_x,relative_y])

        # print(relative_widget_positions)

        return relative_widget_positions,widgetlist

    #-----------------------------------------------------------------    
    def resizeEvent(self, event):
        self.resized.emit()
        return super(MainWindow, self).resizeEvent(event)

    #-----------------------------------------------------------------
    def reposition_widgets_on_resize(self,relative_widget_positions,widgetlist):
        I_x,I_y,I_w,I_h = self.get_image_coordinates()

        for w,r in zip(widgetlist,relative_widget_positions):
            w.move(r[0]*I_w + I_x , r[1]*I_h + I_y)

    #-----------------------------------------------------------------
    def get_image_coordinates(self):

        # find area sizes. Note that the top tabs need to be removed fromt
        # the area where image is drawn. Also all child widgets are wrt to geometry of parent rather than frame.
        # so use geometry() rather than frameGeometry(). See: 
        # https://doc-snapshots.qt.io/4.8/application-windows.html#window-geometry
        # Also, the 'corrections' below are necessary to adjust for the 'Tabs' on the top,
        # as well as some arbitrary adjustments i had to make for positioning to be right.
        g = self.geometry()
        g_x = g.x() + 10
        g_y = g.y() + 43
        g_w = g.width() - 20
        g_h = g.height() - 43

        # From the image file's widthe/height
        I_w_to_h_ratio = 1.277

        # Based on the window, the Image's either width or height is the same as that of the 'client area' as the image scales without changing its aspect ratio.
        if(g_w/g_h > I_w_to_h_ratio):  # normal screen orientation
            I_h = g_h
            I_w = I_w_to_h_ratio * I_h
        elif(g_w/g_h <= I_w_to_h_ratio):  # abnormal screen orientation
            I_w = g_w
            I_h = I_w/I_w_to_h_ratio

        # Compute image origins - very important parameter.
        I_x = (g_w - I_w)/2 #+ g_x
        I_y = (g_h - I_h)/2 #+ g_y

        # print(g_x,g_y,g_w,g_h,I_x,I_y,I_w,I_h)

        return (I_x,I_y,I_w,I_h)

Hope it helps someone like me. thanks!

Pyqt gui with buttons and number indicators placed on background image

1 Answers1