WEBVTT 00:00.080 --> 00:06.830 Let's add a new URL to our web server and also connect flask with the Gpio functionality. 00:06.860 --> 00:09.260 So what do we want to do here? 00:09.260 --> 00:11.720 I'm going to come back to this URL. 00:11.720 --> 00:14.300 So so the server is still working. 00:14.300 --> 00:16.460 And let's say that after this. 00:16.460 --> 00:18.110 So this is the homepage okay. 00:18.140 --> 00:20.480 If I put a slash it's going to be the same thing. 00:20.510 --> 00:25.760 Now after this I want to put slash and then push let's say push dash button. 00:25.880 --> 00:30.680 And I want to see a text that tells me if the push button is pressed or not pressed. 00:30.680 --> 00:31.970 So that's what I want. 00:32.000 --> 00:35.180 As you can see now we have not found okay. 00:35.210 --> 00:37.010 So that's the 404. 00:37.040 --> 00:39.140 You might have seen this error previously. 00:39.170 --> 00:39.440 Okay. 00:39.470 --> 00:45.140 On some web pages when you cannot find a page because the page doesn't exist, or if you have provided 00:45.140 --> 00:49.460 the wrong URL, then you have 404 error not found. 00:49.460 --> 00:52.190 So let's implement that route. 00:52.190 --> 00:54.320 I'm going to come back to the application here. 00:54.320 --> 00:57.260 I'm going to I'm going to stop that with Ctrl C. 00:57.500 --> 01:01.730 And let's also put the ports back to 5000. 01:01.730 --> 01:04.950 So to the default one and how to add a new route. 01:04.980 --> 01:08.850 Well, I'm just going to go back to a new line here and I'm going to do app. 01:08.850 --> 01:13.890 So at app dot route and then inside quotes I'm going to do slash. 01:13.890 --> 01:18.390 And this time push dash button just like that. 01:18.390 --> 01:24.390 So important note is when you want to have several words don't add a space okay. 01:24.420 --> 01:25.920 Better to add a dash. 01:25.950 --> 01:28.890 Usually for URLs we use dashes. 01:28.980 --> 01:31.020 Then I create a function. 01:31.050 --> 01:32.250 How do I name the function? 01:32.250 --> 01:35.160 For example push button. 01:35.160 --> 01:39.330 But you see here in Python the convention is to use a underscore. 01:39.360 --> 01:39.630 All right. 01:39.660 --> 01:43.410 So depending on what you do you're going to use different conventions for URLs. 01:43.410 --> 01:45.720 And for Python code is different. 01:45.720 --> 01:53.040 And actually I can name it maybe check push button and then state. 01:53.070 --> 01:59.850 All right I put the parentheses the colon I go back to a new line and let's just well let's just return 02:00.450 --> 02:01.110 okay. 02:01.140 --> 02:01.710 For now. 02:01.710 --> 02:02.610 And that's it. 02:02.700 --> 02:07.620 So let's run the script okay. 02:07.750 --> 02:09.640 let's see what we have. 02:09.640 --> 02:16.720 So now I'm not going to refresh it like this because I need to put the port back to 5000. 02:17.230 --> 02:20.200 But then if I press enter you see we have okay. 02:20.290 --> 02:20.710 All right. 02:20.740 --> 02:24.250 So the push button URL here is found. 02:24.280 --> 02:24.700 Great. 02:24.700 --> 02:28.570 And now we just need to connect the flask with the Gpio. 02:28.600 --> 02:29.320 How to do that. 02:29.320 --> 02:30.370 It's very easy. 02:30.400 --> 02:34.690 We're just going to initialize our push button and use it inside the function. 02:34.690 --> 02:42.430 So let's do another import here from Gpio zero import button. 02:42.430 --> 02:45.070 Then I'm going to initialize the button. 02:45.070 --> 02:48.970 So I could do it before or after the app. 02:48.970 --> 02:56.800 Here I'm going to do it before button is equal to and then button I put the Gpio which is still 26. 02:56.800 --> 03:03.730 And I'm also going to use bounce time with 0.05 okay. 03:03.760 --> 03:06.910 So that's something we have seen already previously in this course. 03:06.910 --> 03:11.110 So the Gpio 26 is initialized as input for the push button. 03:11.120 --> 03:13.310 and now we can read its state. 03:13.310 --> 03:16.220 So what I can do is directly inside this function here. 03:16.220 --> 03:18.230 So I already have access to the button here. 03:18.230 --> 03:24.290 Inside this function I'm going to do if button dot is pressed okay. 03:24.320 --> 03:26.060 So very simple application here. 03:26.060 --> 03:27.560 We keep things minimal okay. 03:27.560 --> 03:31.100 Just to show you the connection between flask and GPUs. 03:31.100 --> 03:37.130 So if the button is pressed I'm going to return a button is pressed. 03:38.660 --> 03:45.380 And then I can do else return button is not pressed. 03:45.890 --> 03:46.190 All right. 03:46.220 --> 03:52.820 So it's quite easy to understand and note here that I can do actually I can simplify this a bit because 03:52.820 --> 03:58.550 when I do return what if I do return whatever is after this line in this function is not going to be 03:58.550 --> 04:01.160 executed because we return from the function. 04:01.190 --> 04:01.670 All right. 04:01.670 --> 04:09.200 So instead of doing if this will return that else we return this other string, I can just remove the 04:09.200 --> 04:12.650 else here and also remove an indentation here. 04:12.890 --> 04:19.470 And it's going to be the same thing because if the button is pressed, we return that and then we don't 04:19.470 --> 04:21.960 execute the next lines in the function. 04:21.960 --> 04:25.140 But if this is not true, we just go to that line. 04:25.170 --> 04:25.500 Okay. 04:25.530 --> 04:27.090 So the result is going to be the same. 04:27.090 --> 04:29.400 It's very small optimization here. 04:29.400 --> 04:30.660 So let's run this. 04:30.660 --> 04:33.480 And actually just before we run I'm going to save it. 04:33.630 --> 04:35.610 So I'm going to save this file. 04:36.540 --> 04:43.740 And just to show you that well the important thing is you could decide okay let's save it as flask.py. 04:43.770 --> 04:47.130 But don't do that because flask is already a Python module. 04:47.130 --> 04:54.330 So if you save a file using a name that's already used by a module, you will have a lot of issues later 04:54.330 --> 04:54.600 on. 04:54.630 --> 04:58.470 Okay, so use something else for example here web server. 04:58.500 --> 05:01.470 Or you could use for example flask app, something like that. 05:01.470 --> 05:06.300 But not just flask web server.py. 05:06.330 --> 05:09.030 Now if you want you could run it here. 05:09.030 --> 05:10.740 I can also run it from the terminal. 05:10.770 --> 05:14.910 So let's do that just to show you that both are going to work. 05:14.910 --> 05:18.340 So let's go to Python programs. 05:18.340 --> 05:22.660 And let's do Python three web server. 05:23.620 --> 05:30.760 And once again, you see that when we run something on Thonny and then we try to run it on the terminal, 05:30.760 --> 05:32.110 you might get an error. 05:32.110 --> 05:33.970 So I'm going to close Sony. 05:34.540 --> 05:39.280 We can open it again actually just not run the program. 05:39.910 --> 05:42.790 And then it should be able to work okay. 05:43.060 --> 05:45.010 You see we have the same warning. 05:45.010 --> 05:47.230 And we also have the URL here. 05:47.230 --> 05:52.810 So let's open the browser and let's refresh this. 05:54.100 --> 05:55.990 You see the button is not pressed. 05:56.590 --> 06:01.330 Now what I'm going to do is I'm going to press on the button and I'm going to refresh the page. 06:01.330 --> 06:03.640 And you can see the button is pressed. 06:03.640 --> 06:09.340 If I refresh again button is pressed if I release button is not pressed. 06:09.640 --> 06:11.080 So it's correctly working. 06:11.080 --> 06:16.720 And you see with this example we have created a web application with two different routes. 06:16.720 --> 06:21.670 And we have also combined the use of flask with the Gpios.