1 00:00:00,450 --> 00:00:01,290 Hello, everyone. 2 00:00:01,710 --> 00:00:08,010 Now we will start building our up, so in this video, I will show you how how we can create the skeleton 3 00:00:08,220 --> 00:00:12,810 of the Earth, which means that we will create the buttons, labels and the frame. 4 00:00:13,200 --> 00:00:16,400 So, as you can see, this is a picture of our up. 5 00:00:16,590 --> 00:00:20,610 So we create these buttons, the entry label and this frame. 6 00:00:21,100 --> 00:00:24,480 So the first thing that we have to do is to create the window. 7 00:00:24,870 --> 00:00:32,130 So we will import interlibrary from the to import 8 00:00:34,440 --> 00:00:35,080 everything. 9 00:00:35,730 --> 00:00:39,810 No, we will create road rules equal. 10 00:00:40,800 --> 00:00:42,120 Teekay No. 11 00:00:42,120 --> 00:00:50,520 We will put it in the main loop to don't forget it may look like this now we would do some changes or 12 00:00:50,520 --> 00:00:59,100 indeed the app will change the geometry, the color, the data, etc. So we start by the data. 13 00:00:59,610 --> 00:01:05,100 We have this one, as you can see, image on version. 14 00:01:07,300 --> 00:01:18,060 Like this now will make the the I can good, I can hear I can now we have a logo that easy. 15 00:01:18,100 --> 00:01:21,690 Oh we have done this before so I am doing this too fast. 16 00:01:22,570 --> 00:01:32,760 No, we will make geometry so that geometry I will put it to five hundred by six fifty. 17 00:01:32,770 --> 00:01:35,650 So we have like this one like this. 18 00:01:36,730 --> 00:01:38,870 We will see how it looks for the moment. 19 00:01:39,010 --> 00:01:42,970 Now this is the, the window now we would change the color. 20 00:01:43,300 --> 00:01:46,030 So rules that go for you. 21 00:01:47,140 --> 00:01:52,090 Here we have B.G. equals I choose the color. 22 00:01:52,090 --> 00:01:57,010 Which one be one B to one. 23 00:01:58,210 --> 00:01:59,920 I think that this is the color. 24 00:01:59,950 --> 00:02:00,320 Yes. 25 00:02:00,340 --> 00:02:03,870 This one, as you can see, this is this color, this background, this background. 26 00:02:03,880 --> 00:02:06,210 Color is this one. 27 00:02:06,640 --> 00:02:10,360 So this is the idea up now. 28 00:02:10,360 --> 00:02:12,800 We will start making stuff on it. 29 00:02:12,800 --> 00:02:16,060 So we will create the label with the frame, which is this one. 30 00:02:16,240 --> 00:02:20,490 After that, we create all these buttons and entry and this label. 31 00:02:20,920 --> 00:02:25,960 So to create frame, I will make a comment here. 32 00:02:25,960 --> 00:02:34,540 For example, create a frame like this now we will call it frame equals frame function. 33 00:02:34,540 --> 00:02:37,510 We put it in the looks like this now. 34 00:02:38,470 --> 00:02:44,140 We will we will choose choose the the width and the height of this frame. 35 00:02:44,410 --> 00:02:52,360 So for the for the we will take it just like the the weight of our up, I will make it a little bit 36 00:02:52,870 --> 00:02:53,380 smaller. 37 00:02:53,380 --> 00:02:56,710 So we will make it like this with equal. 38 00:02:56,710 --> 00:03:09,070 I will make it four hundred and fifty then the high I will make it five hundred, then we will put it 39 00:03:09,070 --> 00:03:16,460 in the image of this like this frame that back like this not. 40 00:03:16,570 --> 00:03:23,470 But I would make a great because we need to create all the other stuff so I will make the grade here. 41 00:03:23,470 --> 00:03:29,410 I will put it in zero zero then the column zero. 42 00:03:35,620 --> 00:03:44,260 And I will make a concern for three not like this column, CBRNE equals three, I will divide the up 43 00:03:44,260 --> 00:03:50,260 into the side three columns because we need the first column for this button, for example, the second 44 00:03:50,260 --> 00:03:52,690 column for this button and third for this button. 45 00:03:53,650 --> 00:03:56,620 OK, now we will see how it looks. 46 00:03:57,100 --> 00:03:57,780 We stop it. 47 00:03:57,790 --> 00:04:02,280 And here we have our out of frame in the up. 48 00:04:02,290 --> 00:04:04,040 So we will make some padding on it. 49 00:04:04,720 --> 00:04:10,840 The first thing that we have to do is to make putting on X, which is in this function here. 50 00:04:11,200 --> 00:04:17,940 So we make but X equals 25 will see if it is great. 51 00:04:18,910 --> 00:04:24,400 I will add a little bit and make it twenty seven like this. 52 00:04:24,400 --> 00:04:25,330 It is in the middle. 53 00:04:26,170 --> 00:04:26,750 This is great. 54 00:04:27,190 --> 00:04:32,580 No we will make the I will make some padding on in the Y. 55 00:04:33,100 --> 00:04:33,550 Not yet. 56 00:04:33,550 --> 00:04:35,930 I will put it after because I don't want it. 57 00:04:35,950 --> 00:04:39,880 I will meet somebody on the way for the moment but y. 58 00:04:42,920 --> 00:04:48,640 For for the function of the padding, there is something that I didn't told you about, we can write, 59 00:04:48,640 --> 00:04:54,800 for example, 20, so if we write 20, we will have 20 putting in the top and 20 in the bottom. 60 00:04:55,090 --> 00:05:02,050 But if you want to make just button, sorry, but if we want to make padding just in the in the top, 61 00:05:02,050 --> 00:05:06,310 for example, we can use this function, but we will add this parenthesis. 62 00:05:06,430 --> 00:05:08,990 So we have here to two parameters. 63 00:05:09,010 --> 00:05:14,390 The first part is how many buttons we want to make in the top. 64 00:05:14,410 --> 00:05:18,500 And here we were, how many padding we want to make in the bottom button. 65 00:05:19,120 --> 00:05:21,980 So for this case, I will make four. 66 00:05:22,000 --> 00:05:23,830 I will make two in the top. 67 00:05:23,840 --> 00:05:25,330 And here I will make zero. 68 00:05:25,570 --> 00:05:27,890 After that, I will see if we will change it or not. 69 00:05:28,640 --> 00:05:34,720 Now, here we have to great now will create the buttons. 70 00:05:34,720 --> 00:05:38,110 So we have, as you can see here, we have three buttons. 71 00:05:38,140 --> 00:05:42,840 The first one is for the conversion from the BFG to to GPG. 72 00:05:43,090 --> 00:05:47,800 The second button is the clear and third is from the GBG to the being. 73 00:05:48,340 --> 00:05:50,140 So we were created here. 74 00:05:52,390 --> 00:05:57,160 I will make it like this creates 75 00:06:00,310 --> 00:06:03,140 the buttons like this. 76 00:06:03,520 --> 00:06:11,500 Now, the first button that we have is to convert from the BSG to a GBG, so we will give it the name 77 00:06:11,500 --> 00:06:13,690 PFG to GBG. 78 00:06:14,170 --> 00:06:15,420 This is the name of our button. 79 00:06:15,760 --> 00:06:16,560 No, no. 80 00:06:16,570 --> 00:06:21,340 Here we have Button and we will put it in the root root. 81 00:06:21,820 --> 00:06:25,680 Now we will give it the text equals. 82 00:06:25,720 --> 00:06:32,540 We will give it the name which is being used to Deepti like this. 83 00:06:33,410 --> 00:06:40,640 Now after that we will change the we will change the font and we will make some padding on the X and 84 00:06:40,640 --> 00:06:44,590 the to to to control the size of our buttons. 85 00:06:45,070 --> 00:06:50,780 So here we will make the size of the padding on the X equal 20. 86 00:06:51,430 --> 00:06:54,970 Now the putting on the Y equal I would put it seven. 87 00:06:56,290 --> 00:07:01,270 Now for the for the color and for the font. 88 00:07:01,270 --> 00:07:11,650 I will give it here none but I will change the the size of the photo, put it 20 and put it like this. 89 00:07:12,880 --> 00:07:21,350 Now I will like it before I will put it up to the frame as you can see. 90 00:07:21,640 --> 00:07:23,890 So here we have been here to GPG. 91 00:07:23,890 --> 00:07:25,520 Equal, not equal. 92 00:07:25,520 --> 00:07:27,270 Sorry GBG. 93 00:07:27,280 --> 00:07:28,570 That's great. 94 00:07:32,150 --> 00:07:45,680 What I am doing here, but being the GBG, that is not working this one, so that's great like this 95 00:07:46,040 --> 00:07:52,190 now we will put it in the in the low one because we have the frame in the Lozito and we want the button 96 00:07:52,370 --> 00:07:54,080 will be after the frame. 97 00:07:54,080 --> 00:07:57,690 So we will put it in the little one and make some space here. 98 00:07:58,130 --> 00:08:06,920 So here we have the row equal one, then we have the there the color and we put it in the current zero 99 00:08:06,920 --> 00:08:08,580 because it is the first item. 100 00:08:09,020 --> 00:08:13,030 So here we have got an equal zero. 101 00:08:13,520 --> 00:08:15,170 Then we will do some padding. 102 00:08:15,980 --> 00:08:17,090 We will do it after four. 103 00:08:17,090 --> 00:08:18,860 Don't we let it slide just like this. 104 00:08:19,100 --> 00:08:23,370 So we have in frame in the one and zero, we see how it looks. 105 00:08:23,900 --> 00:08:25,270 This is our bottom. 106 00:08:25,790 --> 00:08:32,000 So I will make some padding in the in the way for our frame to put this down. 107 00:08:32,240 --> 00:08:34,270 So we have what is it. 108 00:08:34,280 --> 00:08:34,960 This one. 109 00:08:35,270 --> 00:08:41,330 So we have zero, I would put it, for example, five and we would see how it looks just great like 110 00:08:41,330 --> 00:08:41,610 this. 111 00:08:41,930 --> 00:08:44,020 So now what will we do? 112 00:08:44,150 --> 00:08:46,300 We have we have created this button. 113 00:08:46,670 --> 00:08:48,880 Now we will create the second and the third. 114 00:08:49,190 --> 00:08:54,960 So second is four to clear, I will put it just like here. 115 00:08:55,520 --> 00:09:00,740 Clear, clear, equal button. 116 00:09:02,090 --> 00:09:03,720 Then we will put it in the road. 117 00:09:04,460 --> 00:09:11,060 Then we have text equals more clear the same thing. 118 00:09:11,750 --> 00:09:19,940 Now I will take just like just this one and this one and this one control see cede control to make it 119 00:09:19,940 --> 00:09:21,170 just like the first one. 120 00:09:21,680 --> 00:09:24,710 I have to back it to grade it. 121 00:09:24,950 --> 00:09:33,020 So we have here clear that grade then it is in the same row but it is in the second column. 122 00:09:33,290 --> 00:09:35,770 So we have, we have to put it just like this though. 123 00:09:35,780 --> 00:09:43,070 Equal one then column equals one because it is second. 124 00:09:43,340 --> 00:09:49,850 But now we will see how it looks so we can see that there is the first button and second. 125 00:09:49,850 --> 00:09:54,710 But don't worry about it, because as you can see here, we have this button in the middle, but it 126 00:09:54,710 --> 00:09:57,920 will be in the middle when we will create the third button. 127 00:09:57,950 --> 00:10:13,020 OK, so here we have to create the third button, which is from the GPG DPG to be an equal button must 128 00:10:13,280 --> 00:10:14,900 to my button. 129 00:10:15,350 --> 00:10:16,030 No, no. 130 00:10:16,040 --> 00:10:27,740 We will put it in the road then the text equals here we have GPG to be engy to be ahead like this and 131 00:10:27,740 --> 00:10:31,850 we just copied, we have already copied it so we just use it. 132 00:10:32,000 --> 00:10:35,780 I will stop this now we have to back it. 133 00:10:35,780 --> 00:10:39,080 So we have here GBG to PMG Dot. 134 00:10:39,440 --> 00:10:40,070 Great. 135 00:10:41,030 --> 00:10:48,860 Then we will just, we make it in the same row which is the one then the column it is in the circle 136 00:10:48,860 --> 00:10:49,080 on. 137 00:10:49,470 --> 00:10:53,660 So which is the column too like this. 138 00:10:53,660 --> 00:10:56,120 So we will see how it looks here. 139 00:10:56,120 --> 00:10:58,460 As you can see, it is just like the same. 140 00:10:58,460 --> 00:11:00,920 Here we have this one. 141 00:11:01,670 --> 00:11:04,070 This is the first, this is the second and the third. 142 00:11:04,490 --> 00:11:08,990 Now we have created the buttons we have just to create this label and this entry. 143 00:11:09,260 --> 00:11:10,640 So it is too easy. 144 00:11:10,640 --> 00:11:17,830 For example, the moment we have the label so created here, make a comment. 145 00:11:18,170 --> 00:11:28,070 For example, create create a label for the file name like this. 146 00:11:28,460 --> 00:11:31,490 No, I will make space like this. 147 00:11:31,640 --> 00:11:32,720 No, no. 148 00:11:32,720 --> 00:11:33,560 We were created. 149 00:11:33,800 --> 00:11:38,810 I will give it for example, the name file filename 150 00:11:41,150 --> 00:11:41,660 label. 151 00:11:43,610 --> 00:11:46,550 No we created like this label. 152 00:11:46,550 --> 00:11:49,340 We will put in the rules then we have the text. 153 00:11:49,940 --> 00:11:53,960 As you can see here, the text is filename so we will let it just like this. 154 00:11:54,290 --> 00:12:03,890 We have here file name now we will change the font and we will change the size of the text. 155 00:12:04,130 --> 00:12:10,430 So we will give the color because if we let it like this, we we will have the background of our our 156 00:12:10,550 --> 00:12:12,650 label above white. 157 00:12:12,830 --> 00:12:16,700 But we wanted it the same thing of this color, which is the background. 158 00:12:16,700 --> 00:12:19,070 So we will just copy this from here. 159 00:12:21,130 --> 00:12:27,140 Control, see the control now we will change the font. 160 00:12:28,520 --> 00:12:30,140 The font I will make it equals. 161 00:12:30,910 --> 00:12:34,180 Again, that we have used this before. 162 00:12:34,390 --> 00:12:46,210 Propaganda like this was proper conduct like this that the size 12 and we will put it, but no, we 163 00:12:46,210 --> 00:12:47,380 will package here. 164 00:12:47,830 --> 00:12:52,350 We have it in the second in the third row, which is row two. 165 00:12:52,630 --> 00:13:02,920 So we have here filename that label, that grade, which is in the row equal to then the the column 166 00:13:03,520 --> 00:13:05,240 I will put it in the column zero. 167 00:13:06,120 --> 00:13:11,160 Now this is our this is in the column zero. 168 00:13:11,500 --> 00:13:13,260 We will see how it looks for the moment. 169 00:13:14,500 --> 00:13:15,820 This is our label. 170 00:13:15,820 --> 00:13:18,430 We will push it down a little bit. 171 00:13:19,000 --> 00:13:23,300 So we will use the padding in the Y. 172 00:13:23,680 --> 00:13:26,980 Now we will do some padding just in the top. 173 00:13:27,220 --> 00:13:28,870 So we will use this function. 174 00:13:28,890 --> 00:13:33,250 This parenthesis in the in the top will do, for example, ten. 175 00:13:33,610 --> 00:13:36,870 But in the bottom we will make that it zero. 176 00:13:36,890 --> 00:13:40,480 We we don't want some padding on the bottom like this. 177 00:13:40,870 --> 00:13:44,560 We will put it more down to 20. 178 00:13:47,520 --> 00:13:50,610 And we will see, OK? 179 00:13:50,760 --> 00:13:55,210 It is great here it is just like this one. 180 00:13:55,620 --> 00:13:57,270 Now we have to create the entry. 181 00:13:57,510 --> 00:14:12,630 So here we have to make a comment, create an entry for the file name like this. 182 00:14:13,290 --> 00:14:22,100 Now, we created, for example, like this box or I don't know what it's just like this file name without 183 00:14:22,100 --> 00:14:22,570 a label. 184 00:14:22,860 --> 00:14:32,550 So here we have entry and we would put it in the roots like this and to to make the size of this entry 185 00:14:32,550 --> 00:14:35,850 as as much size of our label. 186 00:14:36,060 --> 00:14:43,170 So for this, we have to change the font size of our font size for this one. 187 00:14:43,440 --> 00:14:47,970 So we'll just make it like this font. 188 00:14:48,330 --> 00:14:54,760 Which one I will take just this one or this one, the great control. 189 00:14:54,780 --> 00:14:57,260 See, then what is it? 190 00:14:57,270 --> 00:15:00,540 This one control we know we will see. 191 00:15:01,180 --> 00:15:02,430 I forget the package. 192 00:15:02,460 --> 00:15:03,630 I will back in just here. 193 00:15:04,080 --> 00:15:08,820 We have fine name, not a label but great. 194 00:15:11,030 --> 00:15:19,880 That's great, and he would put it in the same bottle of labels, also equal to the in the column equal 195 00:15:21,830 --> 00:15:23,860 one, because we want it in the next column. 196 00:15:24,200 --> 00:15:25,430 So we'll see how it looks. 197 00:15:25,880 --> 00:15:26,910 Here we have this one. 198 00:15:26,910 --> 00:15:29,110 We will put it put it down. 199 00:15:29,510 --> 00:15:31,640 We take this same thing here. 200 00:15:31,820 --> 00:15:34,760 But think of why and would put it here. 201 00:15:36,080 --> 00:15:42,650 Now, as you can see, this is the this is what what we see here in the picture, as you can see here, 202 00:15:42,680 --> 00:15:44,210 and this is our up. 203 00:15:44,990 --> 00:15:47,510 We have changed the name. 204 00:15:47,510 --> 00:15:54,560 And I can add we have created these three buttons and we have this label like this one and we have the 205 00:15:54,560 --> 00:15:54,920 entry. 206 00:15:55,520 --> 00:15:56,720 No will stop here. 207 00:15:56,720 --> 00:16:03,470 And in the next video, we start making the functions for each of this and we will create and finish 208 00:16:03,470 --> 00:16:04,100 our up. 209 00:16:04,130 --> 00:16:05,500 So I see you that. 210 00:16:05,580 --> 00:16:06,650 Stay safe by.