Setting up Python Environment-pyQt

In order to build small desktop based application, I need to have a framework to build UI.

Qt is a C++ based framework of libraries and tools that enables development of cross-platform applications and devices. There are both commercial and open source versions of Qt available.

Here is the link to download the same – https://info.qt.io/download-qt-for-application-development

In my case (on Linux Mint), I initially downloaded open source version of online installer from http://download.qt.io/official_releases/online_installers/qt-unified-linux-x64-online.run and then custom installed Qt Designer tool

Found the designer executable file in /usr/lib/x86_64-linux-gnu/qt5/bin folder

Created a shortcut in Mint Menu by creating a QtDesigner.desktop file in /usr/share/applications

[Desktop Entry]
Name=QtDesigner
GenericName=QtDesigner
Exec=/your path/Qt/5.7/gcc_64/bin/designer
Icon=/your path/Qt/Examples/Qt-5.7/widgets/widgets/icons/images/designer.png
Type=Application
Categories=Development
Name[en_IN]=QtDesigner

Screenshot from 2017-05-21 11-53-56Screenshot from 2017-05-21 12-13-12

A sample screen designed above can be saved as a .ui file

MyFirstQtApp.ui
<?xml version="1.0" encoding="UTF-8"?>
<ui version="4.0">
 <class>Form</class>
 <widget class="QWidget" name="Form">
 <property name="geometry">
 <rect>
 <x>0</x>
 <y>0</y>
 <width>603</width>
 <height>604</height>
 </rect>
 </property>
 <property name="windowTitle">
 <string>Person</string>
 </property>
 <widget class="QLabel" name="MyFirstQtProject">
 <property name="geometry">
 <rect>
 <x>250</x>
 <y>30</y>
 <width>101</width>
 <height>20</height>
 </rect>
 </property>
 <property name="text">
 <string>Person Details</string>
 </property>
 </widget>
 <widget class="QGroupBox" name="groupBox">
 <property name="geometry">
 <rect>
 <x>80</x>
 <y>60</y>
 <width>431</width>
 <height>141</height>
 </rect>
 </property>
 <property name="autoFillBackground">
 <bool>true</bool>
 </property>
 <property name="title">
 <string>Person</string>
 </property>
 <property name="flat">
 <bool>false</bool>
 </property>
 <widget class="QLabel" name="MyFirstQtProject_4">
 <property name="geometry">
 <rect>
 <x>0</x>
 <y>110</y>
 <width>101</width>
 <height>20</height>
 </rect>
 </property>
 <property name="text">
 <string>Last Name</string>
 </property>
 </widget>
 <widget class="QLabel" name="MyFirstQtProject_3">
 <property name="geometry">
 <rect>
 <x>0</x>
 <y>70</y>
 <width>101</width>
 <height>20</height>
 </rect>
 </property>
 <property name="text">
 <string>Middle Name</string>
 </property>
 </widget>
 <widget class="QLabel" name="MyFirstQtProject_2">
 <property name="geometry">
 <rect>
 <x>0</x>
 <y>30</y>
 <width>101</width>
 <height>20</height>
 </rect>
 </property>
 <property name="text">
 <string>First Name</string>
 </property>
 </widget>
 <widget class="QTextEdit" name="textEdit_3">
 <property name="geometry">
 <rect>
 <x>90</x>
 <y>20</y>
 <width>211</width>
 <height>31</height>
 </rect>
 </property>
 </widget>
 <widget class="QTextEdit" name="textEdit_4">
 <property name="geometry">
 <rect>
 <x>90</x>
 <y>60</y>
 <width>211</width>
 <height>31</height>
 </rect>
 </property>
 </widget>
 <widget class="QTextEdit" name="textEdit_5">
 <property name="geometry">
 <rect>
 <x>90</x>
 <y>100</y>
 <width>211</width>
 <height>31</height>
 </rect>
 </property>
 </widget>
 </widget>
 <widget class="QGroupBox" name="groupBox_2">
 <property name="geometry">
 <rect>
 <x>80</x>
 <y>260</y>
 <width>341</width>
 <height>221</height>
 </rect>
 </property>
 <property name="autoFillBackground">
 <bool>true</bool>
 </property>
 <property name="title">
 <string>Address</string>
 </property>
 <property name="flat">
 <bool>false</bool>
 </property>
 <widget class="QLabel" name="MyFirstQtProject_5">
 <property name="geometry">
 <rect>
 <x>0</x>
 <y>110</y>
 <width>101</width>
 <height>20</height>
 </rect>
 </property>
 <property name="text">
 <string>City </string>
 </property>
 </widget>
 <widget class="QLabel" name="MyFirstQtProject_6">
 <property name="geometry">
 <rect>
 <x>0</x>
 <y>70</y>
 <width>101</width>
 <height>20</height>
 </rect>
 </property>
 <property name="text">
 <string>Line 2</string>
 </property>
 </widget>
 <widget class="QLabel" name="MyFirstQtProject_7">
 <property name="geometry">
 <rect>
 <x>0</x>
 <y>30</y>
 <width>101</width>
 <height>20</height>
 </rect>
 </property>
 <property name="text">
 <string>Line 1</string>
 </property>
 </widget>
 <widget class="QLabel" name="MyFirstQtProject_9">
 <property name="geometry">
 <rect>
 <x>0</x>
 <y>200</y>
 <width>101</width>
 <height>20</height>
 </rect>
 </property>
 <property name="text">
 <string>Country</string>
 </property>
 </widget>
 <widget class="QTextEdit" name="textEdit">
 <property name="geometry">
 <rect>
 <x>80</x>
 <y>30</y>
 <width>211</width>
 <height>31</height>
 </rect>
 </property>
 </widget>
 <widget class="QTextEdit" name="textEdit_2">
 <property name="geometry">
 <rect>
 <x>80</x>
 <y>70</y>
 <width>211</width>
 <height>31</height>
 </rect>
 </property>
 </widget>
 <widget class="QLabel" name="MyFirstQtProject_8">
 <property name="geometry">
 <rect>
 <x>0</x>
 <y>150</y>
 <width>101</width>
 <height>20</height>
 </rect>
 </property>
 <property name="text">
 <string>State</string>
 </property>
 </widget>
 <widget class="QLineEdit" name="lineEdit">
 <property name="geometry">
 <rect>
 <x>80</x>
 <y>110</y>
 <width>113</width>
 <height>27</height>
 </rect>
 </property>
 </widget>
 <widget class="QLineEdit" name="lineEdit_2">
 <property name="geometry">
 <rect>
 <x>80</x>
 <y>150</y>
 <width>113</width>
 <height>27</height>
 </rect>
 </property>
 </widget>
 <widget class="QComboBox" name="comboBox">
 <property name="geometry">
 <rect>
 <x>80</x>
 <y>190</y>
 <width>181</width>
 <height>31</height>
 </rect>
 </property>
 </widget>
 </widget>
 <widget class="QPushButton" name="pushButton">
 <property name="geometry">
 <rect>
 <x>190</x>
 <y>530</y>
 <width>85</width>
 <height>27</height>
 </rect>
 </property>
 <property name="text">
 <string>Add</string>
 </property>
 </widget>
 <widget class="QPushButton" name="pushButton_2">
 <property name="geometry">
 <rect>
 <x>320</x>
 <y>530</y>
 <width>85</width>
 <height>27</height>
 </rect>
 </property>
 <property name="text">
 <string>Reset</string>
 </property>
 </widget>
 </widget>
 <resources/>
 <connections/>
