1
00:00:00,670 --> 00:00:01,520
Hey, welcome back.

2
00:00:01,540 --> 00:00:06,400
In this video, we will code the graphical user interface together with all its widgets.

3
00:00:06,400 --> 00:00:09,130
So we have one window.

4
00:00:10,570 --> 00:00:14,410
And 1 to 3 widgets.

5
00:00:14,410 --> 00:00:18,880
So this text area here, this input area here and this button.

6
00:00:19,910 --> 00:00:23,350
And then in the next videos we will code the actual chat board.

7
00:00:23,380 --> 00:00:29,450
So now we will write a class for the chat bots window.

8
00:00:30,260 --> 00:00:30,920
All right.

9
00:00:31,820 --> 00:00:33,180
Let me pass for now.

10
00:00:33,200 --> 00:00:36,920
Then we will write a class for the chat bot itself.

11
00:00:37,940 --> 00:00:44,080
So all we have to do is populate these classes with code and that will keep our code very organized.

12
00:00:44,090 --> 00:00:49,060
So as I told you in this video, will code the graphical user interface.

13
00:00:49,070 --> 00:00:52,940
So let's focus on this class chat bots window.

14
00:00:54,400 --> 00:01:03,400
So we need to do some imports first from p Q to six, which is something you need to install if you

15
00:01:03,400 --> 00:01:04,690
haven't done so already.

16
00:01:04,690 --> 00:01:11,350
So make sure you have created a patch on project and then create the main output file, import this

17
00:01:11,350 --> 00:01:18,280
and then hover the mouse here and you should see a pop up saying that you can install p Q to six or

18
00:01:18,280 --> 00:01:23,350
you can go to the terminal and do PIP install pqt6.

19
00:01:24,100 --> 00:01:24,320
Right?

20
00:01:24,330 --> 00:01:25,150
So that should do it.

21
00:01:25,150 --> 00:01:36,280
I have installed this already so I can do p Q The six dot Q widgets import sorry q t widgets import.

22
00:01:36,310 --> 00:01:42,280
We need the Q main window class for now because we need to inherit.

23
00:01:45,310 --> 00:01:47,800
From queue main window.

24
00:01:48,760 --> 00:01:54,730
So chat bot window will be a queue main window type basically.

25
00:01:57,760 --> 00:02:02,050
Then we define an in its method for this class as usual.

26
00:02:02,590 --> 00:02:10,030
We instantiate the queue main window class with super dot underscore, underscore, init, underscore,

27
00:02:10,030 --> 00:02:11,030
underscore.

28
00:02:11,200 --> 00:02:16,090
So we did cover pq26 in the previous two apps.

29
00:02:16,090 --> 00:02:21,590
So I'll not go into detail into explaining how py6 works.

30
00:02:21,670 --> 00:02:27,010
So if you want a deep understanding of p Q the six, you should watch those videos first.

31
00:02:27,010 --> 00:02:28,510
The previous two apps.

32
00:02:28,540 --> 00:02:31,150
App 13 and app 14 Yes.

33
00:02:31,150 --> 00:02:37,420
So this will instantiate the parent or for this class, which is queue main window.

34
00:02:38,800 --> 00:02:40,480
Then we want to set a.

35
00:02:42,920 --> 00:02:45,920
Minimum size for self.

36
00:02:45,920 --> 00:02:48,770
So self is the window instance, right?

37
00:02:48,770 --> 00:02:50,060
The main window.

38
00:02:50,480 --> 00:02:55,790
Let's write a 700 s width and 500 s height.

39
00:02:55,790 --> 00:03:00,290
So 700 pixels, 500 pixels for the main window.

40
00:03:00,290 --> 00:03:03,290
And now we're ready to create some widgets.

41
00:03:03,290 --> 00:03:08,420
So first we'll add the chat area widget, then we'll add.

42
00:03:10,110 --> 00:03:15,150
The input fields widget and then we'll add the button.

43
00:03:15,150 --> 00:03:15,440
Right?

44
00:03:15,450 --> 00:03:21,320
So we have three widgets chat area, this input field and the button.

45
00:03:21,330 --> 00:03:24,000
So let's write the code for this one first.

46
00:03:25,020 --> 00:03:27,990
Let's do self the chat area.

47
00:03:28,170 --> 00:03:31,410
So this is part of self of the main window.

48
00:03:31,410 --> 00:03:33,780
So that's the main window basically.

49
00:03:33,900 --> 00:03:38,700
And we are creating this chat area attribute over the main window.

50
00:03:38,700 --> 00:03:42,480
So this is just a variable, an instance variable in other words.

51
00:03:42,930 --> 00:03:47,640
And this will be equal to Q text added.

52
00:03:47,850 --> 00:03:53,190
So let's import Q text, edit, make a comma here and paste that class.

53
00:03:53,640 --> 00:03:56,730
Now inside this we need to pass self.

54
00:03:57,120 --> 00:04:05,310
Previously in the previous apps, when we built a main window, we used a set central widgets methods

55
00:04:05,310 --> 00:04:08,820
because we had this table as the central widgets.

