In this lesson we will be adding some more command buttons onto our controller.
I think you have an idea on how to add buttons from our previous lesson so I won't be typing out the
codes one by one but will copy and paste the code.
This code can also be downloaded from the package I prepared.
So don't worry and watch along this video.
Here I've copy and paste the codes.
Let's run this process and see what we've created click the link and hit the controller button.
This is how the buttons look like this is up and down rotate clockwise and counterclockwise.
These arrows will move the draw forward backwards.
Left and Right.
Since we needed to set arrow shaped icons as buttons the code became longer so I chose to copy and paste
the codes.
Let's see how the buttons work.
I'll click on up in the console you will see the logs showing the command up has been received.
This will be the same for down clockwise counterclockwise.
Forward backwards.
Left and Right.
Here you see all the commands received in the back end.
Now let's check on the HDMI mail code.
Here we are using table and dividing the screen to left and right.
The part written under the T.D. tag is shown on the left side.
The next T.D. tag will be the right side the codes on the top is just to set the buttons in the center.
These codes are setting the icon color or setting shadows on the icons but I just copy these from the
J Cary mobile site so you don't have to remember all these codes.
The important part that I want you to know is where we set that on.
Click with with the send command function to send the command to either fly up or fly counterclockwise
etc to the back end side.
Unless you want to create the controller by yourself you may want to copy and paste from my source code.
Next we will go on and copy paste another one which will be the slider.
This slider will control the speed of the drone.
The minimum speed will be zero and the maximum speed will be 100.
The default will be set to 10 again.
Let's run this code to see how it looks like click the link and hit controller in the bottom of the
screen you will see the slider where you can slide to control the drone speed let's go on and add some
more comments.
The next one will be flip.
I'll paste the code again.
Again we'll run this code and see how it works for the flip.
I set buttons to make the drone flip forward.
Left right and back.
These buttons are the same as how we set the takeoff and land buttons now scroll all the way to the
top.
We will be setting the javascript to catch events when the speed has been changed.
We want to start the event process once the site is open so we set documents dot oh and page in it and
create a function
in this function we set the event when the slider Speed is set to on and the slide stops event will
be set to the function then we set let parameters set with speed and the slider speed value.
Lastly we send command with speed and the parameter.
Now let's run the script and see how the commands will be sent.
Oh before we run the script you will see that I ended the code with the semicolon.
Generally it's said to be best to end the code with a semicolon.
I may have skipped some.
You can check on the javascript syntax to better your codes.
OK now let's run this code and check how the controller works.
Click the You Are and hit controller.
Once you slide the slider and change the speed you will see the log in your console.
Now go to the server P Y file.
We will set at if statement in the commands if the command was speed re request form.
Get speed copy and paste the logger and add speed to speed
let's run the code again go back to the top page it hit controller change the speed in the log you will
see the number 27 which is the speed level we change too.
If I change the speed to 46 the back end will receive speed level forty six as well.
Now we've built in all the commands in this controller.
We will be adding the video streaming image also but we'll do that a bit later as we finished the commands.
We need to set the drone to move based on the commands sent from the controller.