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 fixer.io 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 resources_rc.py.
After that, we will see this Python file resources_rc.py.
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 currency.py.
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.