Now, it’s great to be able to command our robot remotely, but it is not ideal: we still need to type in commands in a browser. This is why we are going to build an interface based on the powerful Node.js framework. We are going to see some insights about this interface, but of course you can just skip this whole part and go straight at the end where we use the robot interface.
For the interface, you will need to have Node.js installed on your computer. You can find all the installation instructions on the official Node website.
We first start with the main app.js file, which we will execute later. It starts by declaring that we are using the express module of Node.js:
var express = require('express');
var app = express();
We also define the port on which we will access our interface:
var port = 3000;
We also have to declare some things concerning the express application:
// View engine
app.set('view engine', 'jade');
// Set public folder
app.use(express.static(__dirname + '/public'));
What’s important now is to define the main route of the application, which is where the application will redirect us when we access it in the browser. Here, we will simply render the interface that we will define later:
// Serve interface
app.get('/', function(req, res){
res.render('interface');
});
After that, we import the aREST node module, that will handle all the communication with our robot. We also add a device at the address of our robot:
var rest = require("arest")(app);
rest.addDevice('http','192.168.1.103');
Finally, we start the app and print a message in the console:
app.listen(port);
console.log("Listening on port " + port);
Let’s now see the interface file, that is located in the application /views subfolder. This is a file written in the Jade format, which is basically a way to simplify HTML. You don’t need to know all the details, just that we define one button per function of the robot, and also a field to print out the distance measured by the front sensor:
doctype
html
head
title Robot Control
link(rel='stylesheet', href='/css/interface.css')
link(rel='stylesheet', href='/css/flat-ui.css')
script(src="/js/jquery-2.1.1.min.js")
script(src="/js/interface.js")
body
.mainContainer
.title Robot Control
.buttonBlock
button.btn.btn-block.btn-lg.btn-primary#1 Forward
.buttonBlock
button.btn.btn-block.btn-lg.btn-primary#2 Left
button.btn.btn-block.btn-lg.btn-primary#3 Right
.buttonBlock
button.btn.btn-block.btn-lg.btn-primary#4 Backward
.buttonBlock
button.btn.btn-block.btn-lg.btn-danger#5 Stop
.buttonBlock
div.display#distance Distance:
.buttonBlock
div.status#wifiStatus Offline
Finally, we define a Javascript file to handle the interface, located in the /public/js folder of the application. For each button, we define an event in case the user click on it. For example, the first button is called forward, so we naturally route it to the forward function on the robot:
$("#1").click(function() {
$.get('/robot/forward');
});
Finally, we refresh the status of the distance sensor & the connection indicator every second using this piece of code:
setInterval(function() {
$.get('/robot/distance', function( json_data ) {
if (json_data.distance){
$("#distance").html("Distance: " + json_data.distance);
}
if (json_data.connected == 1){
$("#wifiStatus").html("Online");
$("#wifiStatus").css("color","green");
}
else {
$("#wifiStatus").html("Offline");
$("#wifiStatus").css("color","red");
}
})
.fail(function() {
$("#wifiStatus").html("Offline");
$("#wifiStatus").css("color","red");
});
}, 1000);
Note that all the code for this part can be found in the GitHub repository of the project:
https://github.com/openhardwaredrones/wifi-mobile-robot
It’s now time to test our application. Go the interface folder of the code you downloaded, and type:
sudo npm install express arest jade
This will install the required modules for the application. You can now type:
node app.js
This will start the application, and you should get the confirmation message in the console. You will also see that the robot is added as a new device inside the application. You can now go to your favorite browser and go to:
http://locahost:3000/
You should see the interface being displayed inside the web browser:
You should see that the robot is immediately going online, and you should also see the measurement coming from the front sensor. Now, go ahead and press the buttons: you should see that the robot is reacting accordingly.
