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 temperature converter.
This converter can convert temperature from Celsius to Fahrenheit and vise versa.
We will use the following widgets.
QMainWindow, QGroupbox, QSlider, QLabel, and QLineEdit.
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 your 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.
I clicked the empty space of the main window.
In the property editor, set the MainWindow's geometry width to 400, height to 400.
Set the window title to Temperature Converter.
In the object inspector, there was originally a menubar and a status bar.
I just right clicked and removed them so you don't see them here.
We don't need them in this program.
In the widget box, I searched for group box.
Dragged and dropped this widget to the main window.
I repeated this process one more time.
So, you see two group boxes here.
I double clicked and changed their titles to Celsius and Fahrenheit, respectively.
I searched for slider in the widget box.
Dragged and dropped a vertical slider to the Celsius group box.
Changed the objectiName to verticalSliderC.
Changed the maximum to 100.
Dragged and dropped another vertical slider to the Fahrenheit group box.
Changed the objectiName to verticalSliderF.
Changed the minimum to 32 and maximum to 212.
I searched for line edit in the widget box.
Dragged and dropped a line edit to the Celsius group box.
Changed the object name to lineEditC.
Checked the readOnly option.
Because I don't want the user the edit the numbers.
I just use them to show the numbers when we slide the slider.
Dragged and dropped another line edit to the Fahrenheit group box.
Changed the object name to lineEditF.
Checked the readOnly option.
Then, I searched for label in the widget box.
Dragged and dropped a label to the Celsius group box.
Double clicked the label and changed the text to degree C. Dragged and dropped another label
to the Fahrenheit group box.
Double clicked the label and changed the text to degree F.
Dragged and dropped three labels to the main window.
Double clicked the labels and changed their text to little arrows.
We use them to show that we can convert between Celsius and Fahrenheit.
Let me break out this layout first.
Then, what I did was selecting the slider, the line edit, and the label in the Celsius
group box.
By the way, you can select multiple widgets by holding the control key.
I click this lay out horizontally button.
I select the Celsius group box and click this lay out in a grid button.
Then, select the slider, the line edit, and the label in the Fahrenheit group box.
Click this lay out horizontally button.
I select the Fahrenheit group box and click this lay out in a grid button.
Select these three arrow labels, 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 pressing Control R. Try to drag the sliders.
Nothing will happen now.
We will write code to process the sliding actions later.
After we are done, we save the interface as temperature_gui.ui.
This is an XML document.
Step 2 is to convert the ui file to a Python file using the following command in a command
prompt or a terminal.
pyuic5 -x temperature_gui.ui -o temperature_gui.py.
After that, we will get this Python file temperature_gui.py.
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 sliders, the line edits, and the labels.
Some of the properties are defined in this retranslateUi function.
Do not change anything in this Python file.
Step 3 is to code in Python.
We need to create a new file named temperature.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 temperature_gui.
Then we will define the signals function to deal with the signals passed by the widgets.
We connect the Celsius slider's value changed signal to a user-defined slider_c function.
The value will change when we slide the slider.
We connect the Fahrenheit slider's value changed signal to a user-defined slider_f function.
In the slider_c function, we will update lineEditC's text by setting it to the slider's value.
Then we use this formula to convert the Celsius degrees to the Fahrenheit degrees.
After that, we set the Fahrenheit slider's value to the updated Fahrenheit degrees.
In the slider_f function, we do the opposite.
Update lineEditF's text by setting it to the slider's value.
Then we use this formula to convert the Fahrenheit degrees to the Celsius degrees.
After that, we set the Celsius slider's value to the updated Celsius degrees.
Next, we need to add the three 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.
The Celsius and Fahrenheit sliders are synchronized.
When we slide one, the other will change also.
The line edits will show the corresponding Celsius and Fahrenheit degrees.
You cannot change these values using the keyboard because these line edits are read-only.
Okay, that was how to use PyQt and Qt Designer to create a temperature 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.