QtDesigner

All posts tagged QtDesigner

Python GUI with PySide2 and QtCreator

Posted by Kulani Mahadewa on March 7, 2020
Posted in: Kali Linux. Tagged: , , , , , , , , , , , , , , , , , , , , , , , , , , , . Leave a comment

Hi, In this post I explain how to create a GUI application for Python using Qt. Qt is a cross-platform software development framework.  It provides PySide to support creating GUI applications for Python. There is also PyQt another python package supporting the same functionality. This post explains the differences between the two packages. They are basically alternatives. So, in this post I’m using PySide2 the latest version of PySide supporting the Qt 5.14 version.  In brief, you can first generate the layout using QtCreator tool. Then export that into your Python application for adding functionalities to the UI components.

Step 1: Install QtCreator/QtDesigner

There are two version of the QtCreator is available. You can use the open source version.

  • Prerequisite:
sudo apt-get install build-essential libgl1-mesa-dev
  • Download the installer:  from https://www.qt.io/offline-installers. I installed qt-opensource-linux-x64-5.14.1.run.
  • Installing: The installer can be directly executed on linux machine (I’m using Kali Linux 2020)  when  provide access to execute. It will prompt to create a user account through the installer. Then verify your email and continue. Once installed the application can be find through the application searching as qt.

qt setup

Step 2: Create an Qt Application using the QtCreator

  • Select Qt Widget application -> Provide the name and location -> select qtmake as the build system -> Next, you can edit class name information -> Next, select Kit Selection as ‘Desktop’ -> Finish

Screenshot_2020-03-08_01-57-38

  • When you install for the first time there won’t be any kits available.

Hence, you need to do the following steps first.

    • Install qt5-defaults
sudo apt-get install qt5-default
    • At the QtCreator Select Tools -> Options -> at Kits goto Qt Versions -> Maual -> Add -> give qmake file of qt5 location (usr/lib/x86_64-linux-gnu/qt5/bin/qmake)

Screenshot_2020-03-08_02-10-12

qt setup versoin

    • Then at the Kits window –> Select Desktop -> Update the Qt Version to the added Qt version.
    • Now, you can create the Qt Widget application as described above.
  • When you created the Qt application you can use the ‘Design’ View to add the layouts and the components as desired.

Screenshot_2020-03-08_02-20-47

Step 3: Export your designed mainWindow.ui as mainWindow.py

The mainWindow.ui is an xml file.

Screenshot_2020-03-08_02-21-00

You can covert it to a python file as folllows.

pip3 install PySide2
pyside2-uic mainwindow.ui -o mainWindow.py

The generated mainWindow.py:

Screenshot_2020-03-08_02-31-30

Step 4: Create Python GUI Application

Now, you can create a python project including the mainWindow.py, and another python file app.py to refer the components in the mainWindow.py and provide functionalities.

you import the Ui_mainWindow from the ainWindow.py  in app.py

app.py:

import sys
from PySide2.QtGui import *
from PySide2.QtCore import *
from PySide2.QtWidgets import *
from path.to.mainWindow import Ui_mainWindow

class MainWindow(QMainWindow, Ui_mainWindow):
def __init__(self):
super(MainWindow, self).__init__()
self.setupUi(self)
self.assignWidgets()
self.show()

def assignWidgets(self):
self.goButton.clicked.connect(self.goPushed)

def goPushed(self):
self.goText.append("Test Go!")

if __name__ == '__main__':
app = QApplication(sys.argv)
mainWin = MainWindow()
ret = app.exec_()
sys.exit( ret )

You can refer to following tutorials for more information

Cheers ! 🙂

 

Advertisement