56
00:04:08,850 --> 00:04:15,540
Now we will use another technique, so we will not use a central widget because we have multiple widgets

57
00:04:15,540 --> 00:04:16,079
here.

58
00:04:16,760 --> 00:04:25,550
We have three widgets, but instead of that we can simply specify self as the argument of each of this

59
00:04:25,550 --> 00:04:31,030
widgets, and that will add each of these widgets to self to the main window.

60
00:04:31,040 --> 00:04:35,450
That's how you relate this widget to the main window.

61
00:04:36,020 --> 00:04:36,310
Right.

62
00:04:36,320 --> 00:04:38,450
We'll do the same for the other widgets.

63
00:04:40,240 --> 00:04:44,500
So for example, sales, dot input fields.

64
00:04:44,680 --> 00:04:47,470
So that's the variable, the instance variable.

65
00:04:47,590 --> 00:04:50,050
And this would be queue line.

66
00:04:50,050 --> 00:04:54,160
Edit self lets import queue line edit as well.

67
00:04:57,150 --> 00:05:01,770
So this is supposed to be for entering like small amounts of texts.

68
00:05:02,610 --> 00:05:04,380
This is for bigger text.

69
00:05:05,010 --> 00:05:07,680
And then we need the button cell button.

70
00:05:08,700 --> 00:05:12,870
Q Push button class self.

71
00:05:13,540 --> 00:05:19,120
Well, actually, the first argument here should be the name, the label of the button sent, and then

72
00:05:19,120 --> 00:05:20,430
we enter self here.

73
00:05:20,440 --> 00:05:20,890
So.

74
00:05:20,890 --> 00:05:24,100
Q Push button is also something we need to import.

75
00:05:25,710 --> 00:05:28,350
And finally, we need to do self show.

76
00:05:29,910 --> 00:05:37,080
So show is a method of a queue main window class and it needs to be used when you are not using a set

77
00:05:37,080 --> 00:05:40,320
central widget method as we are doing now.

78
00:05:41,010 --> 00:05:43,770
Let's try to run this app and see what we have.

79
00:05:43,770 --> 00:05:50,970
So for both, we need to instantiate this class first and before we do that we need to instantiate the

80
00:05:50,970 --> 00:05:52,080
queue application.

81
00:05:54,750 --> 00:05:57,480
Class, which needs to be imported as well.

82
00:05:57,660 --> 00:05:59,280
All the import, it's just here.

83
00:05:59,850 --> 00:06:01,910
Application.

84
00:06:01,920 --> 00:06:04,350
So that's a class we instantiate here.

85
00:06:04,350 --> 00:06:10,530
It represents the actual application and then we need to instantiate the window itself.

86
00:06:11,160 --> 00:06:12,900
Let's call this main window.

87
00:06:13,560 --> 00:06:18,870
That's this class chat boot window with parentheses.

88
00:06:19,290 --> 00:06:22,090
And then you do system exits.

89
00:06:22,190 --> 00:06:24,540
So this is something we need to import.

90
00:06:24,570 --> 00:06:26,640
It's a standard library.

91
00:06:26,640 --> 00:06:27,920
So imports.

92
00:06:28,860 --> 00:06:33,930
And this needs an argument app that exec so to execute the app.

93
00:06:34,170 --> 00:06:45,120
And it also helps to exit the program and Q application needs a cis dot org v argument as well and we're

94
00:06:45,120 --> 00:06:46,920
ready to run this app.

95
00:06:47,280 --> 00:06:52,140
So right click go to Run Main and this is what we've got.

96
00:06:52,140 --> 00:06:58,500
So we have three widgets, but they are stacked above each other because we haven't set the geometry

97
00:06:58,500 --> 00:06:59,430
of these widgets.

98
00:06:59,430 --> 00:07:05,010
We haven't defined how they will be displayed, how they will be distributed in the app.

99
00:07:05,010 --> 00:07:09,510
We can do that by appliance self, the chat area.

100
00:07:09,510 --> 00:07:18,270
So we refer to each of these variables that set geometry, the method, which is a method of each of

101
00:07:18,270 --> 00:07:19,830
these widgets.

102
00:07:19,830 --> 00:07:24,750
So geo map three that's the correct method.

103
00:07:24,840 --> 00:07:29,730
Now this expects two coordinates and two dimensions.

104
00:07:32,660 --> 00:07:38,420
For example, I just said these values for the chat area.

105
00:07:39,350 --> 00:07:45,340
So if I run this again, make sure you have close the previous app, the previous window.

106
00:07:45,350 --> 00:07:46,900
So this is what we've got.

107
00:07:46,910 --> 00:07:48,620
That's the chat area now.

108
00:07:49,460 --> 00:07:57,590
So what I've just done here is ten means ten pixels from the left border of the main window.

109
00:07:58,520 --> 00:08:02,630
The other ten is ten pixels from the upper border of the main window.

110
00:08:02,630 --> 00:08:05,570
So you see this space here and this here.

111
00:08:06,470 --> 00:08:07,940
And then we have 480.

112
00:08:07,940 --> 00:08:16,310
That's the width of this widgets horizontally and 320 the vertical height.