</ui> 
PyQt from Riverbank Computing, is a set of Python bindings for Qt application framework.

On Linux, I use the below command to install pyQt

pip3 install PyQt5

In order to convert the MyFirstQtApp.ui file to python file MyFirstQtApp.py, we need to use a tool in PyQt called pyuic from the terminal

pyuic5 -x MyFirstQtApp.ui -o MyFirstQtApp.py
MyFirstQtApp.py
# -*- coding: utf-8 -*-

# Form implementation generated from reading ui file 'MyFirstQtApp.ui'
#
# Created by: PyQt5 UI code generator 5.6
#
# WARNING! All changes made in this file will be lost!

from PyQt5 import QtCore, QtGui, QtWidgets

class Ui_Form(object):
 def setupUi(self, Form):
 Form.setObjectName("Form")
 Form.resize(603, 604)
 self.MyFirstQtProject = QtWidgets.QLabel(Form)
 self.MyFirstQtProject.setGeometry(QtCore.QRect(250, 30, 101, 20))
 self.MyFirstQtProject.setObjectName("MyFirstQtProject")
 self.groupBox = QtWidgets.QGroupBox(Form)
 self.groupBox.setGeometry(QtCore.QRect(80, 60, 431, 141))
 self.groupBox.setAutoFillBackground(True)
 self.groupBox.setFlat(False)
 self.groupBox.setObjectName("groupBox")
 self.MyFirstQtProject_4 = QtWidgets.QLabel(self.groupBox)
 self.MyFirstQtProject_4.setGeometry(QtCore.QRect(0, 110, 101, 20))
 self.MyFirstQtProject_4.setObjectName("MyFirstQtProject_4")
 self.MyFirstQtProject_3 = QtWidgets.QLabel(self.groupBox)
 self.MyFirstQtProject_3.setGeometry(QtCore.QRect(0, 70, 101, 20))
 self.MyFirstQtProject_3.setObjectName("MyFirstQtProject_3")
 self.MyFirstQtProject_2 = QtWidgets.QLabel(self.groupBox)
 self.MyFirstQtProject_2.setGeometry(QtCore.QRect(0, 30, 101, 20))
 self.MyFirstQtProject_2.setObjectName("MyFirstQtProject_2")
 self.textEdit_3 = QtWidgets.QTextEdit(self.groupBox)
 self.textEdit_3.setGeometry(QtCore.QRect(90, 20, 211, 31))
 self.textEdit_3.setObjectName("textEdit_3")
 self.textEdit_4 = QtWidgets.QTextEdit(self.groupBox)
 self.textEdit_4.setGeometry(QtCore.QRect(90, 60, 211, 31))
 self.textEdit_4.setObjectName("textEdit_4")
 self.textEdit_5 = QtWidgets.QTextEdit(self.groupBox)
 self.textEdit_5.setGeometry(QtCore.QRect(90, 100, 211, 31))
 self.textEdit_5.setObjectName("textEdit_5")
 self.groupBox_2 = QtWidgets.QGroupBox(Form)
 self.groupBox_2.setGeometry(QtCore.QRect(80, 260, 341, 221))
 self.groupBox_2.setAutoFillBackground(True)
 self.groupBox_2.setFlat(False)
 self.groupBox_2.setObjectName("groupBox_2")
 self.MyFirstQtProject_5 = QtWidgets.QLabel(self.groupBox_2)
 self.MyFirstQtProject_5.setGeometry(QtCore.QRect(0, 110, 101, 20))
 self.MyFirstQtProject_5.setObjectName("MyFirstQtProject_5")
 self.MyFirstQtProject_6 = QtWidgets.QLabel(self.groupBox_2)
 self.MyFirstQtProject_6.setGeometry(QtCore.QRect(0, 70, 101, 20))
 self.MyFirstQtProject_6.setObjectName("MyFirstQtProject_6")
 self.MyFirstQtProject_7 = QtWidgets.QLabel(self.groupBox_2)
 self.MyFirstQtProject_7.setGeometry(QtCore.QRect(0, 30, 101, 20))
 self.MyFirstQtProject_7.setObjectName("MyFirstQtProject_7")
 self.MyFirstQtProject_9 = QtWidgets.QLabel(self.groupBox_2)
 self.MyFirstQtProject_9.setGeometry(QtCore.QRect(0, 200, 101, 20))
 self.MyFirstQtProject_9.setObjectName("MyFirstQtProject_9")
 self.textEdit = QtWidgets.QTextEdit(self.groupBox_2)
 self.textEdit.setGeometry(QtCore.QRect(80, 30, 211, 31))
 self.textEdit.setObjectName("textEdit")
 self.textEdit_2 = QtWidgets.QTextEdit(self.groupBox_2)
 self.textEdit_2.setGeometry(QtCore.QRect(80, 70, 211, 31))
 self.textEdit_2.setObjectName("textEdit_2")
 self.MyFirstQtProject_8 = QtWidgets.QLabel(self.groupBox_2)
 self.MyFirstQtProject_8.setGeometry(QtCore.QRect(0, 150, 101, 20))
 self.MyFirstQtProject_8.setObjectName("MyFirstQtProject_8")
 self.lineEdit = QtWidgets.QLineEdit(self.groupBox_2)
 self.lineEdit.setGeometry(QtCore.QRect(80, 110, 113, 27))
 self.lineEdit.setObjectName("lineEdit")
 self.lineEdit_2 = QtWidgets.QLineEdit(self.groupBox_2)
 self.lineEdit_2.setGeometry(QtCore.QRect(80, 150, 113, 27))
 self.lineEdit_2.setObjectName("lineEdit_2")
 self.comboBox = QtWidgets.QComboBox(self.groupBox_2)
 self.comboBox.setGeometry(QtCore.QRect(80, 190, 181, 31))
 self.comboBox.setObjectName("comboBox")
 self.pushButton = QtWidgets.QPushButton(Form)
 self.pushButton.setGeometry(QtCore.QRect(190, 530, 85, 27))
 self.pushButton.setObjectName("pushButton")
 self.pushButton_2 = QtWidgets.QPushButton(Form)
 self.pushButton_2.setGeometry(QtCore.QRect(320, 530, 85, 27))
 self.pushButton_2.setObjectName("pushButton_2")

