Python GUI layout off between different OS

[shift838]

I am working on a program to call a GUI I designed in PyQt5 Designer.

The gui looks exactly as I designed it in Windows 10, but on Linux or Mac the design is off. Like the buttons are moved, the textboxes are out of the groupboxes etc. Is there something I need to do to get it to be fixed for all OS types?

Just basic code to call the .ui file for now. see code below and screenshots.

Any help is appreciated...

           

import os
import os.path
import sys
import subprocess
import serial.tools.list_ports
import xml.etree.ElementTree as ET
import platform

from PyQt5 import QtCore, QtGui, QtWidgets, QtSerialPort, uic
from PyQt5.QtWidgets import QFileDialog, QMessageBox
from os import path

LOCAL_DIR = os.path.dirname(os.path.realpath(__file__)) + "/"


class Main(QtWidgets.QMainWindow):

    def __init__(self):

        super().__init__()

        self.ui = uic.loadUi(LOCAL_DIR + "ooeygui.ui", self)

        self.show()

    def _getosplatform(self):
        global osplat, dsep
        osplat = platform.system()
        if osplat == "Windows":
            dsep = "/"
        if osplat == "Linux":
            dsep = "/"
        if osplat == "Darwin":
            dsep = "/"
            osplat = "OS X"

        print(osplat)


if __name__ == '__main__':
    app = QtWidgets.QApplication([])
    gui = Main()
    gui._getosplatform()
    gui.show()
    sys.exit(app.exec_())

[Larz60+]

There just happens to be a book on sale that might show how to keep the look consistent across platforms

title: 'Qt5 Python GUI Programming Cookbook'

link is here: https://www.packtpub.com/application-dev...g-cookbook
Price $5.00 (while on sale)

Quote from book description:

Over 60 recipes to help you design interactive, smart, and cross-platform GUI applications

[Axel_Erfurt]

maybe you can use stylesheets

[shift838]

maybe you can use stylesheets

It's not the formatting of the widget, but the placement of the control on the page that is off. I thought stylesheets was strictly for formatting of the gui control like font, color, etc.

[Axel_Erfurt]

Which layout does qtdesigner use?.

QGridLayout, QFormLayout, QVBoxLayout or simple setGeometry() ?

Qt5 Layout Management

this is a basic layout from the Qt5 Examples, how does it look in your different OS ?

#############################################################################
##
## Copyright (C) 2013 Riverbank Computing Limited.
## Copyright (C) 2010 Nokia Corporation and/or its subsidiary(-ies).
## All rights reserved.
##
## This file is part of the examples of PyQt.
##
## $QT_BEGIN_LICENSE:BSD$
## You may use this file under the terms of the BSD license as follows:
##
## "Redistribution and use in source and binary forms, with or without
## modification, are permitted provided that the following conditions are
## met:
##   * Redistributions of source code must retain the above copyright
##     notice, this list of conditions and the following disclaimer.
##   * Redistributions in binary form must reproduce the above copyright
##     notice, this list of conditions and the following disclaimer in
##     the documentation and/or other materials provided with the
##     distribution.
##   * Neither the name of Nokia Corporation and its Subsidiary(-ies) nor
##     the names of its contributors may be used to endorse or promote
##     products derived from this software without specific prior written
##     permission.
##
## THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS
## "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT
## LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR
## A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT
## OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL,
## SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT
## LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE,
## DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY
## THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
## (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
## OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE."
## $QT_END_LICENSE$
##
#############################################################################


from PyQt5.QtWidgets import (QApplication, QComboBox, QDialog,
        QDialogButtonBox, QFormLayout, QGridLayout, QGroupBox, QHBoxLayout,
        QLabel, QLineEdit, QMenu, QMenuBar, QPushButton, QSpinBox, QTextEdit,
        QVBoxLayout)


class Dialog(QDialog):
    NumGridRows = 3
    NumButtons = 4

    def __init__(self):
        super(Dialog, self).__init__()

        self.createMenu()
        self.createHorizontalGroupBox()
        self.createGridGroupBox()
        self.createFormGroupBox()

        bigEditor = QTextEdit()
        bigEditor.setPlainText("This widget takes up all the remaining space "
                "in the top-level layout.")

        buttonBox = QDialogButtonBox(QDialogButtonBox.Ok | QDialogButtonBox.Cancel)

        buttonBox.accepted.connect(self.accept)
        buttonBox.rejected.connect(self.reject)

        mainLayout = QVBoxLayout()
        mainLayout.setMenuBar(self.menuBar)
        mainLayout.addWidget(self.horizontalGroupBox)
        mainLayout.addWidget(self.gridGroupBox)
        mainLayout.addWidget(self.formGroupBox)
        mainLayout.addWidget(bigEditor)
        mainLayout.addWidget(buttonBox)
        self.setLayout(mainLayout)

        self.setWindowTitle("Basic Layouts")

    def createMenu(self):
        self.menuBar = QMenuBar()

        self.fileMenu = QMenu("&File", self)
        self.exitAction = self.fileMenu.addAction("E&xit")
        self.menuBar.addMenu(self.fileMenu)

        self.exitAction.triggered.connect(self.accept)

    def createHorizontalGroupBox(self):
        self.horizontalGroupBox = QGroupBox("Horizontal layout")
        layout = QHBoxLayout()

        for i in range(Dialog.NumButtons):
            button = QPushButton("Button %d" % (i + 1))
            layout.addWidget(button)

        self.horizontalGroupBox.setLayout(layout)

    def createGridGroupBox(self):
        self.gridGroupBox = QGroupBox("Grid layout")
        layout = QGridLayout()

        for i in range(Dialog.NumGridRows):
            label = QLabel("Line %d:" % (i + 1))
            lineEdit = QLineEdit()
            layout.addWidget(label, i + 1, 0)
            layout.addWidget(lineEdit, i + 1, 1)

        self.smallEditor = QTextEdit()
        self.smallEditor.setPlainText("This widget takes up about two thirds "
                "of the grid layout.")

        layout.addWidget(self.smallEditor, 0, 2, 4, 1)

        layout.setColumnStretch(1, 10)
        layout.setColumnStretch(2, 20)
        self.gridGroupBox.setLayout(layout)

    def createFormGroupBox(self):
        self.formGroupBox = QGroupBox("Form layout")
        layout = QFormLayout()
        layout.addRow(QLabel("Line 1:"), QLineEdit())
        layout.addRow(QLabel("Line 2, long text:"), QComboBox())
        layout.addRow(QLabel("Line 3:"), QSpinBox())
        self.formGroupBox.setLayout(layout)


if __name__ == '__main__':

    import sys

    app = QApplication(sys.argv)
    dialog = Dialog()
    sys.exit(dialog.exec_())

[shift838]

Which layout does qtdesigner use?.

QGridLayout, QFormLayout, QVBoxLayout or simple setGeometry() ?

Qt5 Layout Management

From what I can tell QTDesigner uses the standard Geometry.

I know certain aspects of the GUI will look different based on OS like buttons etc. but the placement of the widgets on the form should be the same I would think.

Also, the example code you showed I have tried on Windows 10, Linux Ubuntu 18.04 and OSX and the placements of the widgets between OS' are the same, so that leads me to think it is something in the UI form creation based on the OS it is being created on.

What do you think ?