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

Akzmn

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.

? Offline

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

Akzmn

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

6thC

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.

yuvaram

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.

Pradeep Kumar

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,

Akzmn

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 :)

jsulm

@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

Akzmn

This post is deleted!