GUI Application development using Qt4 Designer and PyQt in Raspbian for Raspberry Pi

In this tutorial we will be learning installing of PyQt for Python3 and Qt4 Designer tool. With Qt4 Designer one can create cross-platform GUI application with which you can create stunning GUI controls. Qt4 designer automatically generate codes in C++, and is quite native with C++ language, but for those who are more close to Python can integrate the QT4 Designer generated .ui files in their Python code by using PyQt.

So, we will first start with installation of QT4 Designer and PyQt in our Raspbian OS running on Raspberry Pi board.

Installation of PyQt4

It’s very simple just open your terminal and key-in the below sudo command for PyQt4 installation. PyQt4 is very light and will take very less time depending on your network connections.

sudo apt-get install python3-pyqt4

While execution for above command it will ask for Y/N to continue just type Y and press enter, this will install PyQt4 integrated with your installed Python3 in your Raspbian system running on Raspberry Pi.

Installation of Qt4 Designer

Key-in the following sudo code in the terminal to install the Qt4 designer.

sudo apt-get install qt4-designer

While execution for above command it will ask for Y/N to continue just type Y and press enter. Once installed the Qt4 Designer application can be accessed from the Programming dropdown button on the toolbar.

Designing a simple GUI Application in Qt4 Designer in Raspberry Pi board

After complete installation of both PyQt4 and Qt4 Designer, in this tutorial we will be giving you the steps of how to design a GUI application in Qt4 Designer and controlling the actions in GUI using Python codes with the help of PyQt4 for Python3.

Here we will be designing simple Contact Us form in Qt4 Designer as shown below in the picture.


   Designing the GUI in Qt4 Designer

The first step in designing the GUI is to open your Qt4 designer through the toolbar in Raspbian as shown below:


Navigate to Menu > Programming > Qt 4 Designer and this will open the Qt4 GUI tool.

Now select the Widget option and click on create to create the new GUI application. As we are going to design a nice ContactUs application we will be using following widgets in our GUI design:

  1. Group Box
  2. Lable
  3. QPlainTextEdit
  4. PushButton

These widgets can be selected from Widget Box present on the left hand side of the Qt4 Designer as shown below. You only have to drag and drop these Widgets as per your design file.


I have adjusted fonts and sizes and stylesheets of many of the above mentioned widgets so that it looks some stylish. But you need not have to worry at this stage as this is only the test application GUI for you. We will be explaining in depth of how to beautify your Application in Qt4 Designer in later tutorials. For the time being just drag and drop the default widgets in the main application. Once done the ContactUs form will look as below.


The style of the Widgets can easily be adjusted by tweaking in with the Property Editor placed by default on the right hand side of the Qt4 Designer as shown below. You can search and can change any attributes in the Property Editor as per your choice.


Once above steps are followed and implemented save the file naming it as ContactUs.ui. The Qt4 Designer always outputs the file in .ui format and this is readable in any of the text editors like notepad or notepad++ etc.

We have also inserted a Signal/Slot method in Qt4 Designer for “Close App” button in GUI to close the complete App. The Signal/Slot method is the easiest method in Qt4 based GUI application to insert some actions in GUI. To initiate App termination on clicking the Close App button, just open the ContactUs.ui file in Qt4 Designer and click on “Edit Signals/Slots Button” as shown in the figure below:

Signal & Slots-01

Once the “Edit Signals/Slots” button is clicked, when you will move the cursor in and around the Widgets on your design and it will highlight. Just Click on the “Close APP” button and drag it on to the blank space in your design once it’s done this will open up the setting window allowing you to specify the actions which is to be initiated once the pushbutton is clicked. Select “clicked()” from the Signal end i.e. the pushbutton and “close()” from the slot end as shown below.

Signal & Slots-02


Signal & Slots-03

Signal & Slots-04

Once done just save the ContactUs.ui file.

The complete code for ContactUs.ui is as below:


Now the next step is to link the .ui file generated by the Qt4 Designer to the Python program in Raspberry Pi.

Open up the terminal of your Raspbian running OS and enter sudo -i to enter into your root access. Next type sudo idle3 to open the python environment for coding.

Key in the following code for linking the .ui files with the python code.

Code Explanations:

The line ” uic.loadUi(‘ContactUs.ui’, self) ” in the above code loads the externally created ContactUs.ui file using Qt4 designer. One can change the GUI files and then can link the same to the python program for actions on widgets using the above python code.

Rest of the code lines in the code is useful to call the QtGui and uic modules from the PyQt for easy rendering of the widgets so do not tweak other lines of codes as this will make the program unresponsive.

Once the program is copies into the idle3 IDE of the Python3 just save and run the program using RUN > RUN MODULE in the idle3. Make sure to save the save the .py and .ui in the same directory during program execution. Once everything goes fine this will opens up the GUI with which you have created using Qt4 Designer and then click on “Close APP” button to check if it’s working on not.

For any other clarification on this tutorial your are free to contact me by leaving in the comments below. I will try to short out your most of the queries.

Tags:, ,

Add a Comment

Your email address will not be published. Required fields are marked *