We can now move to the last part: setting up the interface that will allow a secret agent to command the robot and also to see the live stream from the camera. This interface will be composed of an HTML page and a JavaScript file. It will be based on the aREST.js module that makes it easy to control aREST devices from a web page.
This is the complete HTML page:
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>Surveillance Robot</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="interface.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="interface.js"></script>
</head>
<body>
<div class='container'>
<h1>Surveillance Robot</h1>
<div class='row'>
<div class="col-md-2"></div>
<div class="col-md-2">
<button id='fw' class='btn btn-primary btn-block' type="button">Forward</button>
</div>
</div>
<div class='row'>
<div class="col-md-2">
<button id='left' class='btn btn-primary btn-block' type="button">Left</button>
</div>
<div class="col-md-2">
<button id='stop' class='btn btn-danger btn-block' type="button">Stop</button>
</div>
<div class="col-md-2">
<button id='right' class='btn btn-primary btn-block' type="button">Right</button>
</div>
</div>
<div class='row'>
<div class="col-md-2"></div>
<div class="col-md-2">
<button id='bw' class='btn btn-primary btn-block' type="button">Backward</button>
</div>
</div>
<div class='row'>
<img src="http://arduinoyun.local:8080/?action=stream" />
</div>
</div>
</body>
</html>The most important parts on this page are the buttons to control the robot and the live stream of the camera. For example, this defines the button to move the robot forward:
<div class="col-md-2">
<button id='fw' class='btn btn-primary btn-block' type="button">Forward</button>
</div>This <img> tag allows you to insert the live stream of the camera into the page:
<img src="http://arduinoyun.local:8080/?action=stream" />
Now let's look at the JavaScript file that will actually send the command to the robot. This is the complete file:
$( document ).ready(function() {
// Device
var address = '192.168.1.105';
var device = new Device(address);
// Button
$('#fw').click(function() {
device.callFunction('forward', ''),
});
$('#bw').click(function() {
device.callFunction('backward', ''),
});
$('#left').click(function() {
device.callFunction('left', ''),
});
$('#right').click(function() {
device.callFunction('right', ''),
});
$('#stop').click(function() {
device.callFunction('stop', ''),
});
});You only have to change one thing in this script: the IP address of your board, which you obtained previously:
var address = '192.168.1.105'; var device = new Device(address);
The different lines of code on the page each control a function of the robot. For example, this piece of code creates the link between the forward button and the forward function on the robot:
$('#fw').click(function() {
device.callFunction('forward', ''),
});