PyQt5 instruction manuals — Input /Display Text and Image(Ubuntu 20.04.3 LTS)
Zero to One: Instruction manuals — Day 2
Recap
In the previous article — PyQt5 instruction manuals — Day 1, we had mentioned installing PyQt5 and the construction of UI codes.
Today, I would like to introduce some useful widgets and compare the slight differences among them.
Input/Display Text (Line Edit, Text Edit, Plain Text Edit)
Text input widgets are used frequently in the UI. However, there are three common widgets to input and output text. What are the pros and cons of each widget? Let’s see the sheet below.
Text Edit widget is a special one. It allows HTML (HyperText Markup Language) input, which can include the format of texts like colors, sizes, etc. Here is a simple example of HTML.
<font color="red">RED</font><br>
<font color="green">GREEN</font><br>
<font color="blue">BLUE</font>
After catching up different properties of these three widgets, we can implement them in our UI. Let’s open Qt5 Designer as usual.
#open Qt5 designer in terminal
$ designer
In this step, I pulled Line Edit, Text Edit, and Plain Text Edit two each kind to both right and left. Last, put a Push Button to control whether show the outcome.
To recognize each widget easily, remember to name all the components in a readable format.
# The filename depends on what you typed.
$ pyuic5 UI.ui -o UI.pyWe can generate UI.py by the upper command. let’s take a look at UI.py.
Stick to the MCV construction we had learned in the previous article. Now we can start to edit controller.py to control the information on UI.
The most important part is lined 17~22.
Lines 17~19, I use text() and toPlainText() to get the words typed in boxes respectively. If more string processing is needed, just put the text in your algorithms.
Lines 20~22 put the words on the widgets.
It is noteworthy that we should use function setPlainText() rather than setText() while showing on “plain_show”.
As for model.py, we don’t have to import or edit it because no algorithm is needed in this case. Therefore, we have finished the display program.
I put some HTML text in each input box. You can see that only the Text Edit box displays the colorful words correctly. That is one of the properties Text Edit widgets have.
We have learned the slight differences among the three widgets so far. You can choose a preferable one while designing your UI!
Display Image (Label)
Displaying images is also a commonly seen function in the UI. In this topic, I will create a simple UI that contains three images.
First of all, I added three Labels widgets and a Push Button on my window. Afterward, use readable label names without saying.
UI.py code is laid here. It’s fairly brief compared to the previous one.
Next, design two simple algorithms to represent image processing in model.py. One turns the image into a gray-scale one, and the other turns into an HSV image. If you need any modification or preprocessing, ensure that put the code here.
Same as usual, let’s edit controller.py to control the UI. The code structure is almost the same as before.
You may noticed that lines 25~29 and 31~35 look similar to what we looked upward. But the images displayed on UI had been modified by get_gray() and get_HSV() in model.py.
Last but not least, there is something we have to focus on. If the channel of the image is none, make sure that the channel won’t compute with other variables. The problem might come up while displaying gray-scale images.
4. Epilogue
After finishing this article, wish you have comprehended how to implement simple input and output on your UI. Questions are welcome in the response area!
