1 00:00:01,310 --> 00:00:06,470 In this lesson we will be adding some more command buttons onto our controller. 2 00:00:06,470 --> 00:00:11,900 I think you have an idea on how to add buttons from our previous lesson so I won't be typing out the 3 00:00:11,900 --> 00:00:15,890 codes one by one but will copy and paste the code. 4 00:00:15,890 --> 00:00:19,330 This code can also be downloaded from the package I prepared. 5 00:00:19,370 --> 00:00:21,440 So don't worry and watch along this video. 6 00:00:23,190 --> 00:00:25,610 Here I've copy and paste the codes. 7 00:00:25,680 --> 00:00:32,330 Let's run this process and see what we've created click the link and hit the controller button. 8 00:00:32,360 --> 00:00:40,480 This is how the buttons look like this is up and down rotate clockwise and counterclockwise. 9 00:00:40,610 --> 00:00:44,550 These arrows will move the draw forward backwards. 10 00:00:44,600 --> 00:00:46,730 Left and Right. 11 00:00:46,730 --> 00:00:53,540 Since we needed to set arrow shaped icons as buttons the code became longer so I chose to copy and paste 12 00:00:53,540 --> 00:00:55,540 the codes. 13 00:00:55,670 --> 00:00:58,020 Let's see how the buttons work. 14 00:00:58,050 --> 00:01:04,820 I'll click on up in the console you will see the logs showing the command up has been received. 15 00:01:05,850 --> 00:01:10,220 This will be the same for down clockwise counterclockwise. 16 00:01:10,290 --> 00:01:12,290 Forward backwards. 17 00:01:12,360 --> 00:01:13,950 Left and Right. 18 00:01:14,010 --> 00:01:18,170 Here you see all the commands received in the back end. 19 00:01:18,180 --> 00:01:20,800 Now let's check on the HDMI mail code. 20 00:01:20,820 --> 00:01:25,650 Here we are using table and dividing the screen to left and right. 21 00:01:25,650 --> 00:01:29,300 The part written under the T.D. tag is shown on the left side. 22 00:01:30,410 --> 00:01:39,870 The next T.D. tag will be the right side the codes on the top is just to set the buttons in the center. 23 00:01:39,880 --> 00:01:46,520 These codes are setting the icon color or setting shadows on the icons but I just copy these from the 24 00:01:46,520 --> 00:01:51,390 J Cary mobile site so you don't have to remember all these codes. 25 00:01:51,400 --> 00:01:55,260 The important part that I want you to know is where we set that on. 26 00:01:55,270 --> 00:02:02,740 Click with with the send command function to send the command to either fly up or fly counterclockwise 27 00:02:03,500 --> 00:02:05,780 etc to the back end side. 28 00:02:07,870 --> 00:02:14,660 Unless you want to create the controller by yourself you may want to copy and paste from my source code. 29 00:02:14,680 --> 00:02:20,230 Next we will go on and copy paste another one which will be the slider. 30 00:02:20,230 --> 00:02:23,680 This slider will control the speed of the drone. 31 00:02:23,830 --> 00:02:29,050 The minimum speed will be zero and the maximum speed will be 100. 32 00:02:29,050 --> 00:02:32,140 The default will be set to 10 again. 33 00:02:32,260 --> 00:02:39,330 Let's run this code to see how it looks like click the link and hit controller in the bottom of the 34 00:02:39,330 --> 00:02:45,790 screen you will see the slider where you can slide to control the drone speed let's go on and add some 35 00:02:45,790 --> 00:02:47,160 more comments. 36 00:02:47,290 --> 00:02:50,080 The next one will be flip. 37 00:02:50,080 --> 00:02:51,360 I'll paste the code again. 38 00:02:52,190 --> 00:02:56,460 Again we'll run this code and see how it works for the flip. 39 00:02:56,480 --> 00:02:59,750 I set buttons to make the drone flip forward. 40 00:02:59,750 --> 00:03:02,960 Left right and back. 41 00:03:02,960 --> 00:03:10,170 These buttons are the same as how we set the takeoff and land buttons now scroll all the way to the 42 00:03:10,170 --> 00:03:11,210 top. 43 00:03:11,250 --> 00:03:16,500 We will be setting the javascript to catch events when the speed has been changed. 44 00:03:16,530 --> 00:03:26,430 We want to start the event process once the site is open so we set documents dot oh and page in it and 45 00:03:26,430 --> 00:03:27,360 create a function 46 00:03:30,740 --> 00:03:38,950 in this function we set the event when the slider Speed is set to on and the slide stops event will 47 00:03:38,960 --> 00:03:51,360 be set to the function then we set let parameters set with speed and the slider speed value. 48 00:03:51,370 --> 00:03:55,240 Lastly we send command with speed and the parameter. 49 00:03:55,240 --> 00:03:59,250 Now let's run the script and see how the commands will be sent. 50 00:03:59,520 --> 00:04:05,020 Oh before we run the script you will see that I ended the code with the semicolon. 51 00:04:05,090 --> 00:04:08,960 Generally it's said to be best to end the code with a semicolon. 52 00:04:08,960 --> 00:04:10,340 I may have skipped some. 53 00:04:10,490 --> 00:04:13,560 You can check on the javascript syntax to better your codes. 54 00:04:15,050 --> 00:04:19,090 OK now let's run this code and check how the controller works. 55 00:04:19,430 --> 00:04:22,640 Click the You Are and hit controller. 56 00:04:22,640 --> 00:04:28,800 Once you slide the slider and change the speed you will see the log in your console. 57 00:04:28,850 --> 00:04:31,580 Now go to the server P Y file. 58 00:04:31,650 --> 00:04:38,440 We will set at if statement in the commands if the command was speed re request form. 59 00:04:38,440 --> 00:04:43,600 Get speed copy and paste the logger and add speed to speed 60 00:04:46,860 --> 00:04:55,850 let's run the code again go back to the top page it hit controller change the speed in the log you will 61 00:04:55,850 --> 00:04:59,950 see the number 27 which is the speed level we change too. 62 00:05:01,070 --> 00:05:07,250 If I change the speed to 46 the back end will receive speed level forty six as well. 63 00:05:07,550 --> 00:05:10,710 Now we've built in all the commands in this controller. 64 00:05:10,820 --> 00:05:17,570 We will be adding the video streaming image also but we'll do that a bit later as we finished the commands. 65 00:05:17,570 --> 00:05:21,920 We need to set the drone to move based on the commands sent from the controller.