Pyqt GUI с кнопками и цифровыми индикаторами, размещенными на фоновом изображении - PullRequest
0 голосов
/ 26 июня 2018

Я хочу разработать интерфейс для внешнего интерфейса для моего скрипта на python, который использует различные температуры и входы / выходы Raspberry pi с использованием специально разработанных электронных схем. Я управлял концом питона. Теперь я хочу разместить все входные значения и кнопки (для управления DO) на ЖК-экране, который пользователь может видеть и использовать.

Пока у меня есть схема конкретного приложения на вкладке в Qwidget с использованием таблиц стилей. Это было сделано через QT Designer, так как я ничего не знаю о QT. Я также могу разместить кнопки и индикаторы, однако они не двигаются при изменении размера виджета. На этом первом изображении кнопка тестирования находится там, где мне нужно.

Кнопка правильно размещена в QT Designer.

Но когда я изменяю размер окна, фоновое изображение перемещается, но кнопка остается.

Кнопка не перемещается при изменении размера окна.

Как я могу сделать положение и размер кнопки относительно окна виджета?

спасибо!

РЕДАКТИРОВАТЬ: Аналогичный вопрос задали здесь . Я читал на разных форумах, что нужно использовать некоторую комбинацию resizeEvent () и move (). Но я не знаю, где добавить это в мой код. Мой текущий код преобразован из .ui-файла вывода QT-конструктора в .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_())

1 Ответ

0 голосов
/ 01 июля 2018

Я разобрался, как это сделать. Из-за моего недостатка знаний в QT я не знаю, как это работает, только то, что это работает. Мой пользовательский интерфейс содержит окно с вкладками. На первой вкладке «Обзор» есть кнопки и номера LCD, которые мне нужно переместить.

Как показано здесь , я последовал его примеру и создал еще один «объект класса», который вызывает исходный пользовательский интерфейс, созданный QT Designer. Остальные комментарии в следующем коде.

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)

Надеюсь, это поможет кому-то вроде меня. спасибо!

...