Deep Learning project build from scratch: Stock Predictor (2)
Front-end application dev: QtDesigner
Day 2: Application Development — Front-end
A. Preface
In the previous article, we had talked about some development environment settings and some simple tests. In this article, we need to do more exercise to get familiar with more functions:
1. Controlling font sizes, colors and positions.
2. Controlling user input column
3. Controlling window title, Icons and backgrounds
Now, let’s start.
B. Developing Application (Front-end)
a. Font Size, Color & Position Control
Moving on the Function.py we had code in the precious article, we have to add a little more code this time:
We’ll use the label unit we had used previously. In row 20, we set the font and size; the position is set in row 21. It is worth mentioning: QtGui and QtCore needed to be imported in front of the line due to the function’s needing. Additionally, in case of the top left corner represent origin, the x and y in QRect represents the right and down vector/pixel respectively ( #QRect(int x, int y, int width, int height) ) !
Then smash that button, the results are shown. (fig.1)
But that’s not enough yet.
Next, we need to adjust the color of the text. QPalette() is the function we needed. Line 23–27 are indicating the we have to plug in the package QPalette in front of the line, otherwise it will not work anyway. You may select your preferred color. (fig.2)
b. User input column settings
We need the user input column to let users select what stock they may want to take a look at. (In case you may forget we want to dev a stock predict machine ^^) Here, the QLineEdit is on the board.
First, open QtDesigner to extract .ui. (fig.3)
Drag the push button, line edit & label on the board. Now the label & button added previously and the three objects we just dragged are all on the layout. (fig.4)
Last, use the method which is used in the previous article, convert .ui to .py using PyUIC.
The next step is trying to control the object we had just created.
We want to make it clear: using double backslash in the route is a recommendation to prevent being recognized as command prompt in DOS.
We put “Hi” in LineEdit in the 18th line. In line 43, button2Clicked is responsible for reading inputs from users, then connected it to line 19 to present it on the label. Notice the button objectName need to be checked if it’s correct or not! (fig.5)
c. Window title, Icons and backgrounds
In line 20, we use setWindowTitle() to modify the window’s title. In line 21, the Icon modification is set by setWindowIcon(). Beware of the correct route again! (fig.6)
Last in our day, we’re going to add our background! Import QPixmap in front of the code, and use Pixmap to read our picture and adjust size in line 23–25. In line 27–29, we use Plalette to input our background. (fig.7)
If you want a monochrome background, change the QBrush(image) to QtGui.QColor(200,200,100) in line 28. You may set the numbers yourself to choose your own color. (fig.8)
In this article, we’ve talked about how to set font sizes, colors and positions, to control user input column, window title, Icons and background.
In the next page, we will talk about how to make a basic outlook for our stock program by all the functions we have practiced in QtDesigner.
Keep in touch with us and leave a comment below (or not) to let us know you’re reading!
Then see you all in a bit!
