Qt Designer and GeoMop

Overview

Qt Designer is a graphical tool to compose widgets and their properties interactively. The C++ or Python code can be generated from the UI file (a XML used to store the widget by QtDesigner). Generated file can be used by program logic code without edititng it directly. This allows further changes of UI files without braking the whole program.

For the first steps just see the tutorial: on YouTube

Getting started (on Linux)

The Qt Designer (for Qt5) is part of the package qttools5-dev-tools, so to install on Debian based distros you can use:

sudo apt-get install qttools5-dev-tools

However I have experienced kind of conflict with qt4, so the command 'designer' at '/usr/bin/designer' is actually link to the nonexistent '/usr/lib/x86_64-linux-gnu/qt4/bin/designer'. So I had to set it to proper path:

sudo rm /usr/bin/designer 
sudo ln -s /usr/lib/x86_64-linux-gnu/qt5/bin/designer /usr/bin/designer

In order to follow the video tutorial you also need the 'pyuic' compiler to generate python code from the UI files. This comes with package 'pyqt5-dev-tools'. So you should also install:

sudo apt-get install pyqt5-dev-tools

Finally I assume you have 'python3' and 'pyqt5' installed.

Qt Designer - features

Basic creation of widgets is pretty intuitive especially if you search the documentation for provided widget objects. However there are few tools that are not obvious at the beginning.

• Widget box placed on the left side provides the palette of available widget items that can be used by dragging them to the created widgets in the center workplace.
• Object inspector on the top right provides thee hierarchy of the widgets that are part of the current main widget in the work area. I found it useful to drag widgets into Layouts in the tree as it is quite difficult to this at the workplace.
• Property Editor at the middle of the right panel. Useful to edit detailed properties of the individual widgets in the hierarchy. Properties derived from different parent classes are distinguished by different color.
• Signal/Slot Editor one of the tabs at the bottom. Allow to connect signals and slots of the widgets. See also graphical tool 'Edit Signals/Slots' at the toolbar. Can be useful to connects various change signals to enable/disable/update slots of related widgets.
• Action Editor one of the tabs at the bottom. Allows you to create the QAction objects (with names icons, tooltips, shortcuts). Actions then can be placed in the menu or in the toolbar. See tutorial
• Resource Browser one of the tabs at the bottom. You can create one or more resource files with directory like structure within and place inside various graphical resources. In particular icons, these can than be simply used in Actions in Buttons and other places.

Editing modes

Qt Designer provides four editing modes that can be selected in the toolbar.

• Edit Widgets basic widget editing.
• Edit Signals/Slot to interactively connect signals/slots between widgets.
• Edit Buddies to relate labels to their input items. More generally if you click one object the focus will be transferred to the target object.
• Edit Tab Order in which order the Tab will switch between input elements of a dialog.

Other useful videos

Layouts, Signals, Buddies, Tab order - this is tutorial for QCreator and C++ but useful to understand concept anyway. Series of tutorials - not so good but at least someone who already did something serious.

Compact integration into an app

UI file can be loaded directly into Python source.

If the intermediate file containing class Ui_ExampleDialog, then there is possibility of loading ui directly into a Qt base class:

from PyQt5 import uic
...
class ExampleDialog(QDialog):
    def __init__(parent=None):
        super(ExampleDialog, self).__init__(parent)
        uic.loadUi("example_dialog.ui", self)    #user interface is created in this class from specified ui file
        self.ok_pushButton = self.ok_pushButton
        self.ok_pushButtonn.clicked.connect(self.ok_click_handle())
    def ok_click_handle(self):
         pass

Individual widgets created in QtDesigner should be named using the Property Editor. These names can be used to manipulate them from the code. To this end named widgets has to be documented after uic.loadUi or rather explicitly set to itself (see line just after loadUi)

Compilation by pyuic5 compiler

pyuic5 example_dialog.ui -x -o example_dialog_ui.py

produces a file like:

...
# Created by: PyQt5 UI code generator 5.11.2
# WARNING! All changes made in this file will be lost!

from PyQt5 import QtCore, QtGui, QtWidgets

class Ui_ExampleDialog(object):
    def setupUi(self, exampleDialog):
        exampleDialog.setObjectName("ExampleDialog")
        ...
        self.verticalLayout_2 = QtWidgets.QVBoxLayout(exampleDialog)
        ...
        self.ok_pushButton = QtWidgets.QPushButton(exampleDialog)
        ...

This file should not be edited manually in order to allow further updates form the origin UI file. Proper usage can be to make a class responsible for the dialog logic and use the UI class in it.

class ExampleDialog():
    def __init__():
        self.ui = Ui_ExampleDialog()
        example_dialog = QtWidgets.QDialog()        
        ui.setupUi(example_dialog)
        ui.ok_pushButon.clicked.connect(self.ok_click_handle())
    def ok_click_handle(self):
         pass

Resources compilation

After a resource file *.qrc is created in Qt Designer we must call the resource compiler to be able to import a resource module