WEBVTT 1 00:00:00.080 --> 00:00:04.040 Imagine your Python code leaping off the command line, transforming 2 00:00:04.040 --> 00:00:07.759 from lines of text into something truly interactive Windows buttons 3 00:00:07.799 --> 00:00:11.919 images you can click, drag, and truly engage with. That's 4 00:00:11.960 --> 00:00:13.519 the leap we're making today exactly. 5 00:00:13.839 --> 00:00:16.239 This deep dive is all about bringing your Python programs 6 00:00:16.280 --> 00:00:20.079 to life with graphical user interfaces or GUIs, and we're 7 00:00:20.120 --> 00:00:24.199 going to explore GUI zero, a fantastic library specifically designed 8 00:00:24.239 --> 00:00:29.239 to make GUI creation surprisingly accessible even for complex applications. 9 00:00:29.359 --> 00:00:32.200 Okay, great, and our mission here is to pull out 10 00:00:32.240 --> 00:00:35.240 the most practical insights maybe some surprising facts too, from 11 00:00:35.280 --> 00:00:38.240 our source material, the Guide to GUE zero by Laurasak 12 00:00:38.280 --> 00:00:41.159 and Martin o Hanlin from Raspberry Pie Trading. We want 13 00:00:41.159 --> 00:00:42.960 to show you how easily you can actually start building 14 00:00:42.960 --> 00:00:46.600 interactive apps, even games, and maybe touch on some deeper 15 00:00:46.640 --> 00:00:49.359 design ideas gu zero brings up. So let's dive in. 16 00:00:49.520 --> 00:00:52.640 Sounds good. We all use GUIs constantly, right, every app, 17 00:00:52.640 --> 00:00:55.119 every website. But maybe let's start with the basics. What 18 00:00:55.240 --> 00:00:59.200 is a graphical user interface fundamentally and what makes Zero's 19 00:00:59.200 --> 00:01:00.759 take on it well different? Right? 20 00:01:01.159 --> 00:01:04.239 So, a GUI is basically the visual front end of 21 00:01:04.239 --> 00:01:08.319 your software. Everything you see and click, Windows buttons, text images. 22 00:01:08.400 --> 00:01:11.000 It's how you talk to the software without typing commands. 23 00:01:11.879 --> 00:01:14.959 What's really interesting about giezero though, is its origin story. 24 00:01:15.040 --> 00:01:17.719 It wasn't some big corporate project. It was actually born 25 00:01:17.799 --> 00:01:20.519 on a long train journey, a side project by a 26 00:01:20.560 --> 00:01:23.040 secondary school teacher who just thought there has to be 27 00:01:23.120 --> 00:01:25.959 an easier way for students to make GUIs and python. 28 00:01:26.120 --> 00:01:29.680 A train journey project. That's quite something, And this idea 29 00:01:29.719 --> 00:01:33.439 of it being simple but flexible that sounds really appealing. 30 00:01:33.640 --> 00:01:36.000 Does that mean it's just for beginners or can it 31 00:01:36.319 --> 00:01:36.799 grow with you? 32 00:01:36.959 --> 00:01:40.599 Oh? It absolutely scales. It's fantastic for beginners and teachers. Yeah, 33 00:01:40.640 --> 00:01:43.079 because it removes a lot of the initial hurdles. But 34 00:01:43.159 --> 00:01:46.000 it's simplicity is also a benefit for experts need a 35 00:01:46.040 --> 00:01:49.239 quick visual interface for a script prototyping. It's great for 36 00:01:49.280 --> 00:01:51.680 that too. The whole idea is to add that spark 37 00:01:51.719 --> 00:01:54.560 of excitement, as they put it, to turn simple text 38 00:01:54.560 --> 00:01:59.000 output into something who colorful and interactive. And it's open source, 39 00:01:59.000 --> 00:02:01.560 which is important a lot thanks to community contribution. 40 00:02:01.760 --> 00:02:05.319 Okay, powerful but approachable. I like the sound of that. 41 00:02:06.640 --> 00:02:10.280 How easy is it to actually, you know, install? Is 42 00:02:10.319 --> 00:02:10.960 it a headache? 43 00:02:11.120 --> 00:02:13.199 No, not at all. It's actually pretty simple. If you've 44 00:02:13.199 --> 00:02:16.080 got PIP set up, just PIP three install guy zero. 45 00:02:16.159 --> 00:02:19.240 That's usually it. You see, Python comes with pinter built in, 46 00:02:19.280 --> 00:02:21.159 which is the standard GI toolkit. 47 00:02:21.240 --> 00:02:21.319 Ye. 48 00:02:21.520 --> 00:02:25.759 Kinter is powerful, but it can be quite wordy. Lots 49 00:02:25.759 --> 00:02:26.199 of setup. 50 00:02:26.280 --> 00:02:27.560 Boy, I've bumped into that before. 51 00:02:27.680 --> 00:02:29.919 Yeah. So guy zero kind of acts like a friendly 52 00:02:30.039 --> 00:02:32.280 layer on top of Kinder. It hides a lot of 53 00:02:32.280 --> 00:02:35.280 that complexity, like managing widget placement, the event loop, all 54 00:02:35.280 --> 00:02:36.919 that stuff, so you can focus more on what your 55 00:02:36.960 --> 00:02:39.639 app should do, not just the nitty greedy of drawing it. 56 00:02:40.280 --> 00:02:42.080 And they even mentioned ways to install it if you 57 00:02:42.120 --> 00:02:44.919 don't have admin rights, which is handy in schools or 58 00:02:45.000 --> 00:02:46.080 restricted environments. 59 00:02:46.199 --> 00:02:50.080 That's thoughtful. Yeah, okay, so minimal setup. What's the absolute 60 00:02:50.120 --> 00:02:53.000 bare minimum code? Then, like the Hello World at guizero, 61 00:02:53.039 --> 00:02:54.319 what's the core idea? 62 00:02:54.520 --> 00:02:57.360 The core idea is the app widget. Every single WA 63 00:02:57.520 --> 00:03:00.479 zero program starts by creating an app it as your 64 00:03:00.520 --> 00:03:03.919 main window, so app app my first GUI something like that, 65 00:03:04.240 --> 00:03:06.680 and then crucially, at the very end of your script, 66 00:03:06.759 --> 00:03:09.479 you need app dot display. That's what makes it all appear. 67 00:03:09.560 --> 00:03:11.639 App dot display, got it, That's the magic. 68 00:03:11.360 --> 00:03:15.120 Line exactly, and adding text Super simple. Create a textwidget, 69 00:03:15.159 --> 00:03:18.319 tell it which app it belongs to, app, and give 70 00:03:18.360 --> 00:03:21.039 it the text text app text welcome. Done. 71 00:03:21.439 --> 00:03:23.960 Wow, that really is concise compared to some other frameworks 72 00:03:23.960 --> 00:03:26.199 I've seen. Okay, so we have text, What about making 73 00:03:26.199 --> 00:03:29.400 it look nicer colors, fonts. Is that where it gets complicated? 74 00:03:29.479 --> 00:03:32.719 Nope? Still pretty easy. You customize widgets by changing their properties. 75 00:03:33.120 --> 00:03:35.400 Want a yellow background for the whole app? App dot 76 00:03:35.400 --> 00:03:37.400 bg yields a yellow simple. 77 00:03:37.159 --> 00:03:38.960 As that just app dot bg. Nice. 78 00:03:39.080 --> 00:03:41.719 Yeah, And if yellow isn't specific enough, you can use 79 00:03:41.759 --> 00:03:44.520 hex codes those you know hashtag fifty seven hundred things 80 00:03:44.599 --> 00:03:47.199 or RGB values like two fifty five to fifteen gives 81 00:03:47.199 --> 00:03:51.240 you total color control. The source mentions htmlcolor codes dot com, 82 00:03:51.319 --> 00:03:53.240 which is a handy place to find those codes. 83 00:03:53.360 --> 00:03:55.840 Yeah, that's a good tip. No more guessing hex codes 84 00:03:56.280 --> 00:03:58.960 and textiling. Bigger fonts, different looks. 85 00:03:58.879 --> 00:04:02.400 Same idea properties for a text widget, say my text, 86 00:04:02.439 --> 00:04:05.319 you can do my text dot text size equals thirty 87 00:04:05.560 --> 00:04:09.680 or my text dot font equals verdana. They suggest common 88 00:04:09.680 --> 00:04:13.039 ones like times in your Roman verdana courier impact. Just 89 00:04:13.080 --> 00:04:16.000 remember that font availability depends on the operating system, so 90 00:04:16.079 --> 00:04:17.680 stick to common ones if you want it to look 91 00:04:17.680 --> 00:04:18.160 the same. 92 00:04:18.000 --> 00:04:20.920 Everywhere makes sense. And images like if we wanted to 93 00:04:20.920 --> 00:04:23.720 build that fun wanted poster id you mentioned with maybe a. 94 00:04:23.639 --> 00:04:26.000 Picture of a cat, you use the picture widget picture 95 00:04:26.040 --> 00:04:29.160 app image dot png. The key tip is to save 96 00:04:29.160 --> 00:04:32.399 your image file PNG or non animated jeff are best 97 00:04:32.439 --> 00:04:34.920 supported right in the same folder as your Python script. 98 00:04:35.000 --> 00:04:36.160 That makes loading easiest. 99 00:04:36.199 --> 00:04:38.079 I'll keep it simple right now. 100 00:04:38.079 --> 00:04:40.199 If you need to do more advanced stuff to the image, 101 00:04:40.319 --> 00:04:43.839 like resizing or cropping before you display it, Gleazera works 102 00:04:43.920 --> 00:04:46.639 nicely with the pillow library, you'd install that separately, but 103 00:04:46.879 --> 00:04:49.120 just for displaying an image, picture widget is all you need. 104 00:04:49.439 --> 00:04:52.480 So yeah, building that wanted poster with style, text and 105 00:04:52.519 --> 00:04:55.439 a picture totally doable and quite straightforward. 106 00:04:55.639 --> 00:04:59.959 Okay, so we've got the visual basics down Windows, text, colors, images, 107 00:05:00.120 --> 00:05:03.000 pretty easy so far, But now how do we make 108 00:05:03.040 --> 00:05:06.839 these things actually do stuff? When the user interacts clicking buttons, 109 00:05:06.920 --> 00:05:10.600 typing text, that's the core of a GUI, right, event 110 00:05:10.600 --> 00:05:11.839 based programming exactly. 111 00:05:11.839 --> 00:05:14.279 That's where the interactivity comes in, and the main tool 112 00:05:14.360 --> 00:05:17.680 for triggering actions is the push button. You create a button, 113 00:05:17.759 --> 00:05:20.240 give it some text, and then use its command parameter. 114 00:05:20.399 --> 00:05:20.920 This is key. 115 00:05:21.319 --> 00:05:23.680 You set command equal to the name of a Python 116 00:05:23.720 --> 00:05:24.600 function you've written. 117 00:05:24.879 --> 00:05:26.759 AH, so command my function. 118 00:05:26.639 --> 00:05:30.399 Precisely when the user clicks that button, gray zero automatically 119 00:05:30.480 --> 00:05:33.000 runs my function. It handles all the background event loop 120 00:05:33.040 --> 00:05:33.560 stuff for you. 121 00:05:33.680 --> 00:05:36.240 Okay, let's take that spy name chooser example from the source. 122 00:05:36.560 --> 00:05:39.000 You press a button, it needs to generate a random name. 123 00:05:39.000 --> 00:05:39.879 How does that connect? 124 00:05:40.000 --> 00:05:42.120 So you'd write a Python function, let's call it generate 125 00:05:42.160 --> 00:05:44.759 spy name that picks some random words and combines them. 126 00:05:45.120 --> 00:05:49.040 Then you create your button button push button app text 127 00:05:49.240 --> 00:05:53.560 get name command generate spye name. Now, initially, if your 128 00:05:53.680 --> 00:05:56.720 generate spy name function just prints the name, it'll show up. 129 00:05:56.639 --> 00:05:58.920 In the terminal window the shell, not in my nice 130 00:05:58.920 --> 00:06:00.800 GI window exactly. 131 00:06:00.920 --> 00:06:03.920 That's the common hurdle. The AHA moment is realizing you 132 00:06:04.000 --> 00:06:07.120 need to update a widget within the GUI. So you'd 133 00:06:07.120 --> 00:06:09.639 add a text widget to your app, maybe initially blank 134 00:06:10.160 --> 00:06:14.240 name display text app text. Then inside your general con 135 00:06:14.319 --> 00:06:17.399 name function, instead of printing, you update the text widgets 136 00:06:17.480 --> 00:06:21.000 value name display dot value in cord the news by name. 137 00:06:21.079 --> 00:06:23.800 AH widget dot value. That makes sense, So you change 138 00:06:23.800 --> 00:06:26.519 the property of the widget in the GUI updates itself. 139 00:06:26.240 --> 00:06:29.360 Precisely and that pattern. Having a command function update the 140 00:06:29.399 --> 00:06:32.480 dot value or other properties of widgets is fundamental to 141 00:06:32.519 --> 00:06:35.120 making dynamic GUIs with gou zero cool. 142 00:06:35.199 --> 00:06:37.800 What about getting input from the user, not just clicks, 143 00:06:37.839 --> 00:06:40.120 but actual text or choices. Good question. 144 00:06:40.480 --> 00:06:43.920 For freeform text entry, you use the textbox widget dot 145 00:06:43.959 --> 00:06:47.480 minme textbox app. Later in a function may be triggered 146 00:06:47.480 --> 00:06:49.480 by a button. You can grab whatever the user typed 147 00:06:49.600 --> 00:06:50.959 using my input dot value. 148 00:06:51.079 --> 00:06:53.600 Simple enough. What if I want to give them choices like. 149 00:06:53.519 --> 00:06:55.959 A dropdown menu, that's the combo widget. You give it 150 00:06:56.000 --> 00:06:59.439 a list of options choices combo app options red, green, blue. 151 00:06:59.800 --> 00:07:01.879 You can even set a default selected value, and again 152 00:07:01.920 --> 00:07:04.519 you read the user's choice using choices dot value. 153 00:07:04.639 --> 00:07:08.399 Okay, textbox for typing, combo for dropdowns. What about numbers 154 00:07:08.439 --> 00:07:09.879 like adjusting a setting for. 155 00:07:09.879 --> 00:07:12.920 Selecting a value within a range. The slighter widget is perfect. 156 00:07:13.079 --> 00:07:16.560 My slider start zero and one hundred. The user drags 157 00:07:16.560 --> 00:07:19.519 it and you get the selected number from my slider 158 00:07:19.519 --> 00:07:23.639 dot value. Really intuitive for things like volume, brightness or 159 00:07:23.720 --> 00:07:24.680 numerical settings. 160 00:07:24.879 --> 00:07:28.000 Right. These seem like really useful building blocks. The source 161 00:07:28.040 --> 00:07:31.759 mentions a meme generator example that pulls these together using 162 00:07:31.759 --> 00:07:32.600 a drawing widget. 163 00:07:32.720 --> 00:07:35.319 Yes, the meme Generator is a great example of combining these. 164 00:07:35.519 --> 00:07:38.040 The drawing widget acts like a canvas. You can put 165 00:07:38.079 --> 00:07:41.959 images on it using coordinates memecanvas dot image x y, 166 00:07:42.120 --> 00:07:45.920 image cat dot P and e, and draw text memancanvas 167 00:07:45.959 --> 00:07:48.040 dot text xy text a canvas. 168 00:07:48.040 --> 00:07:50.040 Okay, but the cool part was the real time update. 169 00:07:50.120 --> 00:07:53.160 Right as you type, the meme text changes instantly. 170 00:07:52.759 --> 00:07:55.319 Exactly, and that uses the command parameter again, but this 171 00:07:55.399 --> 00:07:57.959 time on the textbox widgets used for the meme text. 172 00:07:58.120 --> 00:07:59.959 You set the command of the textbox to a function 173 00:08:00.279 --> 00:08:03.120 say draw meing. Now, every time the text changes in 174 00:08:03.120 --> 00:08:05.720 that box, like every keypress, the drawming function runs. 175 00:08:05.959 --> 00:08:08.639 Wow. Okay, so it's not just button clicks. Command works 176 00:08:08.680 --> 00:08:11.720 on text changes too. That's powerful, it really is. 177 00:08:11.879 --> 00:08:14.879 Inside drawming, you'd clear the canvas, get the current text 178 00:08:14.920 --> 00:08:18.199 from the textboxes, maybe get the selected color from a combo, 179 00:08:18.360 --> 00:08:21.360 the size from a slider, and then redraw the image 180 00:08:21.439 --> 00:08:24.480 and the text onto the drawing canvas. This creates that 181 00:08:24.600 --> 00:08:28.600 immediate feedback loop, making the application feel really responsive and alive. 182 00:08:29.079 --> 00:08:32.200 It shows how you integrate text inputs, sliders, drop downs, 183 00:08:32.240 --> 00:08:33.320 and drawing all together. 184 00:08:33.679 --> 00:08:38.000 That's a fantastic example of combining inputs and outputs dynamically. 185 00:08:39.000 --> 00:08:41.080 Very cool. All right, so we've seen how to build 186 00:08:41.159 --> 00:08:44.480 things make them interactive, but sometimes seeing what not to 187 00:08:44.519 --> 00:08:47.519 do is just as valuable, maybe even more so. The 188 00:08:47.559 --> 00:08:51.679 source has this intriguing section on the world's worst gy 189 00:08:52.519 --> 00:08:55.120 I love this idea. What can we learn from well 190 00:08:55.399 --> 00:08:56.120 terrible design? 191 00:08:56.320 --> 00:08:59.200 It's a brilliant way to highlight usability principles. One major 192 00:08:59.200 --> 00:09:02.759 pitfall they show is readability. Imagine dark green text on 193 00:09:02.799 --> 00:09:05.000 a dark green background. You literally can't read it, so 194 00:09:05.159 --> 00:09:08.080 less than one contrast is king Your text needs to 195 00:09:08.080 --> 00:09:11.919 be clearly visible against its background. Obvious maybe, but easily overlooked. 196 00:09:12.039 --> 00:09:14.759 Yeah. I've definitely seen websites like that. Okay, what else 197 00:09:14.759 --> 00:09:15.919 makes a ji the worst? 198 00:09:16.480 --> 00:09:19.600 Flashing text or text that just disappears after a second. 199 00:09:19.679 --> 00:09:22.559 It's incredibly annoying and makes it impossible to actually process 200 00:09:22.559 --> 00:09:26.480 the information. GUA zero actually gives you the tools to 201 00:09:26.559 --> 00:09:30.840 do this. Funnily enough, you can hide and show widgets, 202 00:09:31.080 --> 00:09:35.559 and there's an app dot repeat milliseconds function command to 203 00:09:35.679 --> 00:09:37.000 run something periodically. 204 00:09:37.159 --> 00:09:40.039 Ah, so you can misuse repeat to make text blink 205 00:09:40.080 --> 00:09:41.440 on and off rapidly. 206 00:09:41.120 --> 00:09:44.480 Exactly you could, but you really really shouldn't for anything 207 00:09:44.480 --> 00:09:47.440 the user needs to read. It shows that having powerful 208 00:09:47.480 --> 00:09:52.240 tools requires thinking about the user experience. Use hide show thoughtfully, 209 00:09:52.399 --> 00:09:55.840 maybe for temporary status messages, not core content. 210 00:09:55.960 --> 00:09:58.679 Good point, use your powers for good. What about picking 211 00:09:58.720 --> 00:10:00.960 the wrong tool for the job, like using a widget 212 00:10:00.960 --> 00:10:02.279 in a really inappropriate way? 213 00:10:02.320 --> 00:10:04.440 Oh yeah, they have some great examples. Imagine trying to 214 00:10:04.440 --> 00:10:07.600 set a specific date in time using a single slider. 215 00:10:07.679 --> 00:10:09.879 A slider gives you a number right for time that's 216 00:10:09.919 --> 00:10:13.919 often seconds since nineteen seventy I think the Unix epoch. 217 00:10:14.320 --> 00:10:16.480 WHOA, Okay, So you'd get this huge number and have 218 00:10:16.480 --> 00:10:17.639 to figure out the date from. 219 00:10:17.440 --> 00:10:21.840 That precisely, utterly impractical. You'd use separate textboxes or maybe 220 00:10:21.879 --> 00:10:26.559 combos for year, month, day, hour, minute, much clearer, much 221 00:10:26.600 --> 00:10:30.279 more user friendly. Another hilarious one was using a combo 222 00:10:30.360 --> 00:10:33.120 drop down for every single letter to type a word. 223 00:10:33.200 --> 00:10:37.200 Can you imagine click select H, click select E click. 224 00:10:37.360 --> 00:10:40.159 Oh my god, that's brilliantly terrible. It really hammers home 225 00:10:40.200 --> 00:10:43.159 the point. Choose the widget that actually fits the task 226 00:10:43.399 --> 00:10:45.200 and the user's natural workflow. 227 00:10:45.000 --> 00:10:48.919 Exactly, and the final horror dot pop up overload. Quizero 228 00:10:49.000 --> 00:10:51.399 has built in pop ups dot app dot info, app 229 00:10:51.440 --> 00:10:52.720 dot error, and app dot Yes. 230 00:10:52.840 --> 00:10:55.360 No. For confirmations, it can be useful, right like, are 231 00:10:55.399 --> 00:10:56.360 you sure you want to quit? 232 00:10:56.720 --> 00:11:00.840 Definitely useful for important confirmations or critical errors. But the 233 00:11:00.879 --> 00:11:04.080 worst gy example might pop up a confirmation box for 234 00:11:04.159 --> 00:11:06.840 every single button click You click the button, okay, button 235 00:11:06.840 --> 00:11:09.559 press confirmed? Okay, It would drive anyone insane. 236 00:11:10.200 --> 00:11:12.960 Yeah, use pop up sparingly for things that really need 237 00:11:13.000 --> 00:11:15.159 confirmation or urgent notification. 238 00:11:15.399 --> 00:11:17.679 Right, Let the user get on with their task otherwise. Now, 239 00:11:17.720 --> 00:11:19.639 sometimes you do need more than a simple pop up, 240 00:11:19.639 --> 00:11:22.080 maybe a whole separate settings dialogue or something good. Point 241 00:11:22.200 --> 00:11:24.759 what then that's where the window widget comes in. It 242 00:11:24.840 --> 00:11:28.559 lets you create entirely new separate windows, almost like mini apps. 243 00:11:28.559 --> 00:11:30.440 You can put any widgets you want in them, give 244 00:11:30.440 --> 00:11:33.759 them titles and control when they show or hide. Much 245 00:11:33.799 --> 00:11:36.679 better for complex subtasks than trying to cram everything into 246 00:11:36.759 --> 00:11:38.960 one window or using endless pop ups. 247 00:11:39.000 --> 00:11:41.960 Okay, that makes sense when it for more complex site interactions. YEA, 248 00:11:42.039 --> 00:11:44.159 good to know. All right, Let's switch gears a bit. 249 00:11:44.159 --> 00:11:47.600 We've talked building blocks, interaction, even bad design. Now for 250 00:11:47.639 --> 00:11:51.720 the really fun stuff games, The source suggests building games 251 00:11:51.759 --> 00:11:54.799 is a great way to learn GUI programming and apply logic. 252 00:11:55.200 --> 00:11:58.799 Let's start with a classic tic tac toe or nts 253 00:11:58.840 --> 00:12:01.399 and crosses. How would Guy zero handle that? 254 00:12:01.639 --> 00:12:04.000 Tic tac toe is a perfect fit. You'd likely use 255 00:12:04.000 --> 00:12:06.200 a box wedget as a container for the board, and 256 00:12:06.360 --> 00:12:08.840 inside that box you'd use a grid layout. Think of 257 00:12:08.879 --> 00:12:12.559 it like a spreadsheet grid. Instead of manually creating nine buttons, 258 00:12:12.639 --> 00:12:15.039 you can use nested loops like for x and range three, 259 00:12:15.120 --> 00:12:18.440 for y and range three to create each push button programmatically. 260 00:12:18.919 --> 00:12:21.639 In the loop, you assign each button it's grid x 261 00:12:21.840 --> 00:12:25.360 y position. Much cleaner than nine separate button definitions. 262 00:12:25.720 --> 00:12:28.919 That's clever. Using loops to build the grid saves a 263 00:12:28.960 --> 00:12:34.000 lot of typing and the game logic tracking x's and 264 00:12:34.039 --> 00:12:36.519 o's whose turn it is, checking for a winner. 265 00:12:36.679 --> 00:12:39.080 Okay, so for the board state, a common way is 266 00:12:39.120 --> 00:12:42.279 a two D list in Python, maybe initialized with none 267 00:12:42.320 --> 00:12:46.720 for empty squares board none none none no no no none. 268 00:12:47.279 --> 00:12:49.399 When you create the buttons in the loop, you'd set 269 00:12:49.399 --> 00:12:52.919 their command to a function. Let's say square clicked. But crucially, 270 00:12:53.000 --> 00:12:55.519 you need to tell that function which square was clicked. 271 00:12:55.759 --> 00:12:57.519 Ah, right, how do you pass that info? 272 00:12:57.720 --> 00:12:59.639 You can use the ARGs parameter in the push button. 273 00:12:59.679 --> 00:13:02.240 So man square clicked arcs x Y. Now when a 274 00:13:02.240 --> 00:13:04.600 button is clicked, the square clicked function receives the x 275 00:13:04.639 --> 00:13:07.759 and y coordinates inside square click. You check whose turn 276 00:13:07.799 --> 00:13:10.679 it is using a global turn variable maybe x or oh, 277 00:13:11.200 --> 00:13:13.360 update the button's text and maybe disable it. Update your 278 00:13:13.360 --> 00:13:15.360 two D board list, check for a win and switch 279 00:13:15.440 --> 00:13:15.759 the turn. 280 00:13:16.039 --> 00:13:19.639 Okay, that arcs parameter's handy, and the global variable for 281 00:13:19.639 --> 00:13:20.440 whose turn it is? 282 00:13:21.039 --> 00:13:24.879 Any pitfalls there, just the standard Python global new ones. 283 00:13:25.399 --> 00:13:28.759 If your function only modifies a property of a global object, 284 00:13:28.879 --> 00:13:32.159 like changing statistics dot value, you usually don't need the 285 00:13:32.159 --> 00:13:34.279 global keyword inside the function. But if you need to 286 00:13:34.320 --> 00:13:38.279 reassign the global variable itself, like turn avo when it 287 00:13:38.399 --> 00:13:41.000 was x, then you do need global turn at the 288 00:13:41.000 --> 00:13:42.960 start of that function. It's a common thing that trips 289 00:13:42.960 --> 00:13:43.399 people up. 290 00:13:43.480 --> 00:13:46.360 Good reminder and checking for a win. Is there an 291 00:13:46.360 --> 00:13:47.000 elegant way? 292 00:13:47.320 --> 00:13:50.480 Huh? The source it meets. The easiest way is often 293 00:13:50.559 --> 00:13:53.759 just hard coding it check all three rows, all three columns, 294 00:13:53.879 --> 00:13:57.600 both diagonals, is rozerol, all x is column one all. Oh. 295 00:13:57.679 --> 00:13:59.840 It's not pretty, but for tic tac toe it's often 296 00:13:59.840 --> 00:14:02.039 the simplest to write and understand. 297 00:14:01.519 --> 00:14:04.440 Fair enough, sometimes simple as best. What about a draw 298 00:14:04.879 --> 00:14:05.960 or resetting the game? 299 00:14:06.279 --> 00:14:08.440 For a draw, you'd probably count the moves made. If 300 00:14:08.519 --> 00:14:10.279 nine moves are made and no one has won, it's 301 00:14:10.279 --> 00:14:12.759 a draw. A reset button would need a function that 302 00:14:12.799 --> 00:14:15.519 clears the two d list back to mess none, resets 303 00:14:15.519 --> 00:14:18.440 the button text and enables them again, resets the turn variable, 304 00:14:18.480 --> 00:14:21.960 maybe hides a U win message. Careful state management is 305 00:14:22.039 --> 00:14:22.519 key there. 306 00:14:22.759 --> 00:14:25.759 Okay, Tic tac toe sounds very doable. What about destroy 307 00:14:25.799 --> 00:14:29.279 the dots the waffle game that uses a different widget, right. 308 00:14:29.279 --> 00:14:32.799 Yes, the waffle widget. It's specifically designed for these kinds 309 00:14:32.840 --> 00:14:36.480 of grid based games or visualizations. It's basically a grid 310 00:14:36.480 --> 00:14:39.320 of cells which can be different colors, and in this game, 311 00:14:39.519 --> 00:14:43.320 some cells become dots. The aim is simple click the 312 00:14:43.360 --> 00:14:46.600 dots to destroy them, but new dots appear over time. 313 00:14:47.399 --> 00:14:49.480 If the whole grid fills with dots, you lose. 314 00:14:50.120 --> 00:14:52.440 So it's dynamic. Things are changing on their own. How 315 00:14:52.480 --> 00:14:54.360 does it handle the random dots appearing? 316 00:14:54.519 --> 00:14:57.919 It uses random dot randent to pick random xy coordinates 317 00:14:57.960 --> 00:15:00.720 on the waffle grid, and the timing RelA on that 318 00:15:00.879 --> 00:15:04.759 app dot after milliseconds function method we mentioned earlier. You'd 319 00:15:04.799 --> 00:15:07.279 have a function, say adot that picks rand, importants and 320 00:15:07.360 --> 00:15:09.480 changes that sells color on the waffle board. App dot 321 00:15:09.559 --> 00:15:12.559 set pixel x y red. Then at the end of 322 00:15:12.600 --> 00:15:14.960 add dot, you'd schedule it to run again after a delay. 323 00:15:15.279 --> 00:15:18.840 App dot after speed add hot. This creates the continuous 324 00:15:18.840 --> 00:15:20.039 spawning of dots. Uh. 325 00:15:20.120 --> 00:15:23.000 App dot after creates the game loop potentially, Yeah, clever, 326 00:15:23.159 --> 00:15:25.840 and you mentioned speed. Can you make it harder? Absolutely? 327 00:15:26.120 --> 00:15:28.720 You track a score every time the player clicks a dot. 328 00:15:28.840 --> 00:15:30.720 The waffle widget also has a command that can be 329 00:15:30.759 --> 00:15:33.600 set to handle clicks passing the clipped x y you 330 00:15:33.679 --> 00:15:36.440 increase the score. Then you can adjust the speed variable 331 00:15:36.480 --> 00:15:39.200 based on the score. Maybe speed equals in thousands score ten. 332 00:15:39.679 --> 00:15:41.799 So the higher the score, the lower the delay, and 333 00:15:41.840 --> 00:15:44.639 the faster the dots appear. Adds a nice difficulty curve. 334 00:15:44.799 --> 00:15:46.080 Nice and game over. 335 00:15:46.240 --> 00:15:48.159 You'd check if all the cells on the waffle are 336 00:15:48.159 --> 00:15:51.120 now dots. If so, you stop the app dot after loop, 337 00:15:51.240 --> 00:15:54.039 maybe with a flag and display a game over message 338 00:15:54.120 --> 00:15:56.519 using a text switchet. Oh and a quick best practice 339 00:15:56.559 --> 00:16:00.200 they mentioned use constants define grid size at the top up, 340 00:16:00.200 --> 00:16:02.799 then use grid size everywhere instead of just typing ten 341 00:16:03.120 --> 00:16:05.159 makes the code way easier to read and change later. 342 00:16:05.159 --> 00:16:07.679 If you want a bigger or smaller grid, avoid those 343 00:16:07.720 --> 00:16:08.480 magic numbers. 344 00:16:08.559 --> 00:16:12.360 Good tip constants are always helpful. Okay, so Waffle handles 345 00:16:12.399 --> 00:16:15.120 grid games well. The source also mentioned flood It and 346 00:16:15.320 --> 00:16:17.720 Emoji Match briefly. What do they show? 347 00:16:18.000 --> 00:16:21.799 Flood It is another Waffle based game, but more puzzle oriented. 348 00:16:22.200 --> 00:16:24.320 You start at one corner and have a limited number 349 00:16:24.320 --> 00:16:26.879 of moves to flood the whole grid with a single 350 00:16:26.919 --> 00:16:30.679 color chosen from a palette. It introduces recursion with the 351 00:16:30.679 --> 00:16:34.720 flood function logic. Emoji Match is different. It's a matching game. 352 00:16:35.080 --> 00:16:38.639 It shows loading external assets like actual emoji image files, 353 00:16:38.720 --> 00:16:42.320 using Python's aues module to find files and random dot 354 00:16:42.360 --> 00:16:42.919 shuffle to. 355 00:16:42.879 --> 00:16:45.039 Mix them up, so loading your own pictures into the 356 00:16:45.039 --> 00:16:45.919 game exactly. 357 00:16:46.200 --> 00:16:49.440 It uses two box containers with grid layouts. One shows 358 00:16:49.679 --> 00:16:53.480 pictures of emojis, the other show's corresponding buttons. Each round, 359 00:16:53.519 --> 00:16:56.679 it picks random emojis, puts one matching pair between the 360 00:16:56.720 --> 00:16:58.799 pictures and the buttons, and the player has to click 361 00:16:58.840 --> 00:17:00.799 the button matching one of the displayed. 362 00:17:00.399 --> 00:17:01.799 Pictures, and it has a time or too. 363 00:17:01.799 --> 00:17:04.279 You said, yeah, It uses app dot repeat one thousand 364 00:17:04.279 --> 00:17:07.000 reduced time similar to app dot after, but repeat keeps 365 00:17:07.079 --> 00:17:09.839 running automatically every second, perfect for a countdown timer if 366 00:17:09.839 --> 00:17:13.119 the timer runs out. Game over hide the widgets. It 367 00:17:13.200 --> 00:17:17.160 demonstrates handling assets, matching logics, scoring, and timers. Quite a 368 00:17:17.160 --> 00:17:19.960 comprehensive little game example, all within GA zero. 369 00:17:20.359 --> 00:17:23.039 It really shows the range from simple board games to 370 00:17:23.160 --> 00:17:28.640 timed puzzles with external graphics. Very impressive. Okay, we've seen 371 00:17:28.680 --> 00:17:32.759 guy zero for basics for games, but what about pushing 372 00:17:32.759 --> 00:17:36.720 it further, like really advanced stuff. A paint application sounds complex? 373 00:17:37.359 --> 00:17:39.480 Can Gie zero handle that level of interaction? 374 00:17:39.799 --> 00:17:43.359 Surprisingly well? Yes, The paint appallies heavily on the drawing 375 00:17:43.400 --> 00:17:46.640 widget again, but uses more specific mouse events instead of 376 00:17:46.680 --> 00:17:49.119 just a general quick command. You can hook into things 377 00:17:49.200 --> 00:17:52.279 like drawing canvas when mouse dragged equal draw dot or 378 00:17:52.359 --> 00:17:55.559 drawing canvas when left button pressed equal start line. 379 00:17:55.599 --> 00:17:59.119 Ah, so much finer control over mouse actions dragging versus 380 00:17:59.160 --> 00:17:59.640 just clicking. 381 00:18:00.359 --> 00:18:02.799 So when mouse dragged could call a function that gets 382 00:18:02.880 --> 00:18:05.279 the mouse events X and y coordinates and draws a 383 00:18:05.279 --> 00:18:08.039 small dot or circle there, creating a free hand line 384 00:18:08.039 --> 00:18:10.559 as you drag. When left button press could store the 385 00:18:10.559 --> 00:18:12.079 starting coordinates for drawing. 386 00:18:11.839 --> 00:18:15.319 Shapes, and you mentioned dynamic shapes earlier, like rectangles that 387 00:18:15.400 --> 00:18:18.519 grow as you drag. How does that work without leaving trails? 388 00:18:18.799 --> 00:18:21.519 That's a neat trick when the mouse is dragged. When 389 00:18:21.519 --> 00:18:24.519 mouse dragged while drawing a shape, the function would first 390 00:18:24.559 --> 00:18:27.720 delete the previously drawn temporary shape. You can give shapes 391 00:18:27.759 --> 00:18:30.440 tags or IDs to manage them, then get the current 392 00:18:30.480 --> 00:18:33.799 mouse coordinates, and then draw the new larger shape from 393 00:18:33.799 --> 00:18:37.160 the stored start point to the current point. It happens 394 00:18:37.160 --> 00:18:40.039 so fast it looks like the shape is smoothly resizing 395 00:18:40.799 --> 00:18:43.920 only when you release the mouse button. When left button 396 00:18:43.960 --> 00:18:46.640 released does it draw the final shape and stop deleting 397 00:18:47.200 --> 00:18:51.319 the drawing which it can handle lines, rectangles, ovals, triangles, polygons. 398 00:18:51.400 --> 00:18:56.480 Wow. Okay, drawing and deleting rapidly to simulate resizing. That's clever. 399 00:18:56.640 --> 00:18:58.279 And presumably you can add controls. 400 00:18:58.400 --> 00:19:00.960 Oh yeah, you'd add combo widget to select the shape 401 00:19:01.000 --> 00:19:04.680