Building the web interface

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:

Download: file
var express = require('express');
var app = express();

We also define the port on which we will access our interface:

Download: file
var port = 3000;

We also have to declare some things concerning the express application:

Download: file
// 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:

Download: file
// 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:

Download: file
var rest = require("arest")(app);
 
rest.addDevice('http','192.168.1.103');

Finally, we start the app and print a message in the console:

Download: file
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:

Download: file
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:

Download: file
$("#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:

Download: file
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.

This guide was first published on Nov 19, 2013. It was last updated on Nov 19, 2013. This page (Building the web interface) was last updated on Sep 21, 2019.