GUI looks different and weird on different machines (Qt Creator 4.3.0)



  • Hi. I am a new Qt Creator user. I made a simple GUI using Qt Creator, which mainly includes QLabels and QTextEdits (basically user types some inputs and after clicking calculate, some outputs appear). I defined functionalities using PyQt 5 and made exe file using CX_freeze. The problem I have is that while GUI looks fine on my laptop, some font sizes and QLabel dimensions change on other machines and make the GUI look weird. In Qt Creator, I tried different size policies for QLabel and QTextEdit (expanding, fixed, etc) but did not fix the problem. I will be grateful to hear any suggestion. Thanks.



  • Hi, and welcome to the Qt forum. Can you please post a screenshot of the weird looking window?



  • Thank you! Sure, here is a picture of it running on another machine (while on my laptop it looks nice). 0_1501805583724_myAppOnAnotherMachine.jpg



  • I noticed different OS's have different default fonts and sizes.
    Fonts are larger on linux (ubuntu 16.04 LTS) vs windows if I have been a little lazy to not specify dimensions properly.

    I've found if I have my font pixels calculated it works better, as opposed to just unset or point size.

    Try specifying dimensions not just a points size (is my guess) - something like:
    font.pixelSize: ( parent.height / 2 );

    • you can set it to literally anything you like. It's just another QtObject/Item.

    Anyhow, I don't have a perfect system myself - but this might give you an idea on how to fix yours.



  • Hi @Akzmn
    Welcome to Qt world.
    Using fixed sizes in GUI design is not recommended, inorder to use for multiple screen sizes.
    Based on "const QRect QDesktopWidget::screenGeometry()" sizes of internal widgets should be rearranged.



  • Hi,

    @Akzmn , welcome to Qt,

    Make use of the below code to get width and height :

    QRect m_ScreenSize = qApp->primaryScreen()->geometry();

    int width = m_ScreenSize .width();
    int height = m_ScreenSize .height();

    So make use of width and height values for all visual ui elements , so it will fit to all platforms.
    make use of the width and height values.

    Thanks,



  • Hi @Pradeep-Kumar ! Many thanks for your response. Just to make things more clear and to make sure I understood correctly, I am explaining the workflow I have been following:
    To design the UI I used "design" mode in QT Creator , and then using "> pyuic5 -x firstF.ui -o firstF.py" I convert it to python file.
    and then I have a python code program.py in which I import the designed UI and define the functions:
    firstF.py:

    
    from PyQt5 import QtCore, QtGui, QtWidgets
    
    class Ui_myfirstgui(object):
        def setupUi(self, myfirstgui):
            myfirstgui.setObjectName("myfirstgui")
            myfirstgui.resize(851, 779)
            sizePolicy = QtWidgets.QSizePolicy(QtWidgets.QSizePolicy.Preferred, QtWidgets.QSizePolicy.Preferred)
            sizePolicy.setHorizontalStretch(0)
            sizePolicy.setVerticalStretch(0)
            sizePolicy.setHeightForWidth(myfirstgui.sizePolicy().hasHeightForWidth())
            myfirstgui.setSizePolicy(sizePolicy)
            icon = QtGui.QIcon()
            icon.addPixmap(QtGui.QPixmap("logo_fZG_icon.ico"), QtGui.QIcon.Normal, QtGui.QIcon.On)
            myfirstgui.setWindowIcon(icon)
            self.buttonBox = QtWidgets.QDialogButtonBox(myfirstgui)
            self.buttonBox.setGeometry(QtCore.QRect(750, 700, 81, 51))
            sizePolicy = QtWidgets.QSizePolicy(QtWidgets.QSizePolicy.Expanding, QtWidgets.QSizePolicy.Expanding)
            sizePolicy.setHorizontalStretch(0)
            sizePolicy.setVerticalStretch(0)
            sizePolicy.setHeightForWidth(self.buttonBox.sizePolicy().hasHeightForWidth())
            self.buttonBox.setSizePolicy(sizePolicy)
            font = QtGui.QFont()
            font.setPointSize(9)
            self.buttonBox.setFont(font)
            self.buttonBox.setOrientation(QtCore.Qt.Horizontal)
            self.buttonBox.setStandardButtons(QtWidgets.QDialogButtonBox.Close)
            self.buttonBox.setObjectName("buttonBox")
            self.label = QtWidgets.QLabel(myfirstgui)
            self.label.setGeometry(QtCore.QRect(770, 10, 71, 81))
            self.label.setText("")
            self.label.setPixmap(QtGui.QPixmap("logo.png"))
            self.label.setScaledContents(True)
            self.label.setObjectName("label")
            self.label_2 = QtWidgets.QLabel(myfirstgui)
            self.label_2.setGeometry(QtCore.QRect(10, 400, 651, 351))
            self.label_2.setText("")
            self.label_2.setPixmap(QtGui.QPixmap("PlanGrey.JPG"))
            self.label_2.setScaledContents(True)
            self.label_2.setObjectName("label_2")
            self.label_3 = QtWidgets.QLabel(myfirstgui)
            self.label_3.setGeometry(QtCore.QRect(30, 170, 81, 16))
            font = QtGui.QFont()
            font.setFamily("Century Gothic")
            font.setPointSize(14)
            font.setBold(True)
            font.setWeight(75)
            self.label_3.setFont(font)
            self.label_3.setObjectName("label_3")
            self.label_4 = QtWidgets.QLabel(myfirstgui)
            self.label_4.setGeometry(QtCore.QRect(30, 200, 131, 20))
            font = QtGui.QFont()
            font.setFamily("Verdana")
            font.setPointSize(10)
            self.label_4.setFont(font)
            self.label_4.setObjectName("label_4")
            self.label_5 = QtWidgets.QLabel(myfirstgui)
            self.label_5.setGeometry(QtCore.QRect(32, 230, 101, 20))
            font = QtGui.QFont()
            font.setFamily("Verdana")
            font.setPointSize(10)
            self.label_5.setFont(font)
            self.label_5.setObjectName("label_5")
            self.label_6 = QtWidgets.QLabel(myfirstgui)
            self.label_6.setGeometry(QtCore.QRect(430, 170, 81, 16))
            font = QtGui.QFont()
            font.setFamily("Century Gothic")
            font.setPointSize(14)
            font.setBold(True)
            font.setWeight(75)
            self.label_6.setFont(font)
            self.label_6.setObjectName("label_6")
            self.label_7 = QtWidgets.QLabel(myfirstgui)
            self.label_7.setGeometry(QtCore.QRect(430, 200, 161, 20))
            font = QtGui.QFont()
            font.setFamily("Verdana")
            font.setPointSize(10)
            self.label_7.setFont(font)
            self.label_7.setObjectName("label_7")
            self.label_8 = QtWidgets.QLabel(myfirstgui)
            self.label_8.setGeometry(QtCore.QRect(30, 10, 291, 31))
            font = QtGui.QFont()
            font.setFamily("Century Gothic")
            font.setPointSize(14)
            font.setBold(True)
            font.setWeight(75)
            self.label_8.setFont(font)
            self.label_8.setObjectName("label_8")
            self.label_9 = QtWidgets.QLabel(myfirstgui)
            self.label_9.setGeometry(QtCore.QRect(30, 50, 651, 31))
            font = QtGui.QFont()
            font.setFamily("Verdana")
            font.setPointSize(10)
            self.label_9.setFont(font)
            self.label_9.setWordWrap(True)
            self.label_9.setObjectName("label_9")
            self.Clear = QtWidgets.QPushButton(myfirstgui)
            self.Clear.setGeometry(QtCore.QRect(751, 680, 79, 26))
            sizePolicy = QtWidgets.QSizePolicy(QtWidgets.QSizePolicy.Expanding, QtWidgets.QSizePolicy.Expanding)
            sizePolicy.setHorizontalStretch(0)
            sizePolicy.setVerticalStretch(0)
            sizePolicy.setHeightForWidth(self.Clear.sizePolicy().hasHeightForWidth())
            self.Clear.setSizePolicy(sizePolicy)
            font = QtGui.QFont()
            font.setPointSize(9)
            self.Clear.setFont(font)
            self.Clear.setObjectName("Clear")
            self.label_10 = QtWidgets.QLabel(myfirstgui)
            self.label_10.setGeometry(QtCore.QRect(32, 260, 191, 20))
            font = QtGui.QFont()
            font.setFamily("Verdana")
            font.setPointSize(10)
            self.label_10.setFont(font)
            self.label_10.setObjectName("label_10")
            self.label_11 = QtWidgets.QLabel(myfirstgui)
            self.label_11.setGeometry(QtCore.QRect(30, 290, 201, 20))
            font = QtGui.QFont()
            font.setFamily("Verdana")
            font.setPointSize(10)
            self.label_11.setFont(font)
            self.label_11.setObjectName("label_11")
            self.label_12 = QtWidgets.QLabel(myfirstgui)
            self.label_12.setGeometry(QtCore.QRect(430, 230, 161, 20))
            font = QtGui.QFont()
            font.setFamily("Verdana")
            font.setPointSize(10)
            self.label_12.setFont(font)
            self.label_12.setObjectName("label_12")
            self.label_19 = QtWidgets.QLabel(myfirstgui)
            self.label_19.setGeometry(QtCore.QRect(430, 260, 191, 20))
            font = QtGui.QFont()
            font.setFamily("Verdana")
            font.setPointSize(10)
            self.label_19.setFont(font)
            self.label_19.setObjectName("label_19")
            self.label_21 = QtWidgets.QLabel(myfirstgui)
            self.label_21.setGeometry(QtCore.QRect(430, 290, 221, 20))
            font = QtGui.QFont()
            font.setFamily("Verdana")
            font.setPointSize(10)
            self.label_21.setFont(font)
            self.label_21.setObjectName("label_21")
            self.calcButton = QtWidgets.QPushButton(myfirstgui)
            self.calcButton.setGeometry(QtCore.QRect(751, 645, 79, 26))
            sizePolicy = QtWidgets.QSizePolicy(QtWidgets.QSizePolicy.Expanding, QtWidgets.QSizePolicy.Expanding)
            sizePolicy.setHorizontalStretch(0)
            sizePolicy.setVerticalStretch(0)
            sizePolicy.setHeightForWidth(self.calcButton.sizePolicy().hasHeightForWidth())
            self.calcButton.setSizePolicy(sizePolicy)
            font = QtGui.QFont()
            font.setPointSize(9)
            self.calcButton.setFont(font)
            self.calcButton.setObjectName("calcButton")
            self.label_27 = QtWidgets.QLabel(myfirstgui)
            self.label_27.setGeometry(QtCore.QRect(400, 420, 361, 331))
            self.label_27.setText("")
            self.label_27.setPixmap(QtGui.QPixmap("3D.png"))
            self.label_27.setScaledContents(True)
            self.label_27.setObjectName("label_27")
            self.label_28 = QtWidgets.QLabel(myfirstgui)
            self.label_28.setGeometry(QtCore.QRect(30, 70, 711, 31))
            font = QtGui.QFont()
            font.setFamily("Verdana")
            font.setPointSize(10)
            self.label_28.setFont(font)
            self.label_28.setObjectName("label_28")
            self.label_29 = QtWidgets.QLabel(myfirstgui)
            self.label_29.setGeometry(QtCore.QRect(30, 110, 721, 31))
            font = QtGui.QFont()
            font.setFamily("Verdana")
            font.setPointSize(10)
            self.label_29.setFont(font)
            self.label_29.setObjectName("label_29")
            self.label_30 = QtWidgets.QLabel(myfirstgui)
            self.label_30.setGeometry(QtCore.QRect(30, 90, 691, 31))
            font = QtGui.QFont()
            font.setFamily("Verdana")
            font.setPointSize(10)
            self.label_30.setFont(font)
            self.label_30.setObjectName("label_30")
            self.verticalLayoutWidget = QtWidgets.QWidget(myfirstgui)
            self.verticalLayoutWidget.setGeometry(QtCore.QRect(270, 190, 160, 131))
            self.verticalLayoutWidget.setObjectName("verticalLayoutWidget")
            self.verticalLayout = QtWidgets.QVBoxLayout(self.verticalLayoutWidget)
            self.verticalLayout.setContentsMargins(0, 0, 0, 0)
            self.verticalLayout.setObjectName("verticalLayout")
            self.label_13 = QtWidgets.QLabel(self.verticalLayoutWidget)
            font = QtGui.QFont()
            font.setFamily("Verdana")
            font.setPointSize(10)
            self.label_13.setFont(font)
            self.label_13.setObjectName("label_13")
            self.verticalLayout.addWidget(self.label_13)
            self.label_14 = QtWidgets.QLabel(self.verticalLayoutWidget)
            font = QtGui.QFont()
            font.setFamily("Verdana")
            font.setPointSize(10)
            self.label_14.setFont(font)
            self.label_14.setObjectName("label_14")
            self.verticalLayout.addWidget(self.label_14)
            self.label_15 = QtWidgets.QLabel(self.verticalLayoutWidget)
            font = QtGui.QFont()
            font.setFamily("Verdana")
            font.setPointSize(10)
            self.label_15.setFont(font)
            self.label_15.setObjectName("label_15")
            self.verticalLayout.addWidget(self.label_15)
            self.label_16 = QtWidgets.QLabel(self.verticalLayoutWidget)
            font = QtGui.QFont()
            font.setFamily("Verdana")
            font.setPointSize(10)
            self.label_16.setFont(font)
            self.label_16.setObjectName("label_16")
            self.verticalLayout.addWidget(self.label_16)
            self.label_24 = QtWidgets.QLabel(self.verticalLayoutWidget)
            self.label_24.setEnabled(True)
            font = QtGui.QFont()
            font.setFamily("Verdana")
            font.setPointSize(10)
            self.label_24.setFont(font)
            self.label_24.setScaledContents(True)
            self.label_24.setObjectName("label_24")
            self.verticalLayout.addWidget(self.label_24)
            self.verticalLayoutWidget_2 = QtWidgets.QWidget(myfirstgui)
            self.verticalLayoutWidget_2.setGeometry(QtCore.QRect(670, 190, 160, 118))
            self.verticalLayoutWidget_2.setObjectName("verticalLayoutWidget_2")
            self.verticalLayout_2 = QtWidgets.QVBoxLayout(self.verticalLayoutWidget_2)
            self.verticalLayout_2.setContentsMargins(0, 0, 0, 0)
            self.verticalLayout_2.setObjectName("verticalLayout_2")
            self.label_17 = QtWidgets.QLabel(self.verticalLayoutWidget_2)
            font = QtGui.QFont()
            font.setFamily("Verdana")
            font.setPointSize(10)
            self.label_17.setFont(font)
            self.label_17.setObjectName("label_17")
            self.verticalLayout_2.addWidget(self.label_17)
            self.label_18 = QtWidgets.QLabel(self.verticalLayoutWidget_2)
            font = QtGui.QFont()
            font.setFamily("Verdana")
            font.setPointSize(9)
            self.label_18.setFont(font)
            self.label_18.setObjectName("label_18")
            self.verticalLayout_2.addWidget(self.label_18)
            self.label_20 = QtWidgets.QLabel(self.verticalLayoutWidget_2)
            font = QtGui.QFont()
            font.setFamily("Verdana")
            font.setPointSize(9)
            self.label_20.setFont(font)
            self.label_20.setObjectName("label_20")
            self.verticalLayout_2.addWidget(self.label_20)
            self.label_22 = QtWidgets.QLabel(self.verticalLayoutWidget_2)
            font = QtGui.QFont()
            font.setFamily("Verdana")
            font.setPointSize(9)
            self.label_22.setFont(font)
            self.label_22.setObjectName("label_22")
            self.verticalLayout_2.addWidget(self.label_22)
            self.output_totalTime = QtWidgets.QTextEdit(myfirstgui)
            self.output_totalTime.setEnabled(True)
            self.output_totalTime.setGeometry(QtCore.QRect(580, 190, 87, 31))
            sizePolicy = QtWidgets.QSizePolicy(QtWidgets.QSizePolicy.Preferred, QtWidgets.QSizePolicy.Expanding)
            sizePolicy.setHorizontalStretch(0)
            sizePolicy.setVerticalStretch(0)
            sizePolicy.setHeightForWidth(self.output_totalTime.sizePolicy().hasHeightForWidth())
            self.output_totalTime.setSizePolicy(sizePolicy)
            self.output_totalTime.setReadOnly(True)
            self.output_totalTime.setObjectName("output_totalTime")
            self.output_concreteVol = QtWidgets.QTextEdit(myfirstgui)
            self.output_concreteVol.setGeometry(QtCore.QRect(580, 220, 87, 31))
            self.output_concreteVol.setReadOnly(True)
            self.output_concreteVol.setObjectName("output_concreteVol")
            self.output_extrusionRate = QtWidgets.QTextEdit(myfirstgui)
            self.output_extrusionRate.setGeometry(QtCore.QRect(580, 250, 87, 31))
            self.output_extrusionRate.setReadOnly(True)
            self.output_extrusionRate.setObjectName("output_extrusionRate")
            self.output_concreteCost = QtWidgets.QTextEdit(myfirstgui)
            self.output_concreteCost.setGeometry(QtCore.QRect(580, 280, 87, 31))
            self.output_concreteCost.setReadOnly(True)
            self.output_concreteCost.setObjectName("output_concreteCost")
            self.input_wallThickness = QtWidgets.QTextEdit(myfirstgui)
            self.input_wallThickness.setGeometry(QtCore.QRect(190, 200, 70, 31))
            sizePolicy = QtWidgets.QSizePolicy(QtWidgets.QSizePolicy.Expanding, QtWidgets.QSizePolicy.Expanding)
            sizePolicy.setHorizontalStretch(0)
            sizePolicy.setVerticalStretch(0)
            sizePolicy.setHeightForWidth(self.input_wallThickness.sizePolicy().hasHeightForWidth())
            self.input_wallThickness.setSizePolicy(sizePolicy)
            self.input_wallThickness.setMinimumSize(QtCore.QSize(70, 30))
            font = QtGui.QFont()
            font.setPointSize(9)
            self.input_wallThickness.setFont(font)
            self.input_wallThickness.setObjectName("input_wallThickness")
            self.input_wallHeight = QtWidgets.QTextEdit(myfirstgui)
            self.input_wallHeight.setGeometry(QtCore.QRect(190, 230, 71, 31))
            self.input_wallHeight.setMinimumSize(QtCore.QSize(70, 30))
            font = QtGui.QFont()
            font.setPointSize(9)
            self.input_wallHeight.setFont(font)
            self.input_wallHeight.setObjectName("input_wallHeight")
            self.input_layerHeight = QtWidgets.QTextEdit(myfirstgui)
            self.input_layerHeight.setGeometry(QtCore.QRect(190, 260, 71, 31))
            self.input_layerHeight.setObjectName("input_layerHeight")
            self.input_timeGap = QtWidgets.QTextEdit(myfirstgui)
            self.input_timeGap.setGeometry(QtCore.QRect(190, 290, 71, 31))
            self.input_timeGap.setObjectName("input_timeGap")
    
            self.retranslateUi(myfirstgui)
            self.buttonBox.accepted.connect(myfirstgui.accept)
            self.buttonBox.rejected.connect(myfirstgui.reject)
            self.Clear.clicked.connect(self.input_wallHeight.clear)
            self.Clear.clicked.connect(self.input_wallThickness.clear)
            self.Clear.clicked.connect(self.input_layerHeight.clear)
            self.Clear.clicked.connect(self.input_timeGap.clear)
            self.Clear.clicked.connect(self.output_totalTime.clear)
            self.Clear.clicked.connect(self.output_extrusionRate.clear)
            self.Clear.clicked.connect(self.output_concreteVol.clear)
            self.Clear.clicked.connect(self.output_concreteCost.clear)
            QtCore.QMetaObject.connectSlotsByName(myfirstgui)
    
        def retranslateUi(self, myfirstgui):
            _translate = QtCore.QCoreApplication.translate
            myfirstgui.setWindowTitle(_translate("myfirstgui", "ABCD"))
            self.label_3.setText(_translate("myfirstgui", "INPUTS"))
            self.label_4.setText(_translate("myfirstgui", "Parameter A"))
            self.label_5.setText(_translate("myfirstgui", "Parameter B"))
            self.label_6.setText(_translate("myfirstgui", "OUTPUTS"))
            self.label_7.setText(_translate("myfirstgui", "Output 1"))
            self.label_8.setText(_translate("myfirstgui", "Simplifying Assumptions"))
            self.label_9.setText(_translate("myfirstgui", "► Symplifying assumption symplifying assumption symplifying assumption symplifying assumption                    "))
            self.Clear.setText(_translate("myfirstgui", "Clear"))
            self.label_10.setText(_translate("myfirstgui", "Parameter C"))
            self.label_11.setText(_translate("myfirstgui", "Parameter D"))
            self.label_12.setText(_translate("myfirstgui", "Output 2"))
            self.label_19.setText(_translate("myfirstgui", "Output 3"))
            self.label_21.setText(_translate("myfirstgui", "Output 4"))
            self.calcButton.setText(_translate("myfirstgui", "Calculate"))
            self.label_28.setText(_translate("myfirstgui", "► Symplifying assumption symplifying assumption symplifying assumption symplifying assumption                    "))
            self.label_29.setText(_translate("myfirstgui", "► Symplifying assumption symplifying assumption symplifying assumption symplifying assumption                    "))
            self.label_30.setText(_translate("myfirstgui", "► Symplifying assumption symplifying assumption symplifying assumption symplifying assumption                    "))
            self.label_13.setText(_translate("myfirstgui", "in"))
            self.label_14.setText(_translate("myfirstgui", "in"))
            self.label_15.setText(_translate("myfirstgui", "in"))
            self.label_16.setText(_translate("myfirstgui", "in"))
            self.label_24.setText(_translate("myfirstgui", "in"))
            self.label_17.setText(_translate("myfirstgui", "hr"))
            self.label_18.setText(_translate("myfirstgui", "<html><head/><body><p>hr</p></body></html>"))
            self.label_20.setText(_translate("myfirstgui", "<html><head/><body><p>hr</p></body></html>"))
            self.label_22.setText(_translate("myfirstgui", "<html><head/><body><p>hr</p></body></html>"))
    
    
    if __name__ == "__main__":
        import sys
        app = QtWidgets.QApplication(sys.argv)
        myfirstgui = QtWidgets.QDialog()
        ui = Ui_myfirstgui()
        ui.setupUi(myfirstgui)
        myfirstgui.show()
        sys.exit(app.exec_())
    
    
    

    program.py:

    import sys
    import encodings
    import PyQt5
    from PyQt5 import QtCore, QtGui, QtWidgets
    from firstF import Ui_myfirstgui
    
    
    class MyFirstGuiProgram(Ui_myfirstgui):
        def __init__(self, dialog):
            Ui_myfirstgui.__init__(self)
            self.setupUi(dialog)
            # Connect "calcButton" button with a custom function (CalculateTime)
            self.calcButton.clicked.connect(self.calculateTime)
    
    
        def calculateTime(self):
            #I define the relations and functions here
    
    
    if __name__ == '__main__':
        app = QtWidgets.QApplication(sys.argv)
        dialog = QtWidgets.QDialog()
    
        program = MyFirstGuiProgram(dialog)
    
        dialog.show()
        sys.exit(app.exec_())
    

    So the code which you kindly suggested should be included in firstF.py, right? If yes, could you please give me a hint about which part should be modified?
    Thanks again for all your help and I apologize again if this trivial, I am just a beginner :)


  • Moderators

    @Akzmn Instead of positioning/sizing the GUI elements manually you should really consider using layouts. Layouts are usually used for that. See http://doc.qt.io/qt-5.9/layout.html



  • This post is deleted!

Log in to reply
 

Looks like your connection to Qt Forum was lost, please wait while we try to reconnect.