self.retranslateUi(Form)
 QtCore.QMetaObject.connectSlotsByName(Form)

def retranslateUi(self, Form):
 _translate = QtCore.QCoreApplication.translate
 Form.setWindowTitle(_translate("Form", "Person"))
 self.MyFirstQtProject.setText(_translate("Form", "Person Details"))
 self.groupBox.setTitle(_translate("Form", "Person"))
 self.MyFirstQtProject_4.setText(_translate("Form", "Last Name"))
 self.MyFirstQtProject_3.setText(_translate("Form", "Middle Name"))
 self.MyFirstQtProject_2.setText(_translate("Form", "First Name"))
 self.groupBox_2.setTitle(_translate("Form", "Address"))
 self.MyFirstQtProject_5.setText(_translate("Form", "City "))
 self.MyFirstQtProject_6.setText(_translate("Form", "Line 2"))
 self.MyFirstQtProject_7.setText(_translate("Form", "Line 1"))
 self.MyFirstQtProject_9.setText(_translate("Form", "Country"))
 self.MyFirstQtProject_8.setText(_translate("Form", "State"))
 self.pushButton.setText(_translate("Form", "Add"))
 self.pushButton_2.setText(_translate("Form", "Reset"))


if __name__ == "__main__":
 import sys
 app = QtWidgets.QApplication(sys.argv)
 Form = QtWidgets.QWidget()
 ui = Ui_Form()
 ui.setupUi(Form)
 Form.show()
 sys.exit(app.exec_())

Once the python UI file is available, the python file can be run (At this point of time, as there is no functionality coded, only the UI screen is displayed)

Screenshot from 2017-05-21 12-41-54

 

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s