We now have a robot that can accept commands via WiFi, but we definitely don't want to have to type any of commands inside a web browser: it would be way to slow to control a robot! That's why we are now going to create a nice graphical interface to control the robot.
This interface will be based on aREST.js, a JavaScript library which is very convenient to control aREST-based projects. It will be automatically imported by the interface we are going to create in a moment, so you don't need to worry about it. If you want to learn more about aREST.js, you can visit the GitHub repository of the library:
https://github.com/marcoschwartz/aREST.js
Let's first have a look at the HTML file of the interface. Inside thetag, we import all the required files for the interface:
<head>
<meta charset=utf-8 />
<title>aREST.js Demo</title>
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="style.css">
<script type="text/javascript" src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
<script type="text/javascript" src="https://cdn.rawgit.com/Foliotek/AjaxQ/master/ajaxq.js"></script>
<script type="text/javascript" src="https://cdn.rawgit.com/marcoschwartz/aREST.js/master/aREST.js"></script>
<script type="text/javascript" src="script.js"></script>
</head>
Now, inside the same file, we define a button for each of the commands of the robot, for example to make the robot go forward:
<div class='row'>
<div class="col-md-5"></div>
<div class="col-md-2">
<button id='forward' class='btn btn-primary btn-block' type="button">Forward</button>
</div>
<div class="col-md-5"></div>
</div>
We still need to link the buttons inside the interface to the actual commands of the robot. This will be done in a file called script.js, which will make the link between the graphical interface & the robot.
The file starts by defining the IP address of the robot, and by creating an instance of an aREST device:
var address = "192.168.0.104"; var device = new Device(address);
Then, for each of the buttons of the interface, we call the corresponding function on the robot. Also, as we want the buttons to behave like push buttons (meaning whenever the button is released, the robot stops), we also need to call the stop function when the button is released:
$('#forward').mousedown(function() {
device.callFunction("forward");
});
$('#forward').mouseup(function() {
device.callFunction("stop");
});
It's now time to finally test our interface and make our robot move around! For that, make sure to edit the script.js file inside the interface folder, and put the actual IP address of your ESP8266 WiFi chip. If that's not done yet, also disconnect the ESP8266 feather board from USB, and power the ESP8266 using the 3.7V LiPo battery.
Then, open the interface with your favorite web browser. This is what you should see:
As you can see, there is a button for each function of the robot. You can now try it: whenever you press a button (and keep it pressed), your robot should move immediately!
This is an example of my own mobile robot moving around while I was using the interface:
Congratulations, you built your own mobile robot based on the ESP8266 and controlled it via WiFi! Note that you also control the robot using a mobile device, like a smartphone or tablet, using the exact same interface.
Text editor powered by tinymce.
