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 GUIprogramming using PyQt and Qt Designer.

We will create a currency converter.

This program downloads the latest currencyexchange rates from fixer.

Io and converts between different currencies.

Fixer is a free API for current and historicalexchange 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 imagesin this program.

We will use the GUI development flow I introducedin 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 designerin the Windows Start menu.

For Mac OS, type in open -a designer in aterminal to launch Qt Designer.

In this New Form dialog, you can choose MainWindow and click Create.

Because I have already created the UI, I'lljust open it from my folder.

Next, I'll briefly describe what I did whenI created this graphic user interface.

First of all, in the resource browser, I clickedthis 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'sgeometry width to 400, height to 200.

Set the window title to Currency Exchange.

Set the window icon to dollar.

Png we justloaded in the resource file.

In the object inspector, there was originallya status bar.

I just right clicked and removed it so youdon'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 mainwindow.

I repeated this process one more time.

So, you see two line edits here.

I changed their objectNames to lineEdit_1and 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 themain window.

Changed their objectNames to combobox_1 andcombobox_2.

Then, I double clicked the menu and changedthe title to File.

I further created two actions under this menutitled Download Rates and Exit.

In the property editor, change their iconsto download.

Png and exit.

Png we just loaded in the resource file.

Change the shortcuts.

I righted click in the empty space and selectAdd Tool Bar.

In the action editor, I dragged action Download_Ratesand dropped it on the toolbar.

Then dragged action Exit and dropped it onthe 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 widgetsand click this lay out horizontally button.

Select the other two widgets and click thislay out horizontally button.

Use Control-A to select all the widgets andclick this lay out vertically button.

Click an empty area in the main window andclick this lay out in a grid button.

You can preview this interface by clickingthe menu Form Preview.

This interface doesn't do anything yet.

We will write code to process the signalslater.

We save the interface as currency_gui.

Ui.

It's an XML document.

Step 2 is to convert the resource file toa 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 whenwe output the Python file.

Because it will be used later.

Then we convert the ui file to a Python fileusing the following command.

After that, we will get this Python file.

You can open this Python file and see thecontent.

The entire window is an instance of this Ui_MainWindowclass.

You can find all the widgets we added to theinterface in this setupUI function.

Like the grid layout, the line edits, thecombo box, the menubar, the toolbar, and the actions.

Some of the properties are defined in thisretranslateUi function.

This line imports the resource Python filewe 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 toimport everything from currency_gui.

We also need to import urllib3, which is anHTTP client for Python.

It is already installed with Anaconda.

It will be used to download exchange ratedata from a website.

Making unverified HTTPS requests is probablynot safe.

However, we understand the risks and wishto disable these warnings.

Then, we will define the signals functionto deal with the signals passed by the widgets.

We connect the Download Rates action's triggeredsignal to a user-defined download function.

We connect the line edits' text edited signalto the edit1 change and edit2 change functions.

Next, we connect the combo boxes' activatedsignal to the edit1 change and edit2 change functions.

In this download function, we will createan http object using urllib3 dot pool manager.

Then, we use the http object to make a requestto download the data from this web address.

The downloaded exchange rates are quoted againstUS dollars.

I added some code for debugging and commentedthem out after I finished.

You can uncomment to see the output to betterunderstand 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 avoiddownloading 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 ofthe key named rates.

I give these rates to an instance variablecalled rates and add the base US dollar into the exchange rates.

Next, I add these currency names to the comboboxes, 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 theuser that connection failed.

If line edit1's text is changed, that meansthe user is typing some numbers in the line edit, then we will calculate the exchangerate from the currency in combo box 1 to the currency in combo box 2, and multiply theexchange rate by how much money in original currency line Edit1.

The result is shown in the new currency inline Edit2.

If line edit2's text is changed, we just dothe reverse.

Next, we need to add these four self-definedfunctions as new attributes in the Ui_MainWindow class.

The rest of the code has been explained inthe 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 runmagic.

We can see the icon of this main window ischanged to the dollar sign.

We click the menu File Download Rates.

The latest exchange rates have been downloadedinto the memory and the combo boxes are filled with the currency names.

I change the first currency to US dollar andthe 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, thetop line edit changes automatically.

When I am done, I can click this exit buttonon the toolbar.

I can also use the keyboard shortcut Control-E.

The program will end.

Okay, that was how to use PyQt and Qt Designerto create a currency converter.

The course materials are available on YouTubeand GitHub.

You can watch the course videos in sequence.

If you like this video, please subscribe andshare.

I'm Yong Wang.

Thanks for watching.

Source: Youtube

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.

The course materials are available on YouTube and GitHub.
http://youtube.com/yongtwang
http://github.com/yongtwang

----------------------------------------
Smart Energy Operations Research Lab (SEORL): http://binghamton.edu/seorl