Engineering Python 17D: PyQt and Qt Designer – Currency Converter

Welcome to Engineering Python. This is a Python programming course for engineers. In this video, I’ll continue to discuss GUI
programming using PyQt and Qt Designer. We will create a currency converter. This program downloads the latest currency
exchange rates from and converts between different currencies. Fixer is a free API for current and historical
exchange rates published by the European Central Bank. We will use the following widgets. QMainWindow, QIcon, QLineEdit, QComboBox,
QMenu, QMenuBar, QAction, QToolbar, and QMessageBox. We will also use resources such as images
in this program. We will use the GUI development flow I introduced
in a previous video to develop this program. Step 1 is to design the interface in Qt Designer. To start Qt Designer, you can type in designer
in the Windows Start menu. For Mac OS, type in open -a designer in a
terminal to launch Qt Designer. In this New Form dialog, you can choose Main
Window and click Create. Because I have already created the UI, I’ll
just open it from my folder. Next, I’ll briefly describe what I did when
I created this graphic user interface. First of all, in the resource browser, I clicked
this edit resource button. New resource file. The file name is resources.qrc. Then click Add Prefix button. The name is newPrefix. Then click Add Files button. Choose these three image files, dollar.png,
download.png, and exit.png, and click Ok. They will be our resources. I clicked the empty space in the main window. In the property editor, set the MainWindow’s
geometry width to 400, height to 200. Set the window title to Currency Exchange. Set the window icon to dollar.png we just
loaded in the resource file. In the object inspector, there was originally
a status bar. I just right clicked and removed it so you
don’t see it here. We don’t need it in this program. In the widget box, I searched for line edit. Dragged and dropped this widget to the main
window. I repeated this process one more time. So, you see two line edits here. I changed their objectNames to lineEdit_1
and lineEdit_2, respectively. Set their default text to 1. I searched for combo box in the widget box. Dragged and dropped two combo boxes to the
main window. Changed their objectNames to combobox_1 and
combobox_2. Then, I double clicked the menu and changed
the title to File. I further created two actions under this menu
titled Download Rates and Exit. In the property editor, change their icons
to download.png and exit.png we just loaded in the resource file. Change the shortcuts. I righted click in the empty space and select
Add Tool Bar. In the action editor, I dragged action Download_Rates
and dropped it on the toolbar. Then dragged action Exit and dropped it on
the toolbar. In the signal slot editor, I added a signal. The sender is actionExit, the signal is triggered,
the receiver is MainWindow, the slot is close. Let me break out this layout first. Then, what I did was selecting these two widgets
and click this lay out horizontally button. Select the other two widgets and click this
lay out horizontally button. Use Control-A to select all the widgets and
click this lay out vertically button. Click an empty area in the main window and
click this lay out in a grid button. You can preview this interface by clicking
the menu Form Preview. This interface doesn’t do anything yet. We will write code to process the signals
later. We save the interface as currency_gui.ui. It’s an XML document. Step 2 is to convert the resource file to
a Python file using the following command in a command prompt or a terminal. pyrcc5 resources.qrc -o After that, we will see this Python file Note that we must add an underscore rc when
we output the Python file. Because it will be used later. Then we convert the ui file to a Python file
using the following command. After that, we will get this Python file. You can open this Python file and see the
content. The entire window is an instance of this Ui_MainWindow
class. You can find all the widgets we added to the
interface in this setupUI function. Like the grid layout, the line edits, the
combo box, the menubar, the toolbar, and the actions. Some of the properties are defined in this
retranslateUi function. This line imports the resource Python file
we just generated. Note there is an underscore rc at the end. This is automatically generated by the converter. Do not change anything in this Python file. Step 3 is to code in Python. We need to create a new file named I already did that so I’ll just open my file. In the first line of this file, we need to
import everything from currency_gui. We also need to import urllib3, which is an
HTTP client for Python. It is already installed with Anaconda. It will be used to download exchange rate
data from a website. Making unverified HTTPS requests is probably
not safe. However, we understand the risks and wish
to disable these warnings. Then, we will define the signals function
to deal with the signals passed by the widgets. We connect the Download Rates action’s triggered
signal to a user-defined download function. We connect the line edits’ text edited signal
to the edit1 change and edit2 change functions. Next, we connect the combo boxes’ activated
signal to the edit1 change and edit2 change functions. In this download function, we will create
an http object using urllib3 dot pool manager. Then, we use the http object to make a request
to download the data from this web address. The downloaded exchange rates are quoted against
US dollars. I added some code for debugging and commented
them out after I finished. You can uncomment to see the output to better
understand this program. The downloaded data is a binary string. I need to decode it using the ASCII code. I disabled the download rates action to avoid
downloading it again. After we get the data, we close the http link. The data is represented by a dictionary. The actual exchange rates are the value of
the key named rates. I give these rates to an instance variable
called rates and add the base US dollar into the exchange rates. Next, I add these currency names to the combo
boxes, so the user can choose to convert from one currency to another. There could be Internet connection errors. If such an error happens, we just show the
user that connection failed. If line edit1’s text is changed, that means
the user is typing some numbers in the line edit, then we will calculate the exchange
rate from the currency in combo box 1 to the currency in combo box 2, and multiply the
exchange rate by how much money in original currency line Edit1. The result is shown in the new currency in
line Edit2. If line edit2’s text is changed, we just do
the reverse. Next, we need to add these four self-defined
functions as new attributes in the Ui_MainWindow class. The rest of the code has been explained in
the previous calculator example in this course. I’ll not repeat them here. Step 4 is to execute the program. We do it in Jupyter Notebook using the run
magic. We can see the icon of this main window is
changed to the dollar sign. We click the menu File Download Rates. The latest exchange rates have been downloaded
into the memory and the combo boxes are filled with the currency names. I change the first currency to US dollar and
the second one to Euro. Then, I type in 1 in the top line edit. The bottom line edit changes automatically. If I change the bottom line edit to 1, the
top line edit changes automatically. When I am done, I can click this exit button
on the toolbar. I can also use the keyboard shortcut Control-E.
The program will end. Okay, that was how to use PyQt and Qt Designer
to create a currency converter. The course materials are available on YouTube
and GitHub. You can watch the course videos in sequence. If you like this video, please subscribe and
share. I’m Yong Wang. Thanks for watching.

Add a Comment

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