Building the Interface

We are now going to build the interface that you will use to control the project from your computer. Using this interface, you will be able to control the switch via WiFi just by pressing buttons.

The interface we are going to develop is based on Node.js that will basically run a web server on your computer. You don't need to have any experience with Node.js to make this project work: the code walkthrough that you will find in this section is only there to make you understand how the different pieces of the interface works together.

First, we are going to code the main file called app.js, which we will run later using the node command in a terminal. It starts by importing the required modules:

Download: file
var express = require('express');
var path = require('path');
var arest = require('arest');

Then, we create our app based on the express framework, and the set the port to 3700:

Download: file
var app = express();
var port = 3700;
We also need to tell our software where to look for the graphical interface that we are going to code later, and also where to find the code for the interface:
Download: file
app.use(express.static(path.join(__dirname, 'public')));
app.use(express.static(path.join(__dirname, 'views')));
Now, we are going to build the different routes of our server. The first one concerns the interface itself, and this is the URL we are going to use when we want to access the graphical interface of the project. We define this route by linking the /interface URL to the corresponding HTML file:
Download: file
app.get('/interface', function(req, res){
  res.sendfile('views/interface.html')
});
We also define the URL that we will use to send commands to our Arduino project. To do so, we link the /send URL to the corresponding function in the aREST Node.js module:
Download: file
app.get("/send", function(req, res){
  arest.send(req,res);
});
Finally, still in this app.js file, we start the app with the port we defined before, and write a message in the console:
Download: file
app.listen(port);
console.log("Listening on port " + port);

This was for the main server file. Now, we are going to build the interface itself. Let’s see the content of the HTML file first. This file is located in the /view folder of our project.

The file starts by importing the different JavaScript files that will handle the click on the interface, and send the correct commands to the Arduino board:

Download: file
<script type="text/javascript" src="/js/jquery-2.0.3.min.js"></script>
<script type="text/javascript" src="/js/interface.js"></script>
<script type="text/javascript" src="/js/arest.js"></script>

We also include some css files to give a better look at our interface:

Download: file
<LINK href="/css/interface.css" rel="stylesheet" type="text/css" />
<LINK href="/css/flat-ui.css" rel="stylesheet" type="text/css" />
Then, we need to create two buttons: one to turn the relay on, and another one to switch it off again. This is the code for the “On” button:
Download: file
<button class="btn btn-block btn-lg btn-primary" 
type="button" id="1" onClick="buttonClick(this.id)">On</button>

You can see that a click on this button is calling another function. We will define this function in the JavaScript file of this project that we will see in a moment.

Finally, we also need to create a text field to display an indicator to check that the project is online:

Download: file
<div class="status" id="status">Offline</div>
Now, we are going to see the contents of the interface.js file, located in the /js folder of the project. We first need to define the type of communication between the Node.js server and the Arduino board (here, wifi) and the address of the board.

If you used the code from the GitHub repository of this project, you can leave that
untouched. If you are using another name or using the IP address of the board, you need to change the address of the board here:
Download: file
type = 'wifi';
address = 'arduino.local';

Then, we will define this function called buttonClick that is triggered whenever a button is clicked in the interface. Depending on which button is clicked (identified by the id of the button), we send a different command to the Arduino board. This is the complete code for this function:

Download: file
function buttonClick(clicked_id){
  
  if (clicked_id == "1"){
    send(type, address, "/digital/8/1");
  } 

  if (clicked_id == "2"){
    send(type, address, "/digital/8/0");  
  } 
}

Then, we will define this function called buttonClick that is triggered whenever a button is clicked in the interface. Depending on which button is clicked (identified by the id of the button), we send a different command to the Arduino board. This is the complete code for this function:

Download: file
setInterval(function() {

To get the status of the board, we use the same function as before, by sending the /id command. However this time, we store the data in a variable:

Download: file
json_data = send(type, address, '/id');

This JSON data contains some information of the status of the board. If the “connected” field is present, we set the status indicator to online, and set the color to green. If the data is not present or corrupted, we set it to offline and apply a red color to this indicator:

Download: file
if (json_data.connected == 1){
  $("#status").html("Device Online");
  $("#status").css("color","green");    
}
else {
  $("#status").html("Device Offline");
  $("#status").css("color","red");     
}
Finally, we repeat this action every 5 seconds:
Download: file
}, 5000);

Note that you can find all the code for this part inside the GitHub repository of the project:

https://github.com/marcoschwartz/arduino-wifi-powerswitch

It’s now time to test the interface. Make sure that you download all the files from the GitHub repository, and update the code with your own data if necessary, like the Arduino board address. Also, make sure that the Arduino board is programmed with the code we saw earlier in this guide.

Then, go to the folder of the interface with a terminal, and type the following command to install the aREST module:

sudo npm install arest

And also type the following command to install the express module:

sudo npm install express

Finally, you can start the Node.js server by typing:

node app.js

You should be greeted with the following message in the terminal:

Listening on port 3700

You can now go to the your web browser, and type:

localhost:3700/interface

You should see the interface being displayed inside your browser, with the buttons to control the switch. Don’t worry, when your first open the interface the project should appear as offline and the indicator should not display any data. After 5 seconds, the interface will make a query to the Arduino board and update the data accordingly:

You can now also test the different buttons of the interface. By default, the switch is turned off, so click on the “On” button to turn it on instantly. You should also hear the “click” coming from the relay.

This guide was first published on Sep 08, 2014. It was last updated on Sep 08, 2014. This page (Building the Interface) was last updated on Sep 17, 2019.