Wednesday, 31 July 2019

Create a Basic Graphical User Interface (GUI)


Launch PyQt5Designer from Terminal in PyCharm. Create a new file 'appGUI(filename).ui'. It looks like as below:


Now, I create a basic graphical user interface as a sample GUI.

  1. Drag a Label, for the title of the app, from Widget Box ==> Display Widgets ==> Label and drop it to the MainWindow. Similarly, drag and drop another Label for caption 'Enter Text' below the title label.
  2. We need an Input box, for text input. Drag Line Edit from Widget Box ==> Input Widgets ==> Line Edit and drop it next to cation 'Enter Text'.
  3. Lastly, a button added to the MainWindow. Drag a Push Button from Widget Box ==> Buttons ==> Push Button and drop it to below the Line Edit.
Starting from the title of the graphical user interface, now, we set the title text, customize its size and style. Double click on the first Label to edit text, and enter 'Application Graphical User Interface' text. Then click on the title, and set properties in the Property Editor. First of all, set the objectName value as 'gui_title' from QObject section as illustrated by the green arrow on top in the figure below. Similarly, we set the font from QWidget as shown in the lower green arrow. I set Font size from QWidget ==> font section, known as Point Size in Qt, to 14 and checked the CheckBox next to Bold and pressed the enter key.


In the case of the second label, I set the 'Enter Text' caption by double-clicking this label. The objectName of this label is the same as set by default. 

Similarly, for the push button, I entered 'Click Me' caption of the button. The objectName of this button is 'clickButton'. 

For instance, the objectName of all the widgets used to access these controls in the Python file. Therefore, the objectNames should be meaningful for every widget. 

This is the basic graphical user interface with few widgets. Next step is how to access these in the Python file? and perform some action on button click. 

Basics of Qt Designer

Qt Designer is a cross-platform integrated development environment (IDE) and used as a framework for the design and development of GUI application. It is used to create GUI of the C++, Python, JavaScript languages. Qt Designer Tool contains three main components:
  1. MainWindow 
  2. Widget Box - (Layouts, Buttons, Input Widgets...)
  3. Property Editor - (Property list of widgets)

MainWindow
It contains all the widgets, layouts, etc. of the application. 

Widget Box
It contains GUI controls:
Layouts (vertical, horizontal, grid and form)
Buttons (Push Button, Radio Button, CheckBox...)
Input Widgets (Combo Box, Line Edit, Date Edit...)
Display Widgets (Labels, Progress Bar...)
Each control name has a prefix Q e.g. QLabel, QPushButton, etc.

Property Editor
It contains properties of the main window and widgets e.g. objectName, geometry (height, width), font (family, point size, bold, italic).

*GUI file is created with the extension '.ui' following the filename.

Tuesday, 30 July 2019

Setting up PyQt5 and PyQt5Designer


Once you downloaded and installed the PyCharm, the next step is to launch it from the Start menu. The Pycharm dialog will be opened like:



Click on Create New Project, set the project location (for this, you can make a new folder for Pycharm projects) and Enter the project name. Next, you need to set up the virtual environment of your project. The most convenient method to deal with various dependencies is Virtualenv in Python. The virtual environment is simply a local directory on your system which consists of all the libraries and dependencies for a particular project. You can set up a virtual environment of your project as under:



Click on Create button, it takes little time for basic configurations and then opens the main screen of PyCharm.



First of all, click on the Terminal from the bottom toolbar. Just type the following commands to make sure PyQt5 and PyQt5-Tools are set up properly. If not already installed then it installs it now.
  1. pip install PyQt5
  2. pip install PyQt5-Tools

In the above screen, it states that PyQt5 and its Tools are already installed. On the other hand, if not already installed then the same commands will install the necessary tools. 

Now, we can go ahead and start creating a GUI for our application. We create a GUI using Qt Designer which is installed under PyQt5-Tools. We can launch by typing PyQt5Designer command in the terminal. Once you typed the aforesaid command, it launches the Qt Designer application as shown below:



Click on Create button and it opens the main form as shown below:



You only need all this setup for the first time only. That's all about setting up. Now, you are ready to create GUI of your app and then use this in Python.












Saturday, 27 July 2019

Guidelines for Selecting and Configuring Tools for GUI App

Several code editors and IDEs are available for developing Python application e.g. IdleSpyderPyDevWingPyCharm, etc. Being a mobile app developer since the past 7+ years, I prefer IDE developed by Jet Brains. Among the aforesaid IDEs for Python language, PyCharm is the one developed by Jet Brains. Throughout this blog, I'll develop applications using PyCharm. In the previous post, it is said that Python does not provide GUI controls, instead, it supports open-source widget toolkit like QT.

Installing PyCharm 
By using PyCharm, you can find all the Python tools in one place. It provides code inspections, code completion, efficient error highlighting, rich navigation and automated code refactoring. PyCharm can be downloaded from this link. I would suggest Community Edition which is a lightweight and free version.

Installing Python
Pycharm installation isn't sufficient, you need to download Python Interpreter first. The latest Python release is available and can be downloaded here. In our case, the latest Python version is 3.7.4 which is available for both 32-bits and 64-bits system. Download the executable installer according to your system. I chose Windows x86-64 executable installer from Python 3.7.4rc1 - June 18, 2019, from the aforesaid link. After download, run the executable Windows installer. 

Installing PyQt
Once you installed the PyCharm Community Edition, next you need to install PyQt5 and PyQt5Designer for the GUI framework. In python, there are two ways to install dependencies i.e. from Terminal - by entering the command and second way is from File => Settings=>Project Interpreter. You can choose any of these which is convenient for you. I use both of these alternatively for adding dependencies OR installing required packages. From File => Settings=>Project Interpreter option Enter PyQt5 in the top search bar, it will list as shown below:



Select the PyQt5 package and click on Install Package. It takes some time for the installation. PyQt5 reference guide is available here.

Installing PyQt5Designer | PyQt-Tools 
PyQt5 provides Python bindings for the Qt cross-platform and application toolkit. Finally, you need to install PyQt5Designer Tool, which contains all the GUI controls required to create any GUI application. Go to File => Settings=>Project Interpreter, then click on + button on right side of the window. Enter PyQt5Designer to search and install:


Click on Install Package and it will be installed. Then click on OK button and window will be closed. Reference guide for the designer is available here.

In case, PyQt5Designer not installed, then try installing PyQt-Tools. It is more convenient to install PyQt-Tools without any error. 

That's all you need so far, for the initial setup for Python GUI application. 

Friday, 26 July 2019

Basics of Python Language


Hi Folks,

In the recent past few years, Python got tremendous attention in the programming field. According to the Statistics-Times, Python is considered as the top programming language in May 2019.


Since the past 5 years, Python growth was amazing as per statistics provided on Stack Overflow by the most asked/viewed questions.


Unlike Java, .NET and other programming languages, Python does not provide Graphical User Interface (GUI) controls directly i.e. Forms, Buttons, Labels, etc. which a user can drag and drop to develop a desktop application. Python is widely used for Scripting, Data Science, Web development, etc. Thus, learning python and start developing any kind of application(s) is the need of the hour.
In this blog, I'll particularly focus on developing a GUI application in Python. Python supports 3rd-party Open-source Widget Toolkits like QT, GUI Toolkit like Tkinter, etc. for developing GUI applications. To support various cross-platform applications for various operating systems including Microsoft (MS) Windows, Linux, Macintosh, etc. QT is one of the first choices. PyQt5 provides a widespread set of Python bindings for the Qt version 5. I selected PyQt5, therefore, this blog guides about GUI application development in Python.