WEBVTT 1 00:00:00.320 --> 00:00:02.480 Hi guys and welcome back. 2 00:00:02.480 --> 00:00:04.830 In this video, we're going to learn about pack. 3 00:00:05.710 --> 00:00:09.510 Pack, you can think of it as putting the components 4 00:00:09.510 --> 00:00:12.550 in the window where they fit, 5 00:00:12.550 --> 00:00:15.180 given that they adhere to certain constraints 6 00:00:15.180 --> 00:00:16.183 that we give it. 7 00:00:17.120 --> 00:00:19.890 Pack can be a little bit confusing 8 00:00:19.890 --> 00:00:22.640 and a little bit unpredictable at times. 9 00:00:22.640 --> 00:00:24.860 This is why, in this video, we're going to explain 10 00:00:24.860 --> 00:00:28.083 how pack behaves by giving you many examples. 11 00:00:29.240 --> 00:00:32.220 Let's start by creating a couple of labels. 12 00:00:32.220 --> 00:00:36.880 And here, I'm using tk labels as opposed to ttk labels 13 00:00:36.880 --> 00:00:40.250 just because we don't need the themed 14 00:00:40.250 --> 00:00:42.633 or the styling of those labels at this point. 15 00:00:43.910 --> 00:00:47.063 So we're gonna put two labels in the root. 16 00:00:49.500 --> 00:00:51.660 Okay, here, we have two labels 17 00:00:51.660 --> 00:00:53.810 and we have placed them in the root. 18 00:00:53.810 --> 00:00:55.390 Now, if you remember correctly, 19 00:00:55.390 --> 00:00:57.770 whenever you run a code like this, 20 00:00:57.770 --> 00:00:59.370 you won't get anything in your window 21 00:00:59.370 --> 00:01:01.950 because you've not packed the components into it 22 00:01:01.950 --> 00:01:03.900 or you've not placed them. 23 00:01:03.900 --> 00:01:05.940 I'll say at this point that as well as pack, 24 00:01:05.940 --> 00:01:08.510 there are other algorithms for placing components 25 00:01:08.510 --> 00:01:12.380 in the container, but we're only learning about pack 26 00:01:12.380 --> 00:01:13.373 in this course. 27 00:01:14.630 --> 00:01:18.883 Let's give these labels some text, so I'll say Label 1, 28 00:01:19.810 --> 00:01:23.610 and some background, which will be green. 29 00:01:23.610 --> 00:01:27.390 And the other one is gonna be text equal Label 2 30 00:01:27.390 --> 00:01:29.503 and the background is going to be red. 31 00:01:30.940 --> 00:01:32.520 Then we're gonna pack them. 32 00:01:32.520 --> 00:01:35.220 So the first one, we will pack on the left 33 00:01:36.310 --> 00:01:39.763 and the second one, we will pack on the top. 34 00:01:41.440 --> 00:01:42.573 Let's run this here. 35 00:01:43.640 --> 00:01:47.750 You can see that they appear side by side 36 00:01:47.750 --> 00:01:50.217 even though one has been packed on the left 37 00:01:50.217 --> 00:01:52.490 and the other one has been packed on the top. 38 00:01:52.490 --> 00:01:54.563 So what does side mean? 39 00:01:55.440 --> 00:01:58.780 Well, you can think of side as the anchor point 40 00:01:58.780 --> 00:02:00.800 to the component. 41 00:02:00.800 --> 00:02:03.970 And what that means is that this component, Label 1, 42 00:02:03.970 --> 00:02:08.900 is glued to the previous component or the window 43 00:02:08.900 --> 00:02:12.150 by the left side of it. 44 00:02:12.150 --> 00:02:16.930 By contrast, Label 2 is glued to the window on the top 45 00:02:16.930 --> 00:02:17.993 and not on the left. 46 00:02:19.920 --> 00:02:22.750 You can see that that happens as you expand the window. 47 00:02:22.750 --> 00:02:25.770 The Label 2 keeps being stuck at the top, 48 00:02:25.770 --> 00:02:28.780 but Label 1 is stuck on the left. 49 00:02:28.780 --> 00:02:33.550 As the space expands, Label 1 has no knowledge 50 00:02:33.550 --> 00:02:37.300 of vertical distance because it is glued on the left, 51 00:02:37.300 --> 00:02:39.240 so it always stays in the middle, 52 00:02:39.240 --> 00:02:42.900 and Label 2 has no knowledge of vertical distance, 53 00:02:42.900 --> 00:02:44.660 so it stays on the left 54 00:02:44.660 --> 00:02:48.350 as close to where it originally appeared as possible. 55 00:02:48.350 --> 00:02:50.850 Next up, let's use fill. 56 00:02:50.850 --> 00:02:54.160 So we will say fill equal y 57 00:02:54.160 --> 00:02:56.620 and fill equal x. 58 00:02:56.620 --> 00:02:57.670 Let's run this again. 59 00:02:59.560 --> 00:03:01.223 And now, look at what happens. 60 00:03:02.770 --> 00:03:07.230 We have filled on the y-axis, the left 61 00:03:07.230 --> 00:03:08.260 label, 62 00:03:08.260 --> 00:03:11.360 and that means that it now takes up as much vertical space 63 00:03:11.360 --> 00:03:13.030 as is available. 64 00:03:13.030 --> 00:03:16.050 So the background and indeed the entire label 65 00:03:16.050 --> 00:03:19.390 spans the whole vertical space. 66 00:03:19.390 --> 00:03:22.560 Similarly, Label 2 spans the whole horizontal space 67 00:03:22.560 --> 00:03:24.410 or as much as is available, 68 00:03:24.410 --> 00:03:29.000 but there is a gap here where the green label is. 69 00:03:29.000 --> 00:03:33.130 Because the green label was added first, it takes priority, 70 00:03:33.130 --> 00:03:36.410 so it fills on the y-axis first 71 00:03:36.410 --> 00:03:38.983 before Label 2 has a chance to expand. 72 00:03:40.450 --> 00:03:45.293 If we do the other way round, putting Label 2 first, 73 00:03:47.050 --> 00:03:48.450 then you'll see what I mean. 74 00:03:49.660 --> 00:03:54.290 So now, Label 2 is glued at the top, Label 1 is on the left. 75 00:03:54.290 --> 00:03:57.320 As we expand this, you can see that Label 2 now takes up 76 00:03:57.320 --> 00:03:59.820 the entire area because it takes priority. 77 00:03:59.820 --> 00:04:01.573 It was put in there first. 78 00:04:06.160 --> 00:04:08.060 Let's go back to this. 79 00:04:08.060 --> 00:04:10.473 Instead of x and y, we can do both. 80 00:04:13.975 --> 00:04:17.080 And here is where it starts to get interesting. 81 00:04:17.080 --> 00:04:19.300 So we've got both of these labels here 82 00:04:19.300 --> 00:04:23.480 and as we expand, you'll see that nothing happens 83 00:04:23.480 --> 00:04:25.623 that is different from what we had before. 84 00:04:26.620 --> 00:04:30.500 That is because even though these labels have a fill 85 00:04:30.500 --> 00:04:34.480 that tells them to take up all the available space 86 00:04:34.480 --> 00:04:37.000 on both x and y, 87 00:04:37.000 --> 00:04:40.730 there is no available space on x and y. 88 00:04:40.730 --> 00:04:45.730 This label here only takes up this much space horizontally 89 00:04:46.280 --> 00:04:48.100 and this label here only takes up 90 00:04:48.100 --> 00:04:50.023 this much space vertically. 91 00:04:50.950 --> 00:04:55.880 That comes to mean that you can only fill a label 92 00:04:55.880 --> 00:04:57.660 cross-axis. 93 00:04:57.660 --> 00:05:01.200 So if it has a side of top, 94 00:05:01.200 --> 00:05:03.540 then you can fill it in x. 95 00:05:03.540 --> 00:05:06.603 And if it has a side of left, you can fill it in y. 96 00:05:07.580 --> 00:05:08.680 Unless 97 00:05:09.900 --> 00:05:11.420 you use expand. 98 00:05:11.420 --> 00:05:14.150 And we're gonna learn about that in just a moment. 99 00:05:14.150 --> 00:05:16.933 Now, if you remove fill both from one of them, 100 00:05:19.030 --> 00:05:20.330 then this is what happens. 101 00:05:22.480 --> 00:05:25.720 The label stays in the middle of the axis 102 00:05:25.720 --> 00:05:26.943 that you told it to. 103 00:05:27.790 --> 00:05:31.470 It doesn't have any knowledge of the vertical spacing 104 00:05:31.470 --> 00:05:34.040 and indeed it doesn't take up that space. 105 00:05:34.040 --> 00:05:37.070 However, the space is still reserved for it, 106 00:05:37.070 --> 00:05:40.033 so this label cannot span into that. 107 00:05:41.710 --> 00:05:44.820 Now, let's use expand. 108 00:05:44.820 --> 00:05:46.000 So we'll do fill 109 00:05:47.530 --> 00:05:49.010 equal both 110 00:05:49.010 --> 00:05:50.410 and expand equal true 111 00:05:51.260 --> 00:05:54.363 in just the one label to show you what happens. 112 00:05:56.590 --> 00:05:58.830 Now that we've got expand equal true, 113 00:05:58.830 --> 00:06:01.860 what that does is it requests from the container 114 00:06:01.860 --> 00:06:04.190 as much space as possible, 115 00:06:04.190 --> 00:06:07.520 so that the other containers don't shrink 116 00:06:07.520 --> 00:06:10.703 past the minimum content width. 117 00:06:11.710 --> 00:06:13.510 So this is a little bit confusing. 118 00:06:13.510 --> 00:06:16.160 But essentially, Label 2 still gets to keep 119 00:06:16.160 --> 00:06:19.180 the space it needs to show its text. 120 00:06:19.180 --> 00:06:22.270 Label 1 takes up all the other space 121 00:06:22.270 --> 00:06:24.430 and because it has fill of both, 122 00:06:24.430 --> 00:06:27.610 then it takes up the entire space there. 123 00:06:27.610 --> 00:06:30.713 Notice that if we say fill only on y here, 124 00:06:33.530 --> 00:06:37.890 now, this label is still taking up all of the space, 125 00:06:37.890 --> 00:06:41.080 but the component itself is only taking up 126 00:06:41.080 --> 00:06:43.900 as much of the y space as possible. 127 00:06:43.900 --> 00:06:46.300 The rest of the space is still reserved for it, 128 00:06:46.300 --> 00:06:47.683 but it is not being used. 129 00:06:48.940 --> 00:06:53.010 Next up, let's make both labels side top 130 00:06:53.010 --> 00:06:56.733 and both labels with fill both and expand true. 131 00:06:59.740 --> 00:07:04.740 Now, what happens is that both labels are stuck to the top 132 00:07:04.940 --> 00:07:06.720 of the previous element. 133 00:07:06.720 --> 00:07:10.080 So Label 1 is stuck to the top of the container, 134 00:07:10.080 --> 00:07:13.240 Label 2 is stuck to the top of Label 1. 135 00:07:13.240 --> 00:07:15.140 And in both cases, they're gonna take up 136 00:07:15.140 --> 00:07:16.620 as much room as possible 137 00:07:16.620 --> 00:07:19.790 and they're both requesting all of the space. 138 00:07:19.790 --> 00:07:22.470 In that case, it gets shared 50-50, 139 00:07:22.470 --> 00:07:25.100 so both labels will fill in the y-axis 140 00:07:25.100 --> 00:07:27.870 as they would normally because side is top, 141 00:07:27.870 --> 00:07:30.910 and both labels grow on the x-axis 142 00:07:30.910 --> 00:07:33.263 because they both have expand equal true. 143 00:07:34.100 --> 00:07:37.910 Whichever side comes first gets the expansion priority. 144 00:07:37.910 --> 00:07:39.870 We mentioned this earlier briefly, 145 00:07:39.870 --> 00:07:43.040 but let's create another label in the root 146 00:07:43.040 --> 00:07:45.920 with text of Label Left 147 00:07:45.920 --> 00:07:48.730 and the background is going to be green. 148 00:07:48.730 --> 00:07:52.870 And we're going to pack it on the left 149 00:07:52.870 --> 00:07:54.340 with expand equal true 150 00:07:55.270 --> 00:07:57.570 and fill of both. 151 00:07:57.570 --> 00:08:00.830 Now, these other labels are gonna stay on top 152 00:08:00.830 --> 00:08:03.580 with fill both and expand true. 153 00:08:03.580 --> 00:08:07.110 And I'm gonna make this one red as well. 154 00:08:07.110 --> 00:08:09.850 So if we do this and we press play, 155 00:08:09.850 --> 00:08:14.850 you'll see that the side of left gets the expansion priority 156 00:08:14.870 --> 00:08:18.220 and takes up all of the horizontal space, 157 00:08:18.220 --> 00:08:23.220 and these labels here are only taking up vertical space. 158 00:08:23.260 --> 00:08:26.190 That is because they have a different side 159 00:08:26.190 --> 00:08:27.913 and they were placed afterwards. 160 00:08:28.950 --> 00:08:30.743 If you do it the other way round, 161 00:08:32.160 --> 00:08:34.120 you'll see that now, the opposite happens. 162 00:08:34.120 --> 00:08:37.610 These labels take up all the horizontal and vertical space, 163 00:08:37.610 --> 00:08:39.810 and this one is left with basically nothing. 164 00:08:40.830 --> 00:08:42.670 I would recommend that you play around 165 00:08:42.670 --> 00:08:44.630 with a lot of these different examples. 166 00:08:44.630 --> 00:08:47.930 It took me a long time to fully understand what's going on 167 00:08:47.930 --> 00:08:50.763 with these before moving on. 168 00:08:52.100 --> 00:08:55.170 Finally, something worth mentioning in this example 169 00:08:55.170 --> 00:08:58.930 is that even though this label has a side of left, 170 00:08:58.930 --> 00:09:02.063 it still appeared underneath these other labels. 171 00:09:02.900 --> 00:09:06.360 And that is because when you anchor a label 172 00:09:06.360 --> 00:09:10.430 and give side of top, it takes up the whole 173 00:09:10.430 --> 00:09:12.853 vertical space available. 174 00:09:13.830 --> 00:09:17.970 Anything after it will appear underneath it. 175 00:09:17.970 --> 00:09:20.500 Similarly, when you give a side of left, 176 00:09:20.500 --> 00:09:23.160 it takes up all the vertical space 177 00:09:23.160 --> 00:09:25.893 and the next element will appear on its right. 178 00:09:27.070 --> 00:09:29.200 So this is what happens when the first element 179 00:09:29.200 --> 00:09:30.483 has a side of top. 180 00:09:31.370 --> 00:09:34.060 And again, going back to the previous example, 181 00:09:34.060 --> 00:09:35.950 if you have a side of left first, 182 00:09:35.950 --> 00:09:39.620 this element takes up the entire vertical space 183 00:09:39.620 --> 00:09:44.260 and all future elements appear on the right. 184 00:09:44.260 --> 00:09:47.120 So this element took up the entire vertical space. 185 00:09:47.120 --> 00:09:49.400 The next label appears on the right 186 00:09:49.400 --> 00:09:52.570 and it takes up the whole horizontal space, 187 00:09:52.570 --> 00:09:55.860 so the next label appears underneath it. 188 00:09:55.860 --> 00:10:00.740 So this one has also taken up the whole horizontal space. 189 00:10:00.740 --> 00:10:02.640 So if we have another label top, 190 00:10:02.640 --> 00:10:05.390 it will also appear underneath it stacked. 191 00:10:05.390 --> 00:10:08.443 But what happens if we add another left? 192 00:10:11.740 --> 00:10:15.920 Well, because the previous label has a top, 193 00:10:15.920 --> 00:10:18.040 this one also appears underneath. 194 00:10:18.040 --> 00:10:22.160 So the label itself's side is irrelevant 195 00:10:22.160 --> 00:10:23.740 where it is placed. 196 00:10:23.740 --> 00:10:27.623 What matters is what previous elements have as their sides. 197 00:10:28.580 --> 00:10:31.690 Okay, so now, if we put another left, 198 00:10:31.690 --> 00:10:35.060 given that this previous one has a side of left, 199 00:10:35.060 --> 00:10:37.853 you'll see that it appears here. 200 00:10:38.910 --> 00:10:41.580 So this one took up all the vertical space, 201 00:10:41.580 --> 00:10:44.260 then this one took up all the horizontal space, 202 00:10:44.260 --> 00:10:46.890 then this one takes up all the horizontal space, 203 00:10:46.890 --> 00:10:47.850 then this one takes up 204 00:10:47.850 --> 00:10:50.450 all the vertical space that's remaining, 205 00:10:50.450 --> 00:10:52.800 and this one appears next beside it 206 00:10:52.800 --> 00:10:56.600 since there is no more vertical space to go around. 207 00:10:56.600 --> 00:11:00.060 So as you mix and match these spaces, 208 00:11:00.060 --> 00:11:02.580 essentially, the distribution changes, 209 00:11:02.580 --> 00:11:06.290 but what matters is what the previous element 210 00:11:06.290 --> 00:11:08.130 had as their side. 211 00:11:08.130 --> 00:11:11.420 If the previous element had a side of left or right, 212 00:11:11.420 --> 00:11:13.760 if it has one of those two, 213 00:11:13.760 --> 00:11:17.200 then that takes up the whole vertical space. 214 00:11:17.200 --> 00:11:19.310 And if it has a side of top or bottom, 215 00:11:19.310 --> 00:11:21.820 it takes up the whole horizontal space 216 00:11:21.820 --> 00:11:24.433 and the next element will appear accordingly. 217 00:11:25.620 --> 00:11:28.350 Please, again, do play around with these. 218 00:11:28.350 --> 00:11:32.340 Play around with expand, fill x, fill y, 219 00:11:32.340 --> 00:11:34.670 and with different configurations of these labels 220 00:11:34.670 --> 00:11:37.980 to really grasp how pack works. 221 00:11:37.980 --> 00:11:40.700 And if you have any code snippets that you don't understand 222 00:11:40.700 --> 00:11:43.160 how they work, do put them in the course Q and A 223 00:11:43.160 --> 00:11:46.073 and we will be more than glad to help you understand them. 224 00:11:47.820 --> 00:11:49.420 Thanks for joining me in this video. 225 00:11:49.420 --> 00:11:51.430 Hope it's been interesting and you learned something. 226 00:11:51.430 --> 00:11:53.080 And I'll see you on the next one.