113
00:08:17,120 --> 00:08:21,830
So that defines the position and the dimensions of a widget.

114
00:08:21,830 --> 00:08:25,180
And you can do the same for the two other widgets as well.

115
00:08:25,190 --> 00:08:33,500
So I'll just copy that method, paste it here, change these to input fields, said Geometry.

116
00:08:33,830 --> 00:08:40,770
So we're talking about the other field where the user inputs the data.

117
00:08:40,789 --> 00:08:45,740
So if I bring the end products, so we're talking about this.

118
00:08:45,740 --> 00:08:53,750
So this would be also ten pixels from the left border and then this amount of pixels from the upper

119
00:08:53,750 --> 00:09:02,990
border, which is like ten here, plus the vertical height, the height of this which was 320, so ten

120
00:09:02,990 --> 00:09:07,670
plus three, 2330 plus perhaps another ten here.

121
00:09:07,700 --> 00:09:08,570
Three, four.

122
00:09:09,020 --> 00:09:09,410
Yeah.

123
00:09:09,410 --> 00:09:14,090
So we can write ten 340 here.

124
00:09:14,570 --> 00:09:16,550
The width should be the same.

125
00:09:16,550 --> 00:09:17,180
Right.

126
00:09:18,460 --> 00:09:20,260
As this chat area.

127
00:09:20,560 --> 00:09:24,310
So four 8480 that's fine.

128
00:09:24,310 --> 00:09:28,030
The heights should be much, much smaller.

129
00:09:28,300 --> 00:09:29,710
So maybe 40.

130
00:09:31,840 --> 00:09:33,070
Yeah, that should do it.

131
00:09:33,160 --> 00:09:34,210
Let's copy this.

132
00:09:34,210 --> 00:09:34,620
Paste.

133
00:09:34,630 --> 00:09:35,800
It's in the button.

134
00:09:36,340 --> 00:09:37,990
So this is the button self.

135
00:09:37,990 --> 00:09:40,450
That button, that geometry ten.

136
00:09:40,750 --> 00:09:41,880
No, it's not ten.

137
00:09:41,890 --> 00:09:42,550
This time.

138
00:09:42,550 --> 00:09:49,450
It's going to be something like ten plus the width of this, which is 480.

139
00:09:49,450 --> 00:09:53,980
So that makes for 90 plus ten.

140
00:09:53,980 --> 00:09:55,450
500.

141
00:09:56,350 --> 00:09:59,620
So 500 for the first coordinate.

142
00:09:59,650 --> 00:10:04,590
The second one will be the same as the input field widgets.

143
00:10:04,600 --> 00:10:07,360
So this vertical.

144
00:10:08,460 --> 00:10:11,790
Space, which was 340.

145
00:10:12,030 --> 00:10:13,110
So we're here.

146
00:10:13,380 --> 00:10:20,490
So ten 340, the width of the button, maybe 100.

147
00:10:22,460 --> 00:10:24,490
And the height is 40.

148
00:10:24,500 --> 00:10:25,370
That's fine.

149
00:10:29,030 --> 00:10:29,200
Yeah.

150
00:10:29,210 --> 00:10:30,050
Let's run.

151
00:10:30,680 --> 00:10:31,880
It doesn't look.

152
00:10:33,050 --> 00:10:33,780
Correct.

153
00:10:33,800 --> 00:10:34,880
Let's see why.

154
00:10:35,690 --> 00:10:40,510
Oh, that's because I place 500 here when this should have been ten.

155
00:10:40,520 --> 00:10:42,080
But this was 500.

156
00:10:42,080 --> 00:10:42,590
Sorry.

157
00:10:44,810 --> 00:10:47,750
So close that we run again.

158
00:10:47,960 --> 00:10:49,260
Now it looks fine.

159
00:10:49,300 --> 00:10:49,820
Yep.

160
00:10:50,270 --> 00:10:52,670
So we have this input widgets here.

161
00:10:52,670 --> 00:10:56,620
We have this, but this shouldn't be writable.

162
00:10:56,630 --> 00:11:03,380
We should make this read only to make that area read only because that's the area where the messages

163
00:11:03,380 --> 00:11:06,800
will be displayed and we shouldn't modify those messages.

164
00:11:06,800 --> 00:11:08,960
So we're talking about chat area.

165
00:11:08,960 --> 00:11:19,530
So do sell dot chat area and refer to the set read only method which gets through as argument.

166
00:11:19,760 --> 00:11:22,070
So that will make it read only.

167
00:11:23,240 --> 00:11:23,990
Let's try it.

168
00:11:24,490 --> 00:11:24,760
Yeah.

169
00:11:24,770 --> 00:11:30,140
Now we cannot set our cursor inside that area so it's view only.

170
00:11:30,140 --> 00:11:32,630
And yeah, that's about this video.

171
00:11:33,670 --> 00:11:43,180
We have an interface now which doesn't do anything right, but we need to populate it with texts and

172
00:11:43,180 --> 00:11:46,240
we'll keep on working on that in the next videos.

173
00:11:46,270 --> 00:11:47,030
Thanks a lot.

174
00:11:47,050 --> 00:11:47,770
I'll see you there.